デザインの基本 - アイデアからインターフェイスまで

こんにちは Design EvangelismチームのMajoです 私たちが何をやっているかというと 基本的な仕事は 皆さんがAppleプラットフォーム向けに 優れたアプリを作れるよう支援することです 私たちは皆 アプリが動作したときの気持ちがわかります 動作しないとき気持ちも ユーザーとしてその違いに気付くのは 簡単です しかし デザイナーとして シームレスな体験を構築するのは 少し難しいです 本日はそれを一緒にやっていきます 私がどのように考えどのような質問をし 物事がうまくいかないときに どのように対処しているかを紹介します まずは構造です 情報を整理し アプリの内容と動作を定義します 次はナビゲーションです アプリ内の移動方法を 明確にデザインし ユーザーが迷いなく操作できるようにします 次にコンテンツに焦点を当て 適切に構成して意味を高め 明確に提示してアクションを導きます

最後に ビジュアルデザインでは 適切なスタイルで アプリの個性やトーンを形作り ユーザビリティをサポートします では構造から始めましょう あらゆるアプリには基盤があり それが各種要素を形成します 移動する方法や強調する点 体験の伝え方などです うまくいけば すべてがカチッと収まります そうでない場合は 誰もが経験済みでしょう

実例として 私が作った架空のアプリをお見せします このアプリは 音楽愛好家の増え続ける レコードコレクションの管理に役立ちます コレクションをスクロールして 次に再生する曲のヒントを得られます レコードのグループ化、新規追加、 入れ替えのトラッキングのほか 後で必要になりそうな レコードを保存できます 第一印象はどうですか？ よくわからない点はありますか？ 良い点や変な点はありますか？

私がアプリに期待するのは わかりやすさです 体験が魅力的になり 迷いなく使えるからです

すべては 現在地を知ることから始まります 優れたアプリでは現在地がすぐにわかるため 今どこで どうやってたどり着いたのか 不思議には思いません 次の質問は「何ができるのか？」です 推測しなくてもいいように 動作は 明確で理解しやすいものであるべきです そして最後の質問は 「ここからどこに移動できるか？」です 次のステップを明確に意識することで 流れが持続し 躊躇や二の足を踏むのを避けられます これらの質問に簡単に答えられれば アプリは魅力的で流れが良く感じられます 通常は強固な基盤のしるしとなります 一見すると このアプリはかなり良さそうです 時にそれは誤解を招くことがあります 外見と同様に機能すると思い込むからです これらの質問への答えを 上から順に確認していきましょう 現在地がわかると思っていたのに 最初に見つけたのはメニューです 理想的ではありません メニューは曖昧で予測困難なこともあります 最初に本当に必要なのはコンテキストです 次に タイトルがありますが ブランド表示のような感じがします 見た目はよくても役に立ちません すぐにスキップしたいくらいです そうするとアプリのおすすめコンテンツを 見逃してしまう可能性があります 実に不便ですね

スクロールするとアルバムが見つかりますが 閲覧する以外に何もすることがありません だから自分がどこにいて ここで何をすべきかよくわかりません 一番下のタブ名「Records」で 現在地がわかりますが わかるのが遅すぎます そのため 画面は私を導いてくれず 全貌を知るために労力を費やしました 構造がはっきりしないとどうなるか わかりましたね 人はそれに躊躇し混乱して 時にはあきらめを感じます 起こることが少なければ 開いたときにシンプルに感じられます それが情報アーキテクチャの目標です 情報を整理し 優先順位を付けるプロセスであり ユーザーは必要なものを必要なときに スムーズかつ簡単に見つけることができます 私はまずアプリの内容をすべて書き留めます 機能、ワークフロー、 あると便利なものなどです この時点では何かを判断したり 省こうとはしません 次に ユーザーがそのアプリを どのように使うか想像してみます いつどこで使うのか？ ルーチンにどう合わせるのか？ 何がユーザーの助けになり 何を邪魔に感じるのか？ これらの答えをリストに追加します それが終わったら整理を始めます 必須ではない機能を削除し 明確でないものは名称を変更して 同じ性質のものをグループ化します この作業を行うことでわかるのは 何が必須なのかが明確でなければ アプリでそれを伝えることは できないということです 単純化することで アプリの目的を明確にできます ユーザーがその機能をどのように見つけて どのようなときに使うのか 明確な出発点にもなります ナビゲーションで詳しく見てみましょう これはアプリ内を移動する方法であり タップして移動する 以上のものであるべきです ユーザーに迷うことなく 目的地に到達してもらうためです ここで 情報アーキテクチャで 確認したことを活用します 主な機能にアクセスするには iOSではタブバー コンポーネントを使用します これはアプリのさまざまなセクション間の ナビゲーションをサポートします 常に表示されるので いつでも簡単にアクセスできます シンプルにすることは重要です 余分なタブが増えれば それだけユーザーの決断が増えることになり アプリが実際よりもずっと 複雑に見えるかもしれません そこで一息ついて自問します 本当に不可欠なものは何？ タブにあるべき機能は？ 不要なものの一例は フォルダです レコードをグループ化するただの画面です だからマージします 両方は必要ありません タブバーにがあります これはアプリのプライマリアクションです しかし 疑問が生じます ここは最適な場所でしょうか？ コンポーネントの適切な使用タイミングや 方法がわからない場合 私は常にヒューマンインターフェイス ガイドラインに立ち返ります 案の定 タブはナビゲーションのためのもので アクションを起こすためではありません そこで 使用される可能性の高い レコードの中にを移動します これで タブバーには 3つのセクションができました 予測しやすいアプリを目指しているので これらのタブの名称にも 改善の余地があります ラベルやアイコンを使って 各タブの役割をわかりやすくします そうすれば操作を試して 役割を確認する必要も 役割がわからなくて スキップしてしまうこともありません との名称を より直接的なラベルに変更します アイコンを変更して 各タブの意味が伝わりやすくします 視覚的に一貫性を持たせたいので 自分でデザインするのではなく （デザインは難しいです） Appleのアイコンライブラリである SF Symbolsを使用します これらのシンボルはApple プラットフォームユーザーにはおなじみです タブが認識しやすくなります シンプルなアーキテクチャ、見慣れた アイコン、明示的なラベルにより アプリの全体像と目的が明らかになり タブバーがもっと使いやすく感じられます 情報アーキテクチャに取り組んだため いくつかのものが移動し コンテンツが少し乱れました 次はそれをツールバーで整えましょう これはインターフェイスで ユーザーに方向性を示す最適な方法です ツールバーは私が冒頭で抱えていた 2つの問題を解決します 現在地とできることです ツールバーには先ほどのような メニューやブランド表示ではなく タイトルと画面の名称が表示されます 画面のコンテンツが どのようなものか把握でき 移動やスクロールを行う際に 方向感覚を維持できます 画面固有のアクションに 最適な場所にもなります この場所は タブバーの代わりによく使用されています スペースが限られているので SF Symbolsで必要なものだけを入れて 各アクションを認識しやすくします これで アプリでの現在地や何ができるのか アプリで何が可能なのかを 明確に答えられるようになりました 最初から 迷うことなく 操作できるようになりました アプリの構造に手を加え ナビゲーションコンポーネントを 意図的に使用したためです 振り返ってみると 最初はうまくいっていませんでした しかし それもプロセスの一部です イテレーションを重ねるごとに サポート力があり 予測可能で 移動しやすいデザインに近づいていきます 探索の基礎が固まったところで 実際に画面に表示されているものに 注目してみましょう アプリのコンテンツでは 最も重要なものや 最初に見るべきものに ユーザーを導くべきです ここまでアプリの正しい部分に たどり着くよう調整してきましたが コンテンツについてはどうでしょうか 散らかった印象なのは 2種類のコンテンツが混在しているためです グループとレコードです そこで 両方のセクションを分割するなど 簡単なことを試してみます 良いスタートだと思います 少なくとも タイトルで コンテンツが明確になっています しかしスクロールしない限り 画面で何が提供されているかわかりません まずは少しのグループだけを表示し 移動すると順次表示されるようにします この概念は段階的開示と呼ばれます 必要なものだけを前もって見せることです 使用を開始できるだけの量を表示し 操作に合わせて残りを開示します 至る所で見られ インターフェイスはシンプルに始まり 詳細なオプションや高度なオプションは 徐々に提供されます 残りのコンテンツが 欠けているわけではありません タイトルの横にあるディスクロージャ コントロールのタップの背後で 関連付けられる瞬間を待っているだけです 画面が開いたら コンテンツは 同じ配置であることが望ましいです 前の画面とつながっていて それが広がっていくような感じです ナビゲーションで説明したように すべての画面に方向性が必要です ツールバーも見ていきましょう 画面に関連するアクションと 戻るボタンがあります ここにたどり着いた経路や 移動方法を簡単に把握できます 最初のデザインでは装飾の要素や 具体的な目的のない要素があり 重要な機能の発見を困難にしていました 今回はよりスマートに デザインしたいので レイアウトにコンテンツを表示する 最も明確な方法を見つけます いくつかの例を見てみましょう 段階的開示は正しい方向への一歩でした しかし グリッドレイアウトは しっくりきません たった2つのアイテムに スペースを取りすぎています 長いテキストはうまく処理できず コンテンツが不明瞭になります 改善しましょう リストの方がはるかにうまく機能します 柔軟で使いやすく なじみがあり 構造化された情報が表示され 素早く全体を把握できます 垂直方向のスペースが 画像よりも少なくて済みます つまり 一度により多くのアイテムが 画面に収まります これはゼロから デザインしたわけではありません タブバーやツールバーなどの コンポーネントを参考にし 機能に優先順位を付けて 効果的にデザインしました Appleデザインリソースの リストテンプレートを使っているため コンテンツに適応させるのは簡単でした デザインの意図をはるかに明瞭に 感じられるようになり 実際のアプリのように より多くの機能をサポートしています 最後のセクションがどのように 機能しているか見てみましょう スクロールすると アプリに アップロードした全レコードが表示されます 目標は すべてを事前に利用可能にし 自由に探索できるようにすることでした しかし 選択肢の数が増えるにつれて 処理に必要な労力も増えます 圧倒されたユーザーが ブラウジングせずに アプリから離れてしまうことが心配です 大量のコンテンツの表示方法を考える前に 整理する必要がありました 情報アーキテクチャのように 物事をテーマごとにグループ化すると 雑音を排除し 重要なことに集中できました いくつかのテーマにそって アプリを整理整頓します コンテンツを時間でグループ化することは 一般的な方法の1つです 最近使ったファイルを見つけるのに 役立つほか ストリーミング再生時に 視聴を続るのに便利です 季節性や時事性を 考慮したグループ化も 体験をより生き生きさせ 身近に感じさせます 進捗状況でグループ化すると 中断したところから再開できます メールの下書きや受講中のクラスなどですね これはアプリを実生活に対応させる 素晴らしい方法です あらゆることが一気に片付くことは めったにありませんから パターンによるグループ化は 同じ性質のものを関連付けます 関連商品などがあげられます パターンを浮き彫りにすることで 素早いブラウジングが長い探索に変わります ユーザーが探そうとも思わなかった つながりを示すからです グループ化のアイデアは 1種類のアプリに限ったことではありません コンテンツがあまり視覚的でない場合や 頻繁に変更されない場合でも 選択肢の過多を減らし アプリが一歩先を行っている印象を与え 必要なものを理解していると感じさせます 私だったら間違いなくこれを使っていますね 大量の画像を表示する場合は 必要に応じて コレクションの使用をご検討ください アイテムをグループで表示するのに最適で 写真、ビデオ、商品などを 画面上でスクロールしたり 消したりできます ダイナミックな感じがいいですね これを実現するために アイテムの間隔を一定にして テキストの量を抑えています 先ほどのグループ分けのアイデアをもとに コレクションを作りました ここでは時間ごとに 夏にぴったりなレコードを紹介し 進捗状況ごとに完全なセットや ディスコグラフィーを特集して パターンごとに スタイルやジャンルなどを表示します コンテンツが十分に整理され プラットフォームに馴染みがあれば 重要なものを簡単に見つけられます 直感的に操作できるスペースを作り 何度でも訪れたくなるようにします 最後に アプリを開いて しっくりくるかどうかは ビジュアルデザインにかかっています アプリの個性を伝え ユーザーの感じ方を決めるものだからです 階層、タイポグラフィ、画像、色を よく考えて使うことで 機能をサポートすることにもなります ビジュアルデザインを進化させるために 知っておくべきは 機能している点としていない点です 文字、色、イメージがどのように 組み合わさっているかに注目します 一瞥すると 私の目はまっすぐ 最初のコレクションに向かいます 視覚的に重くカラフルだからです コンテンツの半分が欠けていて 場所が適切ではありません ここで欠けているのは視覚的階層です 画面を通して視線を誘導し さまざまなデザイン要素を 重要な順に表示する必要があります 改善のために この提案を視覚的なアンカーに変えます 重要なものを大きくしたり コントラストを高くしたりすることで 自然と最初に目が行くようにします 視覚的にうまく機能していますが ほかの条件ではどうでしょうか？ テキストを長くしたり 言語を変えたり テキストサイズを 大きくしたりする場合はどうでしょう？ もっと柔軟にデザインする 必要がありそうです 文字に関しては特にそうです そこで役立つのが システムテキストスタイルです 明確な階層と高い視認性を 簡単に構築できます 画面条件は問いません タイトルからキャプションまで あらゆるスタイルを一貫して設定できるため コンテンツの重要性を さまざまなレベルで伝えることができます テキストのサイズを確認したり カスタム スタイルを一から作成する必要はありません フルブリードのデザインを維持し アルバムカバーを背景に移動します テキストに永続的なスペースを与えます 3つの異なるテキストスタイルで サイズとコントラストが変化し 視線をうまく誘導します テキストスタイルは ダイナミックタイプにも対応し ユーザーが快適なテキストサイズを 選択できるようにします アプリはより包括的で 誰もが使いやすいものになりました しかし テキストが画像に重なると 読みやすさが問題になります 賑やかでコントラストの強い ビジュアルでは特にそうです そのような場合は明確さを第一に考えます

これを修正するシンプルな方法の1つとして テキストの背後に薄い背景を追加します グラデーションやぼかしなどです 読みやすさを向上させると同時に デザインを乱すことなく立体感を加えます 最後に注目したいのは画像と色彩で アプリの個性を伝える方法です リストから始めます シンプルにしすぎたようで コンポーネントの間に紛れ込んでいます そこで 各グループを表す画像を追加し リストに目を通しやすくします 全画像が機能するわけではないようです 色もスタイルもまったく違います 本当に必要なのは まとまりのあるビジュアルスタイルです カラーパレットを選び それを使うための簡単なルールを決めます うまくいけば一貫した美しさが生まれ しっくりくるスタイルになります 4色といくつかのレトロな形を選び 組み合わせます タイトルを表示するグループには 太字の拡張フォントを使用したため リスト内のテキストとは異なって見えます この見た目はとても気に入っていて アプリの個性が鮮明になっていますし アプリの成長に合わせて 一貫性を保ちやすくなると思います 色を使って作業しているので ほかに色を使える場所がないか気になります 背景、テキスト、アイコンなどでしょうが それらはすでに色がついていて パレットから選ぶようなものではありません ブラックでもパープルでもなく labelやsecondarySystemBackground のような名前が付いています これらはセマンティックカラーであり 外観ではなく目的にちなんで命名されました なぜなら動的だからです 自動的に変化する基となるのは コントラスト設定 画面環境やダークモード ライトモードなどです アクセントカラーはあちこちで使用できます ボタンやコントロールなど 選択対象を示すことができます しかし気をつけなければいけないのは 動的な変化や全体的な読みやすさ ユーザーの快適さを邪魔しないことです ですから 動的なものについて言えば これが基本的なシステムカラーの カラーパレットです Appleデザインリソースの一部でもあり 柔軟なオプションセットで 視覚的階層を構築し ユーザー好みの外見にシームレスに適応でき 余計な手間がかかりません これはシステムを活用するタイミングや 個性を出すポイントを知るための 練習として最適です これらの各デザイン要素を独自の小さな プロジェクトとして扱いたいかもしれません ある意味ではそうです 熟考と注意を払うに値します しかし 本当の影響は これらの要素が一体となって インターフェイスの全体的な目的に 貢献したときに生まれます 私が始めたデザインはとっくにありません 構造とナビゲーションを簡素化し コンテンツに意味を持たせました ユーザーがアクションを起こせるようにして 誰もが使えて楽しめるスペースにしました このデザインのすべての要素は 最初のタップから最後のスクロールまで 過去の決断の上に成り立っています デザインは決して完成しませんし 正解は1つではありません 今日はその基礎を探りました アプリをさらに進化させるには タイポグラフィ、UXライティング、 アニメーションを活用しましょう 可能性は無限です 学習を続けたい方は 過去のセッションをチェックして 新しいデザインシステムの 理解を深めましょう 探求し学ぶべきことはまだ沢山あります 好奇心を失わず開発を続けてください 皆さんから生まれるアイデアを 楽しみにしています