フリーランスのWebデザイナーが参考にすべきポートフォリオ15選

こんにちは、ITプロパートナーズ編集部です。

フリーランスのWebデザイナーにとってポートフォリオは自分のスキルを売り込む為にも必須となります。そこでこの記事では、フリーランスwebデザイナーのポートフォリオの作成方法と整理方法、そして参考にすべきポートフォリオ15選を紹介します。

ぜひポートフォリオ作りの参考にしてください。なお、フリーランスのWebデザイナーになる方法など総合的な情報については「フリーランスWebデザイナーになるには？年収や必要スキル、案件獲得方法も解説」で解説していますので、併せてご覧ください。

弊社では、数多くの方にフリーランス案件を獲得していただいています。経験とスキルさえあれば、週2日から高収入案件をご紹介できます。まずは無料登録をして色々な案件をみて見てください。弊社からおすすめの案件をご紹介することも可能です。

1 そもそもポートフォリオってなに？
2 ポートフォリオはWebデザイナーの顔である
3 フリーランスWebデザイナーがポートフォリオに載せるべき最低限の情報
4 参考にしたいWebデザイナーのポートフォリオ15選
5 ポートフォリオの作り方の手順
6 ポートフォリオサイトを作るならサイト作成サービスがおすすめ
7 より魅力的なポートフォリオサイトを作るコツについて
8 最後に

そもそもポートフォリオってなに？

フリーランスのWebデザイナーとして活動しているなら、当然「ポートフォリオ」という言葉を聞いたことがあるでしょう。

ポートフォリオは、コンテンツがアナログだった時代には、実際にプリントアウトした作品集をファイルなどに入れて持ち運んでいました。

しかし、Webサイトや動画などのデジタルコンテンツが当たり前となった現在では、「ポートフォリオサイト」を作るのが主流になっていますね。

フリーランスのWebデザイナーとして営業を行なうにあたって、ポートフォリオは必須の商売道具です。

そこで、Webデザイナーにとってのポートフォリオの重要性をはじめ、基本的なポートフォリオの作成方法、さらには選ばれるポートフォリオのポイントを今回はご説明しようと思います。

ポートフォリオはWebデザイナーの顔である

営業で受注するには、スキルを磨き実績を積むことが重要であることは言うまでもありません。

しかし、せっかくスキルや実績があっても、それを採用側にうまくアピールできなければ、それは意味ありません。

そこで必要になるのが、「ポートフォリオ」なのです。

ポートフォリオがあれば、自分がそれまでにどんな作品を作ってきたのか、どんな仕事をしてきたのか、さらにはどの程度の実力があるのかまで一目で理解してもらえるでしょう。

今後フリーランスのWebデザイナーとして活動していくのであれば、ぜひともポートフォリオは準備しましょう。

フリーランスWebデザイナーがポートフォリオに載せるべき最低限の情報

ポートフォリオに最低限必要な情報は以下の通り4項目あります。

プロフィール
スキル
作品紹介
料金や問い合わせ先

ここで重要なのは、依頼する側がチェックするのは単に「見た目」だけではないということです。具体的にどんなスキルがあるのか、どの程度のサイトをどのくらいの期間で作れるのかといった点も確認しています。また、ポートフォリオを通じて、その人が信頼できるのかという点も見ているので、丁寧な情報提供を心がけましょう。

ここからは、先の4項目について詳しく説明していきます。

プロフィール

プロフィールに載せるべき情報は以下のとおりです。

名前
生年月日
顔写真
経歴
挨拶文（自己PRや仕事に対する考え方）

顔写真を撮る際には、「信頼感」「清潔感」「親近感」の3点に注意しましょう。スーツを着用する必要はありませんが、ラフすぎる服装やスポーツをやっている時の写真など、印象づけることを意識しすぎた写真は避けたほうが良いでしょう。

自己紹介文は、簡潔に200文字前後にまとめることを意識しましょう。面談等があれば、その際に補足するつもりで記載してください。

スキル

Webデザイナーとして必要な知識やスキルをどれくらい持っているか記載しましょう。依頼側はあなたが具体的にどういったスキルを持っているのか知りたいと考えています。できるだけわかりやすいようにまとめて示すと良いでしょう。

具体的には、スキルをリスト形式でまとめて、熟達度を☆印やレーダーチャート等で視覚的にわかりやすく示すことをオススメします。注意点として、自分をよく見せるために、できないことをできるかのように記載するのは避けましょう。後でトラブルに発展する恐れがあるので、あくまで正直に、かつ客観的に表すことを心がけてください。

一般的に掲載すると良いスキルセットは以下のとおりです。

HTML
CSS
JavaScript
jQuery
PHP
WordPress
illustrator
Photoshop
XD

他には、次のようなスキルも記載すると依頼側にとっても親切でしょう。

UI/UXデザイン
SEO
ワイヤーフレーム作成
ECサイト構築
ディレクション
クライアントとの折衝

コーディングまでできないWebデザイナーもいるかと思いますが、HTML・CSS・JavaScritpなどのフロントエンド言語を使えるのであれば、十分なアピールポイントとなるのでぜひ記載しましょう。また、ヒアリング・プレゼン・ディレクションといった経験もある場合には書いておくことをオススメします。

大事なことは、いかにして他のフリーランスWebデザイナーと差別化するかです。そのため、これまで経験されてきたことは余すことなく、簡潔に記載してアピールしましょう。

作品紹介

次に、ポートフォリオを制作する上で欠かすことのできない作品紹介パートの説明です。スキルを箇条書きに表しても、実際にどのようなものが作れるのか想像することはできません。そこで、過去に制作した作品を載せることで依頼側のあなたへの理解が深まります。

作品紹介パートには、以下の要素を入れましょう。

作品画像
案件名またはクライアント名
URL
公開年月日
作品の概要説明
- 制作日数
- 制作の規模
- 自分の役割や担当した範囲
- 制作した環境や使用した言語・ツール
作品作成時の注力ポイントや作品の見どころ
作品の成果（アクセス数やコンバージョン率など）

ポートフォリオサイトに載せる作品数は10点ほどが望ましいと言われています。依頼側もすべての作品に目を通すことはできないので、特にアピールしたい作品に絞って掲載しましょう。数を絞る場合には、ジャンルや雰囲気が偏らないことも重要です。「この人はこのパターンしか作れない」と思われては仕事を受注するチャンスを逃すことになります。様々なパターンの作品を載せて、チャンスを掴み取りましょう。

一方で、実績が少ない場合には、仮のWebサイトを作って載せることもオススメです。そうすることで、実績が少なくとも自分のスキルをアピールできます。仮で作ったサイトの場合は、その旨を記載することを忘れないでください。

作品紹介パートの肝は、できるだけわかりやすく、簡潔に「作品の魅力」を伝えることに尽きます。自分の作品をすべて見せたくなる気持ちもあると思います。しかし、このポートフォリオ自体が1つの作品といっても過言ではありません。ポートフォリオでは、相手にとって最適な作品を選定し、魅力的に見せることを心がけてみてください。

料金や問い合わせ先

フリーランスとして仕事を受注する際には、おおよその費用を掲載することも検討しておきましょう。依頼する側にとって、料金のわからないWebデザイナーには頼みづらいからです。

以下のように、請け負いたい内容についておおまかな費用を掲載するという形になります。

依頼内容：費用
コーポレイトサイト：○万円〜
ECサイト：○万円〜
LP：○万円〜
ロゴデザイン：○万円〜

必ずしも料金を掲載する必要はありません。しかし、自分が仕事を受注する上で、事前に価格を提示しておいたほうが価格交渉をしやすい場合があります。あなたのやりやすい方法を選んでください。

問い合わせ先については必ず記載しましょう。日頃公開しているSNSアカウントの情報も載せておくと、自分の魅力を伝えることにもつながるので、嫌でなければ載せることをオススメします。

参考にしたいWebデザイナーのポートフォリオ15選

ポートフォリオを作るにあたって、ぜひ参考にしてほしいサイトを紹介します。
いいと思った部分をあなたのポートフォリオにも活かしてみてください。

present. – シンプルで上品

http://presnt.jp/

濃いめのブルーの文字と白色の背景を基調とした非常にシンプルかつ上品なサイトです。アニメーションも派手ではなく、見ていて疲れないポートフォリオサイトとなっています。

UNDERLINE – 個性と信頼性の融合

https://u-d-l.jp/

白を基調としており、非常にシンプルであるにも関わらず、トップに自分の画像とメッセージを入れることでインパクトもあります。シンプルゆえの信頼性とトップページのインパクトゆえの個性の双方を融合させたポートフォリオサイトです。

平尾誠 – スタイリッシュな黒基調

https://hiraomakoto.jp/

黒を基調とした非常にシンプルかつスタイリッシュなサイトです。スクロールすることで横向きに動き、見る側を楽しませてくれるポートフォリオサイトとなっています。

maima.me – 1ページ構成でおしゃれさを表現

http://maima.me/

1ページで構成されているにも関わらず、非常におしゃれなポートフォリオサイトです。白を基調としており、カラフルなWebデザインが目立つようになっています。

musubime – 斬新な縦書き

http://www.musubime.jp/

名前だけでなく、フィロソフィーやプロフィールに至るまで縦書きで構成されたポートフォリオサイトです。白の背景と黒文字でシンプルにも関わらず、縦書きで斬新さも感じさせます。

Mana – 直感的に伝える

https://www.webcreatormana.com/

Webデザイナーであれば1回は見るであろうポートフォリオサイト。日本語版も英語版も実装されており、直感的に操作できるデザインとなっています。

hasegawahiroshi – ポップで親しみやすい

https://hasegawahiroshi.jp/

ポップな色使いであるものの、見やすい構成のため誰もが親しみを持ちやすいサイトです。各パーツがユーザー目線で配置されており、操作性の高さもポイントとなっています。

mouf design – 遊び心ある文字と背景

ファーストビューには動きのある文字と、刻一刻と変わる背景が楽しいサイトです。遊び心がありながらも、1ページで簡潔にまとめられており、非常に見やすくなっています。

KATOSHUN.com – スクロールするごとに変わる画像

http://katoshun.com/

目を引くのは、スクロールするごとにメインとメニューバーの間の画像が変化するところです。ちょっとした遊び心を加えながらサイト作りがされています。

jojodesign – 円をモチーフに

http://www.jojodesign.jp/

円と線で構成された背景が動くことで、非常に印象に残るポートフォリオです。過去実績等も円形にトリミングされており、統一感をもたせています。

TAKAAKI SATO – 似顔絵で親近感を

https://sato-takaaki.work/

ファーストビューに自分の似顔絵を配置することで、佐藤さんの人柄を演出しています。色も茶色を基調としており、安心感を与える構成となっています。

OBANA DAISUKE – 洗練された構成

http://d-obana.com/

スクロールすると多くの実績がサクサク出てきて、白を基調としていることも相まって、洗練さを感じさせます。ユーザーに負担を与えないサイト構成となっています。

cotton design – 作品を切手型に切り取る

http://coton-design.com/

グラフィックデザイナーということもあり、切手型にこれまでの作品をトリミングして、ファーストビューで多くの作品を目にできるよう配慮されています。トップページの左側をクリックすると、カテゴリーの作品が浮かび上がるようになっており、見やすくなっています。

Manato Kuroda – ポップに、キュートに

http://manato.ca/

なかなか見ないピンク基調に、背景にはバブルのようなものがフワフワと浮いています。1ページ完結となっていて、見やすい上に視覚的にも楽しませてもらえます。

フクシマナオキ – 長すぎず、シンプルすぎず

https://fukushimanaoki.com/

ファーストビューに自分の名前が置かれており、シンプルかつ洗練されたデザインとなっています。しかし、Webフォントを上手に活用しながらシンプルすぎないように配慮されたサイトです。

ポートフォリオの作り方の手順

ここでは、ポートフォリオの作り方の手順を紹介します。手順としては、以下の工程が予想されます。

1. ポートフォリオの目的を明確化
2. 参考にしたいデザイン探し
3. サイトの構成を決定
4. ワイヤーフレームを作成
5. コーディング
6. アップロード

ここからは、それぞれの工程の詳細について解説します。

手順1：ポートフォリオの目的を明確化

まずは、ポートフォリオの目的を明確化します。考えるポイントは次のとおりです。

誰に見せるのか
どのようなイメージを自分に抱いてほしいのか

上記の2つの要素をしっかりと練り上げることで、後々の工程でもブレずに一貫したポートフォリオ作成ができます。

手順2：参考にしたいデザイン探し

ポートフォリオの最終的な目標は、わかりやすく、簡潔に自分の魅力や実績を紹介することです。既存のポートフォリオの中で、見やすいサイトや伝わりやすいサイトを見つけてください。その特徴を分析し、自分のポートフォリオにも活かしましょう。

この記事の後半にも参考になるデザインのサイトを紹介しているので、ぜひご覧ください。

手順3：サイトの構成を決定

サイト全体をどのような構成にするのか決定します。手書き、もしくは専用のツールを用いてサイトマップを作成しましょう。依頼主がサイトをどのような動線で見るのか、あるいは見てほしいのか考えながら構成を決めていきます。

手順4：ワイヤーフレームを作成

問い合わせフォームへのボタンや、作品ページの場所など大まかでもいいので、どこに何を配置するのか決めます。こまかなデザインは実際に作りながら変更できるので、あくまでおおまかなイメージで大丈夫です。

手順5：コーディング

ワイヤーフレームの作成を終えたら、コーディング作業に入ります。コーディングに関する知識がない場合には、CMSなどを利用しましょう。この記事の最後にポートフォリオサイトを作る上でオススメのサイト作成サービスを紹介しているので参考にしてください。

手順6：アップロード

ポートフォリオサイトを公開するためにはサイトのドメインを取得し、サーバーを用意しなくてはいけません。費用がかかりますが、ポートフォリオ作成サービスの中には無料で公開できるものもあるので、ぜひ確認してみてください。

ポートフォリオサイトを作るならサイト作成サービスがおすすめ

ここまでにフリーランスのデザイナーにとって、ポートフォリオが重要だということはお伝えしてきましたが、いざ作ろうという気持ちになっても、なにから手をつければいいのか迷ってしまうという人も多いのではないでしょうか？

また、「新たにサイトを作るだけの手間をかけられない」「仕事をしながら時間を捻出するのが難しい」という人もいるはずです。

そこで、手軽にポートフォリオを作ることができるサービスをいくつか紹介します。

Striking.ly

「Striking.ly」は、短時間でクオリティの高いWEBサイトを作ることができる海外のWEBサービスです。英語版と日本語版がリリースされていますので、日本語しか分からない人も安心して使用することが出来ます。

ハイクオリティなWEBサイトが無料で作成できますので、作品を掲載するポートフォリオサイトを作成するのに最高です。また編集画面が分かりやすいのでWEBサイト制作未経験でも簡単に作れます。

URL：https://www.strikingly.com/

Galer.io

「Galer.io」はプロ・セミプロのデザイナー向けのポートフォリオ作成サービスです。画像ファイルをドラッグ＆ドロップするだけでポートフォリオサイトが作れます。無料で利用できますし、連絡先の設定が可能ですので作品を公開して発注先を募集することもできます。

URL：http://www.galer.io/

Salon.io

「Salon.io」は画像をドラッグ＆ドロップでアップロードし、自由なレイアウトで並べることができます。キャンバスの起点の設定や、レスポンシブなレイアウトの設定も可能で、それぞれの画像サイズに大小の差をつけることで、印象的なポートフォリオページが作成することが可能です。

URL：http://salon.io/

JAYPEG

「JAYPEG」はポートフォリオ作成が可能なソーシャルサービスで、デザイナー同士でコミュニケーションがとれるサービスとして注目を集めています。他のデザイナーやクリエイターの作品が見られるので刺激になりますし、デザイナー同士で評価し合うことも可能です。

URL：https://jypg.net/

より魅力的なポートフォリオサイトを作るコツについて

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

掲載量が多くなれば見にくくなるのも事実です。その場合はデザインテイストや業種、時系列などでしっかりとカテゴリー分けすることをおすすめします。

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

②.説明文は100～300字程度に留める

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

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

③.持っているテクニックを、ポートフォリオサイトにも活用する

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

④.綺麗なコードでサイトを作成する

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

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

⑤.どれだけ事業に貢献できたのか、PVやKPIを掲載する

Webデザイナーとはいっても、デザインをして終わりではありません。Webサイトを見る人のことまでしっかり意識していることが伝わると、この人はできる人だと思ってもらえます。例えばキャンペーンサイトなら、集客がどの程度増えたかといったこともアピールポイントになります。ポートフォリオというと、作品を並べるだけになりがちですが、仕様書や設計書、さらにはPVやKPIといった数字についても、書けることがあればぜひ書いてください。