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

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

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

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

## 目次
1. iOSのアイコンに必要なアクセシビリティ
1. アイコンの編集
1. Xcodeに追加
1. 補足
1. 参考

## 1. iOSのシステムアイコンに必要なアクセシビリティ
iOSではデフォルトの文字サイズと文字の太さを自由に変更できる機能があります。
Settings -> Display&Brightness -> Text Size
Settings -> Display&Brightness -> Bold Text
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/555a3b3e-9f13-0443-6781-155af2c0e1b3.jpeg" width="320px">

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

**通常**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/493371f9-1c19-188a-e89f-705611c7734b.png" width="320px" border="1">


**文字サイズを最大化した場合**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/e9567b79-1c0b-8aca-496d-ebf0cc7b1dfa.jpeg" width="320px" border="1">

**文字サイズを最小化 + 太さの変更をした場合**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/41839498-b51e-ad58-fe76-d0ba4179b76c.jpeg" width="320px" border="1">

iOSのシステムアイコンには太さと大きさ、二つの要素が必要だということがわかります。
iOSで使用されているアイコンライブラリであるSF Symbolsで確認するとSFフォントの種類と太さによってネガティブスペースと見た目が変わっていることが理解できると思います。
[SF Symbols - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/)
[SF Symbols](https://developer.apple.com/sf-symbols/)

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

## 2. アイコンの編集

例えばMaterial Design Iconsを利用する場合、デベロッパーガイドラインに記載のある通り、Xcode imagesetsに適したパッケージ化がされており、1,2,3倍の画像がそれぞれ用意されています。
Google Fontsからダウンロードして利用することが可能です。
[Material Design Icons - Developer Guidelines](https://developers.google.com/fonts/docs/material_icons#icons_for_ios)
[Material Design Icons](https://fonts.google.com/icons?selected=Material+Icons)


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

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

### 方法

#### 1. 下記手順で似ているアイコンをSVGファイルでエクスポートする
[SF Symbols](https://developer.apple.com/sf-symbols/) -> File -> Export Custom Symbol Template
![Screen Shot 2021-05-21 at 23.55.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/7597f3ce-bcf7-d6ed-8a9e-ab2382ffc30c.png)


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

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

![Screen Shot 2021-05-21 at 23.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/857dbb10-1f88-057d-d41f-9c5e303586f2.png)

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

#### 3. レイヤー構造の確認
![Screen Shot 2021-05-22 at 0.02.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/40838fa1-32bd-fdd9-1428-9b6ba180f5eb.png)

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

![Screen Shot 2021-05-22 at 0.03.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/ef99ddb6-8dc0-2fa0-fbf1-64ba5d5b7ede.png)

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

編集したい大きさのアイコンと同じ大きさの、スラッシュのあるアイコンのスラッシュだけを選択して⌘C
![Screen Shot 2021-05-22 at 0.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/c651f5a0-c584-5824-a92e-fe2ea867faa4.png)

編集したいアイコンのファイルに⌘Fで貼り付け（同じ場所に貼り付けられます）
![Screen Shot 2021-05-22 at 0.23.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/997ef0fb-3ee3-b1b5-1a9f-9e6c12771254.png)

スラッシュの周りにホワイトスペースがあるので、パスのオフセットを利用して一回り大きいスラッシュを作成
![Screen Shot 2021-05-22 at 1.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/872edce2-16ef-9f6e-0724-98cfd7afa2bf.png)

一回り大きくしたスラッシュとチェックマークを選択してパスファインダーで切り抜く
![Screen Shot 2021-05-22 at 1.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/6273f4d7-7362-f91c-e72a-37f9c16804a3.png)

![Screen Shot 2021-05-22 at 1.30.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/7e299f2e-3878-cd4b-5c58-0ff2a01e2048.png)

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

![Screen Shot 2021-05-22 at 1.35.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/66e83b78-e2f6-0d51-fea0-9654732e1b17.png)

#### 6. レイヤー構造の調整
Symbolsのレイヤーから外れてしまったものを再度戻します。
Groupと名前が付いているものを⌘+Shift+Gでグループ解除
![Screen Shot 2021-05-22 at 1.41.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/9b1fc52d-d900-1082-ab56-2db28a0cd5a3.png)

パスを三つまとめて選択して、⌘8で複合パスを作成します。
![Screen Shot 2021-05-22 at 1.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/3833312d-655d-9a3b-7dbe-06fae8d63d73.png)
![Screen Shot 2021-05-22 at 1.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/c8ace17b-8ff7-6c2b-1695-81c853d8c6df.png)

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

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

アイコンを元のレイヤーの位置に戻す
![Screen Shot 2021-05-22 at 1.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/f8cd302a-c6f2-733d-bf0b-7bd3b5893a95.png)

⌘Gでグループ化
![Screen Shot 2021-05-22 at 1.55.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/78c5a975-fe03-a5f3-c550-bd48c8ea56ad.png)

名前を変更
![Screen Shot 2021-05-22 at 1.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/1a0ed045-f7ad-69ea-447e-3b653ab5162d.png)

#### 8. 4〜7を繰り返す
全部できるとこんな感じになります。
![Screen Shot 2021-05-22 at 1.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/7a49e0b3-7461-c1a3-80e8-b2b68411b656.png)

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

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


Export for Screenは圧縮された状態で書き出し、Export As...は圧縮されていない状態で書き出されます。
今回はCUIでのテキスト編集が必要になるため、圧縮されないExport As...から書き出します。
オプションは何も変更しなくて大丈夫です。
![Screen Shot 2021-05-22 at 2.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/f01472b6-d7c4-45ff-4072-2aad17bf29c5.png)

#### 10. SVGをCUIで編集する
書き出したSVGと編集元のSVGを並べて編集します。
![Screen Shot 2021-05-22 at 2.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/500709/2abe19e3-76d1-6930-3995-d972f789c6c9.png)

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

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

```xml
<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
](https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app)