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

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

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

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

ポートフォリオって何?

デザイニャー

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

先生

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

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

デザイニャー

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

先生

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

先生

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

デザイニャー

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

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

デザイニャー

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

先生

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

デザイニャー

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

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

先生

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

先生

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

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

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

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

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

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

先生

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

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

デザイニャー

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

先生

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

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

作る作品を決める

先生

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

デザイニャー

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

目標設定

先生

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

デザイニャー

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

ペルソナを考える

先生

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

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

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

デザイニャー

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

Webデザインを作って成果を出すためのペルソナを設計する3ステップこの授業は次のような方におすすめです。 ・成果のできるWebデザインを作る必要のあるWebデザイナーの方 ・作ったWeb...

流入フローを考える

先生

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

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

デザイニャー

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

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

先生

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

デザイニャー

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

先生

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

デザイニャー

次のように考えてみたニャン。

コンテンツを組み立てる

先生

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

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

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

デザイニャー

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

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

先生

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

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

先生

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

ワイヤーフレームを作る

先生

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

デザイニャー

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

先生

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

デザインを制作する

先生

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

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

先生

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

デザインの基礎

先生

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

先生

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

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

デザインの4大原則独学でデザインを学んでいるデザイン初心者さんへ向けた、デザインの4大原則について紹介しています。近接（proximity)　整列（alignment）対比（contrast）反復（repetition）...

グラフィックデザインを独学で身に着ける方法【王道は本で学ぶ】グラフィックデザイナーになるのは、スクールに行かなくても大丈夫!この記事では、独学でグラフィックデザイナーになりたい人へ向けて、勉強法を詳しく解説しています。...

グラフィックデザインを独学で学ぶときの本の選び方とおすすめ本20選これからグラフィックデザインを学んでいこうとするために、すごく参考になる本を、20冊ピックアップして、ご紹介しています。初心者デザイナーさん、独学で学ぼうとされている方、そして、デザイナーじゃないんだけれど、仕事でデザインをつくることになってしまった、という方におすすめの記事です。...

らしさを表現する

先生

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

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

先生

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

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

先生

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

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

先生

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

作品の説明とは、

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

先生

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

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

先生

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

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

先生

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

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

自己紹介、スキル

先生

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

先生

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

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

プロジェクト名

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

先生

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

デザインのコンセプト

先生

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

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

先生

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

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

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

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

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

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

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

先生

最後にポートフォリオを作るのに参考になるサイトを紹介しておくよ。

まとめ

先生

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

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