【テンプレサイト紹介！】ウェブデザイナー転職を成功させるポートフォリオの作り方｜Webデザイナーの教科書

プロフィールを作成する

採用担当者はポートフォリオを通して、履歴書や職務経歴書だけではわからない、あなたのデザイナーとしての能力や人柄、説明力などを読み取ろうとします。
プロフィールページには、「名前」「写真」「生年月日」「職歴」などの基本情報に加えて、言語やツールなどのスキルレベルも必ず記載しましょう。

言葉で説明するよりも、グラフや図などを使って一目でスキルレベルがわかるようにするのがおすすめです。

また、採用担当者があなたの経験や資格を履歴書や職務経歴書ですでに知っていることを考慮し、今度はあなたがチームに参加したときにどのような価値をもたらすことができるかを示す必要があります。
そのためには、200～300字の自己PRを書くのが効果的です。この自己PRでは、あなたが活かせる過去の経験や、入社後に達成したい目標について述べましょう。

さらに、良い印象を残すために、ポートフォリオに掲載する作品のメインビジュアルは、自分の全体的な構成やデザインのテイストを反映したものを選ぶとよいでしょう。
加えて詳細を説明し、自分の知識をさらにアピールするために、パソコンやスマートフォンで見たときのイメージをフレームで補足します。

さらに、フレーム内やポートフォリオ全体に、あなたの技術的な経験やクリエイティブな声を紹介する強い文章をいくつか加えると、あなたを際立たせ、見る人の印象に残ることでしょう。

作品とプロフィールを確認できるURLを載せる

これまで関わったプロジェクト名と、実際のサイトのURLを記載してください。
サイトがすでに公開されていないなどの事情でURLを記載できない場合は、そのように書いてもかまいません。その場合でも、何を達成したのか、どのような技術を使って制作したのかを詳しく説明することで、採用担当者にプロジェクトの内容を伝えることができます。

プロジェクトで達成したことを具体的に説明することで、あなたの知識やスキルが実社会でどのような影響を与えたかを雇用主がより理解し、採用された際にはあなたの能力を確信できるようになります。

デザインのPRポイントなどを載せる

プロジェクトについて説明した後、作品のターゲットやデザインで解決したい問題、実施した工夫などを簡潔に説明します。
ただし、ポートフォリオ上で説明を完結させるのではなく、面接で展開できるように簡潔にまとめましょう。デザインの工夫については、プレゼンや質疑応答で必ず面接官から言及されますので、自分の言葉で話す練習が必要です。

面接になったら、データを使って主張を裏付け、与えられた問題の解決にどのように役立つのか、そのプロセスを明確に説明しましょう。
なぜあなたのデザインが既存のソリューションよりも優れているのかをアピールし、あなたのプロジェクトが達成した成功の結果を話しましょう。
デザインプロジェクトを実施することで達成しようとした具体的な目標を概説し、創造的なプロセスと使用したデザインの原則を強調します。

プロジェクトの特徴を強調し、他のデザインとの差別化を図ってください。
あなたのデザインがどのような影響を与え、チームが目標に到達することができたかを説明することで、面接官の信頼を高めることができます。
質疑応答で説明を終えることで、面接官はより適切な判断を下せます。あなたの能力をより良く評価することに繋がり、他の人材よりも優位に立つことができます。

自身が作成した部分やスキルについても記載

複数の人が参加したプロジェクトで制作した作品については、「どの部分を担当したか」「どのツールを使用したか」「どの言語を使用したか」を明確に記述してください。適切なスキル判定を行うために重要な情報ですので、正直に記述しましょう。

採用担当者は、あなたがその職務で成功するためのスキルと能力を持っていることを知る必要があるため、このステップではできるだけ詳しく説明することが重要です。

プロジェクトで使用した関連スキルを提示することは、あなたが適格な人材であることを示す良い方法です。
こうすることで、雇用主や採用担当者は、プロジェクトで採用された特定のソフトウェアや技術、言語を知らなくてもあなたの仕事の範囲を確実に理解することができるのです。

会社の雰囲気に合わせて自身のスキルや実績を記載する

この事前準備が、ポートフォリオの質を大きく左右します。まずは自分がどんなスキルを持っていて、どんな分野で会社に貢献できるのか、紙に書き出してみましょう。
次に、応募した企業がどのような人材やスキルを求めているのか、採用ページや制作実績のページを見て分析しましょう。

企業が求める人物像に自分が当てはまっていなければ、どんなに素晴らしいスキルや実績があっても、それを活かすことができないかもしれません。
会社の分析結果に応じて、積極的にアピールすべきスキルや、掲載すべき作品を検討します。
同じスキルや実績を持っていても、会社のことを理解している人とそうでない人では見せ方が大きく変わりますし、会社からの評価も変わってきますので、丁寧に記載するようにしましょう。

構成を固めた上でワイヤーフレームを作成する

ここからは、Webサイト制作と同じ流れになります。応募する企業と相性の良いコンセプトと、見せたい作品を効果的に伝えるデザインレイアウトを決めます。
自分を商品、企業をターゲットに想定し、まずは手書きのラフなアイデアをできるだけ多く出してみてください。

いくつかのアイデアを書き出すことで、しっかりとしたポートフォリオを構成し、雇用主との関係を形成することができます。思いついたことをどんどん試してみて、採用担当者があなたの企画をどう見るか、その立場に立って考えてみましょう。

ある程度イメージが固まって、もっとこうしたらいいんじゃないかと考えたら、そのイメージをワイヤープロダクションで具現化していくのです。

あなたのゴールは、他の人と差をつけ、なぜあなたがその仕事に最適なのかを雇用者に示す最大のチャンスを提供するものを作ることです。
きれいなワイヤーフレームと効果的なデザインで、価値あるポートフォリオを作成することが目指すゴールへの近道となります。

1度で完璧を目指すのではなく、少しづつ改善を繰り返して完成させる

ワイヤーが確定したら、制作を開始します。この時、一発で完璧なものを作ろうとせず、何度も改善・修正することを前提に制作を進めることをお勧めします。
なぜなら、自分のポートフォリオの良し悪しを判断するのは、面接の後だからです。

最終的に満足のいくものができたとしても、面接官に伝えたいことが伝わらないことも少なくありません。面接で感じたことをもとにポートフォリオを更新していくことで、自分の求めている仕事に就くためのポートフォリオに進化していくのです。

さらに、応募先企業に合わせて掲載する作品を変えたり、自己PRを工夫したりするなど、ポートフォリオをカスタマイズすることも常に心がけてください。

最新のトレンドやデザインスタイルだけでなく、自分の作品が様々な視点からどのように見えるかも意識してながら、応募先企業や面接官に合わせて自分だけのポートフォリオを作ることが大切です。
複数の面接で同じポートフォリオを使いまわすなんてことはしてはいけません。

最後に、自分のポートフォリオに必要なバランスを確保することも重要です。予期せぬ修正や変更はいつでも起こり得ますので、どんなシナリオにも対応できるよう準備しましょう。

レスポンシブデザイン化しているか

今はウェブサイトを見る時にPCだけでなく、タブレットやスマフォなど様々なデバイスで見ています。そのため、使用しているOSや画面サイズの違いにも対応できるデザイナーが必要とされています。
レスポンシブデザインの実装例は必ずポートフォリオに含めましょう。

ポートフォリオサイトのSEO対策をしているか

ウェブサイトは多くの人に見てもらうために作成されます。どんなに優れたデザインだとしても、検索で見つけられないサイトでは意味がありません。
ウェブデザイナーとして必要な人材になるためには、検索されやすいデザインやサイト構成についても知識を持っておきましょう。

Semplice

直感的な編集ツールで、ビジュアルを重視したデザインを作成しやすいサイトです。よりクリエイティブなポートフォリオを作成したいのであれば、おすすめです。
日本語サポートもあるので、英語が分からなくても問題なく使えます。

Wix

Wixは、無料でホームページが作成できるウェブサイトビルダーです。ドラッグ＆ドロップでカスタマイズが出来る操作感と、豊富なテンプレートが用意されています。
これからWebデザイナーを目指すという、初心者でもすぐにポートフォリオサイトを作ることができます。

Jimdo

Jimdoは初心者にも使いやすいウェブサイトビルダーです。ポートフォリオ向けのテンプレートの種類が豊富にあり、カスタマイズやコンテンツの追加も難しくありません。
こちらも無料で使えるので、ウェブサイト制作の練習にも使うのもおすすめです。