記事：2024/5/27-

1.  ​ヒーローセクションの目的を見失わない
    •   ユーザーがさらにページを読み進め、次のアクションを取るように促す。
    •   問題解決や利益を強調し、会社の素晴らしさやデザインの見栄えを背景に置く。
2.  ​ユーザーの目標を見失わない
    •   デザインはユーザーが必要なものを得ることを助けるべき。
    •   デザインが注意を引きすぎたり、ユーザーの目標から逸れさせてはいけない。
3.  ​クリーンで見やすいデザイン
    •   クリアでナビゲートしやすいホーム画面を設計する。
    •   シンプルで分かりやすい構造と適度な余白。
4.  ​ユーザーの目標を視覚的に魅力的にする
    •   ユーザーの目標を視覚的に捉え、魅力的で生き生きとしたものにする。
    •   ユーザーの期待に応え、予測可能な設計を心がける。
5.  ​特定のトリガーを探す
    •   ユーザーの感情と合理性に基づいて動機づけるトリガーを使用する。
    •   感情的な反応と合理的な評価を考慮。
6.  ​明示的または暗示的な利益を示す
    •   利用するプロダクトやサービスの明確な利点を強調。
    •   ユーザーのステータス向上や成功を視覚的に示す。
7.  ​ユーザーの注意を管理する
    •   ユーザーの視線をコントロールし、最も重要な要素に引き付ける。
    •   支配的要素（主に見えるもの）と焦点ポイント（次に見えるもの）を計画的に配置。
8.  ​関連性のある画像を使用する
    •   ウェブサイトの目的や内容と一致する画像を使用。
    •   不一致な画像は誤解や不信感を生む。
9.  ​短く強力なキャッチフレーズを使用する
    •   ユーザーの興味を引く短く強力なキャッチフレーズを使用。
    •   価値や利益、問題解決を短く伝える。
10. ​微妙なCTA（行動喚起）
•   圧力をかけない友好的で非攻撃的なCTAをデザインする。
•   CTAはデザインやビジネスアイデアの一部として自然に続くものにする。

1.  ​長いフォームは短い複数ページに分ける
    •   長いフォームは理解しづらく疲れるため、関連するフィールドでグループ化し、複数の短いページに分割。
2.  ​入力フィールドのラベルは上に配置する
    •   入力フィールドのラベルをフィールドの上に配置することで、ユーザーが視線を移動させる必要がなく、視覚障害者にも親しみやすい。
3.  ​プレースホルダーテキストではなくヒントテキストを使用する
    •   プレースホルダーテキストは消えてしまいがちで視認性が低いため、ヒントテキストを入力フィールドの上か下に配置する。
4.  ​ネイティブのフォームコントロールを使用する
    •   ネイティブHTML要素はデフォルトでアクセシブルなので、多くのブラウザや支援技術と互換性がある。
5.  ​フォーカス時に要素を強調表示する
    •   キーボードのみでナビゲートするユーザー向けに、フォーカス時に入力フィールドを明確に強調表示。
6.  ​エラーを正しくスタイルし記述する
    •   エラーは視覚で認識されやすく、かつ技術的な用語ではなく平易な言葉で解決方法を示す。
7.  ​関連フィールドをグループ化してラベルを付ける
    •   フィールドセットとレジェンドを使用して、関連するフィールドをグループ化し、スクリーンリーダーが認識できるようにする。
8.  ​指示を提供する
    •   フォーム全体や個々の要素についての説明や指示を明示的に提供し、視覚障害者向けに情報を表示する。
9.  ​必須フィールドを明示する
    •   必須フィールドは明確に表示し、「required」属性や「aria-required」属性を適用して支援技術が認識できるようにする。
10. ​可能であれば、ユーザーにフォームの入力時間制限を設けない
    •   時間制限が必要なら、ユーザーがタイムアウトを無効化したり、延長できるようにし、タイムアウトの警告と制限時間をフォームの開始時に知らせる。