ポートフォリオの作り方

2022年7月3日

ポートフォリオとは、就職活動・転職活動・新規顧客開拓の際に自分の人となりやスキルを企業にアピールするために使用するWebサイトや印刷物です。 自分がどういった技術をもっているのか、どういった事を学んできたのかが分かるようなポートフォリオを作りましょう。

ポートフォリオサイト デザイン」などのキーワードで検索すると、参考になるサイトが出てくるので、まずはポートフィオサイトがどのようなものなのかを調べてみましょう。

また、既存のサービスを利用してポートフォリオを作成する方法もあります。

ポートフォリオの見せ方

ポートフォリオの見せ方は用途に応じて以下の三種類に分けられます。現在はWebサイトでの公開が多いですが、状況によって使い分けましょう。(このページでは主にWebサイトでの作り方について解説していきます。

Webサイト URLを知らせるだけで見てもらう事ができます。
PDFファイル メール等で送ることができます。ポートフォリを公開したくない場合に便利です。
実物を持ちこんだり送付する手間がありますが、手にとって見てもらえるので、サイズ感や紙質、その他物理的な工夫によってインパクトを与えることも可能です。

制作手順

いきなり作り始めるのではなく、まずはポートフォリオのタイトルやコンセプトなど、どのような内容にするか計画を立てましょう。いきなり作り始めてしまうと、作っては直し…作っては直し…の繰り返しになってしまいます。

タイトル、デザインコンセプトを決める

タイトル

サイト名を考えて、ロゴマークを作成してください。ロゴマークは、既存のフォントを加工したり、手描きのラフをIllustratorで書き起こしたり自由にデザインしてください。
「Welcome to my homepage」「ようこそ○○○○のホームページヘ」といった名前は古い印象を与えてしまうのでやめましょう!「あえて直球で!」という考え方もありますが、センスを疑われる場合もあるので難易度が高いです。
なかなか思いつかない場合は、自分の名前からアレンジしてみたり、好きな言葉や色などから連想してみたり、好きな映画や音楽から連想してみたりしましょう。

デザインテーマ

デザインのテーマ(方向性)を決めましょう。具体的であればあるほど実際の作業がすすめやすくなるので、できる限り具体的に考えてみてください。テーマが決れば色やフォントなども自然と決まってくるはずです。

  • テーマ例:クール、ナチュラル、アナログ、和風、かわいい

掲載する内容を決める

ポートフォリオに最低限掲載しておきたい内容は「プロフィール」「制作物」「問い合わせフォーム」の3つです。

プロフィール

ポートフォリサイトは自分を知ってもらうためのページなので必ず自己紹介を載せましょう。以下の項目を参考にまとめてみましょう。

  • 名前
    • 写真や似顔絵、イメージ画像などもあわせて載せるとあなたのイメージが伝わりやすくなります。
    • SNSのアイコンなどをイメージして選択してみるといいかもしれません。
  • 自己紹介
    • 学校名・出身地・TwitterやFacebookのURLなど。
    • 趣味・特技など。
    • 公開しても大丈夫なものだけにしましょう!(メールアドレスや住所・電話番号などは載せない
  • スキル
    • 使用できるアプリケーション、扱える言語など。
    • 5つ星評価などで各スキルの習熟度を表す方法もあります。
    • その他資格など

制作物

ポートフォリオの核となる部分です。数が少なすぎるとポートフォリオとして弱くなってしまうので、ある程度の数を掲載できるようにがんばりましょう。作品が多くなった場合はジャンル分けをして見やすくするなどの工夫をすると見やすくなります。

また、制作物の画像を並べるだけでなく、以下の項目を書いてその制作物がどのようなものか分かるようにしましょう。

  • 制作物の名称
  • 制作物作品に関する情報
    • 制作時期・製作時間・担当箇所・使用ソフト・作品の説明など。
    • Webサイトであればリンクを貼っておく。
    • 立体のデザインであれば写真を載せる。

問い合わせフォーム

サイトを見た人から連絡をもらえるようにフォームを設置しておきましょう。最低でも以下の3つの項目は入力してもらう必要があります。

  • 名前
  • メールアドレス
  • 内容

自分の連絡先メールアドレスをそのまま載せることもできますが、スパムメールが大量に届く可能性があるので、もしどうしてもメールアドレスを載せたい場合はポートフォリオ用のアドレスに別途用意するなどしましょう(メールのチェックは忘れずに!)。

その他

たとえば制作活動の記録ブログや日々勉強したことなどをまとめるブログなども、自分がどんな活動をしているのかを知ってもらうのに役立ちます。 自分で記録をつけることで記憶にも定着しやすくなるので、就活とは関係なしにおススメです。

ページ構成を決める

前のステップで決めた「自己紹介」「制作物」「問い合わせフォーム」といった情報を どのように見せるかを決めましょう。 例えばトップページに「自己紹介」又は「作品一覧」を載せてしまう見せ方や、すべての内容を1ページにまとめて縦に長いサイトにするという見せ方もあります。

ワイヤーフレームを作る

AdobeXDやPhotoshopでワイヤーフレームを作成しましょう。 ワイヤーフレームでは文字や画像の配置場所や大きさなどがわかれば大丈夫です。色を付けたり画像を配置する必要はありません。細かいデザインはこのあとの作業で行います。

ワイヤーフレーム

カンプデザインの作成

ワイヤーフレームをもとにカンプデザインを作成します。カンプとは完成した時にどのようなデザインになるかが分かるようなものです。ワイヤーフレームのデータに色を付けて画像を配置して完成図にしていきましょう。

デザインが終わったらコーディングをしてWebサーバー上にアップしましょう。 Webサーバーについては「Webデザインとは?Webサイトの作り方を知ろう!」内の「Webサイトを作るには」以降を見てください。

紙(印刷物)でポートフォリオを作る場合

Webデザイナーの場合はWeb上にポートフォリオを作成することがほとんどですが、まれに印刷したものを求められることもあります。 その場合はプリンターで印刷したものをファイルにまとめたポートフォリオを作成します。後半はアナログでの作業になるので、紙質を工夫するなどWebではできない表現もできます。

※印刷の場合はデータの作り方がWebとは違うので気を付けましょう。

最後に

制作を進めていく途中で、内容が変更になっても構いません。 まずは最初にイメージできる範囲でいいので、計画をまとめてから作業をはじめましょう。また、ポートフォリオ自体が完成しても、そこに掲載する制作物を作らなければ意味がありません。作品作りも進めるのを忘れないようにしましょう。

ポートフォリオについての参考ページ