Webデザイナーはポートフォリオを作成すべき？作成方法や作成のコツを紹介

Webデザイナーの方が個人で営業をしたり、転職活動したりする際に必須となるのが「ポートフォリオ」です。

きちんと作成することで効果的なポートフォリオができあがります。

「どのようにつくったら良いのかわからない…」
というお悩みをお持ちのWebデザイナーさんに向けて、本記事では作り方のコツや注意点をご説明していきたいと思います。

ポートフォリオは作成すべき？

ポートフォリオとは、クリエイターの間では「これまでの実績をまとめた作品集」の意味合いで使われます。

転職活動の際に提出を求められるケースも多く、きちんと自分をアピールするためにも作成すべきといえるでしょう。

ポートフォリオ作成のメリット

Webデザイナーの方がポートフォリオを作成することで、

• これまでの実績を一覧でアピールできる
• 今後会社でどのように成長していく人材かをみてもらえる
• スキル、実績の棚卸しができ、自分の中で整理できる

といったメリットがあります。

転職活動だけでなく、フリーランスや個人事業主として独立して活動する方にとっても同様のメリットがあるので、ぜひ作成してみましょう。

ポートフォリオの作成方法

では、ポートフォリオを実際に作成する手順について解説していきたいと思います。

スキルの棚卸し

まずはスキルの棚卸しをしましょう。

これまでWebデザイナーとして携わった案件をまとめ、ポートフォリオとしてどれを掲載するかを選択します。

案件全てを掲載はできないので、自分が上流工程で携わった案件や考えたプロセスをしっかり説明できるものを選ぶようにしましょう。

入れるべき項目

では、Webデザイナーのポートフォリオに入れるべき項目はどのようなものがあるでしょうか。

プロフィール

氏名や生年月日などは履歴書に記述しますので省きますが、ポートフォリオのプロフィールにこそ載せるべき項目があります。

▼ポートフォリオのプロフィール項目

• 略歴を含めた挨拶文：受賞歴、担当した業務など
• 自己PR：Webデザイナーとしての信念やこだわりなど

上記の2点はポートフォリオで伝えるべき「人柄」を表現できる要素ですが、長すぎるのはNG。

口頭で説明を補足しなくても済むよう、シンプルかつ端的にまとめましょう。

作品のメインビジュアル

まずは、担当したもののテイストが一目でわかる、メインビジュアルを掲載するようにしましょう。

Webデザイナーは、制作物のビジュアルが非常に重要です。

PCやスマートフォンにはめこんだモックアップを用意するのも効果的でしょう。

作品紹介

作品紹介に厳密なルールはありませんが、少なくとも下記の4点を考慮した構成が望ましいとされています。

▼作品紹介の基本構成

• 1作品を1ページにまとめる
• 作品ごとにディスクリプションを記述する
• 作品数は10点ほどに厳選する
• インパクトのある作品から掲載する

ディスクリプションとは短くまとめた説明文のことで、具体的には下記のような項目があります。

▼ディスクリプションの項目

• タイトル：キャッチコピー、WebサイトのURLなども有効
• 画像：スクリーンショットなど、作品のビジュアルが分かるモノ
• 付帯情報：クライアント名、制作年月日、制作時間、制作上の制約など
• ターゲットユーザー：ペルソナ
• コンセプトや目的：コンバージョン率の向上、広告キャンペーンなど
• 制作環境：使用ソフト、言語、プロジェクトチームの担当ポジションなど
• 工夫したポイント：問題を解決した方法など

プロジェクト名

担当したプロジェクト名を記載します。

WebサイトやLP(ランディングページ)であれば、URLも書くと実際にみてもらえるため、効果的でしょう。

担当箇所

例えば、Webサイトをのせる場合は、全体の中でどこを担当したのかの範囲をきちんと記載する必要があります。

どこまでできるのか、スキルを正しく伝えるという意味でも必ず担当箇所は示すようにしましょう。

使用ツール

Webサイトを制作する際に使用したツールを記載しましょう。

例えば、IllustratorやPhotoshop、WordPressが使えるのか、コーディングまでできるのか、など具体的にスキルを提示します。

工夫したポイント

自分の中でどのような点をもっとも工夫したのか、記載しましょう。

どう試行錯誤してこのデザインになったのか、ターゲットや目的を理解した上でつくっていることを伝えることが重要です。

スキル

「何ができるのか」をダイレクトにアピールできるのが、スキルに関する記載です。

使用できるソフトや言語、コーディングなどの得意分野に加え「課題に対してこんな解決方法を提案できる！」とアピールできるよう、下記の3項目もプラスしておきましょう。

• 個性：UXデザインなど専門分野へのこだわり
• 能力：企画力、構成力、分析力、リサーチ力、プレゼン能力
• 技術力：ワークスピード、キャッチコピーやライティング能力

将来のビジョン

ポートフォリオでは、これまでこなしてきた過去の実績がメインになりがちですが、将来のビジョンを面接官にアピールしておくことも重要です。

ただ漠然と与えられた課題を無難にこなす人より、「今後はこの分野を極めたい！」という具体的なビジョンを持っている人の方が、「熱意を持って仕事と向き合ってくれそう」という印象を与えます。

ポートフォリオ作成のコツ

ポートフォリオの作成手順や入れるべき項目を解説しました。

では、他の人と比べて目を引くポートフォリオにするにはどうしたらよいか、コツをお伝えしていきたいと思います。

とにかくわかりやすく

コツとしては、とにかくわかりやすく書くこと。

ポートフォリオを見てくれる相手は、あなたのことを知らない状態です。

その状態からアピールするには、前述した項目をしっかりと入れて、課題を開設するまでのプロセスを順を追って説明するようにしましょう。

独自の強みを入れる

あなた独自の強みを入れましょう。

例えば、

• 女性向けのデザインが得意
• イラストも描くことができる
• マーケティングの知識がある

など、スキルの掛け合わせで唯一無二の人材になれる強みがないか、探してみましょう。

評価の高いポートフォリオとは？

面接官から高く評価されるポートフォリオには、いくつかの共通点があります。

ここからは、特に重要な2つの優位性についてご紹介しましょう。

ペルソナに添った「掲載する順番」と「ボリューム」！

複数の面接を受ける場合、全ての企業に同じポートフォリオを提出するのは考え物です。

面接官は「1 to 1」の姿勢を重視するうえ、企業によって求めている要素の優先順位も異なります。

Webサイトのデザインを考案する時、ターゲットユーザーであるペルソナを意識するのと同じように、企業によって掲載する要素の順番とボリュームを調整しましょう。

▼掲載する順番とボリュームの一例

• Webサイトの制作会社：プログラミングなど専門スキルが分かる要素をメインにする
• 広告代理店：企画力やアイディアの豊富さが分かる要素をメインにする
• メーカー：伝える力など、実現力の幅広さが分かる要素をメインにする

「伝える力」をアピールする思考プロセス！

Webデザイナーはアーティストと混同されがちですが、企業で働く場合は「クライアントの要望に応えられるか」という点が何よりも優先されます。

そこで重要となるのが「伝える力」！ポートフォリオの作品集に「どんな問題をどのように解決して結果に繋がったのか」、思考プロセスを分かりやすく掲載することで伝える力をアピールすることができます。

工夫したポイントや改善点、コンセプトなどを箇条書きにするだけでも伝える力の裏付けになるはずです。

ポートフォリオ作成に使えるツール

ポートフォリオ作成に使えるツールをご紹介します。

PORTFOLIOBOX（ポートフォリオボックス）

https://www.portfoliobox.net/jp/

クリエイター向けのポートフォリオ作成サービスです。

テンプレートが豊富で、カスタマイズしてオリジナリティのあるサイトをつくることが可能です。

100万以上のポートフォリオサイトに使われているツールで、実績多数なので安心して使用できます。

MATCHBOX(マッチボックス)

https://matchbox.work/

マイナビクリエイターが運営するポートフォリオサイトです。

クリエイターの転職活動を熟知したマイナビだからこそのツールで、誰でも簡単に効果的なサイトを作れるようになっています。

作成したWebサイトをPDF化し、紙のポートフォリオとして印刷することも可能です。

salon.io

https://salon.io/

ドラッグアンドドロップの直感的な操作でサイトを簡単につくることができるポートフォリオ作成ツールです。

コーディングの知識は一切不要なので、スピーディーに作りたい方には非常におすすめです。

ワードプレス

最もおすすめなのが、Webデザイナーにとって使い慣れているwordpressです。

▼ワードプレスで作るメリット

• 自由度が高くアレンジしやすい
• 自社サイトにWordPressを採用している企業が多い

例えば、当社ペコプラではwordpressの制作も行っているため、portfolio自体が作品になります。

adobe portfolio

普段からPhotoshopやIllustratorでデザインしている方なら、無料なのに8つのレイアウトが使えて、作成途中でもレイアウトが変更できる「Adobe Portfolio」が便利です。

たとえコーディングが苦手でも、980円～の有料プランに申し込むとスマホ対応のレスポンシブデザインが使えます。

Behance（ビハンス）

クオリティの高さを重視している方には、GoogleやNIKEといったグローバル企業も利用している「Behance」がおすすめです。

月額1,000円ほどの有料版もありますが、無料でディテールまでこだわった見た目重視のポートフォリオが作りたい！という方は、adobeのアカウントから登録してみましょう。

Squarespace（スクエアスペース）

キアヌ・リーブスも愛用している「Squarespace」は、1週間のトライアル期間が用意されています。

海外のサービスなので全て英語ですが、管理画面がシンプルで使いやすいので試して損はありません。

Adobe Fontと連携できるうえ、テーマが豊富で基本データを直さなくてもテンプレートが変更できます。

Tumblr（タンブラー）

ありきたりなデザインは避けたい！という方におすすめなのが、日本人の利用者が少ない「Tumblr」です。

とはいえ、運営元は米国のYahoo!ですから安心して登録でき、初期費用や年会費もかかりません。

そのままポートフォリオとして使えるテンプレートが豊富なうえ、スマホやタブレット表示にも対応できるレスポンシブデザインも用意されています。

jindo（ジンドゥー）

HP作成サービスとして170万のユーザー数を誇る「Jindo」ですが、ポートフォリオの作成ツールとしても優秀です。

5点までなら無料で物販素材が扱えるので、ポートフォリオと併せて挑戦してみてはいかがでしょうか。

Wix（ウィックス）

テンプレートが500種類以上、ドラックするだけで配置できる画像が40種類以上もデフォルトで用意されており、動的なWebサイトまでボタン1つで設定できるのが「Wix」の強み。

これだけのスペックが無料で使えるのですから、初心者でも簡単にポートフォリオが作れます。

ただし、独自ドメインや広告の非表示などを希望する場合は有料プランの契約が必要です。

Instagram（インスタグラム）

年々増えているのが、SNS世代の代名詞とも言える「Instagram」を活用したポートフォリオです。

普段から使い慣れているアプリケーションなら、ポートフォリオの作成だからと言って気負う心配もありません。

SNSでは作品の説明が難しいのでは？と思われがちですが、インスタグラムなら2,200文字までキャプションが可能です。

事実、2018年からIT企業のサイバーエージェントでもInstagram経由の採用を開始しています。

Pixiv（ピクシブ）

ゲーム関連のクリエイターやイラストレーターだけでなく、Webデザイナーにも愛用されているのが「Pixiv」です。

コミニュティサイトとしてシェアを拡大してきたピクシブですが、企業の採用担当者が人材を発掘する場にもなっています。

ピクシブの公式サイトでは採用が決まった就活生のポートフォリオが紹介されていますので、参考にしてみてはいかがでしょうか。

Vivivit（ビビビット）

ポートフォリオサイトの「Vivivit」は、クリエイターと企業が集う「ポートフォリオ型お仕事マッチングサービス」です。

ポートフォリオを掲載しておくと、興味を持った企業がスカウトしてくれる仕組みになっています。

専門サイトならではの使い勝手の良さに加え、ポートフォリオ作成と就職・転職活動がまとめてできるのも魅力です。

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

参考になるWebデザイナーのポートフォリオをご紹介します。

シンデザイン

https://shin-design.jp/

フリーランスのホームページ作成専門のWEBデザイナーとして活動されているShin Design（シンデザイン）さんのサイトです。

どのようなご相談から制作にいたったのかなど、詳細を記載しており、制作物への想いがつたわってくるサイトになっているので、ぜひ参考にしてみてください。

 

https://u-d-l.jp/

フリーランスのWebデザイナー、ディレクションを手がけている徳田優一さんのポートフォリオサイトです。

まずファーストビューがシンプルなのに目を引きます。

また、サイトのメインビジュアルからテイストがわかり、非常にわかりやすい構成のサイトになっています。

まとめ

Webデザイナーなど、クリエイターの方にとっては特にポートフォリオは重要です。

まずは一目見た時に、グッと目を引くビジュアルを掲載し、工夫した点など掘り下げて記載しておくのが効果的です。

転職活動においても、独立して活動する場合でも、使えるので、ぜひ本記事を参考につくってみてくださいね。