＃＃ 説明書

### コアミッション

**背景:** クリエイター（写真家、イラストレーター、デザイナー、アーティストなど）は、作品を紹介し、潜在的なクライアントや雇用主を引き付けるために、プロフェッショナルなオンラインポートフォリオを必要としています。従来のポートフォリオウェブサイトは、作成に費用と時間がかかり、個人の美的特性を反映するようにカスタマイズするのが困難です。このスキルは、視覚的な美しさと機能的な完全性を兼ね備えたポートフォリオウェブサイトを迅速に作成することを目的としています。

**具体的な目標:**

作品表示、カテゴリフィルタリング、作品詳細を含む完全なポートフォリオウェブサイトを生成します。

- 視覚スタイルが、クリエイターの美的感覚や仕事への姿勢と高度に合致している。

- スムーズなインタラクティブ体験を実現し、複数の閲覧方法（グリッド/メイソンリー/カルーセルなど）に対応しています。

- デスクトップとモバイルに対応したレスポンシブデザイン

- オプション：自己紹介、連絡先情報、その他の補助モジュールを含める

**主な制約事項:**

美観こそが競争優位性の核心であり、テンプレート化された平凡なデザインは避けなければならない。

作品のプレゼンテーション方法は、作品そのものを際立たせるべきであり、内容を覆い隠すような過剰なデザインは避けるべきである。

読み込み速度とブラウジング体験はスムーズでなければならない

**正式に作業を開始する前に、まずユーザーに作業サンプルが提供されているかどうかを確認してください。必要な資料が揃っていることを確認してから作業を進めてください。**

### ステップ1：クリエイターのポジショニングと美的嗜好を理解する

**目標:** クリエイターのスタイル、ターゲット層、美的傾向を深く理解し、その後のデザインの明確な方向性を確立する。

**アクション:**

- ユーザーから提供された**"{作品サンプル}"**（画像/動画リンクまたはファイル）を分析し、視覚的なスタイルの特徴（色調、構図、雰囲気、主題など）を特定します。

- ユーザーが提供した**"{美的嗜好の説明}"**を注意深く読み、キーワードを抽出します。

全体的な雰囲気（例：ミニマル、ヴィンテージ、アバンギャルド、温かみのある、クールな、芸術的、商業的など）

- 参考となるスタイル（例：日本のフレッシュスタイル、欧米ファッション、バウハウス、フォーヴィスム、サイバーパンクなど）

- 色の傾向（例：黒／白／グレー、モランディカラー、高彩度、グラデーションなど）

- レイアウトの好み（例：十分な余白、密集したコラージュ、左右対称、不規則など）

ユーザーが**"{参照ウェブサイトリンク}"**を提供した場合、そのウェブサイトを訪問し、デザイン言語、インタラクション方法、レイアウト特性を分析する。

ターゲットとなる顧客層（潜在顧客、美術機関、一般の鑑賞者など）を包括的に評価し、プロ意識と親しみやすさのバランスポイントを決定する。

**出力:** 内部的に、3～5個のコアデザインキーワードと具体的なビジュアル方向性の説明を含む明確な「美的プロファイル」を作成する。

**出力が完了したら、ユーザーに成果物が満足できるものかどうかを確認してください。満足できない場合は、ユーザーが満足するまで、ユーザーからのフィードバックに基づいて調整してください。**

### ステップ2：ポートフォリオ構成と相互作用方法の計画

**目標:** 作業量、種類、およびユーザーのニーズに基づいて、最適な情報アーキテクチャとブラウジング体験を設計する。

**アクション:**

作品数を数え、**"{作品カテゴリー}"**（例：肖像画／風景画／静物画、またはプロジェクト／シリーズ／年別など）に従って分類システムを計画する。

- ホームページのレイアウト方法を決定する：

- **グリッドレイアウト:**均一な作業サイズで、整然とした秩序が求められる場合に適しています

- **石積みレイアウト（滝）：**さまざまな作業サイズに適しており、視覚的な豊かさを強調します。

- **フルスクリーンカルーセル:** 作品数が少なく、それぞれが没入感のある表示を必要とする場合に適しています

- **ハイブリッドレイアウト:** ヒーロー画像とグリッド下部など、複数の方法を組み合わせたレイアウト

- デザインカテゴリのフィルタリング操作：

- カテゴリを切り替えるための上部/サイドバーナビゲーション

タグクラウドのクリックフィルタリング

- ドロップダウンメニューの選択

- 計画作業詳細ページの表示方法：

- ページナビゲーションなしのモーダルオーバーレイ表示

- **個別の詳細ページ**（左右ナビゲーション対応）

- 記載する情報：作品タイトル、制作内容の説明、技術的パラメータ（任意）、関連作品の推薦（任意）

- 補助モジュールを決定する：

- **概要ページ:** 作成者の写真、自己紹介、経歴

- **連絡先モジュール:** メール、ソーシャルメディアリンク、コラボレーション問い合わせフォーム（オプション）

**出力:** 明確なウェブサイト構造図（ページ/モジュール一覧を含む）およびインタラクションフローの説明

### ステップ3：ビジュアルシステムの設計（コアステップ）

**目標:** 美的プロファイルに基づいて、ウェブサイトのすべての要素が全体的な美観に貢献するように、完全なビジュアル言語システムを設計する。

**アクション:**

**カラーシステム設計:**

- **「{美的嗜好}」**と作業色調に基づいて、メインカラー、アクセントカラー、背景色、テキストカラーを決定します。

作品自体がカラフルな場合は、背景は作品を引き立てるためにニュートラルカラー（白、グレー、黒）を使用する必要があります。

作品が白黒または寒色系の場合は、背景色やアクセントカラーを暖色系にすることで奥行きを出すことを検討してください。

- 具体的なカラーコード（16進数）と使用シナリオの説明を提供する

**タイポグラフィシステム設計:**

- スタイルに合ったフォントの組み合わせを選択してください。

- **見出しフォント:** より個性的で、スタイルのトーンを反映させることができます（例：セリフ体はエレガントさを、サンセリフ体はモダンさを、手書き風は温かさを表します）。

- **本文フォント:** 読みやすさを最優先し、通常はすっきりとしたサンセリフ体を選択します。

- 正確なフォント名を指定してください（例：Playfair Display、Helvetica Neue、Noto Serif SCなど）。

- フォントサイズの階層を定義します（例：タイトル 32～48px、サブタイトル 18～24px、本文 14～16px）。

**レイアウトと余白の原則:**

- 美的嗜好に基づいて余白比率を決定する：

- **ミニマリストスタイル:** 余白をたっぷり使い、画面あたりの作品数を少なくする（2～4点）

- **豊富なスタイル:** コンパクトなレイアウトで、画面あたりの作品数が多い（6～12点）

- 余白と間隔に具体的な値を定義します（例：ページ余白80px、作業間隔24px）。

- 配置方法（中央揃え、左揃え、不規則オフセットなど）を決定します。

**ビジュアル詳細デザイン:**

- ワークカードのスタイル：角丸／角尖り、影あり／影なし、枠あり／枠なし

- ホバー効果：ズーム、オーバーレイ、情報表示、色変更など

- トランジションアニメーション：フェードイン/フェードアウト、スライド、スケール速度、イージングカーブ

- ナビゲーションバーのスタイル：固定/非表示、透明/実線、下線/ブロックハイライト

**全体的な雰囲気作り:**

- **芸術的なスタイルの場合:** 繊細な質感、不規則な要素、独創的なタイポグラフィを追加する

- **商業スタイルの場合:** 抑制とプロ意識を保ち、仕事の質と情報の明確さを強調する

- **パーソナルスタイルの場合:** 手描きの要素、ユニークなアイコン、特徴的なインタラクティブなイースターエッグを追加します

**品質基準:**

調和のとれた配色、メインカラーは4色以内

フォントの組み合わせは2～3種類以内とし、明確な階層構造を維持する。

- 視覚要素はスタイルが統一されており、パッチワークのような印象は避けられている。

全体的なデザインには「印象的なポイント」を持たせるべきだが、過度に主役を奪ってはならない。

**出力:** 色、フォント、レイアウト、詳細に関する具体的なパラメータと使用方法が記載された詳細な「ビジュアルデザイン仕様書」。

### ステップ4：作業内容とメタデータの整理

**目標:** ユーザーから提供された作品サンプルを構造化データに整理し、ウェブサイト生成用のコンテンツを準備する。

**アクション:**

各作品について、以下の情報を抽出・整理する：

- **作業ファイル:** 画像URLまたは動画リンク（**"{作業サンプル}"**より）

- **作品タイトル:** 提供されている場合は「{作品タイトル一覧}」を使用し、提供されていない場合は簡潔な説明的なタイトルを生成してください。

- **作業カテゴリ:** **"{作業カテゴリ}"**に従ってラベルを付けます（複数のタグをサポート）

- **作業内容（任意）：** 提供されている場合は「{作業内容}」**を使用し、提供されていない場合は空白のままにするか、簡単な説明を生成してください。

- **作成時間/プロジェクト情報（任意）** ユーザーが提供した場合に追加してください

・作品をカテゴリー別または時系列順に並べ、表示優先順位（ホームページで強調表示する作品）を決定する。

作業量が多い場合（20個以上）、初期読み込みの遅延を避けるために、ページネーションまたは遅延読み込みを提案します。

- 自己紹介文を準備する：

- クリエイター名／ステージネーム（**"{個人情報}"**より）

- 自己紹介文／創作理念（**"{自己紹介文}"**より抜粋。提供されていない場合はユーザーによる補足を推奨）

- 連絡先情報（メールアドレス、Instagram、Behanceなど、**"{連絡先情報}"**より）

**出力:** 必要なすべてのフィールドを含む構造化された作業データリスト（JSONまたはテーブル形式）。

---

###

### ステップ5：ポートフォリオウェブサイトを生成する

**目標:** ビジュアルデザインとコンテンツデータをインタラクティブなウェブサイトに変換する。

**アクション:**

- 以下の内容を含む、詳細なウェブサイト生成手順を記述する。

- **全体構造:** ページレイアウト（ホームページ、概要、お問い合わせなど）とナビゲーション方法

- **ビジュアルシステム:** ステップ3で設計された色、フォント、レイアウト、詳細パラメータを完全に参照します

- **インタラクションロジック:**

- カテゴリフィルタリング機能の実装（タグをクリックしてフィルタリングできます）

- クリック後の作業詳細表示方法（モーダルまたはナビゲーション）

- ホバーエフェクトとアニメーションの詳細

- レスポンシブデザインの適応ルール（モバイル端末でのレイアウト調整方法）

- **コンテンツ作成:** ステップ4の整理された作業データと個人情報を参照

- **パフォーマンスの最適化:** 画像の遅延読み込み、スムーズスクロール、読み込みアニメーションなど。

- 指示書の中で美的要件を明確に指定する。例えば、以下の通り。

「全体的な雰囲気は{美的キーワード}を体現し、テンプレート化されたデザインは避けるべきである」

「ワークカードのホバーエフェクトは、過度に誇張するのではなく、繊細で洗練されたものにするべきです。」

「色の遷移は自然に、アニメーションは滑らかに（300～500ミリ秒のイージングを推奨）」

- generateWebpageツールを呼び出し、以下の引数を渡します。

- **手順:** 上記の詳細な手順

- **参照:** 参照クラフト/マテリアルIDがある場合は、コンテキストを提供するためにそれらを渡します

**品質基準:**

ウェブサイトは正常に読み込まれ、正常に動作します。

- 視覚的な表現はデザイン仕様に準拠しており、明らかなスタイルの誤りはない。

- 作業表示が完了し、カテゴリフィルタリング機能が正常に動作します。

- モバイル対応良好

**出力:** 生成されたポートフォリオウェブサイト（会話中に自動的に表示されます）。

---

## 出力仕様

**成果物：**

1. **個人ポートフォリオウェブサイト（主要成果物）**

- ホームページの作品表示、カテゴリフィルタリング、作品詳細、自己紹介、連絡先情報、その他のモジュールが含まれます

- ユーザーの美的嗜好に高度に合致したビジュアルスタイル

- スムーズな操作性、レスポンシブデザイン

- 直接共有可能なウェブページリンク

2. **ビジュアルデザインの説明（補助）：**

- デザイン思考の簡単な説明：なぜこれらの色、フォント、レイアウトが選ばれたのか

- 主要なデザインパラメータ（カラーコード、フォント名、主要寸法など）を一覧表示する

- ユーザーが設計ロジックを理解したり、将来的な調整を行うのに役立ちます

**フォーマット要件:**

ウェブサイトは対話型のHTMLページで、会話中に自動的に表示されます。

- 設計説明は簡潔なテキスト形式で提示され、主要パラメータリストが含まれる場合があります。

**品質基準:**

- **美的レベル:** ウェブサイトは、テンプレート化された平凡な印象を避け、プロフェッショナルで洗練された、印象的な視覚効果を提供します。

- **機能の完全性:** 作業表示、カテゴリフィルタリング、詳細表示などのコア機能は正常に動作します

- **ユーザーエクスペリエンス:** スムーズな読み込み、自然な操作性、優れたモバイル対応

- **コンテンツの正確性:** すべての作品およびテキスト情報は、省略や誤りなく正確です。

---

## スタイルとプレゼンテーション（コアセクション）

### 美学哲学

ポートフォリオウェブサイトのデザインは、「作品が主役、デザインは補助」という原則に従うべきです。すべてのデザイン要素（色、フォント、レイアウト、アニメーション）は作品のプレゼンテーションに役立ち、作品そのものを覆い隠すものであってはなりません。同時に、デザイン自体にも十分なセンスとディテールが備わり、制作者のプロ意識を反映している必要があります。

### ビジュアルデザインのポイント

**カラーリング:**

背景色は通常、ニュートラルカラー（白、ライトグレー、ダークグレー、黒）を使用し、作業色を主役にする。

アクセントカラー（ボタン、リンク、ハイライトなど）は、作品全体の色調と調和するように控えめに使用する必要があります。

明るすぎる色や、互いに調和しない色の組み合わせは避ける。

- 作業のメインカラーに基づいてインターフェースの色を動的に調整できます（高度なテクニック）。

**フォントの選択:**

デザインセンスのあるフォントを優先するが、過度に派手なものは避ける。

- **英語フォントのおすすめ:** Playfair Display（エレガント）、Montserrat（モダン）、Lora（クラシック）、Raleway（すっきりとした印象）

- **中国語フォントのおすすめ:** Source Han Serif（エレガント）、Source Han Sans（モダン）、LXGW WenKai（温かみのある）、Zcool QingKe HuangYou（力強い）

フォントの組み合わせはコントラストを持たせる（セリフ体＋サンセリフ体、または太字＋細字など）必要がありますが、3種類までとします。

**レイアウトの美観:**

- **ミニマリストスタイル:** 余白をたっぷり使い、画面ごとに2～4作品を中央揃えで配置し、ゆったりとした空間を強調する。

- **雑誌スタイル:** グリッドレイアウト、均一な作業サイズ、整然とした印象で、プロ意識を強調

- **芸術スタイル:** 不規則なレイアウト、多様な作品サイズ、グリッドの破り、創造性の強調

- **没入型スタイル:** 全画面カルーセルで、一度に1つの作品を表示し、インパクトを強調します

スタイルに関わらず、視覚的なバランスとリズムを維持する。

**インタラクションの詳細:**

- **ホバーエフェクトは控えめで洗練されたものであるべきです。**

- 画像のわずかなズーム（スケール：1.05）+半透明のオーバーレイ+タイトルのフェードイン

または：彩度/明るさの変更＋境界線の強調

過度に誇張されたアニメーション（回転、反転、点滅など）は避けてください。

トランジションアニメーションの推奨持続時間は300～500msで、イーズイン・イーズアウト方式を使用してください。

スクロール操作はスムーズであるべきで、奥行き感を出すために視差効果を追加することもできます。

ローディングアニメーションはシンプルで洗練されたものにし、派手なローディングアイコンは避けるべきです。

**レスポンシブデザイン:**

- **デスクトップ:** ワイドスクリーンの利点を最大限に活用し、複数列のグリッド表示や大きな画像表示が可能です。

- **タブレット:** 視覚的なバランスを保ちながら、2～3列に調整してください。

- **モバイル:** シングルカラムまたはダブルカラム、タップ領域を拡大、ナビゲーションを簡素化

- 主要情報（タイトル、ナビゲーション、連絡先）は、すべてのデバイスで明確に表示される必要があります。

### 一般的なスタイルリファレンス

- **ミニマリズム:** 余白をたっぷり使い、黒・白・グレーを基調とした色使い、サンセリフ体フォント、シンプルなアイコン、装飾を一切排除。

- **ジャパニーズフレッシュ:** 柔らかな色調（オフホワイト、ライトウッド、ヘイジーブルー）、手書き風フォント、温かみのある繊細なディテール

- **ファッションエディトリアル:** 高コントラスト、太字フォント、非対称レイアウト、モノクロ写真スタイル

- **ヴィンテージ:** 古びた質感、温かみのある黄色のトーン、セリフ体フォント、粒子感、フィルムのような質感

- **テクノロジー/未来:** 暗い背景、蛍光色のアクセントカラー、幾何学的な形状、ダイナミックな効果、サイバーパンク要素

- **アートギャラリー:** 純白の背景、非常に広い余白、中央に配置された作品展示、最小限のナビゲーション、実際のギャラリー体験をシミュレート

### 避けるべき設計上の落とし穴

- ❌ グラデーション、影、エフェクトの過剰使用は安っぽく見える

- ❌ フォントが多すぎたり、過度に装飾的だったりして、読みやすさに影響が出ている

- ❌ 色の不一致や過度の彩度、視覚疲労

- ❌ レイアウトが混雑しており、作品間のスペースが不足している

- ❌ アニメーションが複雑すぎたり、遅すぎたりして、ユーザー体験に悪影響を与える

- ❌ モバイル対応が不十分、テキストが小さすぎる、またはボタンがタップしにくい

- ❌ 過剰なデザイン、デザインが作品の主役を奪ってしまう