アクセシビリティを保ちながらiOSで使用するアイコンデザインを変更する #Swift

アプリのデザインはガイドラインがしっかりと作られてますが、痒いところに手が届かず、デザインの細かい調整が難しいことがあります。

プロダクトらしいデザインを実現するためには、独自カラーや独自アイコンの作成がありますが、それではアクセシビリティを犠牲にしてしまう場合があります。
今回はガイドラインを守りつつアクセシビリティを保ちながらアイコンデザインを変更する方法を書きます。

わたしはデザイナーなので、たぶん言葉のニュアンスが違う部分が多々あります。（いつもエンジニアと会話する時にはいい感じに汲み取ってもらえていて感謝です）

1. iOSのシステムアイコンに必要なアクセシビリティ

iOSではデフォルトの文字サイズと文字の太さを自由に変更できる機能があります。
Settings -> Display&Brightness -> Text Size
Settings -> Display&Brightness -> Bold Text

ここで変更された値はText Styleなどを利用している場合に適用され、文字の大きさやアイコンの大きさが変わります。

通常

文字サイズを最大化した場合

文字サイズを最小化 + 太さの変更をした場合

iOSのシステムアイコンには太さと大きさ、二つの要素が必要だということがわかります。
iOSで使用されているアイコンライブラリであるSF Symbolsで確認するとSFフォントの種類と太さによってネガティブスペースと見た目が変わっていることが理解できると思います。
SF Symbols - Human Interface Guidelines
SF Symbols

ではこのシステムアイコンを独自のアイコンに変更した場合はどうなるのか。
SVG、pngを利用した実装になるため、大きさは多少変更できても太さのアクセシビリティを保つことは困難です。

2. アイコンの編集

例えばMaterial Design Iconsを利用する場合、デベロッパーガイドラインに記載のある通り、Xcode imagesetsに適したパッケージ化がされており、1,2,3倍の画像がそれぞれ用意されています。
Google Fontsからダウンロードして利用することが可能です。
Material Design Icons - Developer Guidelines
Material Design Icons

では、独自アイコンではどうするか。
Appleの提供するシステムアイコンにはチェックマークにスラッシュが付いているものがないため、今回はチェックマークにスラッシュをつけるアイコンを作成します。

用意するもの

SF Symbols内の似ているアイコン
SF Symbols内のスラッシュがついているアイコン
SVGファイルをGUIで編集できるツール（FigmaとかXDとかIllustratorとか）
SVGファイルをCUIで編集できるツール（VS Codeとかのテキストエディタ）

方法

1. 下記手順で似ているアイコンをSVGファイルでエクスポートする

SF Symbols -> File -> Export Custom Symbol Template

2. エクスポートしたSVGファイルをGUIで編集できるツールで開く

今回はIllustratorを使いました。
下記のようなデータが展開されます。

Weight/Scale VariationsがRegular/Mediumを中心に広くサイズ展開されていることがわかります。
このサイズ展開が最初に話したアクセシビリティ操作への対応力を示しています。
骨の折れる作業ですが、このアイコンを一つ一つ編集していきます。

3. レイヤー構造の確認

編集が必要なのはSymbolsというレイヤーです。
展開すると以下のようになり、サイズごとにグループ化されていることがわかります。

4. アイコンの編集

基本的にベクターデータをいじる時と同じことをします。
今回はスラッシュをいれるので、違うアイコンのデータからスラッシュだけコピーしてペーストする方法を取りました。

編集したい大きさのアイコンと同じ大きさの、スラッシュのあるアイコンのスラッシュだけを選択して⌘C

編集したいアイコンのファイルに⌘Fで貼り付け（同じ場所に貼り付けられます）

スラッシュの周りにホワイトスペースがあるので、パスのオフセットを利用して一回り大きいスラッシュを作成

一回り大きくしたスラッシュとチェックマークを選択してパスファインダーで切り抜く

5. レイヤー構造の再確認

外部ファイルから持ってきたパスと内部ファイルのパスを合体させたので、レイヤー構造に少し変更がありました。

6. レイヤー構造の調整

Symbolsのレイヤーから外れてしまったものを再度戻します。
Groupと名前が付いているものを⌘+Shift+Gでグループ解除

パスを三つまとめて選択して、⌘8で複合パスを作成します。

複合パスは、テキストで見た時にパスが1つしか存在しなくなるため、綺麗なSVGファイルとして保てるようになります。

7. 編集していないアイコンのレイヤー構造にならって、グループ化と名前づけを行う

アイコンを元のレイヤーの位置に戻す

⌘Gでグループ化

名前を変更

8. 4〜7を繰り返す

全部できるとこんな感じになります。

9. SVGとして書き出す

IllustratorはSVGとして書き出す方法が2つあります。

File -> Export -> Export for Screen
File -> Export -> Export As...

Export for Screenは圧縮された状態で書き出し、Export As...は圧縮されていない状態で書き出されます。
今回はCUIでのテキスト編集が必要になるため、圧縮されないExport As...から書き出します。
オプションは何も変更しなくて大丈夫です。

10. SVGをCUIで編集する

書き出したSVGと編集元のSVGを並べて編集します。

<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 149-->
...
<g id="Guides">
...
</g>

上記の範囲を編集元からコピーして、編集先にペーストします。

<g id="Symbols">
...
  <g id="Regular-M">
    <path d="M1463.1,1085l20.2-32.1c1.2-1.9,2.2-2.5,4.2-2.5c2.7,0,4.4,1.8,4.4,4.4c0,1.1-0.3,2.2-1.2,3.6l-21,33.1L1463.1,1085zM1452.5,1102l-13,20.8l-22.8-29.8c-1.2-1.7-2.4-2.4-4.2-2.4c-2.8,0-4.7,1.9-4.7,4.6c0,1.1,0.5,2.4,1.4,3.6l25.3,32.3c1.5,1.9,3,2.8,5.1,2.8s3.8-0.9,4.9-2.7l14.4-22.7L1452.5,1102z M1420.1,1061.2c-1.5-1.4-1.5-3.9,0-5.3c1.4-1.5,3.9-1.5,5.4,0l61.4,61.4c1.5,1.5,1.4,3.8,0,5.3c-1.4,1.5-3.9,1.5-5.3,0L1420.1,1061.2z"/>
  </g>
...
</g>

シンボル部分はそれぞれのグループ名に無駄な文字が挿入されていないか確認し、無駄なスペースを消して保存。

3. Xcodeに追加

Assets.xcassetsに追加します
うまく読み込めない場合、グループ名が異なっていたりレイアウトが異なっている可能性があるため、SVGの構造をテキストで確認し、元データと照らし合わせて違いを修正してください。

4. 補足

同じようなアイコンを編集したのは、Appleのシステムアイコンは左右マージンがそれぞれ異なるため、左右マージンをなるべく合わせるためです。
左右マージンはGuideというグループで指定されており、位置をずらして変更しても良いですが、そうするとテキストで編集する際にコピぺできなくなってしまうので、近いアイコンを編集した方が良いと思います。
左右マージンが合わないと、単体で見た時には綺麗ですが、他のアイコンと並べた時に違和感が出てしまうため非常に重要な部分になります。

5. 参考

Creating Custom Symbol Images for Your App

アクセシビリティを保ちながらiOSで使用するアイコンデザインを変更する

目次