Webデザイナーにポートフォリオは必須！制作のコツ・NG例を解説

「Webデザイナーになりたいけれど、ポートフォリオって重要？」「Webデザイナーとして、イケてるポートフォリオが作りたい」Webデザイナーにとって、ポートフォリオは自分の実績やスキルを企業に伝える大切な資料です。ポートフォリオの出来栄えが採用に直結するからこそ、ポイントを押さえて作成する必要があります。本記事では、ポートフォリオに入れるべき項目や作り方、手軽にポートフォリオを作れるサイトなどを紹介します。現在第一線で活躍するWebデザイナーのポートフォリオも紹介するので、これからWebデザイナーを目指す方、ポートフォリオの作り方を知りたい方は、ぜひ参考にしてみてください。▼関連記事：フリーランスはポートフォリオが重要！作り方のポイントとおすすめサービス6選▼関連記事：フリーランスのWebデザイナーになるには？独立後の年収や仕事探しの方法もご紹介ポートフォリオはWebデザイナーにとっての名刺ポートフォリオは、自分のWebデザインスキルをアピールする大切な資料です。企業に自分の作品を見てもらうための資料であるポートフォリオは、Webデザイナーにとって名刺にあたる大事な資料といっても過言ではありません。ポートフォリオの重要性Webデザイナーを目指すなら、ポートフォリオは必要不可欠です。採用する企業にとっては、志望者がどのような作品を作れるのか、どんなスキルを兼ね備えているのかを把握した上で、合否を決めます。その際に、企業の判断材料になるのがポートフォリオです。ポートフォリオがなければ書類選考も通過できなくなってしまうので、気をつけてください。またWebデザイナー自身にとっても、ポートフォリオは、企業に自分の培ってきたスキルや得意ジャンルをアピールできる、いわば自己PRの資料です。ポートフォリオを作成するのは大変ですが、Webデザイナーへの第一歩として、気合いを入れて作っていきましょう。実務未経験の人もポートフォリオを作るべき理由「私はWebデザイナーとして実務経験がないから、ポートフォリオ不要？」と考えている方もいるのではないでしょうか。Webデザイナーの実務経験がない方こそ、ポートフォリオが重要です。実務経験があっても著作権の関係で外部に公開できない場合もありますし、実務経験がなくてもデザインスキルをアピールすることができます。ポートフォリオには、架空のWebサイトを制作して掲載したり、バナーやアイコン、その他クリエイティブ作品などデザインした作品を掲載してもよいです。紙のポートフォリオも用意しておくポートフォリオの媒体は、Webと紙の2種類があります。少し手間はかかりますが、Webだけでなく、紙のポートフォリオも必ず用意しておきましょう。主な理由は次の2つです。面接の場で必ずしもWebのポートフォリオを見てもらえるとは限らないチラシや広告など、紙媒体に対応できることもアピールできるまず、対面の面接の場でインターネット環境が不安定だったり、パソコンの調子が悪かったりした場合、ポートフォリオが開けないという事が発生するおそれがあります。そのため、万が一に備えて、紙のポートフォリオを用意しておくと安心です。紙のポートフォリオを作ることで、チラシや広告など、紙媒体の制作のPRにもつながります。紙のポートフォリオの場合は、印刷した時の色合いや紙面での読みやすさなど、Web上との違いも意識しましょう。Webデザイナーのポートフォリオに入れるべき3つの項目Webデザイナーのポートフォリオに必ず入れるべき、プロフィール・作品の紹介・コンタクトページについてチェックしていきましょう。プロフィールまず、自分の概要を伝えるために、プロフィールには下記の内容を記載することをおすすめします。名前顔写真生年月日学歴・職歴保有資格使用できるツール自己PR（一言メッセージ）転職活動の場合、履歴書や職務経歴書と重複する部分もありますが、ポートフォリオ内でもあらためて基本情報を記載しましょう。外部に公開されるWebサイトの場合、個人情報にあたる部分は、ある程度は伏せても問題ないです。150〜300文字程度で自己PRを記載して、自分の強みやWebデザイナーとしての思いなどをPRするのもおすすめです。▼関連記事：【働き方別】フリーランスの履歴書・職歴の書き方▼関連記事：【職種別】フリーランスの職務経歴書の書き方例作品の紹介ポートフォリオの肝となるのが、これまで作成してきた作品の紹介です。各作品の魅力を伝えつつ、Webデザイナーとしての力量を伝えるために、記載したい3つの内容を紹介します。制作期間まず、作品ごとにどのくらいの時間をかけて制作したかを記載しましょう。制作期間は、どのくらいのスピード感で作業を進められるかの参考になります。そのため、日頃から自分が1作品どのくらいで制作しているか把握しておきましょう。制作した範囲作品の中で、自分が制作に携わった範囲も記載します。ワイヤーフレームの設計やデザイン案の作成などから携わったケースもあると思います。作品ごとに、自分が何をどこまで担当したのか分かるように記載しておきましょう。デザインに利用したツールや制作過程の記載があると、具体的な業務イメージがつきやすいでしょう。こだわったポイントなぜこのデザインにしたのか、このコンセプトに設定した意図など、作品が出来上がるまでにこだわったポイントを必ず記載します。作品を見てもらうだけでは伝わらない、こだわりを分かりやすく文章で伝えましょう。コンタクトページ最後に、コンタクトページの設置を忘れずに行ってください。ポートフォリオの目的は、採用面接の資料だけではありません。一般にも公開しているWebサイトのポートフォリオの場合、作品を見て興味を持ってくれた方が直接依頼してくれるケースもあります。コンタクトページは、ただメールアドレスを記載するのではなく、問い合わせフォームを埋め込みましょう。ユーザーの手間を省くことで、必要事項を記入して連絡してくれる可能性が高まります。Webデザイナーのポートフォリオを作る5ステップここからは、Webデザイナーのポートフォリオを作る5ステップを解説します。次の流れに沿って、ぜひポートフォリオの作成をしてみてください。ポートフォリオの方向性を決める掲載する作品を決める作品の概要説明を書くプロフィールを作成する公開後に随時更新するポートフォリオの方向性を決める応募したい企業の特徴や自分の得意ジャンルなどにあわせて、ポートフォリオの方向性を決めましょう。方向性を決定することで、サイトの色味やデザインが定まってきます。ポートフォリオのデザインが、自分の第一印象にも直結します。だからこそ、自分らしさや自分のWebデザイナーとしての強みが伝わるよう、方向性は慌てずじっくり考えることが大切です。掲載する作品を決めるポートフォリオの方向性を決めたら、次に掲載する作品を決めます。この際、はじめに決めたポートフォリオの方向性と親和性がある作品を選定しましょう。作品はこれまで作ってきた作品を、何でも載せればいいわけではありません。自信作やこだわりぬいた作品を選定してください。作品の概要説明を書く各作品の概要説明も記載します。主に次の内容を載せて、一目で概要が分かるように心掛けましょう。クライアント名ペルソナ使用ツール制作期間制作を担当した範囲デザインのコンセプト実務未経験で架空のサイトを制作した場合、記載できない項目もあるでしょう。ペルソナや使用ツールなどを箇条書き、もしくは短文で記載し、作品を見ただけでは分からないプラスαの情報を伝えてください。プロフィールを作成するプロフィールは、作品とセットで企業がよくチェックするポイントです。作品を通してスキルを確認し、プロフィールを通して人柄を確認されます。これまでの学歴や経歴、保有している資格やスキルを伝えつつ、必ず自己PRメッセージも記載しましょう。自己PRでは、Webデザイナーとしてのこだわりや仕事において大切にしている考え方など、自分らしさをアピールするのがおすすめです。公開後に随時更新するポートフォリオを作成し、公開した後も随時更新するようにしましょう。新しい作品を追加したり、ポートフォリオの改善点が見つかったら改善したりしましょう。どんどんブラッシュアップしてより魅力が伝わるサイトを作ることが大切です。また随時更新することで、活動しているWebデザイナーとして印象づけることにもつながります。ポートフォリオに正解や完成はありません。だからこそ、随時更新してよりよいポートフォリオサイトを作り上げていきましょう。絶対に避けたい！イケてないWebデザイナーのポートフォリオここで、絶対に避けてほしいイケてないWebデザイナーのポートフォリオの事例を3つ紹介します。せっかくポートフォリオを作っても、イケてないポイントがあると採用にはつながりません。作品が応募企業とミスマッチ1つ目のイケてないポイントは、作品が応募企業とミスマッチになってしまっているポートフォリオです。例えば、美容系の企業に対して、食品系の作品ばかり掲載されたポートフォリオを送っても、活躍のイメージがつきにくいです。いくら作品の出来がよくても、得意ジャンルが違うと判断されて見送りになる可能性が高くなってしまいます。そのため、応募する企業が採用したいと思うポートフォリオはどのようなものか、掲載する作品を工夫しましょう。作品をただ羅列しているだけ2つめのイケてないポイントは、作品を羅列しているだけで、制作期間や使用したツールなどの情報を記載していないポートフォリオです。ポートフォリオを作る5ステップでお伝えしたように、作品の概要を記載していないと、「見れば分かりますよね」と相手に判断を投げてしまっているのと変わらなくなってしまいます。作品を見るだけでは伝わらないこだわりを伝えることで、見え方も変わってくるでしょう。自分のスキルや思いを適切に伝えることを忘れないようにしましょう。ポートフォリオサイトの出来がイマイチ3つ目は、ポートフォリオサイトの見栄えがイマイチなパターンです。具体的には、ページによってデザインの統一感がない、フォントが読みにくい、作品の画質が粗いなどです。ポートフォリオサイトの表示速度が遅い、パソコンでの表示は問題なくても、スマートフォンで見た時に装飾が崩れているなどもマイナスポイントです。仮にこれまでの作品がよくても、企業との大事な接点になるポートフォリオサイトがイマイチだと、業務に支障をきたすのではと不安になります。Webデザイナーのポートフォリオを手軽に作れるサービス5選ここからは、Webデザイナーのポートフォリオを手軽に作れる5つのサービスを紹介します。各サイトの特徴を見て、自分に合ったサービスを活用してみてくださいね。WordPressまず、1つ目のサービスはWordPressです。WordPressはプログラミングの知識がなくても、簡単にWebサイトを設計できること、また自由度が高くオリジナリティのあるサイトを作れることから多くの方が利用しています。またWebサイトの43%がWordPressを使用したサイトであることから、WordPressを導入している企業も多いです。そのため、WordPressを使用してサイトを作れることは、1つのアピールポイントにもなります。BRIK PORTFOLIOBRIK PORTFOLIOは、Webデザイナーをはじめとしたクリエイター向けのポートフォリオ作成ツールです。必要項目を入力し、掲載したい作品を選ぶだけで簡単にポートフォリオを作成できます。今すぐ手軽に洗練されたデザインのポートフォリオを作りたい方にぴったりです。またBRIK PORTFOLIOでは、クリエィティブ業界向けの求人サイトBRIK JOBとも連動しています。そのため、ポートフォリオを見た企業からスカウトが届いたり、専門のキャリアカウンセラーに就職相談をしたりすることも可能です。Ameba OwndAbema Owndは、Abemaが運営する無料のホームページ作成サービスです。全体的にシンプルでスタイリッシュなデザインのテーマが用意されています。Abema Owndでは、ポートフォリオサイトの作成はもちろん、ブログの作成、X（旧Twitter）やInstagramなど各SNSとの連携機能なども搭載されています。より自分のパーソナルな部分も自然と伝えやすいサイト設計ができるのが、Abema Owndの魅力です。更新は専用スマホアプリからも可能で、アクセス解析やSEO対策、SNS連携と本格的な機能まで無料です。さらにSEOにも強く、Google Analyticsと連携したアクセス解析も利用できるので、検索エンジンに評価されるポートフォリオサイトを作りやすくなっています。Adobe PortfolioAdobe Portfolioは、PhotoShopやIllustratorなど、クリエイター向けの製品を多数提供しているAdobeが提供するポートフォリオサービスです。作品をアップロードして配置やフォントを決めていくだけで、手軽にポートフォリオサイトを作成できます。またAdobe CCの会員であれば、無料で利用可能です。Adobe Portfolioでは、独自ドメインの設定やスマートフォン対応のサイトを作れるほか、背景を動画に設定することもできます。よりオリジナリティあふれるポートフォリオサイトを手軽に作れるので、ぜひご利用ください。NotionNotionは、2018年にリリースされたクラウド型のドキュメントツールです。議事録やマニュアルの作成などで使用されているイメージが強いかと思いますが、実はポートフォリオの作成にもおすすめのツールとなっています。Notionは、サイトデザインのカスタマイズに制限があるため、基本的に白を基調としたシンプルなポートフォリオサイトになります。まだ方向性が決まっていないけれど、とりあえずポートフォリオサイトを作ってみたいという方、シンプルなデザインのサイトを作りたい方にNotionはおすすめです。Webデザイナーがポートフォリオを作る時に押さえておきたい5つのポイントWebデザイナーがポートフォリオを作る時に押さえておきたい5つのポイントを紹介します。これから紹介するポイントを押さえて、よりよいポートフォリオを作っていきましょう。掲載数の目安は10〜15作品ポートフォリオに掲載する作品数は、10〜15作品を目安にしましょう。作品数が少ないとアピールポイントが減り、逆に多すぎると企業側に何が得意なのかが伝わりにくくなってしまいます。これまで作ってきた作品をなるべく多く載せたいという方もいると思いますが、ポートフォリオにおいては、量より質を意識しましょう。また、ポートフォリオの方向性に沿った作品を選ぶことも忘れないようにしてくださいね。見てほしい作品を前半に入れる作品の掲載順もしっかり考えて配置してください。自信作や志望業界に合った作品は、なるべく前半に入れることをおすすめします。ポートフォリオに掲載した作品は、全て見てもらえるとは限りません。だからこそ、自分のアピールしたい強みや得意分野を特に伝えられる作品を前半に配置するのがポイントです。プロフィールに顔写真を入れるなるべくプロフィールには、顔写真を入れましょう。顔写真があると、名前とセットで覚えてもらいやすいこと、クライアントもどんな人と仕事をするのかイメージが湧きやすいというメリットがあります。顔出しに抵抗がある場合は、似顔絵を記載するのもおすすめです。いずれにせよ、自分という人間がより伝わる工夫をしましょう。SNS・ブログのURLも記載するX（旧Twitter）やInstagram、ブログなどを運営している人は、必ずポートフォリオ内にURLを記載しましょう。ポートフォリオだけでは分からない、個人の人柄や考え方を身近に感じ取れるのがSNSやブログです。SNSやブログも自己PRの材料として積極的に活用していきましょう。ただし、掲載したSNSの内容も企業に見られるという点を忘れずに、発信内容には日頃から注意してください。遊び心を感じられるように工夫するポートフォリオを作る際は、ちょっとした遊び心を感じられるように工夫しましょう。誰もが見やすいポートフォリオを作ることも大切ですが、型にハマりすぎていても面白みに欠けてしまいます。だからこそ、ディズニーランドにある隠れミッキーのような、なくてもいいけれどあると嬉しいもの……そんな遊び心を感じられる工夫を入れて、センスのあるポートフォリオの作成を楽しみましょう。参考にしたいWebデザイナーのおすすめポートフォリオ5選最後にポートフォリオを作る際に参考にしたい、おすすめのポートフォリオを5つ紹介します。Webデザイナーとして第一線で活躍する、デザイナーの洗練されたポートフォリオからヒントを得てくださいね。UNDERLINEUNDERLINEは、フリーランスWebデザイナーとして活躍する徳田優一さんのポートフォリオサイトです。白で洗練されたデザインと徳田さんの顔写真、そしてWebデザイナーとしての思いが記載されたサイトトップページは、シンプルだけど印象に残るデザインとなっています。またこれまでの作品だけでなく、トップページにブログも掲載することで、パーソナルな部分も自然と伝わる設計も勉強になるでしょう。S5StudioS5Studioは、アートディレクター田渕将吾さんのポートフォリオサイトです。青を基調としたサイトには、全てアニメ―ションが設定されており、まるで海や異空間に入り込んだような没入感があります。自分の世界観を伝える面で、ぜひ参考にしたいポートフォリオサイトといえるでしょう。平尾 誠Webデザインやコンサルティング事業を行う株式会社アルテガの主宰である平尾誠さんのポートフォリオサイトは、トップページの操作性に特徴があります。スクロールをすると画面は縦ではなく横に動くデザインが印象に残るとともに「Code is Design」の文字とこれまでの実績が大胆に視界に飛び込んできます。一度サイトを訪問して実際に見てみると、そのインパクトを体感できるので、ぜひ確認してみてください。ManaWebデザイナー界隈で有名なブログ「Webクリエイターボックス」を運営するManaさんのポートフォリオは、英語ページも用意されており、海外からの受注も想定して作られています。またManaさんのポートフォリオは、まるでManaさんと直接対話しているような距離感を感じられるのが魅力です。サイトの雰囲気をはじめ、文面に「ポートフォリオサイト楽しんでいただけましたか？」と語りかける文面があることから、自然と身近な人に感じるデザインとなっています。maima.meアートディレクター兼Webディレクションを行うMAI IMAKITAさんのポートフォリオmaima.me。作品を中心に、簡単なプロフィールと問い合わせ連絡のみのシンプルながら大胆なデザインとなっています。実績を積み上げている途中の段階で、作品だけを大胆にアピールしたポートフォリオを作るのは少し難しいかもしれません。けれども、将来的に数々の実績を積んだらMAI IMAKITAさんのような作品を大胆にアプローチするポートフォリオサイト作成にチャレンジしてもいいかもしれません。まとめポートフォリオは、Webデザイナーと企業をつなぐ名刺のような存在です。Webデザイナーの第一印象を決める大事なツールであるからこそ、細部にこだわって丁寧に作成していきましょう。ポートフォリオの方向性を定めて、掲載する作品の選定や配列にもこだわり、ぜひ自分の魅力が伝わるポートフォリオサイトを作ってください。