最初の1本はポートフォリオがちょうどいい

何を作るか迷ったら、まずは自分のポートフォリオサイトから始めるのがおすすめです。続けやすく、作ったものがそのまま成果になる題材だからです。

• 自分のために作るのでモチベーションが続くクライアント案件と違い、締め切りや遠慮なく試せる
• 完成物がそのまま実績になる作ったサイト自体がスキルの証明になる
• デザインの好みや条件を自分が一番よく知っている要件のブレが少なく、判断に迷いにくい
• Cloudflare Pagesで公開すればすぐURLをシェアできる人に見せられる形まで一気に到達できる

作り始める前に載せる内容を決める

いきなりプロンプトを書くより、要件メモを先に用意しておくと、AIへの指示が具体的になり修正も減ります。次の3つを書き出しておきましょう。

ポートフォリオを実装するプロンプト（構成）

まずはサイトの構成を伝えます。セクションごとに何を置くかを、箇条書きで具体的に指定するのがコツです。

Webデザイナーのポートフォリオサイトを作ってください。
【構成】
- ヘッダー：名前、ナビ（Works / About / Contact）
- ファーストビュー：キャッチコピー「デザインで、伝わる
  体験を」、サブテキスト、スクロール誘導
- Works：実績カード3件（画像・タイトル・タグ・説明）
- Skills：スキルアイコン一覧
- About：プロフィール（写真プレースホルダー＋テキスト）
- Contact：メール・SNSリンク
- フッター：コピーライト

つづけてデザイン要件を伝える

同じプロンプトの後半で、見た目のルールと出力ファイルを指定します。カラーやフォントは具体的な値で書くと、イメージ通りに仕上がります。

【デザイン要件】
- シンプル・モダン・余白多め
- メインカラー：#1A1A2E
- アクセント：#E94560
- フォント：Noto Sans JP
- アニメ：スクロール時にフェードイン
- レスポンシブ対応
- ファイル：index.html（CSS・JSをすべて1ファイルに）

作ったサイトを公開する

完成したら、これまで学んだ手順を組み合わせて公開します。GitHubに上げて、Cloudflare Pagesにつなぐだけです。

つまり完成したURLは、ぜひノーコードサロンでシェアしてみましょう。人に見せることが次の一歩につながります。