仕事につながるポートフォリオサイトの作り方

仕事につながるポートフォリオサイトを作るには、目指す相手に合わせて4〜8件の代表的なプロジェクトを選び、それぞれを短いストーリーとして紹介します。課題、自分がしたこと、結果を示し、どのページからでも連絡しやすくしておきます。特に画像が多い場合は、表示を速くし、自分の名前を含むドメインに設置しましょう。ツールの選択よりも、何を選ぶか、どう書くかのほうが重要です。

誰が見るのかを最初に考える

ポートフォリオは、作品そのものが商品である営業ページです。レイアウトを選ぶ前に、誰に雇ってもらいたいのか、そして相手が何を見たいのかを決めてください。

まったく異なる2つの対象（たとえばプロダクトデザインの職種とフリーランスのイラストレーション）を扱う場合は、セクションを分けるか、サイトを分けることを検討しましょう。どちらの読み手も、探し回らずに済みます。

何を載せるか

作品

数を絞り、質の高いプロジェクトを選びましょう。もう一度やりたくない仕事は外してください。最も強く、最も関連性の高い作品を最初に置きます。多くの訪問者は、最初の1段を過ぎてスクロールしないことを覚えておきましょう。

デザイナーや開発者の場合、最も良いプロジェクトはケーススタディにします。使いやすい構成は次のとおりです。

1. 課題：状況と、影響を受けた人々を1〜2文で説明します。
2. 自分の役割：自分が行ったことと、ほかの人が行ったこと。正確に書きましょう。大げさな表現は、面接で簡単に見抜かれます。
3. プロセス：重要な判断をいくつか、スケッチ、ワイヤーフレーム、またはコードの抜粋とともに示します。
4. 結果：実際に公開されたものと、正直に述べられる成果。数字を共有できない場合は、変化を定性的に説明しましょう。

イラストレーターや写真家の場合は、画像がほとんどの仕事をします。明確なセット（結婚式、商品、雑誌向けなど）にまとめ、キャプションは短くし、グリッドには余白を持たせてください。

自己紹介と連絡先

自己紹介では、自分が誰か、何をしているのか、誰のためにしているのか、どこを拠点にしているのか、リモートで働いているのかを示しましょう。実際の写真があると効果的です。連絡方法は、どのページからでも分かりやすくしておきます。短いフォーム、メールアドレス、または打ち合わせの予約リンクなどです。予約を受けているなら、その方法を明記しましょう。

任意のページ

• サービスと料金：自分に合わない問い合わせを減らしたいフリーランスには有用です。
• 職務経歴書：求職者に役立ちます。PDFでダウンロードできるものと、ページ上の版を両方用意するのが一般的です。
• 執筆やメモ：きちんと更新し続けるつもりがある場合に限ります。数年放置されたブログは、ブログがないよりも悪い印象を与えます。
• 推薦の言葉：実際にもらったもので、許可を得たものに限ります。

判断とトレードオフ

静的なサイトか、アプリか。 ほとんどのポートフォリオは、シンプルでコンテンツ中心のサイトなので、データベースは必要ありません。データベースを使うのは、理由がある場合に限りましょう。問い合わせを保存するフォーム、管理画面から頻繁に更新するギャラリー、または閲覧者が写真を選べるクライアント向けの選定機能などです。

画像の保存場所。 ポートフォリオが遅くなる主な原因は、大きな画像です。アップロードする前にリサイズと圧縮を行い、新しい形式で配信し、訪問者がスクロールするにつれて画像を遅延読み込みしましょう。大きい、または頻繁に変わるギャラリーでは、画像をサイトのコードに埋め込むのではなく、適切なファイルストレージに保存してください。

更新の方法。 これは正直に考えましょう。毎月作品を追加するなら、簡単に追加できる方法（シンプルな管理画面、CMS、または使い慣れたビルダー）が必要です。半年に1度しか更新しないなら、サイトを直接編集すれば十分です。

検索での見つけやすさ。 自分の名前と専門分野、そして地域で検索してもらいたいなら、ページには実際のテキスト、適切な見出し、ページごとの独自のタイトルと説明、そして画像の説明的な代替テキストが必要です。AIで作ったウェブサイトのSEOを参照してください。

AIビルダー向けの最初のプロンプト

優れたプロンプトには、対象の読み手、ページ、作品、そしてスタイルが含まれています。

プロダクトデザイナーのLena Parkのポートフォリオサイトを作ってください。SaaS企業の社内でシニア職を探しています。ページは次のとおりです。短い紹介と5件のケーススタディのグリッドがあるホーム、ケーススタディの1ページ分のテンプレート（課題、自分の役割、プロセス（画像ギャラリー付き）、結果のセクション）、写真、短い経歴、職務経歴書のダウンロードがある自己紹介、そして簡単なフォーム（名前、メールアドレス、メッセージ）を備えた連絡先ページ。フォームはデータベースに保存し、お礼のメッセージを表示してください。スタイルは落ち着いてシンプル、余白を多く、アクセントカラーは1色、文字は大きく読みやすくしてください。スマホでもきれいに表示されるようにしてください。差し替えやすいように、プレースホルダーのプロジェクトには明確なラベルを付けてください。

その後は、すべてのコンテンツを1つのメッセージに貼り付けるのではなく、プレースホルダーのプロジェクトを1件ずつ本物に差し替えてください。確認しやすく、AIも各ページを正しく作れます。

プロンプトの書き方のパターンについては、AIアプリビルダー向けのプロンプトの書き方を参照してください。

構築の手順

1. 対象の読み手とプロジェクトを決める。ツールに触れる前に行いましょう。
2. 各ケーススタディの文章を先に書く。課題、自分の役割、プロセス、結果を、まずはドキュメントで書きます。
3. 画像を準備する。トリミング、リサイズ、圧縮を行い、ファイル名は分かりやすくします。
4. レイアウトを生成するか、既存のものを選ぶ。ポートフォリオのテンプレートを見ると、自分の作品に合うスタイルを素早く把握できます。
5. ホームページと1件のケーススタディを先に作る。これを正しく仕上げてから、同じパターンを繰り返します。
6. 自己紹介と連絡先を追加する。問い合わせフォームは、最初から最後まで実際にテストしてください。
7. スマホで確認する。ポートフォリオは小さな画面で崩れやすいものです。グリッドが詰まりすぎる、画像が大きすぎる、キャプションが小さすぎる、といった問題がないか見てください。
8. SEOの基本と共有画像を追加する。リンクを送ったときに、きれいに表示されるようにします。
9. 公開して、ドメインを接続する。独自ドメインの接続方法を参照してください。
10. 対象となる読み手から2人に、30秒見てもらう。何をしている人かを伝えられるか確認しましょう。伝わらなければ、ホームページを直してください。

よくある失敗

• すべてを載せる。 弱いプロジェクトは、強いプロジェクトの効果を薄めます。厳選しましょう。
• 文脈のない画像。 デザインや開発の仕事では、課題と自分の役割がないスクリーンショットは、採用担当者にほとんど情報を伝えません。
• 遅くて重いページ。 圧縮されていない高解像度の画像は、モバイル回線でサイトが壊れているように感じさせます。
• 凝ったナビゲーション。 珍しいメニューやスクロールの演出は楽しいかもしれませんが、訪問者が作品やメールアドレスを見つけられなければ逆効果です。
• 連絡先が見つけにくい。 どのページのヘッダーとフッターにも、連絡先のリンクを置きましょう。
• 公開する権利のないクライアントの仕事を載せる。 契約書や秘密保持契約を確認してください。必要であれば、匿名化するか、プロジェクトを説明するだけにしましょう。
• まったく更新しない。 何年も前の作品や、古い「最新のプロジェクト」は、誤った印象を与えます。

費用

個人のポートフォリオにかかる維持費は、通常は小さなものです。年単位で更新するドメイン名と、ホスティングです。画像が多いサイトは、大きなファイルを多く保存・配信する場合に費用が少し増えます。ウェブサイトビルダーは、ホスティングを含む月額料金を請求することが多くあります。自作ならより安く済むこともありますが、自分で保守する必要があります。料金は変わることがあるため、各サービスの最新情報を確認してください。

既製の製品を使ったほうがよい場合

ポートフォリオのプラットフォームや、ポートフォリオのテーマがあるウェブサイトビルダーは、洗練された結果を素早く得たい場合、ビジュアルエディターを好む場合、そしてカスタムのものが不要な場合に向いています。販売用のプリントや、クライアント向けのギャラリーを提供する写真家は、選定や販売の機能がすでに用意された、写真専用のプラットフォームのほうが合っているかもしれません。独自のデザインを求める場合、プラットフォームにない機能が必要な場合、コードやインタラクティブな作品を直接見せたい場合、またはサイトを完全に所有したい場合は、自作を検討しましょう。

Mythexで作る

Mythexでは、上のプロンプトのような説明から、ポートフォリオを作れます。ライブプレビューでスマホサイズの表示も確認しながら、チャットでレイアウトやコピーを調整し、yourname.mythex.appで公開できます。問い合わせを保存するフォームが必要なら、Mythexがプロジェクトにデータベースを追加します。画像のギャラリーには、プロジェクトのファイルストレージを使えるため、写真をコードに埋め込まずに済みます。Proプランでは、Mythex内でドメインを購入することも、すでに持っているドメインを接続することもできます。別の場所でホスティングしたくなった場合は、コードを書き出したり、GitHubに同期したりできます。

ドキュメントでは、ポートフォリオのユースケースを扱い、ファイルストレージについても説明しています。また、AIポートフォリオウェブサイトビルダーや、開発者向けポートフォリオ、写真家向けポートフォリオなどのテンプレートから始めることもできます。

よくある質問