Webデザイナー必見！評価されるポートフォリオの作り方｜フリーランス・業務委託ならレバテッククリエイター

転職や独立を考えているWebデザイナーにとって、ポートフォリオは必須の資料。そこで今回は、Webデザイナーにとってのポートフォリオの重要性をはじめ、ポートフォリオの作り方の基本、さらには選ばれるポートフォリオサイトの内容やポイントをご紹介。

数多くのWebデザイナーのポートフォリオを見てきたレバテックのテクニカルカウンセラーが、評価されるポートフォリオの作り方のコツを伝授します。

目次

• Webデザイナーにとってポートフォリオが重要な理由とは？
• ポートフォリオ作成に特化したサービスを利用する
• Webデザイナー必見！選ばれるポートフォリオの作り方

Webデザイナーにとってポートフォリオが重要な理由とは？

ポートフォリオとは？

転職・独立を考えているWebデザイナーなら、当然「ポートフォリオ」という言葉を聞いたことがあるはずです。
 
ポートフォリオとは、もともとは英語で「紙挟み」という意味があります。しかし、Webデザイナーにとっては作品集を指す言葉。コンテンツがアナログだった時代には、実際にプリントアウトした作品をファイルなどに挟んでポートフォリオとして持ち歩いていました。

けれども、Webサイトや動画などのデジタルコンテンツが当たり前となった現在では、ポートフォリオサイトという形でWeb上に公開することが主流になっています。

ポートフォリオはWebデザイナーの顔であり、資産の一覧表

転職で成功したり、案件を受注したりするには、実力を磨き実績を積むことが重要であることは言うまでもありません。しかし、せっかく能力や実績があっても、それをうまくアピールできなければ、宝の持ち腐れということになってしまいます。

ポートフォリオは、Webデザイナーのスキルを的確に示すためのツール。ポートフォリオがあれば、自分がそれまでにどんな作品を作ってきたのか、どんな仕事をしてきたのか、さらにはどの程度の実力があるのかまで一目瞭然です。Webデザイナーが転職するときや営業をするときに、ポートフォリオの提出を求められる場合がほとんどでしょう。

ポートフォリオ作成に特化したサービスを利用する

では、次にWebデザイナーのポートフォリオにはどのようなものがあるのかを見ていきましょう。

Webデザイナーなら、直近で転職を考えているかに関わらず自分のポートフォリオサイトを作っておいて損はありません。しかし、作り方やどんな内容を盛り込めばいいかわからず、迷ってしまうという人もいるでしょう。

また、「新たにポートフォリオサイトを作るだけの手間をかけられない」「仕事をしながら時間を捻出するのが難しい」という人もいるはずです。そこで、手軽なポートフォリオサイトの作り方をいくつかご紹介します。

ポートフォリオサイトはデザインを含めて作品。ブログで済ますのは、もったいない

例えば、ブログやFacebook、Tumblrなどをやっている人なら、そうしたメディアを通じてWebデザイナーとしての作品を公開しているかもしれません。実際、ブログをポートフォリオサイト代わりにしている人もいるようです。

しかし、Webデザイナーが単に作品のキャプチャやURLを貼るだけなんてもったいないと思いませんか？

ブログは、基本的にコンテンツを時系列で掲載する仕組みなので、情報が整理されていないという印象を与えてしまうのもマイナスポイントです。もちろんデザインをして、コーディングをしてと、ゼロからポートフォリオサイトを構築するのは、時間も手間もかかってしまいますが、採用側はポートフォリオサイトのデザインも含めて「作品」として見ています。

Webサイト作成サービスなら、ドメインやサーバーは不要。作り込みも可能

ポートフォリオサイト作りにおすすめなのが、Webサイトを簡単に作成できるサービスです。ドメインを取得したり、サーバーを用意したりする手間がかからないほか、テンプレートが複数用意されていて、デザインに自由度があるので簡単にポートフォリオサイトを作成することができます。

また、コーディング経験のある人ならサイトを作り込むことができるという点も、大きなポイント。Webデザイナーのポートフォリオサイトとして利用するには、ピッタリのサービスだと言えます。

採用側がポートフォリオを「作品」として見ているのなら、Webデザイナーとして充実した内容のポートフォリオサイトを作ることが、採用への近道になり得るのです。

ここでは無料で利用できるWebサイト作成サービスの中から、おすすめのものをいくつか紹介します。

SNSアカウントから簡単にログインできる「JAYPEG」

https://jypg.net/
TwitterやFacebookのアカウントからアクセスできるため、気軽にポートフォリオサイトの作成が可能。Webデザイナー同士でポートフォリオを評価し合えるソーシャル機能も付いており、他のWebデザイナーの作品を見本にしたり、お気に入りのクリエイターの作品をまとめて共有したりすることもできます。

「salon.io」ならグリッド配置で見やすいサイト作成が可能

http://salon.io/
ドラッグ＆ドロップで簡単にポートフォリオやWebサイトを作成できるWebサービス。直感的に操作できるので、コードに関する知識のない人でも抵抗なくポートフォリオを作ることができます。写真を自動でグリッド配置してくれるので、ポートフォリオサイト作成には最適。HTMLとCSSによるカスタマイズも可能で、3ページ・画像 150 枚まで無料です。

使いやすいポートフォリオ用テンプレートがある「Strikingly」

https://www.strikingly.com/
シンプルな操作でポートフォリオサイトが作成可能。レスポンシブデザインで、様々なデバイスにおいて自動で最適化してもらえます。アクセス解析機能が付いていたり、EC機能を用いてクリエイター自身の商品を販売することもできる、有料版ならカスタムドメインやパスワードプロテクト、HTML/CSS/JavaScript埋め込みも対応可能です。

「Portfoliobox」は高品質テンプレートで手軽にポートフォリオが作れる

http://www.portfoliobox.net/
ポートフォリオに特化したサイト作成サービスで、Webデザイナーはもちろん、写真家や建築家にも愛用されています。コーディングの知識は必要なく、操作が直感的に行えるほか、テンプレートの美しさには定評があり、実際のポートフォリオサイトの見本も豊富に掲載されているので、デザインにこだわりたい人にもおすすめ。アップロードは40作品まで無料。自身の作品を販売できるEC機能もサイトに統合されています。

世界のトップクリエーターが利用する「Dribbble」

https://dribbble.com/
アメリカ発のデザイナー専用SNS。招待制なので誰でも利用できるわけではないが、世界中のWebデザイナーが制作した高レベルなポートフォリオが揃っています。お気に入りのWebデザイナーや作品をフォローして参考として閲覧するだけでも、デザインセンスを磨くことができるでしょう。

Webデザイナー必見！選ばれるポートフォリオの作り方

ここからは実践編です。実際に、数多くのWebデザイナーのポートフォリオを見てきた、レバテックのテクニカルカウンセラー・高橋亜矢さんにインタビュー。Webデザイナーの採用担当者は、ポートフォリオのどこに注目しているのでしょうか？具体的例を挙げながら、評価されるポートフォリオの作り方についてアドバイスをしてもらいました。

レバテック　テクニカルカウンセラー
高橋 亜矢（たかはし あや）
求職者（クリエイター）へのヒアリングから案件提案、契約までを手がける、レバテックの人気テクニカルカウンセラー。Webデザイナーからコーダー、Flashクリエイターまで、日ごろ数多くのWeb系クリエイターのポートフォリオをチェック。ポートフォリオサイトのデザインやレイアウト、内容の改善の指導も行っている。

ポートフォリオサイトで、最低限押さえるべきポイント

担当作業、制作期間まで表記。採用側はポートフォリオの見た目以外も重視する

ポートフォリオに最低限必要となる内容は、以下の通りです。

(1)制作に携わったWebサイト名
(2)サイトのキャプチャ
(3)担当した作業
(4)制作期間やコンセプト
(5)工夫点

採用する側がチェックするのは、ポートフォリオの見た目だけではありません。具体的にどんなスキルがあるのか、どの程度のサイトをどのくらいの期間で作れるのか。Webサイトを作る上でどのくらいしっかりと考えているのか、といった点についても確認しています。

ですから、ポートフォリオではなるべく丁寧に作品の情報を提供するようにしましょう。

たとえば、ネットショッピングでなにかを買うときを想像してみるといいでしょう。商品名だけしか書かれていない場合と、詳細な説明が書かれている場合、どちらが多くのユーザーに選ばれるかは言うまでもありませんよね。

もし、すでにポートフォリオサイトを持っている場合でも、上記の内容で抜けているものがあれば、ぜひ見直してみてください。

ビジネスから女性モノまで、バリエーション豊かに掲載。案件内容の幅を見せる

次に注意していただきたいのは、ポートフォリオサイトには適切な案件数や文字量を掲載するということ。採用側としては、ポートフォリオサイトにさまざまなテイストの作品見本がある方が選びやすくなりますので、作例が多くて困るということはありません。たとえば、法律事務所や税理士事務所といった固いデザインのもの、女性向けの柔らかいもの、子ども向けの賑やかなものなど、なるべくバリエーションを増やす方がいいですね。

テイストや業種、時系列で分類し、メリハリをつけてレイアウト

また、大企業のキャンペーンサイトやランディングページなどを担当したことがあるなら、ぜひそれも掲載するようにしてください。

ただし、件数が多くなれば見にくくなるのも事実です。その場合はデザインテイストや業種、時系列などポートフォリオサイト内でカテゴリー分けすることをおすすめします。

単にグリッドで並べるだけでなく、自信がある作品を大きく扱うなど、メリハリをつけてレイアウトすることも効果的です。経験が浅くて実績が少ない人も、テイストが違うものを最低でも5点程度は掲載するように心がけましょう。

説明文は100～300字程度、情報の伝え方も評価されている

ポートフォリオの説明文の文字数は、少なすぎても必要な情報を押さえることが難しいですし、長すぎても採用担当者が最後まで読んでくれません。ですから100～300字程度を目安に、必要なことを的確にまとめるようにしましょう。

説明文を作成する際に気をつけたいのは、どの作業を担当したのかをわかりやすくしておくことです。Webデザインは、不特定多数に向けて情報を発信する仕事です。ポートフォリオでの見せ方や情報の伝え方がうまいと、それだけで採用担当者の評価が高くなりますよ。

すぐ使える！選ばれるポートフォリオサイトの作り方

では、採用側が選びたくなるポートフォリオサイトに仕上げるためには、具体的にどんなことに気をつければいいのでしょうか。

Webデザイナーとしてのテクニックを、ポートフォリオサイトにも活用する

まず、Webデザイナーとして持っているテクニックは、ポートフォリオサイトで見本としてしっかり示してください。例えば、JavaScriptを使った動的なサイトを作ったことがある方は、ぜひポートフォリオサイトでもその経験を生かして、動的なものを作ってみるといいと思います。

コードにレイアウト、裏も表もきれいに無駄なくデザインする

また、採用側がポートフォリオサイトのコーディングをチェックするケースもあるので、きれいで無駄のないコードを書いておくと、評価が高くなる可能性があります。

先に触れた通り、採用側はポートフォリオサイト自体も作品見本として見ています。Webサイト作成サービスを利用する際にも、ポートフォリオのレイアウトやフォントなど、細かい点にまでこだわりたいですね。

どれだけ事業に貢献できたのか、できればPVやKPIも書く

Webデザイナーとはいっても、デザインをして終わりではありません。Webサイトを見る人のことまでしっかり意識していることが伝わると、この人はできる人だと思ってもらえます。例えばキャンペーンサイトなら、集客がどの程度増えたかといったこともアピールポイントになります。

ポートフォリオというと、作品を並べるだけの内容になりがちですが、仕様書や設計書、さらにはPVやKPIといった数字についても、書けることがあればぜひ書いてください。

ポートフォリオはコミュニケーションツール。相手に配慮した見せ方を

ポートフォリオは、Webデザイナーの顔であり、資産一覧でもあることを紹介しましたが、それを採用側に伝えるためのコミュニケーションツールでもあるのです。
 
人と接するときには、親切な対応を心がければ印象が良くなりますよね。ポートフォリオサイトを作るときも同じです。「見る相手がいる」ということを忘れずに、親切な見せ方を工夫してみてください。

ポートフォリオは自分を表現し、熱意や本気度を伝えるツール

転職を考えているWebデザイナーにとって、ポートフォリオサイトを作ることは時間や手間がかかるものです。しかし、それだけにポートフォリオサイトの内容がしっかりしていれば、採用側は熱意や本気度を読み取ってくれます。

ポートフォリオサイトは自分を表現する大切なツールの一つだという意識を持って、がんばってください！