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

2024.02.08
webデザイナー 未経験 ポートフォリオ

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

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

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

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

そこで今回は、

  • 未経験者でもポートフォリオは必要なのか
  • ポートフォリオをどうやって作ればいいのか
  • ポートフォリオに載せる作品がない場合、どうすればいいか

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

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

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

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

ポートフォリオを作るイメージ

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

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

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

  • 企業や顧客に自己PRができる
  • 「~のスキルがある」「~が得意」など、自分の能力を示せる
  • Webデザイナーの会社に就職するとき、資料として提出できる

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

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

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


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

Webと紙の2種類のポートフォリオ

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

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

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

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

1.紙のポートフォリオ

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

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

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

  • アピールしたい箇所だけを強調して見せられる
  • 紙の質感やレイアウトにこだわると、そこも評価してもらえる
  • PCに予期せぬトラブルが起きたときにも、紙があることで対処できる

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

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

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

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

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

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

  • 実際に自分が作ったサイトを隅々まで見てもらえる
  • メールやSNSなどでリンクを貼れば、誰にでも発信できる
  • 全てのページが見られるため、細部までしっかり作る必要がある

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

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

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

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

ポートフォリオに含むべき基本事項

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

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

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

  1. 目次
  2. 自分のプロフィール
  3. 作品
  4. 作品のコンセプトや工夫している点
  5. 自分の資料が見られるWebページ
  6. 連絡先

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

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

1.目次

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

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

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

  • ページの骨組みがしっかりするため、ポートフォリオ自体が作りやすくなる
  • ポートフォリオに何が書かれているのかわかる
  • ユーザーが知りたい情報にすぐ移動できる

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

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

2. 自分のプロフィール

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

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

  • 名前
  • 生年月日
  • 自分の写真
  • 経歴・職歴
  • 持っているスキル
  • 自己PR

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

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

3.作品

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

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

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

  • 作品のビジュアル・タイトル
  • 作品の内容
  • 作品の成果

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

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

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

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

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

  • どんなターゲットを想定して作ったのか
  • 自分がこだわったところと、それをどう工夫したか
  • どんな意図を持って作ったのか

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

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

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

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

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

  • 多くの人に自分の作品を見てもらえる
  • ポートフォリオに載せられないぶんの実績としても載せられる
  • 自分がどういう活動をしているか(またはしてきたか)を知ってもらえる

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

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

6.連絡先

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

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

  • メールアドレス
  • 電話番号
  • SNSアカウント

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

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


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

チェックすべきポートフォリオ例

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

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

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

  1. Choicely
  2. Underline
  3. SANKOU!

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

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

1. Choicely

choicely

(出典:choicely)

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

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

以下、Choicelyの特徴です。

  • IT系、飲食系など、業界別にポートフォリオサイトを絞って見られる
  • ポートフォリオサイトのベースとなる色別でも絞り込みができる
  • LPや企業サイト、Webマガジンサイトなど、カテゴリー別に見られる

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

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

2. Underline

Underline

(出典:Underline)

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

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

  • かなりシンプルなデザインで、誰が見てもわかりやすい
  • 伝えることがまとまっていて、顧客側も依頼しやすい
  • ブログや趣味も載っていて人柄がわかり、安心できる

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

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

3.SANKOU!

SANKOU!

(出典:SANKOU!)

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

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

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

  • 画像の入れ方
  • ナビゲーションメニュー・メニューの項目
  • コンテンツや情報の配置
  • コンセプトに基づくサイトデザイン

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

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

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

ポートフォリオを作成するときの4つの流れ

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

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

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

  1. 応募企業のスタイルやコンセプト、求める人物像を分析する
  2. 実績やスキルが、提出先企業でどう生きるか書き出す
  3. ポートフォリオに掲載できる作品を作成
  4. ポートフォリオ全体を作成

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

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

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

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

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

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

  • どんなスキルをアピールすればいいか
  • どんな人を採用したいのか
  • 企業のスタイルに合っているのかどうか

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

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

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

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

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

  • 企業が必要としているスキルを自分が持っているかどうか
  • 募集要項以外に自分の持つスキルが、企業に利益をもたらせるかどうか
  • 過去の実績がアドバンテージになるかどうか

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

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

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

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

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

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

  • 作品の目的や目標をしっかりと持つ
  • 作品を見せたいターゲットを明確にする
  • 作品を見る人が必要とする情報をしっかりと載せる
  • 自分の個性をデザインに反映させる

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

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

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

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

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

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

  • 直感的に操作やレイアウトができるMATCHBOX
  • テンプレートが豊富で、カスタマイズ性も高いPortfoliobox
  • 利用者も多く、ポートフォリオを見てもらいやすいnote
  • 誰でも簡単にポートフォリオを作れてしまうforiio

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

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

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

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

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

  • Webデザインの勉強段階で作ったデザインがあれば、それをまとめる
  • 実際にサイトとして機能はしないが、架空の企業サイトをデザインする
  • ブログなど、趣味のサイトでもいいから載せる

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

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

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

未経験の状態からポートフォリオを作る方法

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

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

  1. 作品の方向性・目標を決める
  2. ペルソナを設定する
  3. 顧客のサイト流入シミュレーションをする
  4. コンテンツ情報の決定
  5. イメージボード作成
  6. ワイヤーフレーム設計
  7. デザイン
  8. 作品の説明文の作成

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

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

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

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

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

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

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

  • やらないといけないことが明確になる
  • 目標に対して、どんな作品を作ればいいかイメージがつく
  • 軸がぶれないことで、一貫性のある作品になる

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

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

2.ペルソナを設定する

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

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

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

  • 年齢・性別・職業・家族構成などの基本情報を決める
  • 趣味や生活様式などの行動パターンを考える
  • 日常のどこに不満を持っていて、何を欲しているのか分析する

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

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

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

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

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

  • スマホからの流入が多そうだから、文字列を少なくして読みやすくしよう
  • スマホでタップしやすいボタンやメニューにしよう
  • PCで検索されることが多そうだから、ダイナミックなデザインにして、インパクトを与えよう

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

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

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

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

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

  • 美容院のサイトなら、わかりやすいメニューや予約のしやすさ、スタッフの情報
  • 求人サイトなら、検索条件の豊富さ、転職のコツやポイント
  • マガジンサイトなら、見やすいカテゴリーページ、見たい情報の探しやすさ

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

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

5.イメージボード作成

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

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

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

  • 頭の中にある「構想」が「形」になる
  • 大まかなイメージを掴めると、制作段階のときに余分なデザイン修正の時間を取られない
  • 企画のビジョンがハッキリとする

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

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

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

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

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

  • サイトの完成図をイメージできる
  • 製作途中に「足りなかった項目を追加するからデザインを変更しないと…」ということがなくなる
  • 画像や作品をはめ込み、色付けするだけになる

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

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

7.デザイン

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

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

  • スマホやPCで見え方が違うので、双方でサイトの見え方確認しておく
  • 改行、文字サイズを意識して読みやすいサイトにする
  • 画像やファイルの容量に注意し、サイトが重くならないようにする
  • 色や装飾、余白のルールを設定する
  • 世界観や雰囲気を統一する

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

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

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

8.作品の説明文の作成

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

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

  • 画像だけではわかりづらくても、文字があることで、ユーザーがどんな作品かイメージできる
  • ユーザーが見たい作品を探しやすくなる
  • 作品の魅力を文でも伝えられる

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

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

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

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

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

  • Webデザイナー未経験者でもポートフォリオは必須
  • 未経験者がポートフォリオを作るときは、まずはプロのデザインを参考にしてみる
  • 基本的な項目は必ずポートフォリオに載せる
  • もしも作品がない場合は、今まで学んだことや勉強段階で作った作品でもいいから、とにかく載せる

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

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

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


\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5