webデザイナーのポートフォリオ制作を未経験者にも分かりやすくご紹介

ポートフォリオとは自分自身のことや自分のスキル・実績を相手に分かりやすく伝えるためのものです。

とは言え、上記に該当すれば必ず”ポートフォリオ”と呼ばれるわけではありません。

例えば、webデザイナーの中で「webサイトを作ってみました！」と自分で作成したwebサイトをポートフォリオにしようとする人がいますが、それはポートフォリオではなくポートフォリオ内で実績として紹介する”成果物”に当てはまります。

しかしそんなことを言われてもwebデザイナー初学者やポートフォリオ作成未経験の方には分かりにくいでしょう。

そこでこの記事では、webデザイナーを目指している方に向けて就職や転職でアピールするためのポートフォリオの内容や作り方をポートフォリオ作成未経験の方にも分かるように解説していきます。

webデザイナーがポートフォリオを作る時に意識すること

まず最初に、webデザイナーがポートフォリオを作る際に意識することを解説していきます。

無暗に作り始めるのではなく、意識するポイントを押さえて製作物を決定しましょう。

ポートフォリオは何を作れば良いの？

ポートフォリオ制作でまず初心者の方が躓くのが「何を作れば良いのか」という問題です。

webデザイナーのポートフォリオはwebサイトのデザインを作ることが一般的とされており、そこで自分のコーディングスキルやデザインセンスをアピールします。

また時間に余裕があるのであれば、ポートフォリオのみではなくポートフォリオ内で実績として紹介するwebサイト(成果物)を作っておきましょう。

これによって自分が選べる就職先も増える上、各企業へのアピールを強化することが出来ます。

しかしここで注意しなければならないのが、成果物を複数作ろうとするあまり1つ1つのクオリティがお粗末になってしまうことです。

成果物は、基本的にレベルの低いものを複数見せるよりもしっかり作りこんだものを1つ見せる方が有効だと覚えておきましょう。

担当者の立場でポートフォリオを意識する

ポートフォリオ作成未経験の方がポートフォリオを見せる場合のほとんどが、就職や転職の時でしょう。

すると皆さんのポートフォリオを見るのは企業の人間になるわけですが、採用担当者が見るわけではありません。

これは、採用担当者は人事部の人でありwebデザイナーとしての経験が無い人も多いからです。

そのため、実際にポートフォリオのレベルを判断するのはwebデザイナーとして勤務している方たちになります。

その場合、webデザイナーの方達は自分の仕事をこなしつつポートフォリオを見なければならないため、凝ったポートフォリオを作っても見るのに時間がかかると印象が良くないことがあります。

特に大企業では多くのポートフォリオを判断することになるため、自分のポートフォリオで何を見せたいのかを良く考え時間をかけずに見られるように構成することを意識しましょう。

webデザイナーがポートフォリオに記載しておくべき内容

次に、webデザイナーがポートフォリオ内に記載しておくべき内容具体的に解説します。

就職活動の際に用意するエントリーシートの内容とポートフォリオの内容が被っていることもありますが、少々であれば問題ありません。

プロフィール

まず自分がどんな人間かを知ってもらうために自身のプロフィールを書きましょう。

氏名・生年月日・学歴といった基本的な情報の他に、今持っている技術や勉強していることなどを記載してください。

しかしwebデザイナー未経験の方は「書けるスキルなんてない・・・」と思うかもしれません。

そのような場合は、なぜwebデザイナーになろうと思っているのかといった気持ちの部分を書くことで熱意を伝えることが出来るはずです。

ポートフォリオ・成果物についての情報

webデザイナーのポートフォリオには、webサイトを初めとした自身の成果物についての情報を載せることが必須になっています。

具体的には以下の情報を記載しておけばOKです。

製作期間(コーディング/デザイン構想など内訳があると良い)
使用したソフト
webサイトやデザインのコンセプト
どんな層を狙ってデザインしたか(例:カフェのwebサイト→女子大生や若いOL)
狙った客層に見てもらえるように考えた工夫
反省点

反省点は友達や家族など(webデザイン系の経験があると尚良い)に見てもらって客観的な意見をもらうようにしましょう。

また上記の他にも、気を使った点や意識したことなど伝えたいことを書いても構いません。

しかし、それらの文章はコンパクトに分かりやすく書くように意識しましょう。

パクリやスクールでの製作物はやめた方が良い

webデザイナー系のスクールに通うと、最終的に成果物を授業内で制作して終了することがほとんどです。

そうなると、その成果物をほとんどそのままポートフォリオとして企業に提出してしまう人がいますが、それはNG行為です。

企業側も毎年人を採用しているため、有名スクールの製作物はある程度知っています。

そのため、スクールの製作物をそのまま出してしまうと「自分で勉強してないのかな」と思われてしまうのです。

スクールなどで得た技術や知識を生かすことは重要ですが、1から別の物を制作するようにしましょう。

webデザイナーのポートフォリオ制作手順

ポートフォリオに書くべきポイントが掴めてきたところで、ここからはポートフォリオの作り方を解説していきます。

ポートフォリオを作ったことが無い人は是非参考にしてみて下さい。

ポートフォリオの大枠とデザインを決める

ポートフォリオを作り始める前に、全体で何ページにするのか・どのページにどれくらいの文章量を書くのかなどを考え構成案を練りましょう。

構成案がしっかりしていれば後から「やっぱりこうすればよかった」と修正することが少なくなり、結果的に短時間で完成させることが出来ます。

構成案が完成したら、続いて自分の性格やアピールしたい内容に沿ったデザインを考えましょう。

書いた内容とデザインが合っているかどうかで印象は大きく変わってきます。

実績欄に乗せる成果物を作る

webデザイナーのポートフォリオは、実践を想定して製作していなければ意味がありません。

そのため、実績欄に載せる成果物は実際の依頼を想定して決定しましょう。

例えば企業のHP・カフェや飲食店のwebサイト・商品紹介ページなどが挙げられます。

それらの中から自分がイメージしやすく作りやすいと感じるものを選びましょう。

また、多すぎず少なすぎないページ数になるような題材を選ぶこともポイントの1つです。

webデザイン完全未経験者のポートフォリオ制作

最後に、webデザイン完全未経験者がポートフォリオを作るために必要な物や参考にすべき内容をご紹介します。

webデザイナーとしての経験がなくどのようにポートフォリオを作れば良いのか分からない、という方はぜひ参考にしてください。

必要な物

ポートフォリオの制作にあたってwebデザイン完全未経験者には無料サイトなどをお勧めすることがありますが、それよりも実際働いた時をイメージできる方が良いでしょう。

PCは持っていると仮定して、その他最低限必要な物を以下に示します。

デザインソフト
エディタ
フォント
ドメインとサーバー

デザインソフトはPhotoshopを使用することをお勧めします。

実際にwebデザイナーとして働き始めてから使用する可能性がかなり高い上、ライセンス契約をすればソフト自体を購入しなくても扱うことが出来ます。

またエディタとはコードを書くためのソフトを指します。

最も有名且つ推奨されているのはVisual Studio CodeとDreamweaverで、両者どちらでも問題ありません。

どちらも使ったことが無い場合は、無料で人気のあるVSCodeを使用しましょう。

人気ソフトのため分からないことはgoogle検索で大抵解決できます。

フォント制作については、自身が作成するwebサイトに合ったフォントをダウンロードする必要があります。

ほとんどのフォントは無料で手に入れることが可能です。

最後にドメインとサーバーですが、これらはインターネットに公開するために必要になります。

webデザイナーとしてポートフォリオを見せる場合、インターネットに公開した成果物のURLを相手に送って見てもらうというのが主流となっているからです。

ドメイン・サーバー共に月間レンタルが可能なので、ポートフォリオが必要な期間は借りておくようにしましょう。

プロのポートフォリオサイトを参考にする

他人のポートフォリオを完全に模倣するのはNG行為ですが、参考にするのは最も早く成長する道です。

実は、プロのwebデザイナーになってからポートフォリオを作成しweb上に公開している人が沢山いらっしゃいます。

プロのwebデザイナーの方も日々成長し、違う技術を見せられるようになっているからですね。

そのため、まずはそういったプロのwebデザイナーのポートフォリオを参考にしていきましょう。

プロのポートフォリオ例

以下にて代表的なプロのポートフォリオ例をご紹介します。

初めから同じレベルの物を作ることは出来ないため、参考にしつつ自分なりのイメージを固めていきましょう。

徳田優一
徳田優一さんはフリーランスとして活動しており、デザイン・コーディングのみではなくディレクターも務めることが出来る方です。スキルや自分自身の見せ方が素晴らしく、シンプルで非常に見やすいポートフォリオになっています。

平尾誠
平尾誠さんは自身のデザイン会社を経営しているwebデザイナーです。上記の徳田優一さんとは異なり、動的なwebページで構成されたポートフォリオになっています。ただ情報を伝えるのではなく、見ていて楽しくなるような遊び心が特徴的です。

田渕将吾
田渕将吾さんは空間デザインやフロントエンドエンジニアも担当できるwebデザイナーです。彼のwebサイトの驚くポイントは、アニメーションの多様さと見ている人を飽きさせないためのBGMにあります。音を取り入れることによる印象付けの効果が良く分かることでしょう。