iPad Apps for Macをデザインする

(音楽) どうも

(拍手) WWDCに戻れて うれしいです

Mac用のiPad Appの デザイン方法を紹介します 皆さんは最高のiPad Appを すでに開発しています アプリケーションは 人々の生産性の向上に役立ち コミュニケーションを 円滑にしてくれます こうした体験を Macでも可能にしたいのです トラックパッドなどで入力すれば 正確で迅速な作業ができます 順応性のあるウインドウは マルチタスキングに有効です さらに 大画面のおかげで より多くの情報を一度に表示できます もちろん Macに適さない iPad Appもあります 拡張現実などは デスクトップコンピュータに適しません iPadの特徴である ジャイロスコープやバックカメラも Macには不向きです ただし それ以外なら― Macへの参入は すばらしいことです より効果的な体験を提供できます

MacでiPad Appを使うための第一歩は 強固なFoundation作りです iPad Appはドラッグ＆ドロップや Auto Layoutもサポートすべきです

Macのウインドウは自動で調整されます iPad AppがAuto Layoutを サポートすれば Macでも実現可能でしょう

ドラッグ＆ドロップを サポートすれば Mac Appに一歩近づきます Macにはドラッグ＆ドロップが 不可欠です 今後 iPad Appは 複数のウインドウで開けますが Macではドキュメントを 各ウインドウで開きたいでしょう サポートされていれば Macでも同様にサポートされます 次の話題に移ります “無料”は好きですよね？ Mac Appへの参入を楽にすべく iOSのインターフェイスは 自動でmacOSに適応するようになります 例えば iOSのSplit Viewです File browserやActivity viewも iOSからmacOSに変換されます コンテクストメニューなども 自動でMac用に変換されて 表示されます 同様に コピー＆ペーストなども 無料で変換されます

このような場合は― iOSとmacOSのマッピングは 比較的 簡単です ただし macOSとiOSにも 大きく異なる点があります 適切なアプリケーションを作るには ２つの違いを理解し 考慮しなければなりません

最大の違いは iOSが タッチに対応するデザインの一方で macOSはマウス入力に 対応している点です

タッチ対応のデザインでは ターゲットは大きくします 動いている場合は特にです Macではマウスを使うので 安定したコントロールを実現します さらに ポインタが小さいため 極めて正確な操作が可能です 細かい操作ができるため― より多くの情報を画面に表示できます パンや回転などの iOSのMulti-Touchジェスチャは すべてのMacで対応していません こうした入力方法の アプリケーションは― Macでは違う方法を 採らなければなりません iPhoneを片手で縦向きに持つ時は コントロールを 画面の下部に置くといいでしょう iPadを横向きに持った時も同じです 大抵は両端を持つので コントロールを左か右に設置すると 便利でしょう 当然 Macを手に持って使う人は いませんね コントロールを 下部や左右の端に設置しても 人間工学的なメリットはありません Macの画面は どこでも簡単にアクセスできますからね ディスプレイですが アプリケーションの見え方にも 考慮が必要です テキストが読みやすいように 十分 配慮してください

タッチデバイスと デスクトップコンピュータの 違いは理解できたでしょう ですが iOSとmacOSのデザインの違いは 理解できていないでしょう こうした違いこそが iPad AppのmacOSへの変換を 成功させるカギです そのことを念頭に置き― 詳しいデザイン方法を見てみましょう 話すことは山積みです メモを取りたくなるかも では 進めます デザインにおいて アーキテクチャは最重要です 論理的な構成のアプリケーションは 使いやすく― 画面遷移がスムーズになります iOSのアプリケーションの構成は ３種類です １つ目は タブを使って― 情報を分けて整理する構成です ２つ目は 一覧形式で表示する構成です ３つ目の構成では ファイルブラウザのように表示します 皆さんのアプリケーションも この３種類でしょう 似た構成をmacOSで見つけて 使ってみてください タブがある場合は ツールバーが使えます 最初にリストが表示されるなら Macでも その状態で表示されます ファイルブラウザも同様です iOSのアプリケーションの構成を macOSに― 直接 変換できることは大きな利点です Mac版のアプリケーションが iOS版に慣れた人でも 使いやすくなります

一方で 画面遷移を簡単にする機会を 逃しているかもしれません Macのサイドバーは効果的なツールです 大量のオプションを保持できます グループ化やラベルを貼れるおかげで 見るのが楽です iPad Appのタブは Segmented Controlsで表現できますが サイドバーでも表現できます ただ 見栄えが非常に悪いです うまく画面を使えていません ただし サブセクションがある場合 一列に展開して表示できます 階層が見えるようになるので 直接 サブセクション間を移動できます さらに 必要に応じて カスタマイズも可能です セクション間を遷移する リストがある場合は そのままmacOSに変換できます Split ViewはMacのサイドバーの 背景を半透明にしたら完成です 最後は ファイルブラウザのような場合です サイドバーを使えば フォルダの情報や 保存した検索結果も表示できます サイドバーを使う際の注意は２点です まず サイドバーはドキュメントの 位置情報を提供するだけです ドキュメント自体を 表示するものではありません 次に サイドバーは重要です アクティブなウインドウを明確にします グリフやサイドバーの背景は ウインドウをアクティブ化すると 半透明になります 無効になると元に戻ります 入力操作が可能な ウインドウを知ることは重要です ぜひ この背景を使ってください サイドバーを無地にしたり― 柄をつけたりしないでください Selection Highlightには システムが 提供する色を使いましょう また イメージにも Vibrancy Effectが効いた テンプレートを使うべきです 次は ツールバーの説明です Macでよく使われるので 皆さんも使いたいでしょう ツールバーにコントロールを設置すると 強固なユーザ体験を提供できます ツールバーは 上下の情報の流れを生み出します iPad Appの動作が 画面の下で行われる場合― Macで同じ動きをさせるのは困難です ウインドウはドラッグできるので 下部が隠れることがあります Dockも邪魔です ユーザビリティに問題が生じます ツールバーに置かれたアクションは アプリケーションのエリアに合わせて 変化しません エリアが変わると アクションは無効になります 本来なら 選択されない時だけ アクションを無効にすべきです 特定のエリアにだけ 関連したアクションなら 設置すべきではありません こうした場合には アクションメニューが有効です ユーザの選択に合わせて メニューが変化します 例えば 選択したファイルに対して 実行可能なアクションが現れるのです 選択しない場合は フォルダに対して 実行可能なアクションを表示します

ただし 万能ではないので アクションは厳選してください 次は レイアウトの説明です MacのウインドウはiPadより巨大です フルスクリーンなら 遊べる空間も広がります この空間をうまく使うには iPadの適切なレイアウトが必要です iPhoneのレイアウトを使い回すだけでは iPadでの見栄えは最悪です Macのフルスクリーン表示なら さらに悪くなります レイアウトの最適化には 特別な配慮が必要です iPadでもMacでも 行間に余白を持たせることで 読みやすさを保てます コンテンツの分割は 多くの情報を表示する有効な方法です また Split Viewなどを使えば 画面を横に広く活用できます Split Viewの画面遷移は オブジェクトの一覧と詳細を 同時に表示します つまり 階層を 行き来する必要が減るのです Split Viewがあれば Macでも修正せずに使えます 変に思うかもしれません ですが Macに適したレイアウトの作成は iPadのレイアウトの問題を 解決するのに最適なのです

次はタイポグラフィです

macOSのベースラインフォントは 13ptです ほとんどのラベルに使われるサイズです 一方 iOSでは17ptが使われます 17ptのままMacで表示すれば 見切れてしまうでしょう サイズが大きすぎます そこで Mac Appとの 一貫性を保つために コンテンツエリアはシステムにより 77％縮小されます もちろん 77％というのは13ptを 17ptで割った数値です 主なインターフェイスは縮小されます つまり macOSに合わせて 私たちがデザインし直す必要は ありません それでも 多少の複雑さはあります

iPad Appのモックアップは 77％の尺度で作りたくなるでしょう 例えば Photoshopではコンテンツ全体を 77％に縮小できます SketchやXDでも 同様のことが可能です macOSでは 少ないフォントサイズを使います 一方 iOSのフォントサイズは多様です iOS向けのタイポグラフィには 様々なサイズの選択肢があります Footnoteなどの小さいサイズを使うと Macでは読みにくくなります Mac miniでも小さすぎます これで 文字を大きくする必要性が 分かったでしょう 最後に macOSは Dynamic Typeに対応していません 常にLargeの設定を使い― それを77％に縮小してください さて iOSのアプリケーションでは 選択したアイテムを 強調する時に色がつきます バーの背景などに 色がつくものもあります 一方 Macは違います 大量のウインドウを開きながら― 大量のファイルやフォルダを 開くのは日常茶飯事です macOSでiOSのように色を使えば ユーザ体験は崩壊してしまうでしょう Macでは中間色を使い 目立たないようにすべきです ユーザの目的はコンテンツですからね 半透明色により アプリケーションがMacと調和します カスタマイズしたデスクトップも アプリケーションの半透明色と なじみます まとまりのある体験をもたらすのです Macでは ハイライト用のカラーも選べます アイテムを 強調する色が違ったら 違和感を覚えるでしょうし ユーザに混乱を与えます

色に関して iOSがmacOSに似てきた点を 指摘しておきましょう アプリケーションは かなり頻繁に左右に並びます 整合性のある外見は ユーザ体験に重要です ダークモードでは 外見に さらに期待が寄せられます 個人の好みに 対応することが不可欠です Tint Colorにも同じことが言えます SteppersとSegmented Controlsも iOS 13では 中間色になります 色について もう１つ話します ご存じかもしれませんが iOSのSystem Colorsは改良されました スライドに表示された色は どのモードでも macOSで該当する色に変換されます ジェスチャの説明に移ります ジェスチャは自動で マウスイベントなどに変換されます タップ１回はマウスダウンと同義です

長押しとマウスダウン状態は同じです

パンはドラッグと同じで スワイプは 特定の方向へのドラッグになります トラックパッドのピンチや回転は 少し違う動きです iPadでは タッチしたポイントの中間を用いて オブジェクトの特定や 拡大 縮小を行います 一方 Macでは カーソルの位置を使います

画面の端でのスワイプは変換されません

また 対応が必要な ジェスチャもあります Macに不向きなジェスチャです 例えば コンテンツを 更新するジェスチャは うまく変換できません ジェスチャがトリガーの場合― 代わりのアクションが必要でしょう コンテクストメニューや ツールバーなどが活用できます 最後に Macでは ホバーが利用可能です ポインタが重なると 追加情報を表示できます 株価Appの株価チャートを例に挙げます iOSでは 長押しで 株価を表示しますが macOSでは ポインタを動かして表示します ぜひ ホバーを活用してください 選択を変えずに 情報を得られる有力な手段です また Mac用に Touch Barを作ることもできます 関連性のある情報を表示する方法です さらに 実行中の操作に応じて 内容が変わります Touch Barの機能の多くが利用可能です ここで話すには Touch Barの情報は多すぎるので 詳細はHPをご覧ください

次は アイコンの話です アプリケーションの顔と言えます 大量に存在する― アプリケーションとの差別化に 役立ちます また アイコンはDockや Launchpadなど 様々な場所で表示されます iOS Appのアイコンは デフォルトがこの形です 正方形の角が取れたイメージです ドロップシャドウ効果のおかげで Mac Appのアイコンとも調和します このままでも十分ですが 私は挑戦することを お勧めします Mac Appのアイコンは目立つので 見た目が とても重要です Macのアイコンはデザインが豊富です 角が丸い正方形だけではありません ユニークなシルエットで 他のアイコンとは違います そのため 小さいサイズでも アイコンは常に識別しやすいのです 1xディスプレイでFinderを開くと 表示されるアイコンは たったの16ピクセルです サイズが小さい場合には ピクセルを考慮して アイコンを作るといいでしょう

Mac Appのアイコンは オブジェクトを 正確に描写して作られています アイコンはレンダリングされ 本物に見えるようになるのです 遠近法や光源に関する情報は たくさんあるので― HPをご覧ください あと少しで 説明は終わります 次のコンテクストメニューは Mac Appのインターフェイスの 陰のヒーローです 実行可能なアクションを示し ポインタで正確に アクションを実行できます Macには必ずあるものと 思われているので コンテクストメニューは 必ず実装すべきです すべてのオブジェクトにも実装し アクションを関連付けましょう iOS Appのコンテクストメニューは macOSに自動で継承されます Edit Menusも同様です macOSとiOSの コンテクストメニューには 同じルールが適用されます ６つのルールをお伝えします まず 多くの選択肢を表示しないこと 選択肢が多いと 目的を見失い メニューを見る時間も長くなります 関連性の高い アクションだけにしましょう 次に 簡潔であること ラベルの表示は ひと言で十分です ラベルを書く時は 動詞や動詞句を使って アクションの内容が 分かるようにしましょう また コマンドの順序も重要です １番重要なものを １番上に設置しましょう さらに Separatorを使って コマンドを分割すること コマンドのグループ化は重要です グループ化されていれば 不要なコマンドを まとめて飛ばせます

最後は サブメニューを使って― 無関係のアクションを隠すことです サブメニューは典型的な隠し方です 複雑さが減るので シンプルに決断できます では 最後に最も考慮すべきである― メニューバーを紹介しましょう アプリケーションに必須で― 1984年からずっと Mac体験の中核をなしています メニューバーは 利便性を握るカギでした メニューバーのデザインは 楽しいことから始まります アプリケーションのアクションを 書き出すのです もちろん全部です それから 影響を受ける オブジェクトも書きます この作業は かなり面白いだけでなく 必要なことでもあります アクションはメニューバーからも 利用可能にすべきです そうすることで ショートカットに登録しやすくなり フルキーボードアクセスでも 使いやすくなります アクションを列挙したら 設置場所を探しましょう macOSには標準装備されている メニューがあります 例えば“アプリケーションメニュー” 他には“ファイル”や コンテンツとオブジェクトを 操作する“編集” “フォーマット”や ウインドウをカスタマイズする“表示” ウインドウを操作する “ウインドウ”です また “ヘルプ”は コマンドを探すのに役立ちます さて アプリケーションには これらの標準的なメニューが必要です しかし 大抵は さらに多くのメニューが必要です 複数のオブジェクトがある場合― 関連するアクションの 表示方法を考慮すべきでしょう メールAppを例にします オブジェクトは メールボックスとメッセージの２つです 様々なアクションを実行できますが 他のオブジェクトでは実行できません つまり オブジェクトごとに メニューボタンが必要です

一方 アクションを まとめた方がいい時もあります 例えば Keynoteのオブジェクトは 豊富です 一連のアクションとして 配置や ロック グループ化などがあります オブジェクトに 似たような作用を及ぼすので １つのメニューにまとめても 違和感はありません

メニューバーに何を加えるか決めたら メニュー自体を作りましょう コンテクストメニューで 説明したルールの他に １つ追加で説明します メニューバーの構成は固定です アプリケーションの起動後に 変更できません 実行不可能なコマンドは無効になります 固定されているので 利用できない状態でも コマンドの情報が分かります 無効なコマンドを見た時には 今は実行できないアクションだと 分かります これは有益な情報です もう１点 メニューバーの補足です キーボードショートカットの話です きっと感謝するでしょう MacでもiPadでも― キーボードショートカットは有効です 例にならって使用してください キーボードショートカットの一覧は HPに載っています 未知のアプリケーションを使う時に 便利です 使い慣れたショートカットで 期待どおりの結果が得られるのですから そうでしょう？ (拍手) ですよね

頑張って実装しましょう メニューバーの説明でした メニューバーはmacOSの中核なので 集中的に説明しました

iPad AppをMacで動かすことは とても簡単だったでしょう ですが これは第一歩です Macはアプリケーションの実用性を 高める機会を与えてくれます ただし 実現には 思慮深いデザインや努力が必要です さて 今日は大量に説明しました メモを取らなかった人は愚か者です 心配しないで　冗談です 今日の内容に特化したページがあります 使える情報や今日の内容 その他の情報が満載です macOSの デザイン用のリソースも使えます Sketchなどもダウンロード可能です デベロッパのHPで すべて見ることができます 他のセッションも ぜひご覧ください アプリケーションの開発や フォン… フォントに関連したセッションです ご清聴 ありがとうございました (拍手)