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サイト作成サービスの中から、おすすめのものをいくつか紹介します。

 

---

ポートフォリオサイト作成に特化したWebサービス

●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デザイナーとしてのテクニックを、ポートフォリオサイトにも活用する
　（２）コードにレイアウト、裏も表もきれいに無駄なくデザインする
　（３）どれだけ事業に貢献できたか、できればPVやKPIも書く
　（４）ポートフォリオはコミュニケーションツール。相手に配慮した見せ方を


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

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


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

また、採用側がポートフォリオサイトのコーディングをチェックするケースもあるので、きれいで無駄のないコードを書いておくと、評価が高くなる可能性があります。
先に触れた通り、採用側はポートフォリオサイト自体も作品見本として見ています。Webサイト作成サービスを利用する際にも、ポートフォリオのレイアウトやフォントなど、細かい点にまでこだわりたいですね。


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

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

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


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

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


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

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

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

---

クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上（※）の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む