フリーランスWEBデザイナーに必須の「ポートフォリオ」とは？整理方法を徹底解説！

ポートフォリオとは？

フリーランスにおけるポートフォリオとは作品集のことです。Webデザイナーであれば自分の手掛けたものがそれに当たります。言わば過去に制作した実績を集めたもの＝ポートフォリオとも言えるでしょう。ただし、過去に制作したものを全て載せる訳ではありません。アピールしたい方向に合わせて、いくつかピックアップします。

ポートフォリオは紙で作られる場合もありますが、現在はデジタルが主流です。ポートフォリオサイトと言って、自分の作品を集めたサイトがよく作られています。

特にWebデザイナーの場合は、ポートフォリオサイトそのものも実績となることが多いです。そのため今から作るという方は、デジタルのポートフォリオを作りましょう。

ポートフォリオはWebデザイナーの名刺代わり

ポートフォリオでは、あなたのスキルや得意分野をアピールできます。つまりクライアントに対する営業ツールということです。

フリーランスのWebデザイナーにとって大事なものの中に、仕事の獲得があるでしょう。そして、クライアントが仕事を依頼する時重視することがスキルです。そのスキルを測るのに役立てられるのがポートフォリオになります。実際の作品を見ることで、求めている人材と合致しているか判断できるからです。

実際、ポートフォリオから仕事に繋がったという人も少なくありません。仕事の獲得という点から見れば、フリーランスWebデザイナーにとってポートフォリオは名刺以上に大切なツールです。

仕事に繋げるためにも、フリーランスになったらポートフォリオを作ることをおすすめします。

ポートフォリオサイトの作成サービスを利用するのがオススメ

ポートフォリオは重要と言うものの、作ったことがない方も多いでしょう。

1からポートフォリオサイトを作る場合、作成サービスを利用するのがおすすめです。作成サービスでは、簡単な手順でサイトを作れるようになっています。そのため、初心者でもすぐに作成できるのです。

おすすめの作成サービスは以下の10個になります。

• Striking.ly
• Galer.io
• Salon.io
• JAYPEG
• MATCHBOX
• Portfoliobox
• Dribbble
• Behance
• format
• IM Creator

それぞれの特徴を説明していきます。

Striking.ly

Striking.lyは海外の作成サービスです。日本語版もあるため、英語が分からなくても利用できます。

Striking.ly

テンプレートがあり作りやすいのはもちろん、それを自分好みにアレンジすることが可能です。海外のクリエイターや起業家も利用していることからも人気ぶりが分かります。

Galer.io

Galer.ioはプロやセミプロ向けの動画作成サービスです。操作はとても簡単で、ファイルをドラッグ・ドロップするだけになります。

Galer.io

自分でサイトを1から作るわけではないため、短時間で作成できる所が魅力です。

Salon.io

Salon.ioもファイルをドラッグ・ドロップすることでポートフォリオが作れるサービスです。視覚的に作成できるため、コードなどの専門的な知識は要りません。

Salon.io

また、無料版でも広告がない所も特徴です。基本的にサイトには広告がない方が良いので、その点から見てもおすすめのサービスになります。

JAYPEG

JAYPEGはポートフォリオの作成以外に、作品の投稿もできるサービスです。そのため、他のクリエイターの投稿も閲覧することができます。他の人から刺激がもらえる作成サービスです。

JAYPEG

MATCHBOX

MATCHBOXは、無料で作成可能なサービスです。Web・紙の両方に対応しており、ガイドに沿うだけで必要な情報を入力できます。

MATCHBOX

また就職・転職活動を考慮しているため、履歴書の自動作成機能も利用可能です。

Portfoliobox

Portfolioboxは、有料の作成サービスです。最安プランで月0.9ドルで、初月は無料となっています。

デザイナー以外の様々な業種に対応しているため、テンプレートも豊富です。

Portfoliobox

Dribbble

Dribbbleは、世界中のデザイナーが集まるSNSです。作品を投稿し、それをポートフォリオとして活用できます。

しかし、招待をされなければ作品の投稿はできません。閲覧は招待なしでも利用できます。

Dribbble

招待制ということで質の高いデザイナーが集まっており、勉強にもなるサービスです。

Behance

Adobeによる、クリエイター向けの無料SNSです。作品をアップロードし公開することで、ポートフォリオとして活用できます。

SNSのため、他のクリエイターの作品を見ることが可能です。

また求人機能もあるため、仕事を見つけることもできます。

Behance

format

formatは海外のサービスで、月7ドルの料金が必要です。ただ、最初の14日間は無料体験として利用できます。

format

テンプレートが美しいことが特徴です。そのため、洗練されたサイトを作るのに適しています。

IM Creator

IM Creatorは海外の作成サービスです。無料版と有料版があり、有料版は月8ドルになります。

IM Creator

質の高いデザインが多く、日本ではまだあまり知られていません。ただし全て英語のため、英語が分からない方は注意が必要です。

これだけは抑えたい！ポートフォリオサイトに載せるべき最低限の情報

Webデザイナーがポートフォリオに載せるべき項目は以下の通りです。

• Webサイト名やタイトル名
• 作品のビジュアル
• 作業内容
• 作品に対する説明

Webサイト名やタイトル名

まず、そのWebサイト名やタイトル名といった基本的な情報を載せます。URLも載せられる場合は、記載しましょう。

作品のビジュアル（写真、動画など）

サイトデザインのビジュアルを載せます。一枚の写真に収まらない場合は、複数に分けましょう。動画で紹介するという方法もあります。

作業内容　

自分が担当した作業内容を記述します。特に複数人で制作した場合、自分の担当範囲を明確に載せるようにしましょう。

作品説明文やコメント（制作する上で挑戦した点や工夫した点など）

ただの紹介で終わらせないために、作品のポイントを説明をしましょう。例えば、その作品で挑戦・工夫した点がそれに当たります。どういう意図でその工夫をしたのか、何を伝えようとしたのかといった考えの部分を載せると尚良いです。スキルの裏付けになるため、見る側の信頼感が増します。

より魅力的なポートフォリオサイトを作るために押さえておくべき7つのポイント

ただの作品集ではなく、クライアントに魅力的に思ってもらうポートフォリオを作りたい方もいるでしょう。

より魅力的にするためには、以下のことを考えます。

• わかりやすさを追求する
• プロフィールに顔写真を入れる
• SNSやブログも活用する
• 作品をわかりやすく分類する
• 作品説明を簡潔にする
• 使えるデザインツール、技術を記載する
• 達成したPVやKPIを定量的に掲載する

以下でそれぞれ解説していきます。

わかりやすさを追求する

ポートフォリオサイトでは、2つの意味でわかりやすさを追求しましょう。

1つ目は、視覚的なわかりやすさです。相手が見やすいサイトにすることで、ストレスなく閲覧してもらえます。わかりやすいサイトになっていれば、それだけでも好感が高まるでしょう。なぜなら、ユーザーのことを考えて作られたポートフォリオサイトと判断できるからです。

もう1つ、自分の意図もわかりやすくします。Webデザインをする時は、ユーザーに対して伝えたい意図を考えるでしょう。ポートフォリオでも同じようにテーマを考えて、それを表現します。例えば、「私は〇〇が得意」「私は〇〇なスキルを持っている」ことをアピールしたい場合、それが伝わるように作品を選びましょう。相手に自分のアピールを理解してもらうため、わかりやすさを第一に考えることが大切です。

プロフィールにはなるべく顔写真を入れる

プロフィールに顔写真を入れると、相手からの信頼感が増します。顔を出しているということは、変なことをしないだろうと考えるからです。

特にフリーランスの場合、オンライン上でやりとりが完結することもあるでしょう。顔が見えないやりとりも多い中、相手の顔を知っているというのは特別感と安心感に繋がります。

ただ、顔出しに抵抗がある場合は必ずしも出さなくて良いです。もし顔を出せる場合には、載せることも検討してみてください。

SNSやブログも活用する

仕事用のSNSなどがある場合、そのアカウントやURLも記載しましょう。デザインをそれらのSNSにアップしている場合、他の仕事ぶりも知ってもらえます。

反対に、SNSなどでサイトを宣伝することも可能です。相互的なメリットがあるため、載せることをおすすめします。

ただ、趣味やプライベートのアカウントは載せない方が良いです。あくまで仕事に関連するものを載せるようにしましょう。

デザインテイスト、業種、時系列でわかりやすく分類する

作品を多く掲載すると、見る側は混乱します。従って、テイストや業種、時系列などで分類しましょう。カテゴリ分けをすることで、閲覧しやすくなります。

その際は、自信のあるものを大きくするなどレイアウトを工夫することもおすすめです。

作品説明文やコメントは簡潔に！200～400字を目安にしよう

作品の説明は簡潔に、200字〜400字程でまとめます。なぜなら、長いと相手に最後まで読んでもらえない可能性があるからです。その作品を語る上で必要なことだけを抜き出し、読みやすく記載します。

内容はポイントと制作過程の思考です。また、初めに自分の担当した作業を明確にしておきます。

力作の場合、全て話したい気持ちもあるでしょう。しかし、説明を短くして余白を持たせれば、相手からの質問に繋がります。その時に記載していないことを話すことが可能です。

利用可能なデザインツールや技術を記載する

扱うことのできるデザインツール、技術は記載することをおすすめします。デザイン面であればIllustratorやPhotoshop、その他であればWordPressやJavaScript、HTMLなどがそれに当たります。

実際に活用した作品を載せて、何を使ったか記載すると良いでしょう。

達成したPVやKPIを定量的に掲載する

デザインだけでなくその後の動向も掲載しましょう。具体的にはPVやKPIといった数字です。手掛けたサイトが、クライアントや自身の考えた目標に届いた・超えたというのはアピールポイントになります。

もしそういった数字が分かるようでしたら、それも掲載するようにしましょう。

参考にしたいWebデザイナー・Webディレクターのポートフォリオサイト

自分で0から作るのが難しいという方は、先輩のサイトで勉強するのも1つの手です。そのため、以下のサイトをご覧になってみてください。

UNDERLINE

こちらのサイトの特徴は、アクセスした時に大きく出てくる全身写真とコメントです。顔とどういうポリシーを持っているか記しているため、信頼感が増しています。

サイトも白基調でシンプルなため、シンプルなサイトを作りたい人は参考になるでしょう。

UNDERLINE

平尾 誠

こちらのサイトの特徴としては、黒背景と横へ移動するという作りでスタイリッシュさが生まれています。

worksでは過去の実績を、aboutでは自己紹介を記載しており、適宜移動することが可能です。

作品の紹介では端的に制作意図も書かれているため、書き方の勉強になるでしょう。

MAKOTO HIRAO PORTFOLIO

present.

こちらの特徴は、トップで作品を見られるようになっているところです。タップすることで詳細な作品を見ることができ、最下部で作品説明を行なっています。

作品を魅せたい人は、参考にしやすいでしょう。

present.

S5 Studios

こちらのサイトは、アニメーションやBGMで見る人をワクワクさせる作りとなっています。左上からすぐに作品を見られることも、見る側からのポイントが高いです。

S5-Studios

maima.me

こちらは、自己紹介・実績だけが並んでいるシンプルな作りが特徴となります。実績も縦に並んでいるため、簡単に閲覧可能です。作品画像を開くと、作品説明が書かれています。

maima.me

KATOSHUN.com

こちらのサイトでは、メニューはworks・about・massage・blogの4つで、簡単に移動できるよう作られています。ブログを持っている人は、このようにリンクを配置するのも参考にしてみてはいかがでしょうか。

KATOSHUN.com

jojo design

こちらのサイトの特徴としては、円が多用されており作品も円状になっている所です。そのことによって統一感が生まれ、スタイリッシュさに繋がっていると言えるでしょう。

jojo design

Mana

こちらのサイトでは、メニューからすぐに実績まで飛ぶことができ、見る側は手を煩わせません。また作品説明も端的かつ、使用したスキルも箇条書きで載っている所も参考になるでしょう。

英語版もあり、海外向けのサイトを作りたい人にも参考になります。

Mana‘s Portfolio Website

hasegawahiroshi

こちらのサイトは、コンセプトから提供サービス、実績まで流れるように閲覧できる部分が特徴です。それぞれの項目で気になる所があれば、詳細からすぐに見られる作りになっています。

見る側の負担が少ない、ユーザー目線のサイトです。ユーザー目線で作りたい人はご覧になってみてください。

ウェブデザインhasegawahiroshi.jp

フクシマナオキ

こちらのサイトは、1ページにまとまっています。

作品の下に自分の提供する価値を読みやすい文章で書いている点も特徴です。シンプルさを求める人に参考になります。

ウェブデザイナーフクシマナオキ

MITSUGU TAKAHASHI

こちらはモノトーン色のみを使い、統一感を生んでいます。

使用している言語や利用可能なツールが記載されているので、何ができるかすぐに把握できる所もポイントです。

ただ、現在は閉鎖されており閲覧できません。

rumiko matsumoto

こちらのサイトは、少女が飛ぶアニメーションに淡い壁紙が特徴的です。サイトの背景作りに力を入れたい人に参考になります。

rumiko matsumoto

TAKESHI WATAMURA | 綿村 健

こちらは、色が変わるアニメーション背景が印象的な作りとなっています。また実績をズラリと並べることで、依頼する側の信頼感、安心感に繋がっているでしょう。

takeshiwatamura

SCANNER™ | a design & production firm, based in tokyo.

こちらのサイトでは、自分たちが何者か、どういう仕事をしているかという紹介をした後に実績が見られます。

実績では作品説明のほか、担当箇所もきちんと明確に記載されている部分も勉強になるでしょう。

Scanner

oniguili

こちらのサイトはモノクロ基調になります。しかし、作品をスライドすると1つずつ色が付く仕様です。これによって作品が強調されています。

SNSも複数リンクがあり、気になるところに飛びやすくなっています。そして、メニューも日本語で分かりやすいです。

個性を出しつつ、ユーザーのことも考えられたサイトと言えます。

oniguili

Web制作・プランニング｜HIPGNOS

こちらは、トップページでフィロソフィーやサービス内容を紹介している作りとなっています。

実績はWebworksからすぐに見られるため、ユーザーが迷いなく使えるサイトと言えるでしょう。

HIPGNOS

OBANA DAISUKE

Webデザイナー、尾花大輔さんのサイトです。

サイトがシンプルな分、作品が目立つ作りになっています。作品を強調したい人に参考になるサイトと言えるでしょう。

OBANA DAISUKE

libretto works | リブレットワークス

こちらのサイトは、アクセス時にlibretto worksと名前が表示されるのが印象的です。

また初見時のスライドアニメーションや、白基調に鮮やかな写真を多用することでスタイリッシュさも生まれています。

作品一覧の右下には「view more」とあり、ユーザーはどこから詳細を見るのか迷わずに済むでしょう。

リブレットワークス

normo.jp | Webデザイン,iPhoneアプリ制作請負

こちらのサイトは、鮮やかな背景が特徴的です。

また、ブログやTwitter、GitHubにワンクリックでいける分かりやすさも兼ね備えています。

normo.jp

TAKEO DOMAN

フリーランスイラストレーターの道満さんのサイトです。

トップページには背景で作品が流れており、一目でどのような作品を描いているのかが分かる作りとなっています。

メニューは端的に、works・profile・contactの3つで分かりやすいのも特徴です。

Takeo Doman/ Portfolio

kobito inc.

デザインとアニメーション制作をしている株式会社Kobitoのサイトです。

トップページからスクロールすると、すぐ下に作品が並んでいます。一覧で作品が並んでいるため、一気に把握しやすいことが特徴です。

また、メンバーも顔写真付きで紹介されているため、信頼感が増しています。

kobito inc.

ホームページ・Web制作会社 | 大阪市北区 | カイエ株式会社 Cahier-Inc.

Web制作会社カイエのサイトです。

トップページに実績が載っているため、気になる仕事にすぐアクセスできます。

そして、トップページは全て英語で表記されていること、スライドで作品が表示されることでスタイリッシュさが感じられるでしょう。

Cahier

Soulmates Interactive.

株式会社ソウルメンツインタラクティブのサイトです。

1ページで完結していて、実績がリンクで貼られている所が特徴です。サイト名をタップすると、そのサイトに飛びます。そのため、直にどういうサイトを作ったのか知ることが可能です。

Soulmates Interactive.

まとめ

いかがでしたか？ポートフォリオは必須のツールです。仕事の獲得にもつながるため、まだ持っていない人はすぐにでも作りましょう。

1. ポートフォリオは自分のスキルをアピールするものである
2. 作成サービスで簡単に作成可能
3. わかりやすいポートフォリオ作りを心がける

SNSシェア

• X
• facebook
• hatebu
• LINE
• pocket

CATEGORY

フリーランス

TAGS

webデザイナー フリーランスノウハウ ポートフォリオ