猫でもわかる！デザイン教室 > 独学デザイン入門 > 【採用される】Webデザインのポートフォリオを作る3つの流れとコツ
独学デザイン入門

【採用される】Webデザインのポートフォリオを作る3つの流れとコツ

 

この授業は次のような方におすすめです。

・未経験でWebデザインの仕事がしたくて就職や転職をする方

・ポートフォリオを作るコツを知りたい方

この授業を受け終えたら、ポートフォリオの作り方を理解でき、見事就職を勝ち取ることができるかもしれませんよ!

どうぞ最後までご覧になってください。

目次
  1. ポートフォリオって何?
  2. 転職するためにはポートフォリオが重要
  3. ポートフォリオを作るなら紙かWebか?
  4. Webデザインのポートフォリオを作る際に意識したい2つのこと
  5. ポートフォリオを作る3つの流れ
  6. 参考になるポートフォリオサイトをご紹介
  7. まとめ

ポートフォリオって何?

デザイニャー
デザイニャー
ポートフォリオというのは、本来は、複数の書類をまとめたケースということを意味しているというけれど、Webデザインにおけるポートフォリオというのは、自分が作ったWebデザインの作品をまとめたもののことなんだよニャン。

先生
先生
そう。今まで作った作品や実績がひと目でわかるように、センス良くまとめたもので、Webデザインを含めたクリエイティブな職業に必須のアイテムだよ。

転職するためにはポートフォリオが重要

デザイニャー
デザイニャー
ポートフォリオを作るのにはちょっと骨が折れるようだけれど、ポートフォリオを作ると、Webデザインの仕事に転職できる会社の幅が広がるんだよニャン。

先生
先生
そうだね。最近ではUXデザインというものが進出していていて、Webデザイナーに求められる仕事の幅が広がってきていて、デザインの価値が高まってきているんだ。それに、今はデザイナー不足の会社が多いから、Webデザインの実務経験がなくても、ポートフォリオで自分のスキルをアピールすることで、採用される可能性も高くなるんだ。

先生
先生
それにポートフォリオを作ることで、作品のデザインスキルだけでなくて、ポートフォリオ自体の企画力や見せ方などでも、スキルをアピールをすることにも繋がるんだ。

デザイニャー
デザイニャー
分析力、企画力、キャッチコピーやライティング力など、ポートフォリオに自分が得意なことをアピールすることで、会社側から、これにデザインスキルが身につけば即戦力になってくれそうと思ってもらえるってことだニャン。

ポートフォリオを作るなら紙かWebか?

デザイニャー
デザイニャー
そんなわけで、ポートフォリオを作りたいんだけれど、紙とWebサイトのどちらで作ればいいのか迷ってしまうニャン。

先生
先生
そうだね。紙とWebサイトと両方あった方が理想だけれど、最低限でいえば、Webサイトのポートフォリオだけは作っておいた方が良いよ。ただ、デザインをやりたいという気持ちが強かったりするのならば、紙版のみでもOKだよ。

デザイニャー
デザイニャー
それに印刷物も作れることもアピールしたいとかって場合は、紙のポートフォリオも作っておいた方が良いよニャン。

コーディングを主にしたWebデザイナーや、フロントエンドエンジニアを目指している場合は、ポートフォリオサイトだけでも大丈夫だが、デザイン重視のWebデザイナーになりたいのならば、紙のポートフォリオも作りましょう。

Webデザインのポートフォリオを作る際に意識したい2つのこと

先生
先生
Webデザインのポートフォリオを作る際に意識したいポイントは次の2つだよ。

・デザインスキル

・デザインで伝える力

先生
先生
この上の2つはポートフォリオを作る上で大事なポイントだよ。

・デザインのスキル

・コーディングのスキル

・今のトレンドを取り入れた表現方法

など、自分ができることを訴えましょう。

また、自分の思考方法を表現することで、デザインをする上で、デザイン力だけでなく、会社やクライアントの悩みを解決する力があることをアピールしましょう。

そして、どんな根拠を持ってデザインしたのかを伝える力も求められます。

問題を解決するときの思考プロセスをポートフォリオに載せることが大切です。

ポートフォリオを作る3つの流れ

先生
先生
ポートフォリオは次の3つの流れで作っていくよ。

1.ポートフォリオに使う作品を作る

2.作品を言語化してまとめる

3.ポートフォリオ作成開始！

1.ポートフォリオに使う作品を作る

デザイニャー
デザイニャー
ポートフォリオを作ろうとしても、どうやって作れば良いのかわからないニャン。

先生
先生
そうだね。デザイン未経験だと、ポートフォリオに載せる作品がないし、どうやって作れば良いのか、なかなかわからないよね。

例えば、次のような流れで作っていくと良いです。

・作る作品を決める

・目標設定

・ペルソナを考える

・流入フローを考える

・ペルソナのニーズを満たすことを考える

・コンテンツを組み立てる

・デザインの方向性を決める

・ワイヤーフレームを作る

・デザインを制作する

作る作品を決める

先生
先生
まずは、なるべくたくさんの作品を作ろう。自分の周りでデザイン依頼をしてくれる人がいないかアンテナを張ろう。友人や知人などからの依頼は大事な作品になるからね。

デザイニャー
デザイニャー
デザイニャーには適当な友人知人がいないから、「レストランのリニューアル」という架空案件の仕事を試しにやってみようと思うニャン。

目標設定

先生
先生
作るものが決まったら、まずはその案件の目的・目標を決めよう。

デザイニャー
デザイニャー
例えば、次のようなものを考えてみたニャン。

・目的　⇨　新しいお客さんを増やす

・目標　⇨　新しいお客さんがレストランに予約をする

ペルソナを考える

先生
先生
目的と目標を決めたら、次はペルソナ設定をしよう。

ペルソナ設定とは、ターゲットになってくれる仮の人物像を定めることを言います。

・作ったWebサイトをどんな人が見てくれそうなのか

・どんな人に見てもらいたいのか

といった、属性や生活、行動などを考えます。

デザイニャー
デザイニャー
デザイニャーが考えたペルソナを考えてみたニャン。

・32歳、女性、会社員

・2つ年上の彼氏がいる

・仕事が忙しくて、外食することが多い

・若い頃と比べて少し太ってきたので運動をしようとジムに通い出した

・情熱的で負けず嫌いな性格

流入フローを考える

先生
先生
ターゲットがどのような経路でWebサイトを訪れるのかをデータを元に考えよう。

それを考えることによって、PCファーストのWebサイトにするかスマホファーストのWebサイトにするかを決めたり、デザインやコンテンツに必要な要素や優先した方がいい要素を決める参考になります。

デザイニャー
デザイニャー
レストランのWebサイトの場合は次のシーンを考えてみたニャン。

・昼休みの時間に、外食をするために美味しいレストランをなんとなく探す

ペルソナのニーズを満たすコンテンツを考える

先生
先生
利用シーンが見えてきたら、設定したペリソナが必要とする情報を洗い出していこう。

デザイニャー
デザイニャー
ここで、ペルソナのニーズを満たせるコンテンツを考えてみたニャン。

・彼氏と楽しく食事をする

・居心地が良い

・パエリアと食後のデザートが美味しい

・接客がスマートな中に温かみがある

先生
先生
ここで優先順位をつけるとしたらどうなる?

デザイニャー
デザイニャー
次のように考えてみたニャン。

①ピザと食後のデザートが美味しい

②接客がスマートな中に温かみがある

③居心地が良い

コンテンツを組み立てる

先生
先生
コンテンツが決まったら、コンテンツを組み立てていこう。

さっきデザイニャーが決めたコンテンツの優先順位に沿って、ヘッダー、コンセプト、特徴というように全体の流れを決めていきましょう。

その後に、ヘッダーには何のコンテンツを入れるのか、といった詳細を詰めていくとうまくいきます。

それぞれの項目ごとに、どういった感情を持ってほしいかを考えましょう。ターゲットの感情の流れを考えながら、どういった表現いすれば良いか、ここは写真がいいか文字で伝えるべきかなどを、ターゲットの目線で考えることができます。

デザイニャー
デザイニャー
レストランサイトの場合は次のようなことを考えてコンテンツを組み立ててみることにするニャン。

・ユーザーがWebサイトを訪れてから予約をするまでにどんな感情の流れになるか

・レストラン側が伝えたい情報の優先順位を考える

デザインの方向性を決める

先生
先生
コンテンツが決まったら、制作をする前に、デザインの方向性を決めるんだ。

ペルソナ像と対象物の世界観の2軸から、理想のイメージをできる限り想像して、思いつくイラストや写真などを1つのボードに集めていきましょう。

先生
先生
このとき、Pinterestを使うと便利だよ。

ワイヤーフレームを作る

先生
先生
デザイン制作にうつる前に、ワイヤーフレームを作るという作業があるよ。

デザイニャー
デザイニャー
ワイヤーフレームというのは確か、コンテンツの順番や想像しているイメージを元にしてレイアウトをしたものだよニャン。

先生
先生
ワイヤーフレームは、白とグレーの配色で作られているものが多いけれど、手書きで作るかデザインツールで作るかは、場合によって変わってくるから、自分の中でワイヤーフレームのゴールを決めておくといいよ。

デザインを制作する

先生
先生
ここからいよいよデザイン制作に入るよ!

作ったワイヤーフレームを見ながら写真、イラスト、文章やキャッチコピーを入れていきます。

先生
先生
ここでは次の2つの視点を意識していこう

・デザインの基礎

・らしさを表現する

デザインの基礎

先生
先生
デザインには次の4つの基本原則があるよ。

・近接

・整列

・対比

・反復

先生
先生
これらを考えながらデザインを制作すると、初心者でも綺麗で見やすいデザインを作ることができるんだ。

デザインの基礎を学ぶためには、次の2つの本をおすすめします。

カフェメニュー表余白色付き
デザインの4大原則独学でデザインを学んでいるデザイン初心者さんへ向けた、デザインの4大原則について紹介しています。近接（proximity)　整列（alignment）対比（contrast）反復（repetition）...
グラフィックデザインを独学で身に着ける方法【王道は本で学ぶ】グラフィックデザイナーになるのは、スクールに行かなくても大丈夫!この記事では、独学でグラフィックデザイナーになりたい人へ向けて、勉強法を詳しく解説しています。...
グラフィックデザインを独学で学ぶときの本の選び方とおすすめ本20選これからグラフィックデザインを学んでいこうとするために、すごく参考になる本を、20冊ピックアップして、ご紹介しています。初心者デザイナーさん、独学で学ぼうとされている方、そして、デザイナーじゃないんだけれど、仕事でデザインをつくることになってしまった、という方におすすめの記事です。...
らしさを表現する

先生
先生
Webサイトにたどり着くゴールによっても違うけれど、ただみやすいだけのデザインにしてしまったら、個性のないデザインになてしまうから、注意が必要だよ。作ったイメージボードを参考にしながら、「らしさ」を引き出すデザインを考えよう。

らしさのデザインのコツをつかむには、次のことを観察しましょう。

・全体のテイスト

・余白感

・大きさ

先生
先生
まずはデザインの基礎を守りながらデザインを使ってらしさを加えていくといいよ。

これをするのは簡単ではありませんが、考えながら作ることは、まだ作品数が少ない未経験のデザイナーにとっては大事なことなので、チャレンジしてみましょう。

先生
先生
ここまでできたらデザインの作品作りは完了だよ。次はいよいよポートフォリオを作っていこう。

２.作品を言語化してまとめる

先生
先生
ここまで作った作品たちをポートフォリオに魅力的にまとめるために、相手に伝わるような作品の説明を考えていこう。

作品の説明とは、

・どんな手順で作品を作ったのか

・どんな特徴をどんなふうに表現したのか

ということを言語化することを指します。

先生
先生
作品を作っているときにも言語化はある程度できていると思うんだけれど、ポートフォリオを作るときには改めてもう一度まとめ直すことが重要なんだ。

次のような流れで言語化していきましょう。

・クライアントの名前

・概要

・ペルソナ

・ペルソナを導いていく流れ

・流入フロー

・コンテンツのアイデア

・デザインのアイデア

先生
先生
この工程については次の記事で詳しく説明されているので、次のリンクから続きを読んでみてね。
あわせて読みたい

未経験デザイナーのためのポートフォリオの作り方【作品まとめ編】

３.ポートフォリオ作成開始！

先生
先生
言語化ができたら、いよいよポートフォリオの作成開始だよ。

ポートフォリオに加えるべきなのは次の5つの項目です。

・自己紹介、スキル

・プロジェクト名

・デザインのコンセプト

・工夫したポイントをアピール

・制作する時に担当した領域とスキルの説明

自己紹介、スキル

先生
先生
プロフィールページに記載する内容は次のとおりだよ。

・氏名

・顔写真

・生年月日

・職歴

・保有資格とスキルのレベル

・得意分野

・自己PR

先生
先生
いつから学習を始めたのか、どのような言語を身につけているのか、これまで作ってきた作品についてなど、自分の経歴を簡潔にまとめよう。特に未経験の場合は、作品作りへのこだわりや熱意、今学んでいるスキルやこれから身につけたいスキルを書いて意欲をアピールしよう。

もし、実際に受注したデザイン案件があったら、どのくらいの規模のもので、どのようなことを担当したのかや、金額についてなど、具体的に記載していきましょう。

プロジェクト名

ファーストビューのキャプチャーと一緒に担当したプロジェクト名を記載しましょう。

先生
先生
WebサイトのURLもつけて、作ったサイトを実際に確認できるようにしておこう。万が一オフラインでしかポートフォリオを確認できない場合のことを考えて、紙に印刷したポートフォリオを添えておくと安心だよ。

デザインのコンセプト

先生
先生
ビジュアルだけでは判断できない作品のポイントを伝えよう。

どのようなターゲットを意識しているのか、デザインの考え方や目的を書いておく必要があります。

先生
先生
面接の時に質問されることを考えて、ポートフォリオで簡潔にまとめておこう。

工夫したポイントをアピール

問題解決をするために工夫したポイントに加えて、デザインを作るときにこだわった部分もポートフォリオに記述しましょう。

制作する時に担当した領域とスキルの説明

何人かで作ったプロジェクトの場合、自分がどの領域を担当したのかを記述しましょう。

・PhotoshopやIllustratorを使ったデザインの能力

・コーディング力

・JavaScriptなどのプログラミング力

・WordPressのスキル

採用する企業側にあなたのWebデザインの能力を示すような説明文を添えましょう。

参考になるポートフォリオサイトをご紹介

先生
先生
最後にポートフォリオを作るのに参考になるサイトを紹介しておくよ。
あわせて読みたい

・Webデザインギャラリー : ポートフォリオサイト – Choicely
・ポートフォリオサイトを自分で作るコツ｜掲載内容や初心者におすすめツールも紹介

まとめ

先生
先生
この授業では次の25個のことをお話ししてきたよ。

・ポートフォリオって何?

・転職するためにはポートフォリオが重要

・ポートフォリオを作るなら紙かWebか?

・Webデザインのポートフォリオを作る際に意識したい2つのこと

・ポートフォリオを作る3つの流れ

・1.ポートフォリオに使う作品を作る

・作る作品を決める

・目標設定

・ペルソナを考える

・流入フローを考える

・ペルソナのニーズを満たすことを考える

・コンテンツを組み立てる

・デザインの方向性を決める

・ワイヤーフレームを作る

・デザインを制作する

・デザインの基礎

・らしさを表現する

・2.作品を言語化してまとめる

・3.ポートフォリオ作成開始！

・自己紹介、スキル

・プロジェクト名

・デザインのコンセプト

・工夫したポイントをアピール

・制作する時に担当した領域とスキルの説明

・参考になるポートフォリオサイトをご紹介

私たちは頑張るあなたを応援しています!

RELATED POST