コンテンツ
ユーザーインターフェイスデザインとは何ですか？より良い質問は、ユーザーインターフェイスの設計に実際に何が入るのかということです。美学？使いやすさ？アクセシビリティ？それらすべて？最適なユーザーエクスペリエンスを実現するために、これらすべての要素がどのように統合され、どれが最初に来るべきですか？
アクセシビリティを常に最優先し、最適なユーザビリティの基盤を築く必要があります（トップのWebサイトビルダーを使用すると、ここで役立ちます）。そして、UIがアクセス可能で使用可能である場合、それは美学の点ですでにかなりまともなように見えるはずです（UIデザインツールはここで役立ちます）。次に、デザインがすべてのレベルで機能することを確認するには、デザインを徹底的にテストする必要があります。これは、最高のユーザーテストツールを選択して行うことができます。ほとんどのデザインの基本的な要素と、視覚的な一貫性を確保するために何ができるかを詳しく見ていきましょう。
01.タイポグラフィを選択してください
優れたタイポグラフィ（デザインの多くの側面と同様）は、アクセシビリティに要約されます。ビジュアルデザインは確かにユーザーの全体的なエクスペリエンスを向上させますが、結局のところ、ユーザーはUIをアートとして表示するのではなく、操作しています。読みやすい文字は明快さをもたらし、読みやすい単語はユーザーがコンテンツを効率的に消化するのに役立ちます。どちらも視覚的な美学よりも重要です。
ただし、適切に設計されたタイポグラフィは、美的に満足できるものです。白地に黒のHelvetica（または同様のフォント）は、いくつかの単純な活版印刷の機能強化を行っただけで、すばらしいものになります。拡張機能とは、フォントやテキストの色ではなく、フォントサイズ、行の高さ、文字間隔などを微調整することを意味します。
「美しい」タイポグラフィは、欲求不満が常に美学よりも優先されるため、読めない場合は実際には醜いものです。素晴らしいデザインはバランスが取れて調和しています。
UIデザインの多くの側面と同様に、アクセシビリティと美学のバランスをとるためにビジュアルを微調整することは困難ではありません。課題は、設計全体を通して一貫性を維持することです。一貫性により、重要度の異なる要素間に明確な階層が確立されます。これにより、ユーザーはUIをより速く理解し、コンテンツをより効率的にダイジェストすることができます。
読みやすさと読みやすさに関しては、WCAG 2.0 Webコンテンツアクセシビリティガイドラインで定義されている最小許容フォントサイズは18ポイント（または14ポイント太字）です。使用するのに最適なフォントサイズは、フォント自体によって大きく異なりますが、視覚的な階層と、この基本サイズが要約や見出しとどのように区別されるかに注意することが重要です（つまり、 h1>, h2>, h3>).
選択したUIデザインツール（InVision Studioを使用します）を使用して、一連のテキストレイヤーを作成します（T）次に、すべてのサイズを調整して、次のテンプレートと相関させます。
- h1>：44px
- h2>： 33px
- h3>： 22px
- p>： 18px
InVision Studio（および他のすべてのUIデザインツール）では、これは右側のインスペクターパネルを使用してスタイルを調整することによって行われます。
次にフォントを選択しますが、一部のフォントで気付くのは18pxなので注意してください。 p> と22px h3> それほど違いはありません。フォントサイズを微調整するか、見出しに別のフォントを検討するかの2つの選択肢があります。デザインがテキストを多用することが予想される場合は、後者を使用してください。
それを念頭に置いて：
- ビジュアルUIデザインは、多くの場合、直感的なアプローチです。
- 何も決まっていません。すべてが変更される可能性があります
行の高さ
最適な行の高さは、適切なレベルの読みやすさを実現するために、テキストの行の間に十分な間隔があることを保証します。これは「標準」としてますます認識されるようになっています。 GoogleのLighthouseAuditツールは、手動チェック（または、行の高さが最適でないためにテキストにリンクが近すぎる可能性がある場合はフラグ）としても提案します。
繰り返しになりますが、WCAGはこれを支援し、行の高さはフォントサイズの1.5倍でなければならないと宣言しています。したがって、「ライン」（または同様の）の下にあるUIデザインツールで、フォントサイズに少なくとも1.5を掛けるだけです。たとえば、本文が18pxの場合、行の高さは27pxになります（18 * 1.5 – Inspectorで直接数学演算を実行することもできます）。ただし、繰り返しになりますが、注意してください。1.6xの方が適していると感じる場合は、1.6xを使用してください。フォントが異なれば、出力される結果も異なることに注意してください。
設計で実際のデータを使用することを考えるのは時期尚早ですが、少なくとも、ある程度現実的なデータ（lorem ipsumでさえ）を使用する必要があります。 InVision Studioには、タイポグラフィが実際にどのように見えるかを確認するのに役立つネイティブの実際のデータアプリがあります。
段落間隔
段落の間隔は、InVisionStudioのインスペクターを使用して宣言できるスタイルではありません。代わりに、スマートガイド（⌥）を使用して手動でレイヤーを位置合わせする必要があります。行の高さと同様に、魔法の乗数は2倍（フォントサイズの2倍）です。たとえば、フォントサイズが18ピクセルの場合、次のテキストブロックに進む前に、少なくとも36ピクセルのスペースが必要です。文字間隔は少なくとも0.12にする必要があります。
ただし、コンポーネントの作成を開始するまで、これについて心配する必要はありません。
共有スタイル
UIデザインツールがサポートしている場合（InVision Studioはまだサポートしていません）、これらの活版印刷スタイルを「共有スタイル」に変換して、視覚的な一貫性を確保しながら迅速に再利用できるようにすることを検討してください。これは通常、インスペクターを介して実行されます。
02.適切なパレットを選択します
デザインに最適な色を選択することは、美学をはるかに超えています。それは、サイトの階層全体に情報を与えることができます。
UIデザインに関して言えば、色は私たちが手を出すことを楽しむ最初のことの1つですが、ビジュアルデザインに直接飛び込むことは悪いことだと教えられています。これは確かに真実ですが、視覚的な一貫性に関しては、色が他の役割を果たすため、色が最大の関心事になるはずです。
UIデザインの色は非常に効果的ですが、一部のユーザー（実際には多くのユーザー）がさまざまな種類の視覚障害に苦しんでいるため、常に信頼できるとは限りません。そうは言っても、それは必ずしも使用されている特定の色ではなく、色の種類に関するものです。色はこの点で感情的な影響を与えるために使用されるため、ブランディングに関してはこれは当てはまらない可能性がありますが、UIデザインでは、色は意図、意味、そしてもちろん視覚的な階層を伝えるためにも使用されます。
トップツールとリソース01. スターク
StarkプラグインはSketchおよびAdobeXDと互換性があり、キャンバスから直接色のコントラストを確認し、色覚異常をシミュレートするのに役立ちます。 FigmaとInVisionStudioのサポートは間もなく開始されます。
02.色
Colorsは、WCAG 2.0ガイドラインを満たすために適切な量の色のコントラストを持つ90の色の組み合わせのセットであり、それらのいくつかはAAA基準を満たすことさえできます。
03. A11yプロジェクト
A11yプロジェクトは、アクセシビリティに関連するすべてのものの大規模なハブです。リソース、ツール、ヒント、チュートリアルが含まれており、Starkプラグインのメーカーによって作成され、InVisionから資金提供を受けています。
3種類の色
色には意味があるので、色が多すぎないようにすることが重要です。意味が多すぎると、ユーザーが理解して覚えておく必要のあることが多くなります。もちろん、私たちが心配する色の組み合わせも増えます。一般的に、これが推奨される形式です。
- 召喚状の色（メインブランドの色でもあります）
- ニュートラルダークカラー（UI要素またはダークモードに適しています）
- 上記のすべてについて、わずかに明るいバリエーションと暗いバリエーション
これにより、次のことが可能になります。
- ダークモードは簡単に実現できます
- 私たちのCTAの色は他の色と競合することはありません
- どのシナリオでも、強調したり強調したりすることができます
パレットを設定する
選択したUIデザインツールを使用して、色ごとにかなり大きなアートボード（タップA）を1つ作成します（「ブランド」、「ニュートラル/ライト」、「ニュートラル/ダーク」という名前）。次に、各アートボードで、色の暗いバリエーションと明るいバリエーション、および他の色自体を表示する、追加の小さな長方形を作成します。
わずかに明るい部分と暗い部分を、それぞれ10％余分な白と10％余分な黒と見なします。完了したら、各アートボードに活版印刷スタイルのコピーを表示します。これらのテキストレイヤーの色は、ニュートラルダークである必要があるニュートラルライトアートボードを除いて、ニュートラルライトである必要があります。
コントラスト
次に、最適な色のコントラストが得られるかどうか色を確認する必要があります。これを実行できるさまざまなツールがあります。たとえば、SketchおよびAdobe XD用のStarkプラグイン、macOS用のContrastなどですが、コントラストチェッカーやカラーコントラストチェッカーなどのオンラインソリューションでも問題ありません。
各組み合わせの色のコントラストを確認し、それに応じて色を微調整します。使用する色がわからない場合は、ColorSafeの推奨事項を使用してみてください。
03.スタイルのリンクとボタン
サイズ
ボタンとリンクは、タイポグラフィと同じように、いくつかのバリエーションが必要です。結局のところ、すべてのアクションが同じレベルの重要性を持っているわけではなく、前に説明したように、色は信頼性の低いコミュニケーション方法であるため、視覚的階層に影響を与える主な方法にはなりません。サイズもおもちゃにする必要があります。
視覚的アフォーダンステストとは何ですか？視覚的アフォーダンステストは、タップターゲットがクリック可能であるかどうかを判断するために使用されるユーザビリティテストです。スタジオからフリーハンドにデザインを同期します（⌘⇧F）、結果のURLをテスターに送信し、クリック可能と思われる要素を丸で囲んでもらいます。
InVision Studio以外のユーザーもフリーハンドを使用できますが、InVision Studioユーザーは、ユーザーから視覚的なフィードバックを取得する最も高速で効率的な方法であるInVisionStudioからシームレスにデザインをフリーハンドに起動できます。
通常、ボタンのテキストは18px（本文のテキストと同じ）として宣言することをお勧めしますが、ボタン自体のサイズには3つのバリエーションがあります。
- 正常： 高さ44px（角の丸み：5px）
- 大： 高さ54px（角の丸い：10px）
- 特大： 高さ64px（角の丸い：15px）
これにより、色に依存せずに特定のボタンをより重要に見せたり、ボタンをネストしたりすることができます（たとえば、最小限のフォームフィールド内でボタンを使用します）。
深さ
タップターゲットがボタンであるかフォームフィールドであるかに関係なく、シャドウを使用して奥行きを増やし、インタラクティブ性を示唆する必要があります。ボタンとフォームフィールドのすべてのバリエーションに対して単一のシャドウスタイルで問題ありません。
双方向性
各ボタンタイプには、ホバー状態を示すバリエーションが必要です。これにより、ユーザーが試みたことはまったく問題がなく、遅滞なく続行できることがユーザーに明確になります。
状態の作成に関しては、色が変更するのに好まれるスタイルであることが多いため、これは実際には視覚的な一貫性を維持するためのより複雑な側面の1つです。ありがたいことに、これらの状態の変化は比較的微妙な場合があるため、色を少し明るいまたは暗いバリエーションに変更することは問題ありません。それが目的です。これはリンクにも当てはまります。
これに反対することを決定すると、すでに重要な意味を持っている色を使用することになり、ユーザーが混乱するか、別の色を考え出すことになります。二次色を使用することを決定することはまったく問題ありませんが、UI要素ではなくマーケティングビジュアル用に保存する必要があります。少ないほど多く（そして簡単に）なります。
すべてのアートボードに対してこの手順を繰り返すことを忘れないでください。ブランドアートボードにブランドCTAボタンを含めないでください。後で、特定の組み合わせが機能しない場合に何が起こるかについて説明します。
04.コンポーネントを作成します
コンポーネントは大幅な時間の節約になり、すべてのUIデザインツールがこの機能を提供します（たとえば、Sketchではシンボルと呼ばれます）。 Studioでは、コンポーネントを構成する必要のあるすべてのレイヤーを選択し、⌘を使用してコンポーネントを作成できます。K ショートカット。
コンポーネントの使用
ワイヤーフレームの活用ワイヤーフレームは、使い勝手の良いUIを設計するだけでなく、長期的にUIに必要なものを見つけるのにも非常に役立ちます。将来を見据えたようなものです。
これは、大量のコンポーネントを設計したり、考えられるシナリオに備える必要があるという意味ではありませんが、「もしも」という態度をとる必要があるという意味です。
たとえば、ワイヤーフレームが3x1コンポーネントを必要としているが、コンテンツが石に設定されていないことがわかっている場合、少し考えてみると、「このコンポーネントが4x1になるとどうなるでしょうか？」と思うかもしれません。経験則は次のとおりです。すでに存在するユーザーのニーズにのみ対応するように設計しますが、ソリューションを比較的柔軟にするようにします。そうしないと、後で非常に厄介な「設計上の負債」が発生することになります。
これで、左側の[ライブラリ]> [ドキュメント]からキャンバスにドラッグすることで、このコンポーネントを再利用できます。ただし、このワークフローはUIツールによって異なる場合があることに注意してください。
スタイルガイドを作成する（そして最終的にはデザイン自体を作成する）この方法は、モジュラー/カードベースのレイアウトで特にうまく機能しますが、ヘッダー、フッター、ナビゲーションなどの「共通領域」もコンポーネントの優れた候補です。
活版印刷のスタイル、色、ボタンで行ったように、コンポーネントを慎重に整理することを忘れないでください。
ルールを活用する
ブランドのCTAボタンは明らかに他のすべての中で目立つ必要があるため、以前にブランドの色の上にブランドのCTAボタンを使用しないことについて述べました。では、ブランド化されたCTAボタンを使用しながら、ブランド化されたコンポーネントを作成するにはどうすればよいでしょうか。結局のところ、たとえばナビゲーションボタンや単に重要性の低いボタンにニュートラルな暗いボタンを使用している場合、それはオプションではありませんよね？
正しい。したがって、これはコンポーネントを作成する理想的な機会になります。具体的には、見出し+テキスト+ボタンの組み合わせです。ブランドボタンを使用できるようにするために、ニュートラルライトの「カード」背景を作成したことに注目してください。同様に、ニュートラルライトフォームフィールド（メンタルモデルは紙のフォームと歴史的に同義であるため、フォームフィールドは通常白です）はニュートラルライトの背景では見栄えがよくないため、直接または内部のニュートラルダークバックグラウンドでのみ使用できます。ニュートラルなダークコンポーネント。これが、ルールに従い、一貫性を維持しながら、設計を柔軟にする方法です。
ストレステスト
理想的には、設計の堅牢性を確保するための最も迅速で効果的な方法は、ストレステストを行うことです。デザインをテストするということは、残酷であることを意味します。それが要件だったので、X個のナビゲーションアイテムを含むナビゲーションがあるとしましょう。柔軟性を実際に確保するには、ナビゲーションアイテムを追加してこれらの要件を変更するか、実際にスパナを作品に投入するには、他のアイテムよりも視覚的な階層が高いナビゲーションアイテムも追加してみてください。私たちのサイズ、タイポグラフィ、色のルールはこのようなことを可能にしますか？または、最適なユーザビリティを提供するために、別のルールが必要ですか？
ルールを追加することとルールを曲げることには違いがあることに注意してください。エッジケースが多いほど一貫性が低くなるため、ほとんどの場合、使いやすさのためにコンポーネントを単純に再考する方がよいでしょう。
05.文書化して共同作業する
自分自身と、デザインファイルを使用する可能性のある他のデザイナーの両方にとって、デザインファイルを使いやすくするにはどうすればよいですか？ご存知のとおり、信頼性の高い共有クラウドストレージに安全に保存しておくことが重要です。
色
最初のステップは、まだ行っていない場合はすべての色を「ドキュメントの色」見本に保存することです。これにより、デザインに適用する必要があるときに簡単にアクセスできるようになります。これを行うには、インスペクターからカラーチューザーウィジェットを開き、ドロップダウンから[ドキュメントの色]を選択してから、[+]アイコンをクリックして色をスウォッチに追加します。これは、ほとんどのUIツールで同じように機能します。
共有ライブラリ
次に、活版印刷のスタイル、色、ボタン、共通領域、基本コンポーネントを備えたドキュメントを共有ライブラリに変換する必要があります。
基本的に、これは、1つのレイヤーのみで構成されている場合でも、すべての要素がコンポーネントである必要があることを意味します。左側のライブラリサイドバーの[+]ボタンをクリックして、このドキュメントを新しいドキュメントにインポートします。そうです。ドキュメントはライブラリになり、一貫性が保証されたUIを設計するために使用できるようになりました。
InVision Studioは、InVisionの公式のDesign System Managerツールとまだ同期していないという意味で多少制限されていますが、他のデザイナーが時間の経過とともに使用および更新できるように、ライブラリをDropboxに格納するのは簡単です。変更が（ローカルまたはリモートで）行われると、ライブラリを使用するすべてのStudioファイル（ここでも、ローカルまたはリモート）は、色とコンポーネントを更新するかどうかを尋ねます。これは、設計ライブラリがチーム間で維持される方法です。
すべてをリサイクルする視覚的に一貫性のあるユーザーインターフェイスを設計する場合は、すべてを再利用します。ボタンをデザインし、ボタンを使用してボタンコンポーネントを作成してから、
アラートやダイアログなどの他のコンポーネントを作成するためのボタンコンポーネント。
不要なコンポーネントを作成しないでください。ライブラリの構築は継続的な共同作業であることを忘れないでください。一度に完了する必要はなく、自分だけで完了する必要も、これまでに完了する必要もありません。言語を伝えるだけです。
大規模な設計
デザインが拡大するにつれて、それを管理することは難しくなります。特にInVisionのDSMはまだStudioで動作しないため、効率的で保守しやすい状態に保つために、さまざまな調整を行う必要があります。
たとえば、さまざまな要素のユースケースを説明する手段として、テキストレイヤーを使用してライブラリに注釈を付けることができます。活版印刷のスタイルについては、テキストを編集してよりわかりやすくすることもできます（例： "h1> / 1.3 / 44px"）。これはそれを言います h1>sは44pxで、行の高さは1.3である必要があります。
設計ハンドオフ
デザインハンドオフツールは、開発者がアプリやWebサイトを構築できるように、デザインのすべての要素で使用されるさまざまなスタイルを表示します。これらのツールには、スタイルの概要と「ドキュメントの色」見本のコピーが含まれています。開発者は、これらのスタイルをコードとしてコピーすることもできます。これは、書面による設計ドキュメントを作成することにし、コンポーネントのコードスニペット表現を含めたい場合に最適です。
ウェブサイトのトラブルシューティングと管理について心配している場合は、適切なウェブホスティングサービスを利用していることを確認することで役立ちますが、デザインシステムでは、InVisionのデザインハンドオフツールであるInspectを使用することをお勧めします。これを利用するには、InVision Studioの[Publish to InVision]ボタン/アイコンをクリックし、結果のURLを開いてから、タップして検査モードに切り替えます。本当に便利です。
このコンテンツはもともとネットマガジンに掲載されていました。
