ユーザー目標から始める

効果的なUIデザインは、魅力的なカラーやコンポーネントの集まりではなく、特定のユーザー目標から始まる。マーケティングランディングページの場合、目標はガイドをダウンロードすること、コンサルテーションを予約すること、または無料トライアルを開始することかもしれない。デザインツールを開く前に1つの主要なアクションを書き出し、次に主要なセクションのすべてをそのアクションをサポートするようにする。ページがコースを販売し、ニュースレター購読を集め、同時に5つの関連性のないサービスを宣伝している場合、訪問者は次に何をすべきかを理解するのに苦労する可能性がある。

インターフェースを設計する前に、シンプルなユーザーシナリオを作成する。例えば、初心者向けPythonクラスを検索結果からモバイルで閲覧している訪問者を想定する。彼らはコースの成果を理解し、スケジュールや価格を確認し、過度なスクロールなしに登録ボタンを見つける必要がある。このシナリオは、ページ構造の実践的な優先事項を与え、装飾的要素がコンバージョン目標の注意を奪うのを防ぐ。

明確な視覚的階層を作る

視覚的階層は、ユーザーに最初に何を、次に何を、そして三番目に何を notice するべきかを示す。見出し、補足説明、証拠ポイント、コールトゥアクションを区別するために、サイズ、間隔、コントラスト、位置、重みを使用する。役立つマーケティングページは、デスクトップの42ピクセルの見出しの上に、18ピクセルの説明を置き、続いて明確に区切られたボタンを配置する。正確な値は変わることがあるが、要素間の関係は明らかであるべきだ。

各ビューポートごとに競合する焦点を抑える。もし見出し、ナビゲーション、宣伝バナー、推薦文、そして3つのボタンがすべて強い色を使用している場合、いずれも主要には感じられない。実用的な最初の画面には、見出し1つ、短い段落1つ、主要ボタン1つ、サポート製品画像1つを含むのが良い。小さな画面では、見出しが4～5行に折り返されるかを確認する。コピーを短くする方が、フォントを縮小して読みづらくするより通常は良い。

目的を持つカラーを選ぶ

小さく意図的なカラーパレットは、インターフェースをスキャンしやすく、管理もしやすくします。中立的な背景色、読みやすい文字色、1つの主要ブランドカラー、そして任意の警告色または成功色から始めます。たとえば、マーケティングサイトでは白、チャコール、主要なアクション用の深い緑、そして期間限定のお知らせにはアンバーを使用することがあります。インタラクティブな要素に strongest のアクセントを割り当てると、ユーザーがボタンやリンクを一貫して認識できるようになります。

自分の画面だけを見て色を判断するのではなく、コントラストを確認してください。明るい電話画面の屋外では、デザインファイルでライトグレーのテキストが洗練されて見えても、読みづらくなることがあります。通常の本文テキスト、ボタンラベル、フォームのエラー、無効状態を別々にテストしてください。各組み合わせは異なる挙動を示すことがあります。色を唯一の信号として使わないでください。赤のフォーム境界とエラーメッセージ、アイコン、または明確な文言を組み合わせることで、赤と緑を識別できないユーザーにも同じ情報を届けられます。

デザインの一貫性を保つコンポーネント

再利用可能なコンポーネントは、マーケティングページ全体の一貫性を生み出し、将来の更新に要する時間を削減します。数十の画面を構築する前に、ボタン、見出し、入力、カード、ナビゲーション、間隔の共通スタイルを定義します。ボタンは、あるページで半径12ピクセル、別のページで鋭い長方形の形になるべきではありません。違いに明確な目的がある場合を除き、一定性は訪問者に提案そのものへ集中させ、毎セクションで新しいインターフェースを解釈する必要をなくします。

）コンポーネントの状態を用いて、理想的な外観だけで判断しないこと。登録フォームにはデフォルト、フォーカス、完了、無効、読み込み状態が必要です。主要ボタンは、リクエスト処理中に「Start learning」から読み込みインジケーターへ変化することがありますが、その位置は跳ね上がったりして誤クリックを招くべきではありません。space-1、space-2、color-primary などの命名トークンは、デザインを CSS やフロントエンドフレームワークで実装する際の引き渡しを容易にします。

レイアウトをレスポンシブにする

レスポンシブ UI デザインは、デスクトップページを単に縮小するのではなく、利用可能なスペースに応じて構造、間隔、相互作用を適用します。3カラムの機能セクションは幅1200ピクセルで機能し、タブレット幅付近で2列になり、390ピクセルの電話では縦に積み重なります。表示を維持すべきコンテンツ、折りたたみ後に移動させられる内容、背後に隠れることができるナビゲーション項目を決定します。これらの決定は、レイアウトが壊れる前に行うべきであり、テスト後に要素の重なりが判明したときに行うべきではありません。

少なくとも3つのビューポートサイズ（例: 1440、768、390 ピクセル幅）で現実的なコンテンツをテストしてください。長いコース名、2行のボタンラベル、翻訳済みテキスト、フォームのエラーメッセージを使用してください。短いプレースホルダはレイアウトの問題を隠してしまいます。タップを避けるために、タッチターゲットは快適なサイズで十分に離れて配置してください。視覚的な配置が大幅に変わっても、ユーザーのタスクを維持するレスポンシブ挙動であるべきです。

改善フォームと CTA

フォームはマーケティングの関心と見込み客または購入の最終段階の間でしばしば最終ステップとなるため、各フィールドはその存在意義を正当化するべきです。ウェビナーにメールアドレスと名字だけが必要な場合でも、電話番号、会社規模、職位、完全な住所を求めると完了率が下がる可能性があります。フィールドの上にラベルを配置し、フォーマットが重要になる場合には例を示し、フィールドが任意かどうかを明記します。 「Submit」とラベル付けされたボタンは文脈がほとんど伝わらないため、「Reserve my seat」または「Get the syllabus」の方が結果をより明確に説明します。

何か不具合が発生した時には、即座で具体的なフィードバックをユーザーに提供します。単に「無効な入力」と言う代わりに、メールアドレスが name@example.com の形式を要することを説明し、入力値をそのまま保持します。チェックアウトまたは申請フォームの場合は、「Step 2 of 3」のように進行状況を表示して、ユーザーが残りの作業量を理解できるようにします。送信後には何が起こったのかを確認し、次のステップを説明し、リクエストが受理されたかどうかを訪問者がぼんやりと考えるような曖昧な成功メッセージの表示を避けます。

テストの有用性と転換率

洗練されたインターフェースでも、ユーザーが意図したタスクを完了できなければ失敗します。 「夜のJavaScriptクラスを見つけて体験授業に登録する」という特定のプロンプトで小規模な使いやすさテストを実施します。 参加者がどこで躊躇するか、ラベルを誤読するか、予期しないコントロールを使用するかを観察します。数名の代表的なユーザーを対象とした5分間のセッションで、見えない価格リンクや登録ではなくナビゲーションのように聞こえる行動喚起などの問題を明らかにできます。

明らかな使いやすさの問題を修正した後、より大きな意思決定を検証するために分析と統制実験を使用します。ランディングページのビュー、CTAクリック、フォームの開始、フォームのエラー、送信完了などのイベントを追跡し、総トラフィックだけを見ないようにします。短いフォームと長いフォームのような意味のある変更を1回ずつテストし、ローンチ前に成功指標を定義します。新しいデザインがより多くの有資格リードを生むか、放棄された登録が増えるかによってクリック率が自動的に高くなるわけではありません。

関連記事

さらに読む

ユーザーインターフェース

使いやすさ

A/Bテスト