【未経験向け】Webデザイナーのポートフォリオを制作する方法は？

Webデザイナーのポートフォリオは、自身のスキルや知識、センスなどをアピールするための客観的な資料です。案件を獲得するには魅力的なポートフォリオを作成することが非常に重要です。
今回は、Webデザイナーのポートフォリオの目的や内容、作り方について詳しく解説します。

Webデザイナーのポートフォリオって？

Webデザイナーの求人応募ではポートフォリオを添付するのが一般的です。まずは、ポートフォリオの意味や目的について詳しく解説します。

ポートフォリオとは

ポートフォリオとは、これまでに制作した作品を集めた資料のことです。Webデザイナーにおいては、デザインスキルやセンスを伝えるための要素のひとつです。

例えば、WebサイトデザインやアプリケーションUI/UXデザインなどの制作物をポートフォリオで紹介します。制作の目的やコンセプト、理念などに関する説明を付け加えることで、Webデザイナーとしての考え方や熱意が閲覧者に伝わります。

アピールするのが目的

ポートフォリオを作成することで、未経験者もWebデザイナーとしてのスキルやセンスをアピールできます。サンプル作品や趣味の作品を掲載しても問題ありません。

なお過去の受注プロジェクトについては、公開が可能かどうかをクライアントに確認し、許可を得る必要があります。

ポートフォリオに盛り込む内容

ポートフォリオに盛り込みたい情報は以下の通りです。

・自分のプロフィール ・仕事で活かせるスキル ・自身の作品（メインビジュアルやモックアップ） ・プロジェクトの内容 ・制作範囲 ・コンセプトや制作意図　など

プロフィールには経歴や専門性、デザインに対する姿勢を簡潔かつ明確に記載します。

仕事で活かせるスキルとしては、使用しているデザインツールや言語、フレームワークなど、具体的な技術や能力を挙げましょう。

自身の作品は、メインビジュアルやモックアップを通じて視覚的に訴えかけ、魅力を引き立てます。

さらに手がけたプロジェクトの詳細や自身の役割、関与した範囲、コンセプトや制作意図を具体的に説明することで、閲覧者の理解が深まります。

Webデザイナーの「良い」ポートフォリオの特徴

Webデザイナーの求人に応募する際は、ポートフォリオの質が重要です。

ここからは、好評価を得やすいポートフォリオの特徴について詳しく解説します。

デザインの基礎を守っている

デザインの基礎を守ることは、基本的なスキルが身に付いていることを示すためにも重要です。

基礎的なテクニックは、以下4つの要素で成り立ちます。

近接	関連する情報を近づけ、関係性を視覚的に整理しやすいレイアウトにする
整列	要素に一体性をもたせ、見えない線で結ぶ
強弱	情報に優先度をつけて明確な違いを表現する
反復	特徴的な要素を繰り返すことで一貫性をもたせる

ターゲットユーザーのニーズを考慮している

マーケティングの視点をもてるWebデザイナーは企業にとって価値の高い人材です。

デザイン性に優れているだけではなく、ターゲットユーザーを考慮して設計されているWebサイトは高評価を得やすいでしょう。

▼ターゲットユーザーを考慮する際に必要な視点

・どのようなユーザーに訪れてほしいのか ・ユーザーは何を期待しているのか ・どのような行動をしてほしいのか

思考プロセスを自分の言葉で表している

サイト設計やデザインにおける思考プロセスを自分の言葉で表現することが重要です。

制作物の背景（制作時の背景、仮説、意図など）をまとめることで、仕事への向き合い方や熱意、Webデザイナーとしての課題解決能力をアピールできます。

行動量の多さがわかる

Webデザイナーの採用は、現場のクリエイターが担当者になるケースも多くあります。制作に対する熱意が伝わるポートフォリオは高い評価を得やすいでしょう。

特に未経験者は「スキルを身に付けるためにどれだけ行動したか」を伝えることが重要です。スクールの課題だけではスキルや強みを十分に伝えるのが難しいため、独自の取り組みや実績を積極的に示しましょう。

具体的なプロジェクトや課題に主体的に取り組んだ経験を挙げ、それを情報発信することで、自身の行動量や学習の過程を分かりやすくアピールできます。

Webデザイナー未経験でポートフォリオを作る方法

 

未経験の方や制作経験の少ない方向けにWebデザイナーのポートフォリオを作る方法を紹介します。

なお、ポートフォリオの数に決まりはありませんが15〜25ページくらいが最適とされています。5〜6ページ程度だと提供できる情報が少ないため、Webデザイナーとして高い評価を得るのは難しいでしょう。

ページ数にも考慮しながらポートフォリオを作成することが大切です。

【方法1】自分でサーバーを借りて用意する

自身でサーバーを借りてポートフォリオサイトを開設する方法です。有名なレンタルサーバーとしては「ロリポップ！」や「エックスサーバー」があります。

レンタルサーバーの月額費用は月1,000円程度が目安です。

サイトをサーバーにアップする練習にもなるでしょう。時間はかかりますが、実践的なスキルを磨きつつポートフォリオを制作できます。

【方法2】ポートフォリオサービスを利用する

ポートフォリオサービスを利用すると、フォーマットを使用して手軽に作成できます。

レンタルサーバーよりも自由度が高く、更新や編集がしやすいメリットがあります。

すでにいくつか案件を獲得しており、定期的に最新の実績へアップデートしていきたい方におすすめです。

【方法3】転職（就職）支援をしているスクールに通う

スキルにまだ自信がない方は、転職・就職支援を提供するスクールに通ってポートフォリオを作成することがおすすめです。基礎を学びながら、ポートフォリオに掲載する作品を制作したり添削してもらえたりします。

オンライン学習プラットフォーム「NINJA CODE」の転職支援プランでも、ポートフォリオの作成をサポートしています。

・ポートフォリオに掲載する作品の制作
・ポートフォリオに関する相談
・ポートフォリオに掲載するテキストの添削

などが可能です。

またキャリアアドバイザーが転職成功まで徹底的にサポートしますので、将来のキャリアを見据えたステップアップができます。

無期限サポートで月額費用はございません。気になる方はぜひ一度お問い合わせください。

無料体験学習はこちら

参考にしよう！Webデザイナーのポートフォリオサイト

最後に、有名なWebデザイナーが公開しているポートフォリオを紹介します。

これからポートフォリオの作成を考えている方は参考にしてみてはいかがでしょうか。

【無駄のない洗練されたデザイン】UNDERLINE

トップページにアイコンや画像が巧みに配置されており、彼のスキルや特徴が一目で理解できます。

特筆すべきは、顔写真と簡潔なメッセージをファーストビューに掲載し、個性や信頼性を強調していることです。

シンプルで統一感のある白基調のデザインは見やすく、各ページへのボタン配置も回遊性を高めています。

参照：UNDERLINE

【大胆なデザイン】Makoto Hirao

ファーストビューで文字が画面右側に飛び出す斬新なデザインが目を引きます。

ポートフォリオの構成はシンプルで、「Works」と「About」に重点が置かれています。常にページへの導線があり、使いやすい設計もポイントです。

作品詳細は「Works」からアクセス可能で、制作領域やプロセスが詳細にまとめられています。

参照：Makoto Hirao

【多彩なアニメーション】S5 Studios

画面全体を駆使した多彩なアニメーションで、Worksページのスクロールに連動した動きや心地よいBGMなど、サイト全体に工夫が凝らされています。

技術の豊富な活用とともに、Aboutページでの顔写真の公開やInfoページでのメディア掲載情報や受賞歴の掲載が、クリエイターとしての信頼性を高めています。

参照：S5 Studios

まとめ

Webデザイナーのポートフォリオは、自身のスキルや知識、センスを伝えるためのツールです。未経験者でも効果的なポートフォリオを制作することで案件を獲得しやすくなります。

良いポートフォリオの特徴は下記の通りです。

・デザインの基礎を守っている ・ターゲットユーザーのニーズを考慮している ・思考プロセスを自分の言葉で表している ・行動量の多さがわかる

今回、解説した内容を参考にWebデザイナーのポートフォリオを制作してみてはいかがでしょうか。