ポートフォリオのサイトテンプレートとデザインプロンプト
見せたい作品と届けたい相手に合わせて選びます。ストーリー、制作会社の概要、作品ギャラリー、独立した活動を比較し、役割と根拠を明確にしてください。
選定デザイン
MeStudio Portfolio & Gallery
ポートフォリオ
Aster Hale Design Portfolio
ポートフォリオ
目的に合うデザインは？
- Kuro Storytelling & Portfolio
- 順を追って製品を紹介する構成です。Kuro は刃をテーマにした物語を使っています。ポートフォリオにする場合は、自分のプロジェクト、役割、根拠に置き換え、動きを抑えた状態でも概要を読めるようにしてください。
- Astraform Creative Agency Portfolio
- 制作会社向け。作品を依頼できるサービスに結び付け、実際のチーム、対応範囲、連絡先を示します。
- MeStudio Portfolio & Gallery
- 画像中心の作品向け。自分の画像、説明、クレジットを用意し、動きを減らしても作品の背景を読めるようにします。
- Aster Hale Design Portfolio
- 独立デザイナー向け。作品、能力、進め方を結び付け、実際の成果物と依頼者の連絡方法を示します。
現在これらのデザインは利用できません。ライブラリをご覧ください。 ライブラリを見る
操作可能なプレビューはログイン不要です。ソース ZIP と提供される対応プロンプトの解除には、ログインと対象のプロンプトパックまたはメンバーシップが必要です。
ソースコードかデザイン要件から始める
HTMLポートフォリオは、プロダクトデザインならAster Hale、写真ならMeStudio、エージェンシーならAstraformを比較できます。Kuroは刀を題材にした製品ストーリーであり、作品集にするには構成の調整が必要です。選ぶ前に各詳細ページでファイル、依存関係、ダウンロード権限を確認してください。
ページの目的に合わせて選ぶ
独自の調整用要件例
これは有料プロンプトとは別にNeruveが作成した架空の要件例です。再現のため英語原文を保持しています。
Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.結果の確認項目
390pxのモバイルとデスクトップで、明確な主見出し、読みやすい文字、動くリンク、見えるキーボードフォーカス、横はみ出しがないことを確認します。デモの主張は確認済みの事実に置き換えます。
参考から自分のサイトへ
- ログインせずにデザインをプレビューできます。プランを選ぶ前に、提供されるソースファイルと対応プロンプトを確認してください。
- 元のプロンプトはそのまま残し、対象者、実際の内容、ブランド、必要な動作を別の要件として追加します。
- 公開前にデスクトップとモバイルで、リンク、キーボード操作、事実関係、動きを減らす設定を確認します。
参考は出発点です。結果はモデル、ツール、バージョンで変わり、ファイルとアクセス権は各項目とプランに従います。