ポートフォリオの作成について
Web制作を含め、デザインに関する会社を目標に就活する場合、職務経歴書とは別に「ポートフォリオ」が必須です。
「ポートフォリオ」とは制作した作品（WebサイトやDTP）や自分の現時点でのスキルを掲載し、自分自身をアピールするためのもので、大きく分けて
- 印刷して見てもらう「紙のポートフォリオ（PDFファイル含む）」
- Webにアクセスして見てもらう「ポートフォリオサイト」
の２種類があります。
自分のデザインスキルに関する現状を伝えるのに必要なものなので、デザインに関係する就職を目指す場合、どちらを見てもらっても良いように準備しておく必要があります。
Webやデザインに関係する求人では、求人票によってはポートフォリオについて言及されていないものもありますが、業界の常識的な部分・暗黙の了解的な部分でもあるため、ポートフォリオは必ず用意しましょう。
また、採用する側はデザイン関係となりますから、ポートフォリオ（紙・Web）全体のデザインセンスも判断材料となります。
経験が浅い場合でも最低限のデザインセンスは必要となるため、「色使い」や「余白を含めたレイアウト」は特に注意しながら制作する必要があります。
もちろん、いきなり「リッチで素敵なポートフォリオ」を作ることは難しいため、はじめはシンプルなデザインから始め、
- 「読みやすいポートフォリオはどんなデザインか？」というのをしっかりリサーチする。
- 詳しい人にポートフォリオを見てもらってフィードバックをもらう。
- テンプレートを利用する。
これらを繰り返し、少しずつ仕上げていく感じで進めていくと良いでしょう。
ポートフォリオも情報発信ブログと同じく「一度作って終わりではない」ため、定期的に見直し、スキルアップに合わせて作り直すぐらいの気持ちが大事です。
この記事の目次
ポートフォリオを作成するメリット
「ポートフォリオ」はデザインに関する名刺代わりにもなるため、メリットとしてはデザイン関係を目指して就活する時だけでなく、フリーランスや副業など個人で活動する時でも役に立ちます。
例えば、自身のブログやWebサイト・SNSなどを作成し、情報発信すると共にポートフォリオも用意しておくことで、「それを見た人から依頼があった…」なんて流れは割とあることなので、作成して置いておくだけでも大きなメリットだと言えます。
特にWebを使った活動では「一度作ってしまえば、自分が動かなくても勝手に働いてくれる（宣伝してくれる）」といった感覚を掴んだり、そういった仕組みを作っておくことが大事です。
ポートフォリオに掲載する項目
自分をアピールするためのポートフォリオと言っても、相手に見てもらうものなので、読み手に配慮した「読みさすさ」「わかりやすさ」は大事です。
印刷・Web問わず、一般的にポートフォリオに掲載されている項目はこのようになっています。
表紙と目次
ポートフォリオの表紙と、その内容をまとめた目次ページになります。
印刷のポートフォリオの場合はそれぞれ作成すると良いですが、Webサイトの場合は「トップページ」や「ナビメニュー」が「表紙と目次」の役割となります。
※こちらは後から作っていくと良いでしょう。
自己紹介（プロフィール）とスキルシート
自分自身についてのページとなります。
ここで気を付けておきたいのが、「相手が知りたいであろうこと」をメインに書く必要があります。
例えば、
- これまでの経歴（時系列がわかりやすいように）
- 現時点で扱えるスキル（画像やグラフなどの視覚化できるとなお良い）
- クライアントワークの実績（あればなお良い）
など、実務に関することを相手は知りたがっていることが多いので、「読みやすさ・わかりやすさ」を心掛けて作成します。
加えて「自分を知ってもらう」という目的として、パーソナルな部分（趣味や特技）、コンセプト・ビジョン（どのように考えてこの活動をしているか？）など、「自分が伝えたいこと」も掲載します。
そのため、プロフィールの項目を作る時は「自己分析」をしっかりと行い、それに基づいて作成していきましょう。
作品の紹介
これまでに自分が制作したものを掲載するページとなります。
ただ制作したものを並べていくのではなく、それぞれの作品について
- 「作品の説明・見どころ」
- 「制作の背景（苦労した点・アピールポイント）」
- 「作品のメイン・サブカラー」
- 「どのスキル・ツールを使っているか？」
- 「どれぐらいの時間で制作したか？（制作時間）」
などを「あなたの個展」のようなイメージで、読む人に興味を持ってもらいやすい構成にすることを心掛けて作成しましょう。
また、ここでも「余白」や「色使い」、「カテゴリー分け（Webサイトやロゴなど）」を使って、読みやすくする配慮も全体的なデザインとして必要となります。
連絡先
この部分は自己紹介に書いても良いですが、「ポートフォリオを最後まで読んでもらった後に行動（連絡）してもらうきっかけ」としてポートフォリオの最後にも掲載しておくと良いでしょう。
この場合、メールアドレスやSNS（あれば）、ポートフォリオサイトであればお問い合わせフォームなどを利用するのが一般的です。
※マーケティング用語で「CTA（コール トゥ アクション）」と呼ばれています。
この連絡先ですが、もし個人での活動でポートフォリオを利用する場合は必須項目です。
サンキューページ
最後に、忙しい中時間を割いてポートフォリオを読んでいただいた人に向けて、感謝の気持ちを載せておきます。
このページがあることで読み手からの印象が良くなるかもしれないのと同時に、連絡先も併せて設置しておくことで、CTAの役割も兼ねてくれるようになります。
このサンキューページは、特別な事情がない限り作成しておきましょう。
ポートフォリオを作成するツール
実際にポートフォリオを作成する場合、様々な方法があります。
また、印刷とWebでは使うツールが違ってきますので、それぞれに適したツールを使って作成してください。
印刷用のポートフォリオを作成する場合
就活では印刷されたポートフォリオがよく使われます。
その時につ分かれるツールとして、
- Adobe Illustrator
- Adobe Indesign
- Adobe Photoshop
- Microsoft Word
- Microsoft Power Point
- Canva
などが有名です。（訓練ではAdobe Illustratorをおすすめしています）
また印刷用のポートフォリオを作成する時は「A4用紙」に設定して作成し、印刷してファイリングするとともに「PDFファイル」に残しておくと良いでしょう。
※枚数は増えますが、片面印刷で印刷し、クリアポケットタイプのA4ファイルを使うことで、ページの差し替えがしやすくなるのでおすすめです。
作成したポートフォリオをWeb上で表示する場合
最近ではポートフォリオをWeb上で見るケースが増えてきました。
そのため「ポートフォリオサイト（ページ）」を作ることになるのですが、その種類として大きく分けて3パターンあります。
- HTMLサイト
- CMS（コンテンツマネジメントシステム）
- ノーコード
Web上で見ることができるようにするには、レンタルサーバーと契約したりFTPツールを扱う技術が必要になる場合があります。
また、それぞれにメリット・デメリットがあるので自分に合ったものを選んで作成してください。
HTMLサイト
テキストエディターを使ってWebページを作成し、FTPツールを使ってアップロードすることでWeb上で見ることができるようになります。
この場合はHTMLやCSS、Javascriptなどの知識と、FTPツールを扱う技術が必要ですが、それなりのスキルがあれば比較的に自由に作成することができる。
CMS（コンテンツマネジメントシステム）
Webサイトを運営するためのシステムが一通りパッケージングされたもので、主に「WordPress」があります。
デザインテンプレートを入れ替えるだけでデザイン・レイアウトを変更できたり、プラグイン（拡張機能）を使うことでより便利になりますが、デザインや作成するページを細かくカスタマイズするにはHTMLサイトと同様の知識に加えて「PHP」というプログラミング言語の知識も必要になる場合があります。
ですが、これからのWebサイトとして主流となってきているため、最低限の使い方（サーバーにインストールしてブログを書く程度）は覚えておくことをお勧めします。
ノーコード
名前の通り、コードを書くことなく要素（パーツ）をドラッグ＆ドロップで直感的にページを作成することができるものになります。
など様々なサービスがあり、グラフィックメインのポートフォリオ制作としては「STUDIO」がよく使われています。
ただし、WordPress同様細かい部分のカスタマイズや調整を行う場合はHTMLやCSSの知識が必要になります。
ポートフォリオを作成する流れ
Webサイトの制作では「リサーチ」「ワイヤーフレーム」「デザインカンプ」などの下準備があるように、ポートフォリオにも下準備が必要です。
この準備ができているかどうかで、ポートフォリオ制作の効率が大きく変わるので、いきなりツールで作ろうとせず、早い段階でしっかりと準備してから取り掛かるようにしましょう。
1.ポートフォリオの原稿を作る
上記の「ポートフォリオに掲載する項目」から自分の現状を当てはめて、ポートフォリオに掲載する内容の原稿を作成します。
この時はWord（Pages）を使い、レポートをまとめるような感じで作っていくと良いでしょう。
手書きでまとめていくのも良いですが、Wordなどのツールにまとめておけば、それをもとに紙のポートフォリオやポートフォリオサイトを作る時にコピペできるようになるので、まず最初にこういったツールを使って原稿を作っておくことをおすすめします。
ここでは、「ポートフォリオの構成」と「文章」がメインとなるため、「何を掲載するか？」「どのように表現したいか？」ということをよく考えながら原稿を作成していきましょう。
2.画像素材を揃える
次に、ポートフォリオで使用する画像を揃えてきます。
Webサイトは「ページ全体のスクリーンショット（全ページ）」、バナーやDTPの作品は「.jpgまたは.pngに書き出したもの」を1つのフォルダにまとめておきます。
ここで揃えた画像は、ポートフォリオに掲載する時に加工（リサイズ）が必要だったり、使わない可能性もありますが、この段階では何も考えずにとにかく自分が作ったものを集めておくと良いでしょう。
3.レイアウトを決める
Webサイトでいうところの「ワイヤーフレーム」を、表紙以外の項目の分だけ作成しておきます。
- 目次
- プロフィール
- スキルシート
- 略歴
- 作品紹介：Webサイト
- 作品紹介：バナー、DTP
- サンキューページ
特に作品紹介のページは、レイアウトをテンプレート化しておくと統一感が出ますし、作品を追加していく時もテンプレートに当てはめていくだけになりますので、作品を掲載する効率が良くなります。
ポートフォリオサイトと印刷用ポートフォリオでは、仕組み上デザインが異なることが多いため、
- ポートフォリオサイト：Adobe Photoshop
- 印刷用ポートフォリオ：Adobe Illustrator
で作っていくと良いでしょう。
4.ツールを使って作成していく
Webサイトでいうところの「デザインカンプ」となりますが、印刷用のポートフォリオの場合はそのまま完成となります。
印刷用ポートフォリオでは、IllustratorとPhotoshopのデータを「リンク」として使うことで、修正する時の効率が良くなり、データの容量を抑えることもできるため、積極的に活用していきましょう。
5.データのアップロード・PDFで保存
ポートフォリオが一通り完成したら、ポートフォリオサイトはサーバーにアップロードし、印刷用ポートフォリオは一度PDFファイルとして保存します。
このポートフォリオサイトやPDFファイルは、
- 誰かに見てもらう。
- フィードバックをもらう。
- 修正する。
これを繰り返し、より良いポートフォリオにしていくことが大事です。
他人からの評価は少し怖いところがあるかも知れませんが、デザインは人に見られてなんぼの世界です。
それよりも他人からフィードバックをもらう方がとても重要なので、諦めて誰かに見てもらうようにしましょう。
テンプレートを配布しています。
紙のポートフォリオ（Illustrator）および、ポートフォリオサイトのテンプレート（HTML/CSS、WordPressテーマ）を配布しています。
最低限の機能でかなりシンプルな構造となっているため、装飾・機能の追加や、レイアウトの変更などをご自身のスキルレベルに合わせてポートフォリオサイトを作ることができます。
紙のポートフォリオはこちらから
Webサイトはこれらのページにて、説明をよくお読みになってからダウンロードしてください。
ポートフォリオを作成する方法はこのようにたくさんありますが、大事なのはその中身です。
自分をアピールするのはもちろん、読み手に配慮した構成やレイアウトも大事な要素となりますので、ワイヤーフレーム（レイアウトのラフ）などを使ってよく考えながらポートフォリオを作成してみてください。
