AI活用術

AIで「ポートフォリオサイト」を秒速作成!デザイン・コーディング不要

公開日: 2025/3/10 更新日: 2025/3/10
AIで「ポートフォリオサイト」を秒速作成!デザイン・コーディング不要

ポートフォリオ作成の「高い壁」

  • デザインができない:見栄えの良いサイトを作りたいが、デザインの知識がない。
  • コーディングができない:HTMLやCSSが分からず、サイトを自作することができない。
  • 何を載せれば良いか分からない:自分のどの作品やスキルを、どう見せれば効果的なのか分からない。

これらの悩みから、ポートフォリオサイトの作成を諦めてしまっている学生は少なくありません。 しかし、近年のAI技術の進化により、専門知識がなくても、誰でも簡単に見栄えの良いポートフォリオサイトを作成できるようになりました。

対話型AIサイトビルダーを活用しよう

現在、ChatGPTのような対話型AIと連携し、「こんなサイトを作りたい」と自然言語で指示するだけで、AIが自動的にデザインやコーディングを行ってくれる サービスが次々と登場しています。

これらのツールを使えば、あなたは「サイトの構成」と「掲載するコンテンツ」を考えることに集中できます。

AIとポートフォリオサイトを作る4ステップ

ステップ1:AIに「作りたいサイトのイメージ」を伝える

まず、あなたがどのようなポートフォリオサイトを作りたいのか、その全体像をAIに伝えます。 参考になるサイトのURLを提示すると、AIはよりあなたのイメージに近いものを生成してくれます。

プロンプト例①:全体像の指示 あなたは、優秀なWebデザイナー兼UXデザイナーです。 私の就職活動用のポートフォリオサイトを作成してください。

  • ターゲット読者:Web業界の採用担当者
  • サイトの目的:私のデザインスキルと問題解決能力をアピールし、インターンシップの機会を得ること。
  • 全体の雰囲気:シンプル、モダン、信頼感のあるデザイン。
  • 参考サイトhttps://example.com (←憧れのデザイナーのポートフォリオなど)

ステップ2:AIに「サイトの構成」を提案させる

次に、ポートフォリオサイトにどのようなページやセクションが必要か、AIに提案させます。

プロンプト例②:サイト構成の提案 上記の目的を達成するために、どのようなページ構成にするのが最適だと思いますか? 「ホーム」「私について」「作品一覧」「スキル」「連絡先」といった、一般的な構成案をベースに、私をアピールするための最適な構成を提案してください。

ステップ3:各セクションに掲載する「コンテンツ」をAIと作る

サイトの骨格が決まったら、各セクションに掲載する具体的な「文章」や「作品の見せ方」を、AIとの対話を通して作成していきます。

プロンプト例③:コンテンツ作成 「私について」のセクションを作成します。以下の私の経歴と強みを元に、採用担当者に響くような自己紹介文を300字で作成してください。

【私の経歴と強み】 (ここに、あなたの自己分析の結果やガクチカのエピソードなどを貼り付ける)

作品紹介ページでは、作品のスクリーンショットだけでなく、「この作品で、どのような課題を、どう解決したのか」 というプロセスを必ず記述しましょう。これもAIに手伝ってもらうことができます。

ステップ4:AIに「デザインの微調整」を指示する

AIが生成したデザインに対して、気に入らない部分があれば、自然言語で修正を指示します。

プロンプト例④:デザイン修正

  • 「メインカラーを、現在の青色から、もう少し落ち着いたネイビーブルーに変更してください。」
  • 「フォントを、現在のゴシック体から、もう少し柔らかい印象の丸ゴシック体にしてください。」
  • 「作品一覧のレイアウトを、現在の2カラムから3カラムに変更してください。」

まとめ

AIを活用すれば、ポートフォリオサイト作成の技術的なハードルは、もはや存在しません。 重要なのは、「あなたが、誰に、何を伝えたいのか」 という、サイトの「中身」です。

AIを、あなたの思考を整理し、形にしてくれる「優秀なアシスタント」として使いこなし、あなたという人材の魅力を最大限に伝える、最高のポートフォリオを創り上げてください。