Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード
#57
WEBデザインをはじめよう

未経験Webデザイナーのためのポートフォリオの作り方と参考サイト

ななみん

はじめまして! デザイナーのななみんです。

私は大学は工学部だったし、前職もデザインとは関係のない仕事だったので、デザイナーになるまでにはたくさんの壁がありました。とくに「ポートフォリオ制作」はもっとも大変でしたが、もっとも楽しかったことでもあります。

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

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

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

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

※この記事は2022年5月に編集部が情報を更新しました

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

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

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

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

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

ポートフォリオは紙とWeb、どちらがいいの?
基本的にはデジタルでのやり取りになるので、Webでの作成がマストです。

ただし、使い分けも大切。紙の場合、Web上で見るよりも細かな表現が伝わりやすかったり、画面以上の迫力を伝えることができます。選考で直接やりとりする場合、紙のポートフォリオを利用するのも一つの手です。

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

Webデザイナーは専門性が必要となる職業のため、就職や転職をする際、履歴書や職務経歴書に加えてポートフォリオが必要になるケースがほとんどです。(求人の募集要項などに記載がなくても、選考途中で提出を求められます。)

ポートフォリオ制作はかなり大変なことですが、裏を返すと、ポートフォリオを作れば、実務未経験でもWebデザイナーとして転職できる企業さんの幅は広がります。

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

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

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

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

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

ポートフォリオの作り方の手順
  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冊載せておきます(^ω^)



 

らしさの表現

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

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

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

と、こんな感じです!

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

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

相手に「伝わる」ように作品の説明を考える

愛情をたっぷり込めて必死に作ったポートフォリオに載せる作品たち。これらをポートフォリオへ魅力的にまとめるために、相手に「伝わる」ように作品の説明を考えていきます。

作品の説明とは、「どのような手順で作品を制作したのか」「どんな特徴をどのように表現したのか」ということを言語化することです。作品づくりの際にも、ある程度は言語化ができているかと思いますが、ポートフォリオを作る時はそれをもう一度まとめ直す必要があります。

言語化の流れ
  1. クライアント名
  2. 概要
  3. ペルソナ
  4. ペルソナを導く流れ
  5. 流入フロー
  6. コンテンツアイデア
  7. デザインアイデア

私は考えて作品を作ったことがわかるよう、上記を記載しました。

▼詳しくはこちらの記事をご覧ください

ポートフォリオを制作する

いよいよポートフォリオ自体の制作です!流れは次の通り。
 

作品集制作の流れ
  1. どんなコンテンツを入れるか決める
  2. イメージボードの策定
  3. Webサイトのデザイン制作
  4. Webサイトへの組み込み

それぞれ簡単に解説します。

どんなコンテンツを入れるか決める

ポートフォリオには、ここまで紹介してきた作品紹介以外にも、入れるものがあります。
 

ポートフォリオに入れるコンテンツ例
  • メインビジュアル
  • コンセプト
  • プロフィール(自己紹介や強み)
  • 作品とその説明
  • コンタクト(連絡先やSNSの情報)

プロフィールに載せる内容は、名前や生年月日、顔写真、学歴経歴などの基本情報に加え、スキルレベル(使用できるツールや言語、使用歴など)を記載します。

ここでは、クライアントや企業が知りたい情報を重視して掲載するのがポイント。業務に役立つような、アピールにつながる内容を書くように意識しましょう。

イメージボードの策定

作品作りで紹介したものと同様、イメージボードの策定では、デザインの方向性を決めていきます。

Webデザイン制作〜サイトへの組み込み

今回は、コーディング代わりにSTUDIOを用いてポートフォリオサイト制作を行いました。なので、Photoshopで作成したデザインをSTUDIOに組み込みました。これでポートフォリオが完成です!

▼メインビジュアル
ポートフォリオサイトのメインビジュアル
 
▼コンセプト
ポートフォリオサイトのコンセプト
 
▼強み
ポートフォリオサイトの強み
 
▼制作物
ポートフォリオサイトに載せた制作物
 
▼コンタクト
ポートフォリオサイトのコンタクト
 

▼詳しくは下記の記事をご覧ください

参考になるポートフォリオサイト

最後に、かっこいいポートフォリオサイトを紹介します!

ポートフォリオづくりの参考になると思いますので、ぜひ覗いてみてください。

UNDERLINE:シンプルだけどインパクトがあるポートフォリオサイト


UNDERLINE

フリーランスでWeb制作をしている徳田優一さんのポートフォリオサイト。シンプルなデザインですが、ご自身の写真をファーストビューに置くことで、インパクトもあるデザインになっています。

できることと今まで作ってきた作品がパッとわかる構成。作品紹介欄は余白が多く、作品に目がいくデザインになっています。

NAOKI FUKUSHIMA:白基調のシンプル系ポートフォリオサイト

フクシマナオキさんのポートフォリオサイト1フクシマナオキさんのポートフォリオサイト2NAOKI FUKUSHIMA

フリーランスのWebデザイナー、フクシマナオキさんのポートフォリオサイト。

こちらも余白をいかしたデザインになっています。写真をクリックすると詳細が表示されるようになっていて、どの写真も魅力的なので思わずクリックしたくなってしまいますね。

また、デザインだけでなく、Web制作におけるスタンスやご自身の強みなどをテキストで書かれており、依頼する側も安心して任せることができる印象です。

TAIKI KATO:一つのギャラリーを見ているようなデザイン

加藤タイキさんが運営するクリエイティブスタジオのポートフォリオサイトTAIKI KATO

アートディレクター、デザイナーとして活躍する加藤タイキさんが運営するクリエイティブスタジオのサイト。ブランディングやWeb、ロゴというふうにカテゴリ別で見られるようになっています。一つひとつの写真が素敵で、まるで一つのギャラリーを見ているようです。

作品紹介の詳細ページは、作品写真をメインにしたデザイン。質の高い写真ばかりで、説明なしでもすごさが伝わってきます。

一部では制作過程も掲載しており、ものづくりへの真摯な姿勢が伺えます。

Makoto Hirao

平尾誠さんのポートフォリオサイト
https://hiraomakoto.jp/

Webコンサルティング会社を経営する平尾誠さんのポートフォリオサイト。ファーストビューで出てくる「Code is Design」の文字をあえて画面右側にはみ出させることで、目線を横スクロールに誘導させるデザインが印象的です。

過去実績をメインとしたコンテンツ配置で、各サムネイル画像をクリックするとその実績の詳細を確認することができます。そのデザインにした理由も解説されているので、Webデザインをする上での参考になります。

S5 Studios

田渕将吾さんのポートフォリオサイト。
https://www.s5-studios.com/
アートディレクター・インタラクションデザイナーの田渕将吾さんのポートフォリオサイト。

アニメーションが全ページに駆使されており、異世界に来たような空間が演出されています。視覚だけにとどまらず、BGMを付けることでより世界観を表現されいる印象です。

まとめ

今回は、ポートフォリオの作り方と、お手本になるポートフォリオサイトをご紹介しました。

未経験でポートフォリオを作るのはたしかに難しいですが、デザインの仕事を経験していなくても自分らしさを企業の人に伝えるチャンスです! この記事がみなさんのポートフォリオ制作に役立てば幸いです。

また、今回の記事の内容のYouTubeもあります。音声で学びたい方は、こちらも併せてご覧ください。

 

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