パーソナルポートフォリオサイトビルダー
ユーザーが自身の経歴や作品を明確で再利用可能なポートフォリオウェブサイトに変換できるよう支援します。このリファレンスシステムは実際のマルチページUI/UXポートフォリオに基づいていますが、そのビジュアルアイデンティティはオプションです。ユーザーが選択したスタイルを維持し、リファレンス構造は適合する場合にのみ使用してください。
ワークフロー
- ユーザーのターゲット読者、役割、ポートフォリオの内容、希望するスタック（あれば）、そしてシングルページかマルチページかを確認します。初心者にはシンプルな実装を推奨し、トレードオフを平易な言葉で説明します。
- 架空の経歴やプロジェクトの事実を埋め込む前に、ページマップとセクションの順序を提案します。ストーリーを変えるような不足コンテンツがあれば問い合わせ、それ以外は明確にマークされたプレースホルダーを使用します。
- references/page-patterns.mdで説明されている共有シェルと再利用可能なセクションを構築します。プロジェクトのケーススタディは設定可能にします。ユーザーは関連セクションを含めたり、省略したり、並べ替えたりできます。
- references/motion-catalog.mdから名前付きモーションレシピを提供します。可視動作を平易な言葉で説明し、ユーザーのスタックで選択されたレシピを実装します。デフォルトですべてのモーションを追加せず、階層やインタラクションを明確にするためにモーションを使用します。
- タイポグラフィ、カラー、スペーシング、画像、コンポーネントにわたって、ユーザーのビジュアルディレクションを一貫して適用します。リファレンスサイトのパレットは単なる開始テーマの1つであり、ページ構造を変えずにテーマを変更できます。
- レイアウトをレスポンシブにし、キーボードとタッチでインタラクションを使用できるようにします。動きの軽減設定を尊重し、可視フォーカス状態を提供し、アニメーションが無効でも本質的なコンテンツにアクセスできるようにします。
- 配信したページ/コンポーネントと名前付きモーションを要約し、ユーザーがまだ提供する必要があるコンテンツを指摘します。
再利用可能なデザイン原則
- その人の役割と価値を前面に出し、選ばれた作品を見つけやすくします。
- ホームページは簡潔な導入とゲートウェイに留め、各ケーススタディが独自の物語と証拠を持てるようにします。
- 一貫したセクション見出しパターン、スペーシングスケール、ナビゲーション、フッター、プロジェクトカードシステムを使用します。
- プロジェクトページは、すべてのプロジェクトに同一のコンテンツを強制するのではなく、柔軟なシーケンスを共有できるようにします。
- 動きは控えめで、目的に沿った一貫性のあるものにします。動きの名前は再利用可能な動作を説明するものであり、必須のライブラリや正確な実装を示すものではありません。
- リファレンスのコピー、個人データ、プロジェクトの主張、画像、ソースコードを新しいユーザーのサイトにコピーしないでください。ユーザー自身の素材を要求するか、ラベル付きプレースホルダーを使用します。
リファレンス
- サイトマップの計画時やページ・ケーススタディセクションの構築時には、references/page-patterns.mdを参照してください。
- ユーザーがモーションの選択、命名、実装を希望する場合は、references/motion-catalog.mdを参照してください。