Webデザイナーで未経験者がポートフォリオを作るには？初心者でも知っておくべき4つの流れ

「Webデザイナーになりたいけど、ポートフォリオはどうすればいいんだろう…」
「未経験者でもポートフォリオって必要なのかな…」

と思うことはありませんか？

何か実績を作りたくても、未経験だとポートフォリオは作りづらいですよね。

では、未経験者がWebデザイナーになるためにはポートフォリオをどうすればいいのでしょうか。

そこで今回は、

について詳しく解説します。

この記事を見れば、Webデザイナーとして活躍していくために、まず何をすればいいかがわかります。

ぜひ最後まで読んでみてください。

ポートフォリオなしは避けたい！Webデザイナー未経験でも作り込むべき

ポートフォリオとは、自身が手掛けた作品集であり、採用者や顧客にアピールするための資料のことです。

Webデザイナー未経験者でも、ポートフォリオは必ず作っておきましょう。

ポートフォリオを作るべき理由は以下のとおりです。

ポートフォリオがないとWebデザイナーとして採用されないだけでなく、フリーランスとしても仕事をもらえません。

Webデザイナーを目指すなら、未経験者でもポートフォリオは必須です。

【未経験】本気でWebデザイナーを目指す人がするべきこと

ポートフォリオはWebと紙の2種類。特徴と用途を知っておこう

ポートフォリオには種類があります。
それぞれ異なる特徴があるので、知っておきましょう。

どちらも用途が異なるので、2つとも持っておいて、使い分けることが好ましいです。

それぞれの用途と特徴を紹介します。

1.紙のポートフォリオ

面接を受けるときは、紙のポートフォリオも持参するようにしましょう。

面接官が何人もいる場合、全員がPCを開いているわけではないので、その人たちに「手にとって見られる資料」として渡せるからです。

以下、紙のポートフォリオの特徴です。

紙のポートフォリオは、良くも悪くもあなたのデザイン力やこだわりがしっかりと反映されてしまいます。

「Webがあるからいいや」ではなく、しっかりと紙も用意しましょう。

2.Web上のポートフォリオ

Web上のポートフォリオは、Webデザイナーをするなら必ず使います。

なぜなら、ポートフォリオはあなたの「履歴書」でもあるからです。

以下、Web上のポートフォリオの特徴です。

あなたのスキルやセンスが見る人すべてに伝わるので、しっかり作らないといけません。

最近ではSNSに載せることで不特定多数の人に発信できるようになり、自分をアピールしやすくなりました。

Webデザイナーとして仕事をしていくのに必要なものなので、Web上のポートフォリオは作っておきましょう。

Webデザイナー初心者がポートフォリオに含むべき6つの基本事項

ポートフォリオには、載せておくべき基本事項があります。

好き勝手に書いてしまい、基本事項を載せていないと、あなたの魅力が十分に伝えられません。

載せるべき基本項目は6つあります。

これら6つの項目は必ず載せるようにしましょう。

なかでも特に「作品」「作品のコンセプトや工夫点」はアピールポイントです。

1.目次

目次のように、ページを辿りやすくする機能は必ず付けましょう。

付けていないととても読みづらいポートフォリオになってしまいます。

目次を作るメリットは以下のとおりです。

ユーザーがあなたのポートフォリオを見るとき、サイト構造がわかりやすくなります。

見やすいポートフォリオのほうが、ユーザーからの評価も高いです。

2. 自分のプロフィール

プロフィールページを作ることで、あなた自身をアピールできます。

載せるべき項目をまとめました。

載せるべき項目の中でも、特に自己PRはあなただけの強みや個性なので、しっかり作り込みましょう。

プロフィールをしっかりと作ることで、履歴書や経歴書だけでは伝わらないあなたの能力をアピールできるはずです。

3.作品

作品は最も見られる項目の1つです。

ひと目見れば、あなたのデザイン力やできることがわかります。

作品の欄に載せるべきことは以下のとおりです。

もし未経験で作品数が少なくても、クリック率が高かったり、ある程度利益を出せたページは、「サイトの質」で勝負ができます。

たくさんのポートフォリオサイトを作れなくても、1個1個の質を高めることで、Webデザイナーとしてのチャンスが広がるでしょう。

4.自分のコンセプトや工夫している点

自分が手掛けた作品のコンセプトや工夫した点は必ず載せましょう。

コンセプト・工夫点は、面接のときに相手が興味を持つポイントです。

これらが明確、かつコンセプトに対して多少なりとも結果が伴っていれば、大きなアドバンテージになります。

あなたの強みにするためにも、コンセプトに一貫性を持たせることが大切です。

5.自分の資料が見られるWebページ

もしも専門学校などにデザインを提出していて、自分の作品が見られる学校のサイトなら、そのサイトも掲載しておきましょう。

以下、資料が見られるページを載せるメリットです。

最近はSNSが発達しているので、SNSをやっていない場合でも、多くの人の目に触れられるためにデザイナー用のアカウントを作るのも1つの手です。

Webデザイナーとして仕事をもらうために、少しでも自分の作品がアピールできるページがあれば必ず載せましょう。

6.連絡先

連絡先など、コンタクトを取れる情報は載せておきましょう。

ポートフォリオを見た人が「この人いいな」と思ったとき、問い合わせをもらえます。

逆にこれらを載せて連絡を貰えるようにしておかないと、仕事をもらえるチャンスを逃してしまう可能性があります。

せっかく自分を評価してもらえても、問い合わせできなければ仕事はもらえません。

Webデザイナー未経験者や初心者もチェックすべきポートフォリオ例

Webデザイナーを目指すなら、実際に第一線で活躍しているプロのポートフォリオをチェックしましょう。

各項目をどこに配置しているのか、どんなページデザインにしているのかなど、勉強になることばかりです。

参考になるサイトを以下にまとめました。

未経験者や初心者はプロの仕事をたくさん見ることで、表現や感性が磨かれます。

あなたがポートフォリオを作るときの参考になってくれることでしょう。

1. Choicely

(出典：choicely)

Choicelyにはデザイナーやイラストレーターなどのポートフォリオサイト、実際に作られたサイトページがたくさん載っています。

厳選されたサイトばかりなので、どのサイトを見ても参考になるでしょう。

以下、Choicelyの特徴です。

自身の理想に近いポートフォリオサイトを探すこともできるし、実際にデザインを手掛けるときにも、ページデザインの参考になります。

プロのサイトを参考にし、良いところを取り入れつつ、自分の個性も出せるようなポートフォリオサイトを作れるようになりましょう。

2. Underline

(出典：Underline)

Underlineは、大阪でフリーランスのWeb制作をしている徳田優一さんが運営しているポートフォリオサイトです。

サイトの特徴をまとめました。

トップページだけで必要な情報がすべてわかり、詳細を知りたい人は個別のページに移動するというデザインです。

かなり洗練されていて、無駄が一切なく、とても勉強になります。

3.SANKOU!

(出典：SANKOU!)

SANKOU!はその名の通り、Webデザイン制作の参考になるような素敵なサイトを集めたページです。

企業や商品、イベント系など、いろんなジャンルのサイトデザインが学べます。

それぞれのサイトを見て学ぶべきことは、以下のとおりです。

何気なく見ていて素敵だなと思うサイトには、その要因があります。

消費者目線ではなく生産者目線で、改めてサイトを見てみましょう。

Webデザイナー未経験者がポートフォリオを作成するときの4つの流れ

ポートフォリオを作るときは、段階を追って作るのが定石です。

では実際にWebデザイナー未経験者は、どのような流れでポートフォリオを作っていけばよいのでしょうか。

以下、作るときの流れです。

このように4つの流れを理解することで、できあがった際のポートフォリオの質を上げられます。

あまり考えずに闇雲に作ると、サイトの方向性や狙うターゲットが定まらず、中途半端なサイトになってしまいます。

完成度を高めるためにも、しっかりと順を追って作りましょう。

1.応募企業のスタイルやコンセプト、求める人物像を分析する

企業に就職する場合、まずは相手企業のスタイルや会社のコンセプトを調べましょう。

調べることで、自分がどんなポートフォリオを作ればいいかという道筋がわかります。

これらが想定できると、ポートフォリオの輪郭がハッキリしてきます。

もちろん企業に応募するとき以外でも、ターゲットとする人物像を分析することで、狙った層がポートフォリオを見てくれる機会が増えるでしょう。

2.実績やスキルが、提出先企業でどう生きるか書き出す

ポートフォリオの方向性がハッキリしたら、一度自分の持っているスキルや過去の実績を書き出してみましょう。

書き出せたら、次は自分の実績やスキルを企業の募集要項と照らし合わせます。

自分の実績やスキルが企業の求めるものとまったく違う場合、せっかく持っているスキルもその企業では活かせません。

企業のリサーチを事前にしておけば、企業が求める能力と自身の実績やスキルのズレがなくなり、効果的に自分のポートフォリオをアピールできます。

3.ポートフォリオに掲載できる作品を作成

ポートフォリオを作るための土台ができたら、載せるための作品を作ります。

作品は相手企業にもっとも評価されるポイントです。

以下の項目は、作品を作るときに注意することです。

未経験者がいきなり企業から作品作りを頼まれることはありません。

まずは無償や低報酬でWebデザインをしてもらいたい人を探してみましょう。

Webデザイナー未経験者でも、サイト作成を任せてもらえる可能性があります。

4.ポートフォリオ全体を作成

載せる作品が用意できたら、いよいよポートフォリオ全体を作りましょう。

今はポートフォリオ作成が簡単にできるサイトがいくつかあるので、ご紹介します。

他にもサイトはありますが、利用者が多くて日本語対応しているサイトを厳選しました。

ポートフォリオ作成サイトで作ることで、Webデザイナー未経験者でも簡単に美しいポートフォリオが作れます。

Webデザイナー未経験者のポートフォリオ制作で「作品がない場合」の対応法

まったくの未経験者は、ポートフォリオを作るにしても、載せる作品がありません。

そこで、ポートフォリオに載せる作品がないときの対処法も解説します。

載せる作品がなくても、何かしらのデザインやサイトを載せなければ、アピールすることがない状態になってしまいます。

仕事として作品を手掛けた実績がないなら、今まで学んだことをとにかくアウトプットしてみましょう。

Webデザイナー未経験者がポートフォリオに含める作品の作り方

Webデザイナー未経験者がポートフォリオに載せる作品を作るとき、どうやって作ればよいのでしょうか。

実際に作品を作るときの流れを解説します。

順を追って作れば、未経験者でも基礎がしっかりした作品が作れます。

作品を作る時の流れは、未経験者でもプロでも変わりません。

なので、今のうちから作品制作の流れを身に着けておきましょう。

1.作品の方向性・目標を決める

作品を作り出す前に、作る作品の方向性・目標は定めておきましょう。

方向性が定まってないと、何を目的とした作品なのかがわからない「中途半端な作品」になってしまいます。

最初に方向性や目標を定めるとよい理由です。

「企業や顧客が何を求めているか」と「作品の目標」を照らし合わせたとき、作品の方向性と企業の需要との相違がないようにしましょう。

加えて、しっかりと達成可能な目標でサイト作りをしないと、そのサイトを作る意味が無くなってしまうので注意です。

2.ペルソナを設定する

方向性を定めたら、次はペルソナを設定しましょう。

簡単に説明すると、ペルソナとは架空のユーザー像のことです。

ペルソナ設定の仕方を解説します。

架空のユーザー像を深堀りすることで、ユーザー視点で作品を作れるようになります。

ユーザー視点で作品を作ると、作品内の商品やサービスが実際のユーザーにより刺さりやすくなるでしょう。

3.顧客のサイト流入シミュレーションをする

顧客がどうやってサイトに流入するかのシミュレーションしてみましょう。

シミュレーションをすることで、スマホ・PCなど、どのデバイスを中心に力を入れて作品づくりをすればいいかがわかります。

このように、ユーザーの使うデバイスによって優先することが変わってきます。

どちらにも対応できるのが好ましいですが、PCからの流入が圧倒的に少ないサイトなのにPCファーストでサイト構築をしても、意味がありません。

4. コンテンツ情報の決定

ペルソナと流入経路が見えたら、ユーザーが必要とするコンテンツは何かを決めていきましょう。

ユーザーにとって不要なコンテンツは排除して、ニーズに応えられるサイトを作ることが大切です。

手掛けるサイトの種類によって、必要なコンテンツはまったく異なってきます。

まずは必須のコンテンツを決めてから、あると便利なコンテンツも考えられるとよいでしょう。

5.イメージボード作成

実際の制作に入る前に、イメージボードを作っておきます。

イメージボードとは、サイトに合った画像やイラストを事前に集め、サイトのイメージや雰囲気を掴むためのものです。

イメージボードを作ると、

このように、あなたの作品作りを助けてくれます。

イメージボードはWebデザイナーとして他の人と仕事をするようになったときも、作品イメージを他者と共有するのに使えます。

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

サイトの中身のイメージが全体的に固まったら、ワイヤーフレームを設計しましょう。

ワイヤーフレームとは、Webページのレイアウトの設計図です。

先にワイヤーフレームを設計すると、のちの作業が楽になります。

コンテンツやデザインの配置が決まっていれば、作業中に余分な校正をしなくて済むでしょう。

7.デザイン

ようやくサイトをデザインしていきます。

デザインする際に気をつけるべきことをまとめました。

ポイントは、ユーザーが見やすいかどうかです。

自分の個性を出しすぎるあまり、自分ファーストにならないように気をつけましょう。

あくまでユーザーファーストです。

8.作品の説明文の作成

作品を載せたら、作品の説明も書いておきましょう。

説明文があることのメリットは以下のとおりです。

画像だけだと、よっぽど魅力的なビジュアルでない限りはクリックしてもらえません。

説明文を読んで「このサイトを見てみようかな」と思わせるような説明文を載せましょう。

まとめ：ポートフォリオは「自己表現のツール」Webデザイナー未経験者でも作り込もう

ポートフォリオを作るのは大変ですが、Webデザイナーに必要なものだとわかりました。

以下、この記事のまとめです。

Webデザイナーとして就職する場合でも、フリーランスで仕事をする場合でも、ポートフォリオは必須です。

ポートフォリオ作成は夢への第一歩になります。

Webデザイナーとして活躍していくために、たとえ未経験者だとしても今のうちからポートフォリオを作り込んでおきましょう。