ibaurr/ワールドクラスのウェブサイトデザイン

ワールドクラスのウェブサイトデザイン は何をしますか？

目的

リサーチ主導のデザインプロセスと丁寧な実装を通じて、差別化された、思慮深く、プロダクション品質のウェブサイトを制作します。

このスキルは以下に適用されます:

• リデザイン: アイデンティティ、ポジショニング、コンテンツ、ルート、および動作機能を、変更する明確な理由がない限り維持しながら、既存のウェブサイトを改善します。
• 新しいウェブサイト: ジェネリックなテンプレートにデフォルトするのではなく、プロダクト、オーディエンス、要件に基づいて独自のクリエイティブディレクションを確立します。

目標はデザインギャラリーを模倣することではありません。優れたクラフトによって、一貫性のある記憶に残る体験を生み出すことです。

中核となる原則

1. 変更前に理解する。 プロダクトや会社が何をするのか、誰にサービスを提供するのか、ウェブサイトで何を達成する必要があるのかを学びます。
2. デザイン前にリサーチする。 関連するリファレンスを検査し、有用なデザイン上の決定を特定します。レイアウトやビジュアルアイデンティティをコピーしてはいけません。
3. 各プロジェクトに独自のアイデンティティを与える。 無関係なプロジェクト間で同じビジュアルディレクション、ヒーローレイアウト、セクションシーケンス、装飾スタイルを再利用してはいけません。
4. 目的を持ってデザインする。 すべてのセクション、アニメーション、画像、インタラクションは、コミュニケーション、ユーザビリティ、またはブランドの個性をサポートする必要があります。
5. 独創性と明快さのバランスをとる。 ウェブサイトを混乱させたり使いにくくしたりすることなく、ビジュアル的に野心的であること。
6. 構築し、検査し、洗練する。 実際の実装が現実的なビューポートサイズでレビューされるまで、デザインは完了しません。

ワークフロー

1. プロジェクトを発見する

ファイルを編集する前に:

• リポジトリ構造、フレームワーク、パッケージマネージャー、依存関係、スクリプト、既存の規約を検査します。
• 可能であれば既存のプロジェクトを実行し、現在レンダリングされているウェブサイトを検査します。
• 関連するすべてのページ、ルート、ナビゲーション、フォーム、コールトゥアクション、インタラクティブな状態をレビューします。
• プロダクト、オーディエンス、ポジショニング、バリュープロポジション、ブランドボイス、コンバージョン目標を理解します。
• 既存のアセット、フォント、色、デザイントークン、コンポーネント、統合を特定します。
• リデザインの場合、既存のウェブサイトとプロジェクト資料を信頼できる情報源として扱います。正当な理由なくプロダクトの主張を発明したり、重要なコンテンツや機能を削除したりしてはいけません。

不可欠な情報が入手できない場合は、控えめな仮定を行い、検証済みの事実と明確に区別します。不足している情報が意味のある進捗を妨げる場合にのみ質問します。

2. ビジュアルリファレンスをリサーチする

ブラウザアクセスまたはウェブリサーチが利用可能な場合、厳選された多様な高品質ウェブサイトを検査します。有用な発見ソースは次のとおりです:

• https://www.awwwards.com/websites/
• https://www.siteinspire.com/
• https://www.siteofsites.co/
• https://curated.design/
• https://land-book.com/
• https://recent.design/
• https://minimal.gallery/
• https://www.landingfolio.com/
• https://saaslandingpage.com/
• https://www.lapa.ninja/
• https://www.framer.com/startups/ycombinator

サムネイルや検索スニペットだけでなく、可能な限り実際のページとインタラクションを検査します。

研究事項:

• アートディレクションとブランド表現。
• 構成、グリッド、スペーシング、ビジュアルリズム。
• タイポグラフィ、階層、読みやすい行長。
• 色、コントラスト、境界線、サーフェス、テクスチャ。
• ヒーローセクションとファーストインプレッション体験。
• ナビゲーションと情報アーキテクチャ。
• プロダクトデモンストレーションとビジュアルストーリーテリング。
• 写真、イラストレーション、3D、その他のアセット。
• モーション、トランジション、インタラクションの詳細。
• レスポンシブ動作。

特定の理由でリファレンスを選択します。各リファレンスの何が有用で、アイデアを現在のプロジェクトにどのように適応できるかを内部的に説明します。別のサイトの特徴的なデザインをそのままコピーしてはいけません。

外部ブラウジングが利用できない場合、これらのギャラリーを検査したと主張してはいけません。利用可能なプロジェクトコンテキストから作業し、必要に応じて制限事項を明記します。

3. クリエイティブディレクションを確立する

実装前に、この特定のブランドとオーディエンスに適した明確なデザインディレクションを形成します。

定義事項:

• 意図する印象と個性。
• ビジュアルコンセプトとアートディレクション。
• タイポグラフィのアプローチと階層。
• カラーパレットとコントラスト戦略。
• レイアウトとグリッドの原則。
• 画像とイラストレーションのディレクション。
• コンポーネントとサーフェスの言語。
• モーションの原則。
• ブランド表現とユーザビリティの関係。

リデザインの場合は、既存のアイデンティティを出発点として使用します。効果的なブランド要素は維持し、弱いまたは一貫性のない実行を改善します。

以下のデフォルトを避ける:

• ジェネリックなSaaSランディングページ構造。
• 動機のないグラデーションとグロー効果。
• 反復的な弁当グリッド。
• 装飾的なブロブとジェネリックなAI画像。
• 過剰なカード、ピル、境界線、シャドウ。
• 恣意的な特大タイポグラフィ。
• 情報を遅延または隠すアニメーション。

これらのパターンは禁止されているわけではありません。プロジェクトに本当に適合する場合にのみ使用します。

4. 体験を計画する

構築する前に、ページまたはサイト構造をマッピングします。

• ユーザーの質問とタスクを優先します。
• 明確な階層と論理的なコンテンツフローを確立します。
• バリュープロポジションをすぐに理解できるようにします。
• 各セクションに明確な目的を与えます。
• 一貫性を失わずにビジュアルバリエーションを使用します。
• コールトゥアクションを明確にし、適切に配置します。
• リデザインでは、重要な既存のルート、コンテンツ、統合、ユーザージャーニーを維持します。

単にページを長くするためにセクションを追加してはいけません。ミニマリズムを達成するためだけに有用なコンテンツを削除してはいけません。

5. デザインと実装

ユーザーが別のプロトタイプを要求しない限り、既存のコードベースで直接作業します。

• プロジェクトのフレームワーク、規約、パッケージマネージャーに従います。
• 既存のコンポーネントを適切な場合に再利用および改善します。
• 繰り返しパターンには再利用可能なコンポーネントとデザイントークンを作成します。
• セマンティックHTMLとアクセシブルなインタラクションパターンを使用します。
• 利用可能な場合は実際のプロジェクトアセットを使用します。お客様の声、顧客ロゴ、統計、受賞歴、製品機能を発明してはいけません。
• 依存関係を意図的に選択し、不要なパッケージを避けます。
• リンク、ボタン、フォーム、メニュー、その他のコントロールが意図したアクションを実行することを確認します。
• レスポンシブ動作は、単にデスクトップレイアウトを縮小するのではなく、意図的なものにします。
• 画像、フォント、読み込み動作を最適化します。

動作中のアプリケーションを静的なモックアップに置き換えてはいけません。統合またはインタラクションが実装およびテストされていない限り、動作すると主張してはいけません。

モーションとスクロールの標準

グローバルなスムーズ/イーズドスクロール

スムーズでイーズドなスクロールは、ウェブサイトプロジェクト全体のデフォルトのプリファレンスです。

流動的で、制御され、自然に感じられる動きを目指します:

• 適切な場合にスムーズ/イーズドスクロールを使用します。
• ページがユーザー入力に応答し続けるように、イージングと持続時間を調整します。
• マウスホイール、トラックパッド、キーボードナビゲーション、タッチ入力をサポートします。
• アンカーナビゲーションをスムーズに保ち、混乱を招くジャンプを避けます。
• 過度なスムージング、人為的なラグ、またはページがユーザーの入力から切り離された感覚を避けます。
• 期待されるブラウザ動作を維持し、不必要なスクロールロックを避けます。
• スティッキー要素、動的コンテンツ、ルート変更でも実装が機能することを確認します。

実装を選択する前に、既存のスタックを検査します。Lenis のようなライブラリーは適切かもしれませんが、必須ではありません。デザインとアクセシビリティの要件を満たす場合は、ネイティブのブラウザ機能を優先します。スクロールライブラリをそれ自体のために追加してはいけません。

prefers-reduced-motion を尊重します。モーションを減らした体験を提供し、アニメーションがなくてもコアコンテンツとナビゲーションが利用可能であることを確認します。

オプションのセクション固有のスクロールテクニック

ストーリーテリングや理解を向上させる場合に、これらを選択的に使用します:

• ピン留めセクション: セクションまたはビジュアルを特定の位置に保持しながら、そのコンテンツを変更します。
• スクロール駆動アニメーション: アニメーションの進行をスクロール位置に結び付けます。
• スティッキーストーリーテリング: 関連するテキストやデータが変化する間、ビジュアルを固定します。
• パララックス: レイヤー化された動きを通じて抑制された奥行きを作成します。
• 水平シーケンス: 垂直スクロールを、直感的な場合に水平方向のコンテンツ移動にマッピングします。
• セクション遷移: 目的のあるトランジションでシーンまたはセクションを接続します。
• マイクロインタラクション: ホバー、フォーカス、プレス、状態変化に対して応答性の高いフィードバックを提供します。

スムーズスクロールとスクロールハイジャックを混同してはいけません。

ページ全体のスクロール動作を制御することは避けます。ユーザーが閉じ込められたと感じさせてはいけません。直感的なスクロール、キーボードアクセス、タッチ動作、ブラウザ履歴、コンテンツに直接到達する機能を維持します。ピン留めまたはスクロール制御セクションを使用する場合は、適切なモバイルおよびモーション低減の代替手段を提供します。

モーションの品質

• モーションは、階層、状態、連続性、またはブランドの個性を伝える必要があります。
• 一貫したタイミングとイージングを使用します。
• すべての要素をアニメーション化することを避けます。
• レイアウトシフトや、読み取りやインタラクションをブロックするアニメーションを避けます。
• パフォーマンス効果のために、適切な場合に transform と opacity を優先します。
• アニメーションが失敗したり無効になったりした場合でも、重要なコンテンツを表示可能で使用可能に保ちます。

品質保証

最初の実装で終了してはいけません。

ツールと環境が許す場合:

1. 既存のスクリプトを使用してプロジェクトを実行します。
2. ブラウザでレンダリングされたウェブサイトを検査します。
3. 関連するすべてのページと重要な状態をレビューします。
4. デスクトップ、タブレット、モバイルのビューポートサイズをテストします。
5. ナビゲーション、リンク、フォーム、メニュー、コールトゥアクションをテストします。
6. マウスホイール、トラックパッド、タッチ、キーボードでスムーズスクロールをテストします。
7. ピン留めセクションとスクロールアニメーションで、トラップ、ジャダー、レイアウトの問題がないか確認します。
8. モーション低減動作を確認します。
9. コンソールエラーと失敗したネットワークアセットを検査します。
10. スペーシング、タイポグラフィ、配置、レスポンシブレイアウト、モーションを洗練します。

ブラウザ検査または特定のテストが利用できない場合は、合格したと主張するのではなく、その旨を伝えます。

完了条件

プロジェクトは以下の場合に準備完了です:

• そのデザインディレクションが実際のブランドとオーディエンスに適合している。
• ビジュアル階層とコンテンツフローが明確である。
• 体験がページ間およびビューポートサイズ間で一貫している。
• グローバルなスムーズ/イーズドスクロールが、コントロールを損なうことなく洗練された感じを与える。
• オプションのモーションテクニックが摩擦ではなく価値を追加する。
• 既存の重要な機能がそのまま残っている。
• インタラクティブ要素が意図したとおりに機能する。
• アクセシビリティとモーション低減動作が考慮されている。
• 実装が可能な限り実行され、視覚的にレビューされている。
• 既知の制限事項が開示されている。

最終応答

以下を要約します:

• 何が変更されたか。
• クリエイティブディレクションと主要なデザイン上の決定。
• 重要なモーションとスクロール動作。
• 更新されたページまたはコンポーネント。
• 実際に実行されたテスト。
• 残っている問題や制限事項。

証拠なしに、受賞に値する、完璧な品質、またはテスト成功を主張してはいけません。