アプリケーション設計のベストプラクティス

適切に設計された Workshop アプリケーションのインターフェースは、ユーザーの操作を導き、注意を維持することで、ワークフローを効率的、効果的、かつ論理的に実行できるようにします。アプリケーションを作成する際は、以下の設計のベストプラクティスを確認し、視覚的なレイアウトや構成がすべてのユーザーにとって直感的に理解できるものになるようにしてください。

基本的な設計原則

• アプリケーションを直感的に使えるようにするには、コンポーネントの複雑さよりもわかりやすさを優先する必要があります。使いやすいインターフェースを構築して、アプリケーションの利用定着を促す方法を確認してください。
• 製品の統一性と一貫性を確保するには、すべてのアプリケーションでまとまりのある体験を作り、ユーザーが統一されたツール群の中で作業していると感じられるようにする必要があります。統一された Workshop アプリケーションを構築する方法を確認してください。

直感的なユーザーインターフェースを作成する

Workshop アプリケーションの視覚的階層では、ユーザーが操作すべき領域に注意を向け、ワークフローを効果的かつ効率的に進められるように、インターフェースのコンポーネントを整理する必要があります。明確で論理的な視覚的階層がなく、情報過多または過密なアプリケーション設計は、ユーザーを混乱させ、アプリケーションの利用定着を妨げ、ワークフローを支援するうえでの有用性を制限する可能性があります。

情報過多を避けるには、画面ごとのタスク、通知、選択肢など、対応や操作が必要な項目の総数を制限します。また、アプリケーションの最上位のナビゲーションに表示する主要なアクションは、5個以下に抑える必要があります。

過密状態を避けるには、十分な余白を確保します。理想的には、画面の30～40パーセントを余白にします。また、1つの表示内に表示されるコンポーネントの数は、ボタン、パネル、ウィジェットを含めて10個以下に制限する必要があります。

アプリケーションの視覚的階層とレイアウトを理解しやすく、使いやすいものにするために、以下のセクションのガイダンスに従ってください。

論理的なレイアウト構造を設定する

アプリケーションのレイアウトは、F 字型の階層的な設計パターンに従い、自然な視線の動きを支え、設定とコンテンツのセクションを明確に区別する必要があります。アプリケーション設計における F 字型の階層は、ユーザーが「F」の形に沿ってコンテンツを読み取る一般的な読み方に対応しています。この読み方では、アプリケーションの左上から水平方向に目を通し、セクションの左側を垂直方向に読み進めます。

一般に、アプリケーションでは、自然な読み方と直線的な視線の動きを促すために、以下のレイアウトパターンを活用する必要があります。

• グリッド形式： 情報は左から右へ水平方向に流れます。

• 列形式： 情報は垂直方向に流れ、重要なナビゲーション要素は各パネルの上部に配置されます。

• 行と列の組み合わせ： 左端のセクションにフィルターを固定し、アプリケーションのコンテンツが右へ流れるようにします。メトリックカードウィジェットを使用して、アプリケーション内の主要なデータを全体的に把握できるようにします。

Workshop では、アプリケーションに新しいウィジェットを追加した後、レイアウトを設定を選択します。既存のアプリケーションのレイアウトを編集するには、アプリケーションのキャンバスでセクションを選択し、右パネルのレイアウトセクションまでスクロールします。Workshop のレイアウトについて詳しくはこちら。

内容が伝わるヘッダーを記述する

• ページヘッダーを使用して、アプリケーション全体の目的やコンテキストを明確にします。この主要な見出しは最も大きな文字で表示されるため、ほかのすべてのコンテンツはこの見出しに関連するものにする必要があります。
• セクションヘッダーを使用して、ページ内の入れ子になったコンテンツをグループ化し、整理します。セクションヘッダーは2番目に大きな文字で表示されます。
• 必要に応じて、小見出しを使用し、表示される説明としてセクションヘッダーのコンテキストを補足します。

見出しの説明は簡潔に記述し、初めて利用するユーザーがアプリケーション内でのセクションの目的を理解できるようにします。セクションに新しいヘッダーを追加するには、セクションパネルでセクションのヘッダーをオンにします。

セクションの間隔と配置を設定する

セクションに適切な間隔を設けて配置を揃えると、ユーザーにとって読みやすくなり、認知負荷が軽減されます。また、関連するアプリケーション要素の間に論理的な視覚上のつながりが生まれ、複雑な情報の中でもユーザーの視線を導けます。

ほとんどの場合、パディング（内側の余白）にはコンパクトを使用する必要がありますが、Workshop ではパディングコントロールをカスタマイズできます。さまざまなアプリケーションのレイアウト形式で安定して使えるカスタマイズは、高さまたは幅を80パーセントにし、間隔を16pxにしたパディングです。Workshop で利用可能なパディングコントロールについて詳しくはこちら。

アプリケーションのセクションを整理しやすくするには、コンテナを使用してセクション間の異なるコンテンツグループを分け、区切り線を使用してセクション内の関連するコンテンツを分ける必要があります。グループ間にパディングを追加して、ユーザーがこの区分を理解しやすくします。

パディングと区切り線を組み合わせて、セクション内のグループ化を行います。

以下のアプリケーションの例では、パディングと背景色の設定によって Claims セクションが強調表示されています。一方、グループセクションでは、選択すると表示できるさまざまなオブジェクトリストが区別されています。

境界線とエレベーションのスタイルを適用する

境界線を使用し、エレベーションのレベルを設定して、重要なセクションを強調表示し、空間的に区分します。境界線のスタイルを設定するときは、ドロップシャドウを使用して浮き上がって見えるようにし、そのコンテンツが重要であることをユーザーに伝える必要があります。重要度が低いことを示すには、内側の影を使用します。背景を設定するときは、明るい色を使用して重要性を示し、フィルターや折りたたみ可能なパネルなど、重要度の低い項目には暗い色を使用します。

視覚的階層を維持し、ユーザーがアプリケーションの最も重要な要素を区別できるようにするため、影付きのパディングスタイルは1ページにつき1回だけ適用する必要があります。たとえば、ユーザーが操作を行うメインコンテンツまたは主要なモーダルだけに、外側のドロップシャドウの境界線スタイルを使用すると、アプリケーションのその領域にユーザーの注意を向けられます。

統一感のあるアプリケーションを構築する

統一感のあるアプリケーションは、次の3つのアーキテクチャ設計原則に従います。

• ランディングページまたはホームページにすべてのナビゲーションを集約し、カスタムサムネイルを使ってアプリケーションの埋め込みモジュールの概要を示します。これにより、ユーザーは必要なものにすばやくアクセスできます。
• 主要ヘッダーによって、埋め込みモジュール全体でロゴのデザインとグローバル設定のコントロールを統一します。ロゴはページの左上、グローバル設定のコントロールは右上に配置されることがほとんどです。
• 標準化されたレイアウト要素によって、ユーザーが頻繁に操作するコンポーネントのレイアウトを統一します。たとえば、絞り込みウィジェットをページの左側に配置し、タブ、メトリックカード、ヘッダー、ボタンなどのほかのインターフェースコンポーネントにも同じスタイルを適用します。

ページのスクロール、オーバーレイ、タイポグラフィに関する以下のベストプラクティスも考慮してください。

スクロールのベストプラクティス

• ページ全体のスクロールが必要な場合を除き、横方向のスクロールはできるだけ避けます。代わりに、オブジェクトテーブルウィジェットを設定するときに、列幅をテーブルの横幅に合わせるを切り替えます。

• ナビゲーションバーとタブを主要ヘッダーに含め、アプリケーション内でコンテンツを含むセクションだけをユーザーがスクロールできるようにしてください。これにより、ナビゲーションとタブが固定され、ユーザーの画面に表示され続けます。

• セクションでスクロールを有効にするときは、ボタンなどのすべてのタッチ対象が少なくとも 30px あることを確認してください。

オーバーレイの使用に関するベストプラクティス

• アンケートへの回答など、一時的なインタラクションや補助的なインタラクションにはオーバーレイを使用します。
• ユーザーが複数の情報レイヤーを同時に表示する必要がある分析セクションでは、オーバーレイを避けます。
• 1つまたは複数のアクションを実行する前にユーザーがオブジェクトを選択することを考慮して、オーバーレイのワークフローを設計します。

ダイアログが表示されている間、ユーザーは背景のコンテンツをスクロールしたり操作したりできません。データを入力する際に長いテキストを参照する必要がある場合は、コンテンツの横に入力欄を配置するか、操作を妨げない領域に必要なコンテンツを再掲します。

Workshop のオーバーレイについて詳しくはこちら。

モジュールのタイポグラフィを設定する

モジュール全体で使用するフォントを設定するには、設定タブを選択し、モジュールの外観セクションを開きます。タイポグラフィドロップダウンには、3種類の選択肢があります。

• デフォルト： ほかの書体が選択されていない場合は、Foundry のデフォルトフォントである Source Sans Pro が使用されます。
• システムフォント： Arial、Georgia、Helvetica、Times New Roman、Verdana など、広く利用可能な一般的なフォントです。これらのフォントはほとんどのデバイスにインストールされているため、一貫した表示になります。
• カスタム書体： 名前で指定したフォントでテキストを表示します。

カスタム書体を選択した場合は、カスタム書体名フィールドにフォント名を入力します。Workshop は、閲覧者のデバイスにそのフォントがすでにインストールされている場合にのみ、そのフォントを適用します。フォントがインストールされていない場合は、Foundry のデフォルトフォントにフォールバックします。このため、カスタム書体の表示は、ユーザーのシステムで利用可能なフォントによって異なる場合があります。カスタムフォントファイルを Foundry にアップロードしたり保存したりする方法はありません。そのため、すべてのユーザーに一貫した表示を保証するには、カスタム書体ではなくシステムフォントの使用を推奨します。

デザインを検証する

アプリケーションにセクションやウィジェットを追加する際には、以下の検証方法を実践することを推奨します。

• 定期的に目を細めてインターフェースを見て、想定される用途に基づいて最も重要な要素を見極めます。これにより、視覚的な階層が効果的かどうかを判断できます。
• 実際のユーザーワークフローに密接に沿って設計し、インターフェースの各セクションでユーザーが何を達成したいのかを常に把握します。
• すべての要素が現在の場所に表示されている必要があるかどうかを検証します。必要がない場合は、ユーザーがその要素を操作してアクションを実行する必要があるときにのみ表示します。

Workshop のコンポーネント別のデザインのベストプラクティスについて詳しくはこちら。