build-awwwards-quality-sites

Awwwards品質のサイトを構築する

ビジュアルのアイデア、メディア、タイポグラフィ、モーションが一貫したストーリーを伝える、まとまりのある印象的なサイトを構築します。「Awwwards品質」は合格基準として扱い、受賞や評価を主張するものとして扱わないでください。

1. アートディレクションを決める

• 実装前に、ユーザーから提供された参考資料をすべて確認します。抽出するのは、階層、テンポ、コントラスト、画像の見せ方、モーションの原則などの大まかな特徴だけにします。
• 新しいアイデンティティ、レイアウト、コピーの構成、画像、インタラクションの表現を作ります。参考資料のアセット、スクリーンショット、ソースコード、アイデンティティ、コピーを再利用、トレース、または酷似させてはいけません。
• ユーザーが希望する場合、または関連性があり利用可能な場合に限り、Aura.build のトップアセット画像を使用します。アセットライブラリではなく、大まかなインスピレーションとして扱います。
• インストール済みの互換性があるウェブデザインスキルを少なくとも1つ選び、その名前を明記します。関連性のある最小限のスキルセットに従い、無関係な美的システムを組み合わせないでください。
• コーディング前に、ビジュアルの主題、ヒーローの主役となるアセット、タイポグラフィの階層、カラーパレット、セクションの順序、モーションの展開、選択したスムーススクロールエンジン、Three.js を使うかどうか、アセットの出典計画を簡潔にまとめます。

2. 誠実なアセットシステムを構築する

• コンセプトを大きく向上させる場合は、オリジナルのヒーロー画像やプロジェクト画像を生成します。より適したライセンス済みメディアがある場合はそれを使い、出典をサイトのソースコードに記載します。
• モデルが作成した SVG、CSS、canvas のパスでイラストを描いてはいけません。イラスト要素には、オリジナルの生成画像、または適切なライセンスを得た透明 PNG の切り抜きを使用します。シンプルなオリジナルのブランドマーク、インターフェースアイコン、データグラフィック、妥当な理由のある Three.js シェーダーキャンバスは使用できます。
• アバターにはすべて写真を使います。提供された写真、または適切なライセンスを得た写真を優先します。イニシャル、イラストの顔、顔のないシルエット、実在の顧客、スタッフ、推薦者として見せる生成人物は使用しないでください。
• インターフェースのシンボルには Iconify 経由で Solar アイコンを使います。Iconify SVG Logos は、実在企業のマークを正当かつ事実に即した文脈で使う場合に限ります。Logo Ipsum は、架空ブランドのサンプルであることを明示する場合に限って使用し、顧客実績の証明として使ってはいけません。誠実な実績を示せない場合は、ロゴ一覧を省略します。
• アスペクト比、トリミング方法、代替テキスト、読み込み動作、メディアがない場合のフォールバックを意図的に設計します。ありきたりなストック画像、コピーされたモックアップ、透かし、ストーリー上の役割がない装飾用メディアは避けます。

3. ヒーローを構成する

• 最初のビューポートを、サイトで最も印象的なオリジナルの演出にします。明確なメッセージと CTA を、オリジナル画像、動画、ポインターに反応するインタラクション、または妥当な理由のある Three.js シーンと組み合わせます。
• ヒーロー向けに、統一感のある GSAP のイントロシーケンスを作成します。アニメーションが完了する前でも、ナビゲーション、主要メッセージ、CTA を読み取れて操作できる状態に保ちます。
• ポインターエフェクトは追加的なものにします。タッチ、キーボード、粗いポインター、ウィンドウのぼかし、表示状態の変化に対応し、インターフェースが中途半端な状態に取り残されないようにします。
• JavaScript、メディア再生、WebGL、モーションが利用できない場合でも完成した状態を保てる、静的な最初のフレームを設計します。

4. モーションシステムを構築する

• GSAP を主要なアニメーションシステムとして使用します。
• Lenis と Locomotive Scroll を評価したうえで、サイト専用のスムーズスクロールエンジンとしてどちらか一方だけを選択します。両方をインストールしたり、初期化したりしないでください。選択したエンジンを GSAP ScrollTrigger に正しく接続し、メディアやフォントの変更後に測定値を更新して、クリーンアップ時に破棄します。
• prefers-reduced-motion: reduce の場合は、スムーズスクロールとスクラブ式タイムラインを無効にします。アニメーションを短縮するだけでなく、最終状態をすぐに表示します。
• ページをセクションごとに構成します。主要な見出しは控えめなスタッガーを付けて単語ごとに表示し、その後に補足コピーとメディアを順番に表示します。
• スタッガー表示するテキストも、アクセシビリティ対応の名前が分割されないようにします。装飾目的で分割した単語は支援技術から隠し、リンクや意味のあるインラインマークアップは分割せず、JavaScript がなくても分割前のコンテンツを表示します。
• シンプルなホバー、フォーカス、タップの状態には CSS を使用します。正当な理由があるスクラブ式またはピン留め式のシーケンスに限って ScrollTrigger を使用し、同じプロパティを複数のシステムで制御しないでください。

5. 目的がある場合にのみ Three.js を追加する

• 空間的な奥行き、テクスチャの遷移、変位、またはポインターへの反応がアートディレクションを実質的に支える場合は、Three.js とカスタム WebGL シェーダーを使用します。背景を飾るだけのノイズとしてシェーダーを追加しないでください。
• キャンバスの役割を明確にひとつに絞り、セマンティックコンテンツやコントロールより目立たないようにします。
• デバイスのピクセル比に上限を設定し、画面外またはドキュメントが非表示のときはレンダリングを一時停止し、ポインター入力を制限して、フレームごとのメモリ割り当てを避けます。
• 静的なポスターを用意し、モーション低減設定が有効な場合や WebGL が動作しない場合は、キャンバスを完全に置き換えます。
• アニメーションフレーム、オブザーバー、イベントリスナー、レンダーターゲット、テクスチャ、ジオメトリ、マテリアル、レンダラーを破棄します。コンテキストが失われてもページコンテンツが壊れないように処理します。

6. 品質基準を満たす

• ヒーローセクションだけのコンセプトではなく、セマンティクスを備えた完全なページを構築します。レスポンシブなナビゲーション、一貫したセクションの流れ、具体的なコンバージョンコンテンツ、最終 CTA、フッター、必要に応じて堅牢なフォームやコントロールの状態、視認できるキーボードフォーカスを含めます。
• 独自のアートディレクションに基づくアイデア、印象に残るファーストビュー、規律あるタイポグラフィと余白、意図的な画像のトリミング、作り込まれたトランジション、洗練されたホバー、フォーカス、アクティブ、読み込み中、無効、エラー、タッチ、モーション低減時の挙動を必須とします。
• レスポンシブメディア、ファーストビューより下の遅延読み込み、変形の適切な制限、ぼかしの抑制、キャンバス処理の上限設定、画面外コンテンツの継続的なアニメーションの排除により、パフォーマンスを維持します。
• 汎用的なグラデーションの塊、装飾的な弁当グリッド、あらゆる場所へのガラス表現、既成コンポーネントのようなレイアウト、偽の推薦文、架空の提携、ロゴを並べただけの演出、物語上の役割がないモーションは避けます。
• ユーザーが検証可能な証拠を提示していない限り、成果物を受賞作や Awwwards 認定作品と表現しないでください。

7. 引き渡し前に検証する

• 本番ビルドを実行し、すべてのエラーを修正します。
• ブラウザーでの検証が求められている場合、または問題の解決に必要な場合は、デスクトップとモバイルのサイズでページを確認します。
• キーボードナビゲーション、視認可能なフォーカス、タッチ操作、JavaScript が利用できない場合のコンテンツ、静的メディアのフォールバック、prefers-reduced-motion の挙動を検証します。
• インストールおよび初期化されているスムーズスクロールエンジンがひとつだけであること、ScrollTrigger との連携が正しいこと、すべてのアニメーションおよび WebGL リソースがクリーンアップされることを確認します。
• レンダリングされたコンテンツとソースを検索し、プレースホルダー、参照元のアイデンティティの転用、裏付けのない主張、誤解を招くロゴ、クレジットのないメディア、アクセシビリティに配慮されていない分割テキストがないか確認します。
• 選択したウェブデザインスキル、アセットの出典、モーションスタック、Three.js の採用判断、実施した検証、残っている制約を報告します。