1000本突破
1000本突破
#33
WEBデザインをはじめよう

未経験デザイナーのためのポートフォリオの作り方【載せる作品づくり編】

ななみん

はじめまして! 24歳駆け出しデザイナー、ななみんです。

前職は人材系の会社でキャリアコンサルタントのお仕事をしていました。デザイナーさんやエンジニアさんのキャリアのお手伝いをさせていただいていたら、いつの間にか自身がデザイナーになっていました( ´ ▽ ` )ノ

とはいえ専門学校に通っていたわけではなく、大学時代は工学部でひたすら物理や数学を勉強していた私にとって、デザイナーになるまでにはたくさんの壁がありました。

とくに「ポートフォリオ制作」はもっとも大変でしたが、もっとも楽しかったことでもあります。

職務上、さまざまなデザイナーさんが作られているポートフォリオを見ていたため、ポートフォリオの重要性については十分にわかっていました。でも、実際自分で作るとなると、どんなことを載せるべきか、どんなまとめ方をするべきかなど、とても悩みました。

いままで見てきたたくさんの方のポートフォリオの良いと思う部分を分析したり、いろんなデザイナーさんにアドバイスをいただいたり、あらゆる参考サイトや本を読み漁ったり……。転職活動中も、企業の方に「〇〇もあったらもっと良くなるよ!」とアドバイスをいただくこともありました。

そのときの経験を生かして、今回はポートフォリオの作り方について自分なりにまとめてみます。

ぜんぶで3回に分けてお届けします。

ポートフォリオの作り方
第一回目:ポートフォリオに載せる作品をつくる(この記事)
第二回目:作品を言語化してまとめる方法を考える(次回記事)
第三回目:いざポートフォリオづくり(次次回記事)

今回の記事では、ポートフォリオに載せる作品づくりについて書いていきます。私のように未経験からデザイナーを目指す方や、ポートフォリオづくりに苦戦している方に参考にしていただけたら幸いです!

 
また、本記事と同じ内容をYouTubeにもUPしています!動画や音声で楽しみたい方はこちらを参照してみてくださいね。

ポートフォリオに使えるサイト制作をサポートします!

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。弊社のスクールでは、ポートフォリオに使えるWebサイト制作を0からサポート! さらにポートフォリオの添削もおこなっています!

▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
デジタルハリウッドSTUDIO by LIG

そもそもポートフォリオとは?

コトバンクには、こんなことが載っていました。

①携帯用書類入れ。
②写真家やデザイナーなどが自分の作品をまとめたもの。
③経済主体(企業・個人)は所有する各種の金融資産の組み合わせ。
④ポートフォリオ-セレクションの略。

ここでいうポートフォリオは、「②写真家やデザイナーなどが自分の作品をまとめたもの」ですね。自分が作ったサイトなどの制作物をまとめたもの。

まとめ方は、ポートフォリオサイトとしてサイトにまとめる方法、WordやPowerPointにまとめてPDFで出力する方法、画像にしてフォルダにまとめる方法などさまざまです。

転職活動におけるポートフォリオの重要性

デザイナーは専門性が必要となる職業のため、就職や転職をする際、履歴書や職務経歴書に加えてポートフォリオが必要になるケースがほとんどかと思います。ポートフォリオ制作はかなり大変なことですが、裏を返すと、ポートフォリオを作れば、実務未経験でもデザイナーとして転職できる企業さんの幅は広がります。

というのも近年、UXデザインなどデザイナーに求められる領域が広がったこともあり、デザインの価値が高まっている一方、デザイナー不足の企業さんは多い状況です。デザインの実務経験がなかったり、大学・専門学校でデザインを学んでいなかったりしても、デザインスキルが企業さんの求めるレベルに達していれば、採用される可能性も高まっているように思います。

またポートフォリオは、作品自体のデザインスキルだけでなく、作品やポートフォリオ自体の企画力・見せ方などさまざまなスキルをアピールすることも可能です。

「分析が得意」「企画力がある」「キャッチコピーやライティングができる」など、自身の得意なことをポートフォリオに盛り込むことで、「この人はデザインスキルさえ身につけば即戦力になってくれそう」と企業さんに思ってもらえるのです。

ポートフォリオ作りの流れ

具体的なポートフォリオの作り方については、ざっくりこんな感じかと思います。

ポートフォリオの作り方の手順
  1. ポートフォリオに載せる作品をつくる
  2. 作品を言語化してまとめる方法を考える
  3. いざポートフォリオづくり

今回は【載せる作品づくり編】として、「ポートフォリオに載せる作品をつくる」ことを、私が実際に作った作品の事例とともにお話しします(^ω^)

ポートフォリオの作り方【載せる作品づくり編】

「はい! ポートフォリオ作りましょう!」となっても、

「いや、作品ってなんだよ、デザイナーやなかったし……」
「絵描くんかな……上手くないんやけど……」

ってなりますよね。私もそうなりました。

未経験デザイナーは、そもそもポートフォリオに載せる“作品”がないことが多いかと思うので、ここを乗り越えるのが大変です。むしろ、ここを乗り越えれば、視界がパアアアアアッと広がるでしょう( ´ ▽ ` )ノ

私の場合はこんな流れで作品をつくりました!

作品づくりの流れ
  1. 作る作品の決定
  2. 目的・目標設定
  3. ペルソナ策定
  4. サイトに流入するまでの流れ
  5. コンテンツ情報の精査
  6. コンテンツの組み立て
  7. イメージボードの策定
  8. ワイヤーフレーム設計
  9. デザイン制作

な、ながいですね……私もそう思いました……。

それでは、ひとつずつ説明していきます!

1. 作る作品の決定

周りでデザイン依頼をいただけないかアンテナをはり、なるべく多くの作品を作りましょう。友人や知人などからいただく些細な依頼も大事な作品になります。

私の場合は、Webデザインのお仕事にあまりアンテナを張れていなかったので、実際にある店舗のサイトにおける仮想リニューアルを行いました。実際にある店舗であれば、想像しやすくより現実味を帯びた作品を作ることができるかなと考えたからです。

しかし実際に転職活動をしている際、担当者の方に「実際にクライアントさんがいる作品もあった方がより良かったかな。クライアントさんの目線が含まれるとデザインは変わってくるから、その方がより現実的なデザインになって、こちらとしても想像しやすい」と貴重なアドバイスをいただきました。

デザイン未経験者にとってお仕事を受けるということは難しいかと思うので、無償で何かデザインできるものはないかアンテナを張ってみると良いでしょう。

今回は、「ある美容院サイトにおける仮想リニューアル」を例にお話ししていきます。

2. 目的・目標設定

さあ、作るものが決まったら、その作品における目的・目標を決めましょう。
これは特に正解はないのですが、なんとなく定めるより裏付けがあると良いかと思います。

美容院サイトの場合、データをもとに目的・目標をこんな感じで設定しました。

目的:新規顧客を増やす
目標:新規のお客様がその美容院に予約する

3. ペルソナ策定

デザイン制作にあたって、欠かせない存在となっているペルソナ。コトバンクには、こんな感じで載っていました。

ペルソナとは仮製品やサービスのユーザー像を仮想の人物として定義したものをいう。実際のユーザーにはさまざまな人が含まれるが、ペルソナではその中で最も重要な人物像に焦点を当てることによって、具体的なユーザー像をイメージしやすくなるメリットがある。

ペルソナは、私の中では、「現実にいそうなターゲット」と定めています。仮想サイトをどんな人が見そうなのか・どんな人に見てもらいたいのか、属性・生活・行動などを考えます。

美容院サイトの場合、ペルソナを下記のように設定しました。

また、ペルソナを考えるにあたって、「なんとなくこんな感じ」より、「こういう理由でこう定めている」の方が、説得力があります。

私の場合は、データを用いてロジックを組み立てることが好きだったこともあり、定量的なアプローチでペルソナを導きました。

データ量がかなり多く、書いたらすごい量になってしまったため、具体的なアプローチについては今回は割愛させていただきます(´・ω・`)

4. 流入フロー

ユーザーがサイトにどのような経路で入ってくるかデータをもとに考えます。

それによって、アプリ・スマホファースト・PCファーストなどどういったサイトにするか、コンテンツやデザインの必要な要素や優先すべき要素は何かなどの参考になります。

美容院サイトの場合は、30代の女性が「通勤電車の中、スマートフォンで通いたい美容院をなんとなく探す」ことを利用シーンとし、サイトに流入するまでの流れを考えました。

5. コンテンツ情報の精査

ペルソナや利用シーンが見えたら、ペルソナにとって必要な情報を洗い出していきます。ペルソナにとって必要な情報が洗い出せたら、ペルソナのニーズを満たせるコンテンツを考えます。

たとえば、美容院サイトの場合、ペルソナが「居心地の良い空間を求めている(=ペルソナにとって必要な情報)」のであれば、「お店が提供しているサービス、内装、スタッフの雰囲気(=ペルソナのニーズを満たせるコンテンツ)」を記載します。

また、この時、各コンテンツの優先順位なども決めておくと良いでしょう。

6. コンテンツの組み立て

載せるコンテンツが決まったら、コンテンツを組み立てていきます。

まず、上で定めた各コンテンツの優先順位に沿って、「ヘッダー→コンセプト→特徴→……」など全体の流れを決めていきます。そのあと、ヘッダーの中には何のコンテンツを入れるのかなど、詳細を詰めると良いでしょう。

このときそれぞれの項目ごとに、ユーザーにどういった感情を抱いてほしいか、ユーザーの感情の流れを考えると良いでしょう。ユーザーの感情の流れを考えてみることで、「写真か文字どちらで見せるべきか」「どういった表現が良いか」などをユーザー目線で考えることができると思います。

美容院サイトの場合は、ユーザーがサイトに訪れてから予約するまでの感情の流れを考え、美容院側が伝えたい情報の優先順位と照らし合わせてコンテンツを組み立てました。

7. イメージボードの策定

コンテンツが決まったら、いよいよ制作!!!

と、その前に……デザインの方向性を決めましょう(`・ω・´)

今までは、左脳を使ってゴリゴリ言語化していましたが、ここではいかに妄想するかが大切です。

「設定したペルソナ像」「対象物の世界観」の2軸より、理想のイメージをできる限り妄想し、思いつく写真やイラストなどを1つのボードに集めます。

美容院サイトの場合は、こんな感じで写真を集めていました。
世界観が近い美容院サイトから、対象美容院のイメージ、ペルソナが好きなもの……などさまざまです。

あっ! イメージを探すときは、Pinterestがおすすめです(^ω^)

質の高いクリエイティブがたくさん載っており、項目ごとにピンすることができるので、こんな感じでまとめておくと良いでしょう。

8. ワイヤーフレーム設計

やっっっっっと制作です!!! あともう少しです!

「ワイヤーフレーム」という、これまたよく聞く言葉。

いつも頼りにしているコトバンクには、こんな感じで載っていました。

Webページの大まかなコンテンツやレイアウトを示した構成図。主にレイアウトの確認、メニュー構成の確認、要素の強弱の確認などを目的に作成する。

コトバンクさんの言うとおり。

ここでは、コンテンツの順番や、想像したイメージをもとにレイアウトを作っていきます。

ワイヤーフレームは、白とグレーで示されているものが多いかと思います。手書きかデザインツールなど書き方については、やりやすさやそのときの状況によって変わってくるかと思うので、ワイヤーフレームのゴールを自分なりに定めておくと良いでしょう。

また、美容院サイトの場合は、サイトを作るのが初めてだったこともあり、大きさや余白感、フォントや文章などもなるべく正確に作成し、「あとは写真入れて色つけるだけ〜♪」ぐらいにしていました。

9. デザイン制作

はい! いよいよデザイン制作です(^O^)!!

ワイヤーフレームをもとに、写真やイラスト、キャッチコピーや文章を入れていきます。

デザインは、「位置」「余白感」「大きさ」「フォント」「色」「写真」……などさまざまな要素で構成されています。

数え出すと多すぎて大変ですが、「デザインの基礎」「らしさの表現」の2つの視点を意識すると良いかと思います。

デザインの基礎

デザインには、「近接」「整列」「強弱」「反復」と4つの基本原則があります。これは、簡単そうに見えて意外とできていない人も多い原則で、これらを意識して制作すると、非デザイナーでも見やすく綺麗なデザインができるでしょう。

デザインの基礎については、かなりの数の本を読んで勉強したのですが、中でもわかりやすかったおすすめの書籍を2冊載せておきます(^ω^)


らしさの表現

サイトのゴールにもよりますが、「ただ見やすいだけのデザイン」だと、個性のないデザインとなってしまいます。作成したイメージボードを参考にし、対象物らしさを引き出すデザインを考えましょう。

集めたイメージの、ミクロな視点(色やフォント、カタチや写真の加工方法など)から、マクロな視点(全体のテイスト、余白感や大きさなど)までしっかり観察すると、「らしさ」のデザインのコツをなんとなく掴めると思います。

美容院サイトの場合は、まずはデザインの基礎を重視してデザインを作り、あとから「らしさ」を加えていきました。

と、こんな感じです!

かなり大変そうな感じもしますが……実際は……大変でした。

しかしながら、「考えてつくる」ということは、作品数が少ない未経験デザイナーにとって大事なことかなと思うので、ぜひチャレンジしてみてください。

Webサイトづくりに役立つ情報まとめ

商用利用可なフリー素材集

デザインの参考サイトまとめ

次回は準備編!

今回はポートフォリオに載せる作品づくりについて書いていきました。

ポートフォリオの作り方の手順
第一回目:ポートフォリオに載せる作品をつくる(この記事)
第二回目:作品を言語化してまとめる方法を考える(次回記事)
第三回目:いざポートフォリオづくり(次次回記事)

次回は【作品まとめ編】として、作品を言語化して、ポートフォリオをまとめるための適した媒体選びについて書きたいと思います!

引き続きよろしくお願いします( ´ ▽ ` )ノ

 

働きながら♪ 授業の合間に♪ Webデザインを勉強するなら……デジタルハリウッドSTUDIO by LIG

ポートフォリオの作品づくりもサポート! LIGが運営するWebデザインスクール卒業生の作品も覗いていってね!