WebサイトやスマホアプリのUIデザインに必要な要素・あると便利な要素がまとめられたリスト -Checklist Design

Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。

ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けていないか確認することができます。

Checklist Design - best UI elements for the best UX practice

Checklist Designではページとコンポーネントに分けて、それぞれデザインのチェック項目が掲載されています。いくつかピックアップしてみました。

ログインページ

Pages: Login

このページに必要な要素

• ロゴ
  完全なロゴ、もしくはシンボルマークのどちらか。
• タイトル
  ユーザーに何をさせたいかに関するコンテキスト。
• アカウントの識別
  ユーザーの一意の識別子。
• パスワード
  自分のアカウントにアクセスを許可するための安全なプライベートコード。
• パスワードのリセット
  ユーザーは自分のパスワードを忘れてしまうかもしれません。
• 登録するためのリンク
  ユーザーがアカウントを持っていない場合は、このページにアクセスします。

オプションの要素

• ソーシャルメディアによるログイン
  Facebook、Google経由でログインできるようにします。操作はワンクリックが理想。
• 紹介文
  ブランドやプロダクトを強調することは決してスタイルが崩れることはありません。
• ブログ記事
  マーケティングチームがまとめた素晴らしいコンテンツを披露する機会です。
• 新機能
  ユーザーがログインする直前に、新機能で興奮を喚起するのに最適な方法です。

お問い合わせページ

Pages: Contact Us

このページに必要な要素

• パーソナリティとブランディング
  ブランドに合った視覚的なキャラクターと声のトーン。
• 連絡方法を明確にする
  電話番号、Eメール、記入用のフォーム。
• ソーシャルメディアのアカウント
  ユーザーはソーシャルプラットフォームを介してより快適に連絡をとることができます。

オプションの要素

• 連絡方法のセグメント化
  サポートと販売の連絡先が異なる場合は、分かるように提示してください。これはユーザーの問題に対して特別なサポートをしていることを示します。
• アクセスが簡単にできる
  ページのヘッダやフッタからアクセスできるようにします。

サインアップページ

Pages: Sign Up

このページに必要な要素

• ロゴ
  完全なロゴ、もしくはシンボルマークのどちらか。
• タイトル
  ユーザーに何をさせたいかに関するコンテキスト。
• 説明文
  アカウントを作成するための基本機能を説明し、それらが達成できることについて期待を説明します。
• アカウントの識別
  ユーザーの一意の識別子。
• パスワードの設定
  自分のアカウントにアクセスすることを可能にする安全なプライベートコード。
• ログインへのリンク
  ユーザーがアカウントを持っている場合は、このページにアクセスします。

オプションの要素

• ソーシャルメディアによるログイン
  Facebook、Google経由でログインできるようにします。操作はワンクリックが理想。
• 現在アクティブな顧客数
  何人のユーザーがそのサービスを使用しているか表示することは、潜在的ユーザーを呼び起こすことができます。
• ユーザーやソーシャルメディアの評判
  ブランドやプロダクトを強調することは決してスタイルが崩れることはありません。
• ブログ記事
  マーケティングチームがまとめた素晴らしいコンテンツを披露する機会です。
• お試し期間と請求時期
  試用期間の長さと請求時期を明確に定義します。

ボタンのコンポーネント

Components: Buttones

このコンポーネントに必要な要素

• ボタンのスタイル
  塗りつぶし、ゴースト、アウトライン、または単なるテキスト。
• ボタンの形状
  パディング、ボーダー、半径などの一貫した形。
• ボタンのコピー
  ボタンをクリックしたときにどうなるかを詳しく説明したテキスト。
• ボタンのカラー
  プライマリーにはブランドカラーを使用し、一次行動と二次行動を明確にする。

ボタンのステータス

• デフォルト
• ホバー
• プレス
• フォーカス
• 無効
• 訪問済み

ナビゲーションのコンポーネント

Components: Navigation

このコンポーネントに必要な要素

• ロゴ
  各ページのトップレベルでブランドを強化する。
• ナビゲーションのレベル
  最も重要なリンクがハイレベルで利用可能であることを確認してください。より深いレベルであるリンクはよりニッチなユーザーにとって関連性があり影響力があります。
• 一貫した場所
  最もアクセスしやすいので、通常はページの上部に配置されていますが、どこに配置しても常に同じ場所に表示します。
• 他のページとの視覚的コントラスト
  ユーザーが他のページにアクセスできる場所を簡単に確認できるようにします。
• Call to action
  ユーザーに実行させたい主要なアクション。
• スマホ対応
  画面サイズの違いは非常に大きく、あなたのレイアウトに影響を与えるので、スマホ版メニューのデザインも検討してください。

オプションの要素

• リンクの横にあるアイコン
  視覚的な手がかりは、テキストの行を分割するのに役立ちます。
• パンくず
  現在のページの上のセクションと現在のレベル・階層を表示する。

検索のコンポーネント

Components: Search

このコンポーネントに必要な要素

• ハイレベルの可視性
  検索機能はどのページでも簡単にアクセスできるはずです。
• 入力フィールド
  ユーザーがテキストの入力を開始するための明確なコンテナ。
• ラベルまたはプレースホルダのテキスト
  検索することである分野の目的を識別します。
• クイックリンク、オートコンプリート、サジェスチョン機能
  ユーザーがテキストを入力している間、これまでに入力したものに基づいて利用可能なリンクとフレーズを提供する。
• 検索送信ボタン
  検索を送信して結果を表示するための可視リンク。

オプションの要素

• 以前の検索
  以前に検索したことを表示すると、同じクエリを頻繁に検索する場合のエクスペリエンスが向上します。

検索のステータス

• デフォルト
• ホバー
• プレス
• フォーカス
• 無効