on:2019年4月2日sponsorsWebサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けていないか確認することができます。Designではページとコンポーネントに分けて、それぞれデザインのチェック項目が掲載されています。いくつかピックアップしてみました。Loginこのページに必要な要素ロゴ完全なロゴ、もしくはシンボルマークのどちらか。タイトルユーザーに何をさせたいかに関するコンテキスト。アカウントの識別ユーザーの一意の識別子。パスワード自分のアカウントにアクセスを許可するための安全なプライベートコード。パスワードのリセットユーザーは自分のパスワードを忘れてしまうかもしれません。登録するためのリンクユーザーがアカウントを持っていない場合は、このページにアクセスします。オプションの要素ソーシャルメディアによるログインFacebook、Google経由でログインできるようにします。操作はワンクリックが理想。紹介文ブランドやプロダクトを強調することは決してスタイルが崩れることはありません。ブログ記事マーケティングチームがまとめた素晴らしいコンテンツを披露する機会です。新機能ユーザーがログインする直前に、新機能で興奮を喚起するのに最適な方法です。Usこのページに必要な要素パーソナリティとブランディングブランドに合った視覚的なキャラクターと声のトーン。連絡方法を明確にする電話番号、Eメール、記入用のフォーム。ソーシャルメディアのアカウントユーザーはソーシャルプラットフォームを介してより快適に連絡をとることができます。連絡方法のセグメント化サポートと販売の連絡先が異なる場合は、分かるように提示してください。これはユーザーの問題に対して特別なサポートをしていることを示します。アクセスが簡単にできるページのヘッダやフッタからアクセスできるようにします。Upこのページに必要な要素ロゴ完全なロゴ、もしくはシンボルマークのどちらか。タイトルユーザーに何をさせたいかに関するコンテキスト。説明文アカウントを作成するための基本機能を説明し、それらが達成できることについて期待を説明します。アカウントの識別ユーザーの一意の識別子。自分のアカウントにアクセスすることを可能にする安全なプライベートコード。ログインへのリンクユーザーがアカウントを持っている場合は、このページにアクセスします。オプションの要素ソーシャルメディアによるログインFacebook、Google経由でログインできるようにします。操作はワンクリックが理想。何人のユーザーがそのサービスを使用しているか表示することは、潜在的ユーザーを呼び起こすことができます。ユーザーやソーシャルメディアの評判ブランドやプロダクトを強調することは決してスタイルが崩れることはありません。ブログ記事マーケティングチームがまとめた素晴らしいコンテンツを披露する機会です。試用期間の長さと請求時期を明確に定義します。Buttonesこのコンポーネントに必要な要素ボタンのスタイル塗りつぶし、ゴースト、アウトライン、または単なるテキスト。ボタンの形状パディング、ボーダー、半径などの一貫した形。ボタンのコピーボタンをクリックしたときにどうなるかを詳しく説明したテキスト。ボタンのカラープライマリーにはブランドカラーを使用し、一次行動と二次行動を明確にする。Navigationこのコンポーネントに必要な要素ロゴ各ページのトップレベルでブランドを強化する。ナビゲーションのレベル最も重要なリンクがハイレベルで利用可能であることを確認してください。深いレベルであるリンクはよりニッチなユーザーにとって関連性があり影響力があります。アクセスしやすいので、通常はページの上部に配置されていますが、どこに配置しても常に同じ場所に表示します。他のページとの視覚的コントラストユーザーが他のページにアクセスできる場所を簡単に確認できるようにします。actionユーザーに実行させたい主要なアクション。画面サイズの違いは非常に大きく、あなたのレイアウトに影響を与えるので、スマホ版メニューのデザインも検討してください。オプションの要素リンクの横にあるアイコン視覚的な手がかりは、テキストの行を分割するのに役立ちます。パンくず現在のページの上のセクションと現在のレベル・階層を表示する。検索機能はどのページでも簡単にアクセスできるはずです。入力フィールドユーザーがテキストの入力を開始するための明確なコンテナ。ラベルまたはプレースホルダのテキスト検索することである分野の目的を識別します。クイックリンク、オートコンプリート、サジェスチョン機能ユーザーがテキストを入力している間、これまでに入力したものに基づいて利用可能なリンクとフレーズを提供する。検索送信ボタン検索を送信して結果を表示するための可視リンク。以前に検索したことを表示すると、同じクエリを頻繁に検索する場合のエクスペリエンスが向上します。