SF Symbolsの紹介

(音楽)

(拍手と歓声) お待たせしました　始めましょう パオロです 後半は同僚のトムと交代します 本日はSF Symbolsについて ご紹介します

アイコンはインターフェイス上で 欠かせません 効果的な意思疎通や 選択肢の明示を可能にします また コンテンツの視覚的な識別を 可能にします

アイコンは 様々なコンテキストに対応します

UI全体が統一され 使いやすくなるでしょう アイコンは汎用的です 配置する上で考慮すべき点は UI上の必須要素である テキストとの組み合わせです

アイコンはテキスト同様 様々なサイズに調整できます

使用頻度が高い分― 手軽に使ってもらいたい

iOS 13ではアイコンの デザインを一新しました 見た目に丸みを出し― ウェイトを太くして より見やすくしています

またテキストとの相性も抜群です

今回 システム上の全アイコンを 一新しただけでなく さらに多くの種類を リストに追加しています それが―

SF Symbolsです

高品質でプラットフォームにも整合 Appleが設計したアイコンです

ベクタ形式のため拡大も問題なし どんなサイズでも きれいに表示されます

San Franciscoフォントで ウェイトも―

変わります

デザインは1000種類以上

これでも足りなければ 自分で作ることもできます

詳しく紹介します SF Symbolsはテキスト同様 タイポグラフィが適用されます

テキストの横に配置すると ベースラインがそろいます

縦に配置する場合 ２つの例があります テキストを軸とするか―

アイコンを軸にした例です 平行に配置すれば全体が整います

これはマージンのおかげです

右下のマージンのように 幅は統一しなくても構いません

レイアウトを考える時 マージンは無視できません

次にウェイトです

SF Symbolsはウェイト調整にも こだわりました UltralightからBlackまで 変更が可能です 手動で変更します またデザインも配慮しました 細いウェイトは美しくエレガントに 太いウェイトは 細部が潰れないようにしています

各テキストのサイズが同じでも 隣に置くアイコンのサイズを 変えたい場合もあるでしょう

経験者も多いはずです アイコンの強調具合や 使えるスペースを 考慮する必要があります

そこで あるシステムを導入しました

それぞれのスケールを

Small Medium Largeとしています

同じポイントサイズのまま スケールだけが変わっています

ウェイトも同じです 単に線を伸ばしただけでなく テキストのウェイトに対応します

また このスケールは テキストの高さを軸にして 垂直に自動で配置されます

このように３種のスケールは 自動でレイアウトを調整してくれます

スケールの使い分けについて 例を紹介します ３種類のUIがあります テキストは いずれも17ポイント しかし それぞれの コンテナの高さは―

異なります

テキスト同様 アイコンも同サイズですが スペースに合わせて スケールが異なっています

ツールバーなどの中には 自動でスケールを 調整してくれるKitもあるでしょう

サイズ スケール ウェイトを 組み合わせることで 動的になり 全体を整えられます

アイコンはローカライズも可能 英語とアラビア語の Voice Memosを用意しました

タイマー操作部分は ロケールの記数法です

各アイコンを把握するため 名前を与えています

派生型は一部変化させたり 塗り潰したもの

また丸や四角で 周囲に枠を付けたり マークを添えたものもあります

また利便性も高めています SF Symbolsは San Franciscoフォントに含まれ プロンプトに使えます スケールはOpenType機能で設定 デフォルトはMediumです 変更するには Typographyパネルか

アプリケーション用UIを操作 今のところは あくまでデザイン目的です

ではSF Symbolsへのアクセス方法を お伝えします 新しいアプリケーションを作成しました このような アプリケーションアイコンです コレクションビューや テーブルビューで閲覧できます

名前で検索します

異なるウェイトのプレビューを 確認できます

developer.apple.com/designから ダウンロード可能です

Apple Developer Webサイト上の Design Resourcesも SF Symbolsを使っています 名前で照会します

システムアイコンもSF Symbolsを適用 自動的に新デザインを 使うことができます

では例に沿って SF Symbolsの使い方を説明します

アプリケーションにありそうな構文です 本来 このようなデザインなら

画像の範囲を確定し 余白の調整が必要でしょう SF Symbolsなら簡素化できます サイズと位置を調整するだけです ウェイトとスケールも変更できます

２列目のアイコンは 少しありきたりな印象です おいしいホットドリンクに相応しい アイコンに変更します そこでティーカップの デザインに変えます

いい感じですね トムも喜ぶでしょう 既存のアイコン一覧にはありませんが SF Symbolsでは自分なりのアイコンを 作成できます

そのためには まずアプリケーションから

テンプレートを介して エクスポートします

これがテンプレートです ウェイト スケールの 全種類を掲載

SVGフォーマットのため

大抵のデザインツールに対応します

どの段階のデザインでも 編集することができます

ソースアーティファクトとして Xcodeでも直接使えます 大量のファイル展開は不要です

では作成手順です

アプリケーションから素材を探します ティーカップのアイコンは サークル型のため circleを素材に使います 選択してFileからエクスポート

保存したら準備完了です

エディタで開くと レイヤーに名前がついています ウェイトやスケールなど アイコンの構成はこの名前で判断します アウトラインが適切なレイヤー内に あることを確認しましょう

ではスケールはMedium ウェイトはRegularで始めます ティーカップが中心に来るようにします 太さを調整するためスケールを下げます Regularのまま Smallに変更しました 同じ工程でLargeも作っていきましょう 見た目の確認も怠らないように これでテンプレートの完成です ツールからSVGファイルで エクスポート可能です

これでトムに引き渡せば ずっと愛用してくれます 修正も必要ありません このままXcodeに落とせます

ウェイトを最低限に抑えたい場合は MediumのRegularに絞りましょう

スケールの幅を持たせ― 同様にBoldも備えてみました

動的なスタイルなら MediumとBoldが必要です

タイポグラフィの体裁を考慮するなら 多様なウェイトが必要でしょう

今回 San Franciscoの 新型アイコンを紹介しました ベクタ形式で ウェイトやスケールも調整可能 アプリケーションで一覧を確認できます 名前を検索して 位置調整の方法を実演しました SVGテンプレートを使えば アイコンをカスタムできます

次はコード上でのSF Symbolsを トムが解説します (拍手) ありがとう パオロ (拍手) 最初に 独自のアプリケーションにおける― SF Symbolsの利用方法を紹介します このスライドショーでは 表示速度を変えられます しかし 画像だけでは物足りません そこで速度調整のアイコンを SF Symbolsに変えてみたいと思います アプリケーションを起動し カメを探します 今回は童話を題材にしてみます いい感じのカメがいました ウサギもいます ここで新たなAPI UIImage(systemNameの登場です 既存のAPIによく似ています コピーしたSF Symbolsの名前を 張り付けるだけです 見てみましょう

たった２行のコードでご覧のとおりです

パオロから送られた構文です 何だかホットチョコレートが 飲みたくなりますね 以前の構文から 大分 見た目が変わっています 情報が削減されています ではティーカップに注目してください

SVGファイルを― 私のアセットカタログに インポートします

パオロが作ったティーカップは ディテールまで しっかり作りこまれていますね

では UIImage(namedにteacupを加えます これでオシャレなティーカップが 表示されます 実は今回インポートしたことで

ティーカップのファイルが増えています 同じファイル名で ２種類の画像を管理しているのです 戻って説明しましょう 次はティーカップではなく封筒です

UIImage(namedを使えば アセットカタログから 画像を表示できます アイコンは少々複雑です 同じファイル名が３種類できるでしょう １つはシステム用です 残りはカスタム用と非アイコン用です

システムイメージには問題ありません APIを分けているため 別々に処理されます (systemNameはカスタム用に使えず (namedはシステム用には適用できません

カスタムは少し違う扱いです

とはいえ まずアイコンの画像を探します そして その画像を返します 非アイコンでも同じ処理をします 両方 必要な場合もあるでしょう 問題ありません

コードが同じ行なら iOS 12以前のバージョンだと 過去の画像が出ます 今回はビットマップ画像です

iOS 13以降ならアイコンが出ます よってバージョン確認のコードは 必要ありません 同名で２種類の画像が用意され すぐに使えます iOS 13以降で過去の画像を出す場合は 複製します

スライドに戻りましょう ティーカップの構成を見てみると スケールはLargeです 新たに導入した SymbolConfigurationにより Largeで作成されました

他のプロパティと違い スケールをLargeにして imageViewを使うだけです 新プロパティの preferredSymbolConfigurationが 画像を表示する時に構成を適用させます 非アイコンは適用外です

見てみましょう

スケールが変わりました

同様にサイズも変更することができます ポイントの値を決め ウェイトやスケールを指定します

アイコンのポイント値は 画面上のポイント値とは別物です フォントのポイント値となり タイポグラフィを整えます 画面上の値は画像の寸法を示します

実際に見た方が分かりやすいですね “Favorite”の横にサークルのアイコン システムフォントは 28ポイントにしています この画像も縦横が 28ポイントに思えますが 実際は このような値で構成されています 見えるのはサークル部分です

アイコンを表示する際 基準は画像の寸法ではなく アイコンの値を使い テキストの一部と捉えます フォントのポイント値で アイコンのサイズを調整します

テキストスタイルでも設定できます 動的な規則がアイコンに適用され テキストと同様に扱うことができます 非常に相性のいい手法です 画像のサイズはimageViewが自動で変更 起動中に 適切なサイズに調整してくれます

比較すると見やすさが 改善されたことが分かります ウェイトは統一しています

またアイコンの画像は サイズを動的に変化できます 常にベクタ形式で表示されるため 縦横を固定することが あまり好まれません 値が正しくないからです このアイコンは17ポイントなので 本来はもっと小さいはずです

しかし寸法を固定しているため 大きく表示されます また 少し軸がズレていて やや左上に寄ってしまっています

性能も落ちてしまいます 画像を最適に表示できません そのため画像は完全に固定せず 自然なサイズを保つ必要があります

この場合 アイコンの値を 500ポイントに変更しました 先ほどよりも画像が中心に寄り ズレが修正されました サイズの値も正確です また性能も上がります

ポイントサイズで サイズ調整をしなければ アイコンの構成が反映されます スケールがLargeでもSmallでも 実際のサイズと差が生じます

ここに様々な構成要素があります SF Symbolsは San Franciscoフォントで機能しますが 実際は どのフォントでも構いません SymbolConfiguration(fontなら 好みのフォントを指定できます システムフォント 動的なフォント カスタムフォントなど カスタムフォントなら 手動で値をコピーした時よりも より忠実度の高い構成を 作ることができます そのため このAPIが有効です フォントをテキストなどに設定済みなら 簡単にそのフォントに統一できます

基本的に この構成は変更不可です しかし変更を施したい場合 applyingというメソッドで 指定の構成を適用します これで要求している構成を移せます 別の構成で指定しているすべての値を 基本構成にオーバーライドします これで新しい構成ができあがります しかし構成は基本的に変更できません

次はレイアウトです アプリケーションのコメント部分を もう少し拡大し アイコンを使ってみたいと思います ではアバターのプレースホルダを― 新しいアイコンに変更してみます いい感じですね

基本的には テキストに画像を添える場合 垂直の中央ぞろえで問題ないでしょう アイコンでも同じことです 同様に垂直の中央ぞろえにします

UIKitがアイコンの タイポグラフィ情報に従い テキストとの配置を視覚的に整えます ２要素のフレームは調和しないため 絶対ではないですが 中央ぞろえが最適でしょう

システムが調整してくれます

複数の行で構成されたラベルの場合も 垂直の中央ぞろえが有効です アイコンも同様に ラベルの中央に合わせて並べます Disclosure Indicatorにも効果的です コメントに戻ります 自然な配置の Disclosure Indicatorです アバターのプレースホルダは １行目にしましょう

これでベースラインにそろえられます これまで少し厄介な配置でした そのため端にそろえて配置するか ベースラインでも オフセットの計算が必要でした これなら ベースラインに そろえるだけで済みます

(拍手) ありがとう (拍手) ベースラインを把握するため

UIImageに新プロパティを導入しました baselineOffsetFromBottomです 画像底辺からベースラインまでの オフセットを示します 任意のCGfloatです 実際 画像によっては ベースラインを 備えていない画像もあるからです そのため事前に画像を 確認しておくべきでしょう Objective-Cでは任意ではありません

これらのオフセットは特徴的です テキストの両端にアイコンを配置 同サイズでベースラインも同じです しかし範囲を可視化すると V字記号は上方にあり 雲はベースラインを越えています 値で見る場合は 数値を上げればPositiveオフセット 下げればNegativeオフセットと表します

画像はベースラインを 越えない方が望ましいです 今回はV字記号です 値が０の場合 画像の底辺が ベースラインとそろっていることを 意味します

ではベースラインを画像に加える APIを導入します

withBaselineOffsetFromBottomです ベースラインを備えた画像ができます 画像底辺からのオフセットを示します そうすると画像は アイコンのような動作で扱えます タイポグラフィ情報を持つからです そのためアイコンと 同じレイアウトにできます 画像にベースラインがあるのか 確認も不要なので 手順が楽になります 例を見てみましょう いくつかアバターを 確認できるようになりました 操作は１列目のベースラインに そろえただけです

平行の配置にも触れます 画像が同列に並んでいるのが 分かると思います これはオフセットを指定することで 画像を統一して並べています またオフセットからテキストまで 幅を指定します この処理により 画像を平行に並べられます leadingやtrailingの制約は不要です

では構文に戻ります 推奨したいのは 平行でも垂直でもデフォルトは 中央ぞろえにすること 大抵はシステムが調整してくれます 可能ならタイポグラフィ情報に従い 無理なら中央ぞろえになります

これはベースラインにそろえています 第２項目が２行になっているからです 結局はベースラインが手軽なのです

また画像を平行の配置に指定しています 読みやすいですね

ではボタンを見てみます UIKitのボタンは豊富ですが Systemボタンと通常ボタンの ２種類に大別されます

UIKitのボタンには アイコンの事前設定があり Systemボタンはbodyとlargeです bodyはテキストスタイル largeはスケールを意味します ではSystemボタンを作成します Infoボタンにも似ていますが アイコンとそっくりな Systemボタンを作ります UIButtonに初期化子を加えました どんなアイコンでも使えます

標準的なアイコンと同じ扱いです (拍手) 次は通常ボタンです ポップオーバーが表示され アクション用に使用されます まさにアイコンが活躍できる場です 事前設定はスケールがMediumです ここで事前設定を変更したい場合 UIImageViewの時と似たAPIを使います それが PreferredSymbolConfigurationforState コンテンツ用アクセサの役目を果たし 特定の構成に設定できます 画像や構成を設定したり あるいは 両方の設定も 完璧にこなしてくれます 別のボタンの例です アイコンとテキストを 組み合わせた形式で 位置関係ではなく 性質を結び付けています 左側も右側も同様の構成になっています 推奨設定で右ボタンのフォントに統一 左ボタンをアイコン 右ボタンをテキストで表示し ベースラインもそろえています ほぼ同じ構成のため レイアウトも手軽にできます

最後にUIKitに含まれる Barボタンを紹介します アイコンを使えるよう UIKitの 全アートワークをアップデートしました

Barボタンにも適用できます 旧バージョンにデプロイし直す場合 注意したいのがカスタムアートワーク 以前までの線の細い アートワークのままだからです デプロイし直すため アセットを作る時は注意してください

Barボタンにアイコンを使う場合 既存のAPIに アイコンを組み込むだけで 問題なく扱えます 他に設定することはありません

Barボタンにも事前設定があります コンパクトサイズのクラスでなければ スケールはLargeです

本体を回転させると Mediumに変わるようになっています よりコンパクトなBarに合う大きさで 呼び出します 補助的な画像は必要ありません システムが スケールを調整してくれるのです (拍手) iPadでは 常にスケールが Largeになります

ではモデルのレンダリングに移ります 通常の画像はカラーデータが 組み込まれています しかしアイコンの場合― 固有のカラーでなく 淡彩で表示します

あるいは黒を使いますが ダークモードでは 修正が必要になるかもしれません

実際に見てましょう

レンダリングモードは自動です どんな画像も alwaysOriginalで処理されました

アイコンは異なります 非アイコンはalwaysOriginalですが アイコンはalwaysTemplateです それが淡色を与えているのです それだけのことです 既存のAPIで レンダリングモードに変更できます 時には図表コンテキストで 画像を描く場合もあります draw(in Rectを使うでしょう しかし自然なサイズにするには 適していません draw(atを使い 画像の大きさを決めます しかし これでは小さすぎます デフォルトでは 構成が指定されていないのです 表示する時に特定の値が 見つからない場合 システムのデフォルトに従います 今回は 極小の画像になります

そこで画像のサイズを設定します 34ポイントでウェイトはBold そして新API withConfigurationで 構成を反映すると 大きな画像が作成されます サイズが大きくなり 線もわずかに太くなっています

ポップオーバーに戻ります アイコンはテキストにも馴染むため 変更してみます いくつか文字を置き換えます 自然ですが まだ画像のままでしかありません そこでattributedStringに NSTextAttachmentを使います 見慣れたコードではありますが NSTextAttachment(imageで テキストアタッチメントを作れます 通常より やや小さい テキストアタッチメントです

アイコン周辺のストリングを読み込んで 可能な限り アイコンの構成を指定します フォントサイズやウェイト カラーも調整して 画像を作り出すのです

(拍手) これまでのAPIだと 画像の構成を適宜 調整してくれません 通常画像でも このAPIが使えます

カラーを追加してみてもいいでしょう

カラー付与のため 新しいAPIを開発しました withTintColorは 画像にカラーを適用します 必要であれば カラーだけを表示することも可能です これまで画像をラスタライズし 色付けしていましたが それも不要です

手軽にできます (拍手)

固有のカラーがないアイコンには 重要です 鮮やかに見せたい場合は レンダリングモードを切り替えます 任意のパラメータで対処できます

これらのAPIは 間もなくベータ版に登場します

多くのAPIを紹介しました アプリケーション作成に 最高のツールとなるでしょう

アドバイスとして 配置は平行及び垂直の 中央ぞろえを推奨します 意識的なものですが 効果は大きいはずです

レイアウトは小さい要素から ビルドしましょう その方が 格段にスムーズに 組み立てられます

画像は柔軟に考えましょう 画像サイズは変更可能だと 意識して見てください アプリケーションの稼動中や 起動時 アップデート時も同様です

キャッシュ画像は頼れません システムはすでに最大限の 性能を発揮しています キャッシュで オーバーライドしても無意味です

最後に ラスタライズは 問題を解決する上で 大抵の場合において最悪の手段です

CPUの負担を減らすため ラスタライズはシステムに委ねましょう 特にアイコン画像のラスタライズは 控えてください

アクセシビリティと ローカライズのセッションでは それらの分野でSF Symbolsの 適用方法を紹介しています ダークモード実装のセッションでも SF Symbolsが扱われます

またテキストとSF Symbolsのラボや フォントに関するラボ デザインのラボも興味深いでしょう

UIKitのラボもお見逃しなく 本日はご清聴ありがとうございました (拍手)