AIでポートフォリオサイトを作る方法

ビルダーを開く前に、最低限の範囲を書き出しておきましょう。個人ポートフォリオは多くのページを必要としませんが、明確な内容は必要です。

一般的な構成は次のとおりです。

• 氏名、役割、短い自己紹介、注目プロジェクトを載せたホームページ
• スクリーンショット、要約、使用ツール、成果を含むプロジェクトページまたはプロジェクトセクション
• 経歴、スキル、仕事の進め方を載せたAboutページ
• メールアドレス、SNSリンク、必要ならフォームを載せたお問い合わせセクション

あわせて、サイトの対象読者も決めておきます。

• 仕事の実績を素早く確認したい採用担当者
• 自分の案件に合う人かを見たいクライアント
• 進め方やセンスを見たい協業相手

そのうえで、すでに持っている素材を整理します。

• プロジェクト名
• 1プロジェクトにつき1〜3枚のスクリーンショット
• 短い説明文
• 公開中の作品やGitHubへのリンク
• 自己紹介文と顔写真

最初にこれをやっておけば、AIは十分な文脈を得られるので、ありがちなテンプレートではなく、すぐに使えるものを最初の試行で作りやすくなります。

Moremadeでは、サイトを自然な言葉で説明します。AIエージェントがソースコードを書き、ライブプレビューを出し、その後もチャットで変更を続けられます。

最初のプロンプトには次を含めましょう。

• どんな種類のポートフォリオか
• 必要なページやセクション
• 含める内容
• ビジュアルの方向性
• お問い合わせフォームやリンクなどの機能要件

具体的に書くのが大事です。「ポートフォリオを作って」だけだと、あとで修正する手間が増えます。

最初のプロンプト例:

フリーランスのプロダクトデザイナー Maya Chen のための個人ポートフォリオサイトを作ってください。クリーンでミニマルなレイアウトに、強いタイポグラフィ、落ち着いた色味、ゆったりした余白を使ってください。短いヒーロー紹介、注目プロジェクト、Aboutセクション、Testimonialsのプレースホルダー、お問い合わせセクションを含むホームページを作成してください。さらに、4つのケーススタディカードを載せたProjectsページを追加してください。各プロジェクトには、タイトル、1行の要約、使用ツール、詳細を見るボタンを表示してください。ナビゲーション、フッター、モバイル対応レイアウト、お問い合わせフォームも含めてください。ReactとTailwindのスタイル規約に従い、派手さよりもプロフェッショナルさを感じるサイトにしてください。

シンプルなポートフォリオなら、まずは核となるページと無理のない既定レイアウトを頼むのがおすすめです。見た目の細部は、プレビューを見てから詰めれば十分です。

最初の版が生成されたら、ライブプレビューを丁寧に確認します。まずはコンテンツの構成、その次に見た目の仕上がりを見ましょう。

次の点をチェックしてください。

• 最初の画面で階層がわかりやすいか
• プロジェクトが見やすいか
• Aboutセクションの文章が十分に個人的か
• ボタン、余白、文字サイズが一貫しているか
• 埋め草のようなテキストを差し替える必要がないか

Moremadeではチャットで変更でき、ビジュアルインスペクターを使って要素を指して編集することもできます。1回につき1つの問題に絞った短い追加プロンプトを使いましょう。

使いやすい例を3つ挙げます。

• 「ヒーローセクションの高さを下げて、注目プロジェクトをもう少し上に移動し、導入文をもっと簡潔にしてください。」
• 「プロジェクトカードをケーススタディのプレビューにして、上部にサムネイル、使用ツールのタグ、要約の下に成果を1行追加してください。」
• 「落ち着いたニュートラル系の配色にして、本文のコントラストを上げ、モバイルではお問い合わせフォームのボタンを全幅にしてください。」

最初の構成が明らかに間違っていない限り、いきなり全面的な再設計を求めないほうが、たいてい早く進みます。

多くのポートフォリオには、データベース、サインイン、決済は必要ありません。最初の版をシンプルに保つと、完成まで進めやすくなります。

Supabase を使うのは、ポートフォリオに次のような機能が必要な場合だけにしましょう。

• 送信内容を保存するお問い合わせフォーム
• サインインの裏に置く限定コンテンツ
• データからプロジェクト項目を更新できる、小さなCMSのような構成

Stripe を使うのは、ポートフォリオで次のようなものを販売する場合だけです。

• 有料のデザインテンプレート
• コンサルティングセッション
• デジタルダウンロード

Moremadeには、Supabase と Stripe の組み込みコネクタがあり、Resend や SendGrid のようなメールプロバイダにも対応しています。これらを追加するなら、要件をはっきり書いてください。

例:

• 「お問い合わせフォームをSupabaseに接続し、name、email、message を保存してください。」
• 「私が設定した価格で、60分のポートフォリオレビューセッション用のStripe決済ページを追加してください。」

プロフェッショナルな個人サイトを公開するのが目的なら、実際に必要になるまで、こうした連携は後回しにしましょう。

ポートフォリオは、メールやSNSのリンクから見られて、まずスマートフォンで確認されることがよくあります。モバイルの問題は、せっかくの良い仕事を雑に見せてしまう、最も簡単な要因のひとつです。

プレビューでは次を確認してください。

• ナビゲーションメニューの挙動
• ヒーローテキストの改行
• プロジェクトカードの余白
• 画像のトリミング
• ボタンサイズとタップしやすさ
• お問い合わせフォームの各項目の間隔
• フッターリンクの読みやすさ

「モバイルをもっと良くして」ではなく、具体的に修正を依頼しましょう。

例:

• 「モバイル幅未満の画面では、ヒーロー内容を縦に並べ、見出しサイズを1段階小さくしてください。」
• 「すべてのプロジェクトサムネイルの縦横比を揃え、スマホでキャプションが3行に折り返されないようにしてください。」
• 「お問い合わせセクションの左右の余白を広げ、小さい画面でも送信ボタンを押しやすくしてください。」

Moremade にはコードビューもあるので、React と Tailwind のコードで実際に何が変わったのかを確認したいときに便利です。

サイトの見た目が整ったら公開します。Moremade なら、無料の yourname.moremade.ai サブドメインにワンクリックで公開できます。有料プランでは独自ドメインを接続できます。ドメインは Moremade 内で購入することもできます。

実用的な公開手順は次のとおりです。

• まず無料サブドメインに公開する
• ライブサイトをデスクトップとスマホで開く
• 最後のコンテンツや余白の問題を直す
• 有料プランなら独自ドメインを接続する

Moremade は、ウェブサイト向けに本物の React + Tailwind コードを生成します。フルソースをいつでもZIPで書き出せますし、GitHub にプッシュすることもできます。ポートフォリオではこれが重要です。あとで別の場所でホスティングしたくなったり、開発者に渡したくなったり、プラットフォーム外で改善を続けたくなったりする可能性があるからです。

サイトを頻繁に更新する見込みがあるなら、有料プランのバージョン履歴は、変更の比較や巻き戻しに役立ちます。

一番の失敗は、技術的な問題ではありません。見た目は完成しているのに、何をしている人なのかほとんど伝わらないポートフォリオを出してしまうことです。

次のようなよくある問題に注意してください。

• ホームページのセクションが多すぎて、優先順位が見えない
• 何を自分が担当したのか説明しない、あいまいなプロジェクト要約
• テンプレートっぽい結果を生む、ありきたりなビジュアル指示
• 実際の用途がないのに Stripe、サインイン、データベース機能を追加する
• モバイル確認を省く
• プレースホルダーテキスト、ストック画像、空のケーススタディページを公開する

良いポートフォリオは、たいてい次のことをいくつかシンプルに、しかししっかり行っています。

• 自分が誰で、どんな仕事をする人かを示す
• すべてではなく、選んだプロジェクトを見せる
• 考え方を判断できるだけの情報を載せる
• 連絡しやすくする

AIを使って素早く強い下書きまで持っていき、その後は内容の本質を良くすることに時間を使いましょう。