想いとプロセスを伝えるポートフォリオづくりの過程【新卒デザイナー】
はじめに
こんにちは。22卒デザイナーの三浦（@sakusaku70_2）です。
昨年デザイナー就活のインタビュー企画にて、ポートフォリオづくりの過程をお伝えする機会があったので、こちらにも残してみます🌷
▼ポートフォリオ
初版（2021.2）
改訂版（2021.5）
▼プロセス
記事を読み漁り、何を載せるべきか学ぶ
自己分析を見直し、1.の情報を整理
とりあえず作ってみる（完璧より完了を目指す）
ポートフォリオ相談会やインターン先の上司、先輩、Matcherでお声がけしたデザイナーの方々にFBをいただく
少しずつ修正
【補足】
※クライアントワークや似顔絵は作成前に掲載許可を取った
※サイト作成やResumeを使うなどの方法も考えたが、当時サイト作りの知識がなくインプットの時間がかけられなかったこと、既存ポートフォリオサービスを使うより自分の世界観が出しやすい媒体にしたくてPDF方式にした
▼参考にした記事
＜心得を学ぶ＞
→ポートフォリオ作りの心得の基本がまとまっている…！特に文中の「良いポートフォリオは会話する」部分を参考にしました。
→デザイナー採用担当をされていたこばやすさんの目線から、入れるべき情報や気遣いがまとまっています。これも心得の基本という感じ。
→ポートフォリオ作りの実際のプロセスがわかりやすくまとまっています。各所に載せてくださっている参考サイトも必見です。
＜何を見せるか考える＞
→「作品から「何を」見せたいのか明確にする」という部分を特に参考にしました。
「この作品では自分の『クライアントと対話する姿勢』を伝えよう！」などそれぞれにメッセージを込めてポートフォリオに入れました。
→ポートフォリオについてのイベントを一部要約したnote。
「自分を一言で説明できるキャッチフレーズがあるとわかりやすい」という部分など、参考にした部分がたくさんあります。
＜見せ方を考える＞
→レイアウトや構成について、一番参考にさせていただいた記事。
この記事がなかったらきっと約5日間で完成していない。「提出前のチェックリスト」も必見。
＜その他参考＞
→ポートフォリオのおすすめ記事がまとまっているありがたすぎるnote。
→ポートフォリオ作成後に出会ったnote（参考にしたかった…）。
下記「▼使用ツール」欄にも記載していますが、著者のとぅくさんもFigmaを使ってポートフォリオを作成されていて、プロセスが詳細に書かれているので参考になります。
▼考えたこと
以上の記事等を参考に、どうつくるかを考えました。
企業が見たいのはスキルと適性。
課題をどんな風に見つけたか、見つめたか
→どんなステップや考え方をしたか
→どんなアプローチで解決したか
→結果としてどんなアウトプットになったか
を知りたいはず。
プラスして、私が伝えたいのは自分の人柄や世界観。それが自分らしさ（企業とのマッチングに関わる自己開示）と差別化につながると思うから。
目的：自分がどんな人柄なのか・何をしてきたのか・何ができるのか
を、
対象：採用担当者
に伝える
自分を伝えるコンテンツとして機能するポートフォリオにしたい。 イラストやインフォグラフィック、コピーを考えること、想いを込めることが得意だから入れてみよう。色やフォントも思いっきり自分の好きに振り切ろう。語りかける感じで親しみやすいものにしたい。
世界観とメッセージを込めた伝え方で、「おもしろい奴！」と思ってもらうことをゴールにしよう！
▼入れた情報
（ごあいさつ：初版は第一志望の企業に出すものだったので入れてみた）
基本情報：簡単なプロフィール
特徴：自分のキャッチフレーズ（「一言で表すと…」）
自分の強みアピール＆印象に残りやすいものにしたかったため
実績：これまでの制作物
できること（webデザインなど、つくったことのある分野を一覧で見せる）
作品のキャプチャ
制作のプロセスと意図
担当した範囲（ヒアリング、WF作成、デザインデータ作成など）
どの層から関わった経験があるかわかりやすく伝えるため
依頼元、期間、公開している場合はURL
夢：デザインを通してなりたい像を語る
導線：ReDesignerのリンクを貼る
ここに載せていない制作物も見てもらい実績をアピールするため
▼意識したトンマナ
自分の人柄や世界観を伝える
穏やかさ、あたたかさ、親しみやすさ
手書きのイラスト、やわらかい色味、角丸
語りかける感じの文章
芯の強さ、真面目さ、丁寧さ
かっちり目のフォント（見出しゴが好き…）、余白の統一、端的な説明を心がける
▼使用ツール
Figmaで作成→PDFで書き出し→Adobe Acrobatで結合→Adobe Acrobatデスクトップ版で圧縮
デザインデータをほぼFigmaで作成しており、コピペが楽そうという理由で選択。
よかった点：作品が同じアプリ内にあるのでコピペが楽。アートボードをコピペしたりオブジェクトの入れ替えがしやすい。明度、再度調整やブラー、ドロップシャドウなど簡単な画像加工がサクサクできる。
微妙だった点：PDF書き出しに時間がかかる。めちゃ重いので圧縮しないとドライブに載せられない。PDFを結合した後の差し替えが大変（Acrobatなら結合後もPDF編集はできるが、再度保存→圧縮の手間がかかる）。
とぅくさんのnote「Figmaで61ページのポートフォリオ制作したら懺悔だらけ〜美大生制作日記〜」がプロセス、ツール選びの参考になりそう。
▼初版→改訂版までにもらったFB
メリハリがない
ビジュアルが得意ならもっと大胆に見せるべき
世界観をドン！と伝える工夫をする
特にwebデザインはキャプチャが小さくて見づらい
スクロールで見ると全部同じ流れに見えて境目が曖昧。とっかかりを作るべき
1作品にもっとページ数を割いて詳細に伝えたほうがいい
（スライド数少なく、端的にという記事を気にしすぎていたが、プロセスに関してはそれは求められていないことに気づく）
1ページの文字が多すぎるのも気になる
一旦全部出し切る！全ての材料を出し切ってから取捨選択すると良い。
ロジカルに過程を見せるべき
色や余白など細かい部分も調整したはず。なぜそれを採用したのか、もっと解像度高く意図を知りたい。
こだわった部分があれば考えたことと共に見せるべき。
（冗長じゃないか？という不安に対して）
長さは正直企業の好みによる
目次や見出しを工夫したりメリハリを付ければ冗長になりづらい
むしろ、「飽きさせない工夫をして全部読んでもらう」よりも「全部充実させて気になる作品だけ読んでもらう」方が伝わりそう
PDFは上から下にスクロールしないと見られないことを留意。長ったらしさが気になるならTOPに作品の一覧とサムネを置くと効果がありそう
背景色が濃く、何を伝えたいかが薄れてしまっている
プロフィールのスキル部分（Illustratorなどの利用ツール）はアイコンにするとわかりやすい
UIデザインはないの？（当時気になっていた企業がアプリデザイナーを募集していたため）
▼改訂版で意識したこと
TOPにサムネイルを追加
見たい作品を一覧で見つけやすくするため
一つの作品のボリュームを増やし、プロセスを詳しく書いた
スライド一枚の情報量を調整
「だれに、なにを、どんな想いを届けるか？」というページをそれぞれ追加
ターゲットと目的を明らかにするため
自分の考えたことやクライアント、上司のコメントを会話っぽい形で追加
周りとコミュニケーションを取りながら進めていることを伝えるため
メリハリを意識
キャプチャを大きくする、モックアップを当ててクオリティを上げる
作品ごとに背景色を変えてとっかかりを作る
UIデザイン（アプリデザイン）を追加
自主制作でつくったものだが、勉強中という意欲を見せるため
おわりに
※ちなみに、私の就活記については以下のnoteに記載していますので、よかったら合わせて読んでみてください〜！
最後まで読んでいただき、ありがとうございました！