この記事はNikkei Advent Calendar 2022の 7 日目の記事です。今日から 3 日連続 iOS 特集です！

はじめに

日経電子版アプリチームでインターンをしている尾崎 (@MasakazOzaki) です。

　 Apple が提供する SF Symbols には 4000 を超えるアプリ内で使用できるシンボルが用意されています。SF の名前を冠していることもあって他の SF フォントと同じように様々な大きさや太さにも対応している他、パーセント値をパラメータとして渡すことによって色を動的に変更する Variable Color や、カスタムシンボルで注釈などを簡単にインテグレートできる Unified annotation が新たに SF Symbols 4 から追加されています。

しかしながら 4000 を超える SF Symbols の中でも使いたいシンボルがない事案も度々発生します。

Apple は既存のシンボルをカスタマイズしてオリジナルのシンボルを制作することを許可しているため ( Creating custom symbol images for your app ) 、日経紙面ビューアー iOS アプリでは幾つかのカスタムシンボルを制作しアプリ内で運用しています。

もちろん SF Symbols の Custom symbols とするならば可能な限り Apple のデザインエッセンスや意図を汲み取り、他のシンボルとの親和性を高める必要があります。

本稿では SF Symbols を調査していて自分が気付いた Apple のデザインに宿る「神」を探ってみます。

God is in the details 神は細部に宿る

　- Mies Van Der Rohe ミース・ファン・デル・ローエ

SF Symbols のパスを見る

本稿では hand.point.up.left 、 arrow.up といったプリミティブなシンボルにを介して Apple が宿した神を探ってみます。

hand.point.up.left を探る

まず、 SF Symbols App から hand.point.up.left の SF Symbols を Export します。

S, M, L の 3 つの大きさ、 9 つの Weight で計 27 種類のシンボルが生成されます。

Regular-M を探る

　まずは一番標準的である Regular-M のシンボルを探ります。 一見、単純な線画に見えますが、実はこれは 2 つのパスの差分の塗りつぶしで実現されています。 外側のパス、内側のパスの差分を取ることで場所によって異なる線の太さを表現する、角丸の半径を自由に指定するなど自由度の高い描画が可能です。

　赤い矢印に注目してみると、親指の付け根などの線が密集するところは線を細くする表現することで視認性を上げています。 iPhone のような小さな画面に小さく表示されることを想定していることがうかがえます。

　また、並行に見える線も意図的にずらしているような跡があります。人差し指と中指の間の付け根では指の線より付け根が細く、薬指と小指の間の付け根では逆に付け根が太く描かれています。

　そして細かいところではありますが、他の二つは並行なのに対し、中指と薬指の付け根は少し角度がついています。 水色の破線で囲ってある部分を拡大しています。ほんの僅かですが、角度がついているのがわかります。

拡大	全体

パス全体に渡って、Continuous Corner Curveが設定されています。

さらに、親指の先端のカーブは他の指の先端よりもあえて頂点のアンカーポイントを右に配置することで左に膨らんでいるような、指が伸びていくような印象を与える工夫がされています。

人差し指の先端	親指の先端

Black-Sを探る

小さいサイズで且つ一番線が太い Black で視認性を保つのは至難の業です。 ここで内側と外側のパスの差分を取る SF Symbols の特徴が活きていることがわかります。

Regular-M よりも場所によって線の太さにかなり顕著に差がついています。全体的な線幅を太くしながらも、シンボルとしての視認性を確保する工夫を見て取れます。

arrow.up を探る

次に arrow.up を探ります。単純な矢印のシンボルからも神を感じ取れます。 先ほどと同じように SF Symbols App からシンボルテンプレートを書き出します。 arrow.up では一番デザインの制約が多いと感じた Black-S の arrow.up を詳しく見ていきます。

Black-Sを探る

拡大	拡大(アンカーポイント表示)

さらに拡大して見てみます。一般的な矢印と比べて line と chevron の接合部の太さが細くなっているのがわかります。

arrow.up より矢印部分が小さく表示される square.and.arrow.up ではさらに顕著にこの処理がされています。

拡大	拡大(アンカーポイント表示)

SF Symbols は iPhone の小さな画面に小さく表示される場合が多いため、視認性の向上は最も重要な要素の一つです。 接合部を細くしないものと Apple のものを比較します。今回比較するシンボルはこのようになっています。

それでは小さく表示してみます。

わずかな差ではありますが、 Apple のものの方が接合部のつぶれが少なく、視認性が高いです。

1 つのベクター画像から Custom Symbols を自動生成してくれるツールも存在しますが、モバイル端末のような小さい画面においても視認性の高いシンボルを実現するためには、小さいサイズでもパスが潰れて見えないように対応する必要があります。

Custom Symbols を制作し、運用する

標準シンボルの特徴を調査した上で、新たに二本指の手を表す Custom Symbols を制作しました。

hand.point.up.left	hand.point.up.left.2(新たに制作)

このシンボルは紙面ビューアーアプリ内で保存記事の一覧ページを二本指でドラッグすることで一括選択できる機能を説明したチュートリアルのアイコンとして実装しました。

機能自体は iOS の標準アプリでも対応しているものがありますが、あまり知られていないジェスチャーであるため、チュートリアルを用意しています。

本チュートリアルアニメーション View は SwiftUI の withAnimation(_:) {} を用いて実現しています。 SwiftUI の力を活用することでこのようなアニメーションでも簡単に実装することができます。

( ※ GIF アニメーション、二本指カスタムシンボルは開発中のものです。実際にリリースされるものとは異なる場合があります。 )

他の Custom Symbols

日本経済新聞紙面ビューアー iOS アプリには、他にも chevron を上下に重ねたシンボルや、クリップとチェックマークを合わせたシンボルを用意しています。

紙面ビューアーで運用されている Custom Symbols

おわりに

本稿では SF Symbols から、 Apple のデザインの奥深さに触れました。

これからも SF Symbols の進化に目が離せません。

カスタムシンボルで SF Symbols 4 のパーセント値による色変更の実装方法や、 Unified Annotation については Adopt Variable Color in SF Symbols - WWDC22 にて詳しく説明されています。

特に、驚くほど簡単になったカスタム SF Symbols の Unified Annotation 実装方法は必見です。

今後も細部にこだわり視認性の高いシンボルで優れた UX の構築に貢献すべく、調査を続けていきます。 日経では通年で長期学生インターンの受け入れを行っています。日経でのインターンに興味を持ってくれた学生の方はぜひ下の Entry から応募してみてください！

明日は佐藤さんによる「ロック画面ウィジェット対応」です。お楽しみに！