自分の仕事を見せるポートフォリオサイトが欲しい。でもWeb制作の知識はないし、テンプレートサービスで作ると「どこかで見た感じ」になる——。Claude Academyのユースケース集に、履歴書とデザインの参考画像を渡すだけでポートフォリオページを作り、さらにライブ公開まで持っていく手順が載っていたので、整理します。所要15分、カテゴリはPersonal、使うのはClaude.aiのアーティファクト機能です。

Claudeのビジョン(画像認識)とコーディング能力の掛け合わせで、説明文と画像が動くWebインターフェースに変わります。履歴書と過去のプロジェクト資料を組み合わせれば、キャリアの物語と好みのデザインスタイルの両方を反映したポートフォリオが作れる、という構図です。

実際のプロンプトは、デザイン指定の書き方が非常に参考になります。

私のキャリアと実績を見せるプロフェッショナルなポートフォリオHTMLページを作って。履歴書、プロジェクト説明、デザインのインスピレーション資料をアップロードしたので、経歴と美的な好みの理解に使って。

デザインの方向性は、洗練されていてエディトリアルなもの——ハイエンドなクリエイティブエージェンシーであって、企業テンプレートではないイメージ。ありがちなレイアウト、AIっぽいグラデーション、過度なシンメトリーは避けて。私が憧れるサイト(アップロード内)は、有機的で手仕事感があり、意外性のあるディテールを持っている。

作った後は、インターネットに公開する手順を教えて。サイトをデプロイした経験はゼロという前提で、コーディング知識のいらない正確なステップを。

必須は、職業人生を伝えるファイル——履歴書、プロジェクト説明(ベストな仕事の詳細な例を3〜5件)——と、美的な好みを伝えるファイル。憧れのポートフォリオのスクリーンショットや、気に入ったデザインのUIコード片でもOKです。「好み」は言葉より実物で渡すほうが正確に伝わります。任意で拡張思考をオンにすると、出力の質に時間をかけてくれます。

完全なポートフォリオページが、HTMLアーティファクトとして生成されます。紹介例のClaudeの報告が、渡した文脈がどう使われたかをよく表しています——インスピレーション資料のエディトリアルで手仕事感のある美学を汲み、シンメトリーな企業的レイアウトを避けた。プロジェクトカードには(参考資料にあった)テープ風の効果を入れ、スクロールに合わせた控えめなアニメーションを追加。履歴書の情報がAboutセクションを構成し、各プロジェクトには画像と詳細のためのショーケース領域。タイポグラフィはセリフ×サンセリフのペアリング、カラーパレットはデザイン参考資料の分析から——。

生成物はどのブラウザでも開けて、「色を変えたい」「プロジェクトの順番を入れ替えたい」は会話で修正できます。

① Netlifyコネクタでライブ公開する。ここがこのユースケースの目玉です。ClaudeはNetlifyに接続でき、アーティファクトのコードから実際のWebサイトをデプロイできます。「ポートフォリオのアーティファクトのコードを使って本物のサイトにしたい。Netlifyコネクタで新しいサイトプロジェクトを作って、ライブでデプロイして。公開されたらURLを教えて、あとで更新したいときの方法も説明して」——コーディング不要のまま、"URLを人に送れる"ところまで到達します。

② インタラクションで磨く。「プロジェクトカードにホバー効果を——わずかなシフトかボーダーの変化くらいで。セクションまでスクロールしたら見出しがふわっとフェードインするように。派手さはいらない、細部への気配りが伝わる洗練されたインタラクションで」。

③ 代表作を1本のケーススタディに展開する。「Infrastructure Monitoring Dashboardのプロジェクトを、フルのケーススタディページに拡張して。課題、リサーチ、デザインプロセス、イテレーション、直面した壁と解決、測定可能なインパクト。ワイヤーフレーム、ユーザーフィードバック、学びのセクションも」。

デザイン品質を引き上げるプロンプト技法。Claudeは時に無難な選択(標準フォント、デフォルト色、そこそこの余白)に寄ります。打ち手は4つ——①品質のベンチマークを参照する(「一流コンサルのレポート級」「プレミアムSaaSプロダクト級」)、②ドメイン専門家として振る舞わせる(「シニアデザイナーならどうするかで取り組んで」)、③自己採点と改善を指示する(高い品質基準に照らして自分の出力を採点・改善させる)、④やってはいけないことを言う(「ありがちなコーポレートブルーは避けて」「デフォルトのタイポグラフィは使わない」)。初回で完成を求めず、足りない点を評価して改善を促す反復が前提です。

デザイン基準はスキル化する。ビジュアルの参考資料、うまくいった実例、具体的な好みをスキルとしてパッケージすれば、毎回好みを説明し直さなくても既定の基準が適用されます。

このユースケースの到達点は「ページが作れた」ではなく、「URLを持っている」ことです。アーティファクトで作り、会話で磨き、Netlifyコネクタで公開する——制作から公開までの全工程が、コードを書かないまま1つの会話に収まります。そして「AIっぽいグラデーションを避けて」「憧れサイトのスクショを渡す」「品質ベンチマークで釣り上げる」というデザイン指定の技法は、以前紹介したブランドアセット制作やスライド作成にもそのまま効く汎用スキルです。転職・独立の準備はもちろん、イベントの特設ページや製品の紹介1枚ページにも、同じ型で応用できます。

INNOOV株式会社について

この記事は、AtlassianやIntercomなどのSaaS導入支援と、AIを活用した業務プロセス改善を行うINNOOV株式会社がお届けしました。「自社でもこんな仕組みを作ってみたい」「ツール導入を相談したい」という方は、お気軽にお問い合わせください。

▶ INNOOV株式会社 公式サイト
​

参考文献
​Claude Academy
​
​