24歳駆け出しデザイナー、ななみんです。前職は人材系の会社でキャリアコンサルタントのお仕事をしていました。)ノとはいえ専門学校に通っていたわけではなく、大学時代は工学部でひたすら物理や数学を勉強していた私にとって、デザイナーになるまでにはたくさんの壁がありました。「ポートフォリオ制作」はもっとも大変でしたが、もっとも楽しかったことでもあります。職務上、さまざまなデザイナーさんが作られているポートフォリオを見ていたため、ポートフォリオの重要性については十分にわかっていました。実際自分で作るとなると、どんなことを載せるべきか、どんなまとめ方をするべきかなど、とても悩みました。いままで見てきたたくさんの方のポートフォリオの良いと思う部分を分析したり、いろんなデザイナーさんにアドバイスをいただいたり、あらゆる参考サイトや本を読み漁ったり......。転職活動中も、企業の方に「〇〇もあったらもっと良くなるよ!」とアドバイスをいただくこともありました。そのときの経験を生かして、今回はポートフォリオの作り方について自分なりにまとめてみます。次回は準備編!そもそもポートフォリオとは?コトバンクには、こんなことが載っていました。2写真家やデザイナーなどが自分の作品をまとめたもの。3経済主体(企業・個人)は所有する各種の金融資産の組み合わせ。4ポートフォリオ-セレクションの略。ここでいうポートフォリオは、「2写真家やデザイナーなどが自分の作品をまとめたもの」ですね。自分が作ったサイトなどの制作物をまとめたもの。まとめ方は、ポートフォリオサイトとしてサイトにまとめる方法、WordやPowerPointにまとめてPDFで出力する方法、画像にしてフォルダにまとめる方法などさまざまです。転職活動におけるポートフォリオの重要性デザイナーは専門性が必要となる職業のため、就職や転職をする際、履歴書や職務経歴書に加えてポートフォリオが必要になるケースがほとんどかと思います。ポートフォリオ制作はかなり大変なことですが、裏を返すと、ポートフォリオを作れば、実務未経験でもデザイナーとして転職できる企業さんの幅は広がります。いうのも近年、UXデザインなどデザイナーに求められる領域が広がったこともあり、デザインの価値が高まっている一方、デザイナー不足の企業さんは多い状況です。デザインの実務経験がなかったり、大学・専門学校でデザインを学んでいなかったりしても、デザインスキルが企業さんの求めるレベルに達していれば、採用される可能性も高まっているように思います。ポートフォリオは、作品自体のデザインスキルだけでなく、作品やポートフォリオ自体の企画力・見せ方などさまざまなスキルをアピールすることも可能です。「分析が得意」「企画力がある」「キャッチコピーやライティングができる」など、自身の得意なことをポートフォリオに盛り込むことで、「この人はデザインスキルさえ身につけば即戦力になってくれそう」と企業さんに思ってもらえるのです。ポートフォリオ作りの流れ具体的なポートフォリオの作り方については、ざっくりこんな感じかと思います。「絵描くんかな......上手くないんやけど......」ってなりますよね。未経験デザイナーは、そもそもポートフォリオに載せる“作品”がないことが多いかと思うので、ここを乗り越えるのが大変です。ペルソナ策定サイトに流入するまでの流れコンテンツ情報の精査コンテンツの組み立てイメージボードの策定ワイヤーフレーム設計デザイン制作な、ながいですね......私もそう思いました......。周りでデザイン依頼をいただけないかアンテナをはり、なるべく多くの作品を作りましょう。友人や知人などからいただく些細な依頼も大事な作品になります。私の場合は、Webデザインのお仕事にあまりアンテナを張れていなかったので、実際にある店舗のサイトにおける仮想リニューアルを行いました。実際にある店舗であれば、想像しやすくより現実味を帯びた作品を作ることができるかなと考えたからです。実際に転職活動をしている際、担当者の方に「実際にクライアントさんがいる作品もあった方がより良かったかな。クライアントさんの目線が含まれるとデザインは変わってくるから、その方がより現実的なデザインになって、こちらとしても想像しやすい」と貴重なアドバイスをいただきました。デザイン未経験者にとってお仕事を受けるということは難しいかと思うので、無償で何かデザインできるものはないかアンテナを張ってみると良いでしょう。今回は、「ある美容院サイトにおける仮想リニューアル」を例にお話ししていきます。目的・目標設定さあ、作るものが決まったら、その作品における目的・目標を決めましょう。これは特に正解はないのですが、なんとなく定めるより裏付けがあると良いかと思います。美容院サイトの場合、データをもとに目的・目標をこんな感じで設定しました。ペルソナ策定デザイン制作にあたって、欠かせない存在となっているペルソナ。コトバンクには、こんな感じで載っていました。ペルソナとは仮製品やサービスのユーザー像を仮想の人物として定義したものをいう。実際のユーザーにはさまざまな人が含まれるが、ペルソナではその中で最も重要な人物像に焦点を当てることによって、具体的なユーザー像をイメージしやすくなるメリットがある。ペルソナは、私の中では、「現実にいそうなターゲット」と定めています。美容院サイトの場合、ペルソナを下記のように設定しました。ペルソナを考えるにあたって、「なんとなくこんな感じ」より、「こういう理由でこう定めている」の方が、説得力があります。私の場合は、データを用いてロジックを組み立てることが好きだったこともあり、定量的なアプローチでペルソナを導きました。流入フローユーザーがサイトにどのような経路で入ってくるかデータをもとに考えます。それによって、アプリ・スマホファースト・PCファーストなどどういったサイトにするか、コンテンツやデザインの必要な要素や優先すべき要素は何かなどの参考になります。美容院サイトの場合は、30代の女性が「通勤電車の中でスマートフォンにて通いたい美容院をなんとなく探す」ことを利用シーンとし、サイトに流入するまでの流れを考えました。コンテンツ情報の精査ペルソナや利用シーンが見えたら、ペルソナにとって必要な情報を洗い出していきます。ペルソナにとって必要な情報が洗い出せたら、ペルソナのニーズを満たせるコンテンツを考えます。美容院サイトの場合、ペルソナが「居心地の良い空間を求めている(=ペルソナにとって必要な情報)」のであれば、「お店が提供しているサービス、内装、スタッフの雰囲気(=ペルソナのニーズを満たせるコンテンツ)」を記載します。この時、各コンテンツの優先順位なども決めておくと良いでしょう。コンテンツの組み立て載せるコンテンツが決まったら、コンテンツを組み立てていきます。上で定めた各コンテンツの優先順位に沿って、「ヘッダー→コンセプト→特徴→......」など全体の流れを決めていきます。そのあと、ヘッダーの中には何のコンテンツを入れるのかなど、詳細を詰めると良いでしょう。このときそれぞれの項目ごとに、ユーザーにどういった感情を抱いてほしいか、ユーザーの感情の流れを考えると良いでしょう。ユーザーの感情の流れを考えてみることで、「写真か文字どちらで見せるべきか」「どういった表現が良いか」などをユーザー目線で考えることができると思います。美容院サイトの場合は、ユーザーがサイトに訪れてから予約するまでの感情の流れを考え、美容院側が伝えたい情報の優先順位と照らし合わせてコンテンツを組み立てました。́)今までは、左脳を使ってゴリゴリ言語化していましたが、ここではいかに妄想するかが大切です。「設定したペルソナ像」「対象物の世界観」の2軸より、理想のイメージをできる限り妄想し、思いつく写真やイラストなどを1つのボードに集めます。美容院サイトの場合は、こんな感じで写真を集めていました。世界観が近い美容院サイトから、対象美容院のイメージ、ペルソナが好きなもの......などさまざまです。イメージを探すときは、Pinterestがおすすめです(^ω^)質の高いクリエイティブがたくさん載っており、項目ごとにピンすることができるので、こんな感じでまとめておくと良いでしょう。あともう少しです!「ワイヤーフレーム」という、これまたよく聞く言葉。いつも頼りにしているコトバンクには、こんな感じで載っていました。Webページの大まかなコンテンツやレイアウトを示した構成図。レイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。コトバンクさんの言うとおり。ここでは、コンテンツの順番や、想像したイメージをもとにレイアウトを作っていきます。ワイヤーフレームは、白とグレーで示されているものが多いかと思います。手書きかデザインツールなど書き方については、やりやすさやそのときの状況によって変わってくるかと思うので、ワイヤーフレームのゴールを自分なりに定めておくと良いでしょう。美容院サイトの場合は、サイトを作るのが初めてだったこともあり、大きさや余白感、フォントや文章などもなるべく正確に作成し、「あとは写真入れて色つけるだけ〜♪」ぐらいにしていました。デザイン制作です(^O^)!!ワイヤーフレームをもとに、写真やイラスト、キャッチコピーや文章を入れていきます。きさ」「フォント」「色」「写真」......などさまざまな要素で構成されています。数え出すと多すぎて大変ですが、「デザインの基礎」「らしさの表現」の2つの視点を意識すると良いかと思います。と4つの基本原則があります。これは、簡単そうに見えて意外とできていない人も多い原則で、これらを意識して制作すると、非デザイナーでも見やすく綺麗なデザインができるでしょう。デザインの基礎については、かなりの数の本を読んで勉強したのですが、中でもわかりやすかったおすすめの書籍を2冊載せておきます(^ω^)なるほどデザインノンデザイナーズ・デザインブックらしさの表現サイトのゴールにもよりますが、「ただ見やすいだけのデザイン」だと、個性のないデザインとなってしまいます。作成したイメージボードを参考にし、対象物らしさを引き出すデザインを考えましょう。集めたイメージの、ミクロな視点(色やフォント、カタチや写真の加工方法など)から、マクロな視点(全体のテイスト、余白感や大きさなど)までしっかり観察すると、「らしさ」のデザインのコツをなんとなく掴めると思います。美容院サイトの場合は、まずはデザインの基礎を重視してデザインを作り、あとから「らしさ」を加えていきました。こんな感じです!かなり大変そうな感じもしますが......実際は......大変でした。「考えてつくる」ということは、作品数が少ない未経験デザイナーにとって大事なことかなと思うので、ぜひチャレンジしてみてください。次回は準備編!今回はポートフォリオに載せる作品づくりについて書いていきました。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。