【初心者必見!】Webデザイナーが持っておくべき「ポートフォリオ」とは

TechAcademy

2017年8月8日 19:00

Webデザイナーとして就職・転職する上で欠かせないのがポートフォリオ。

この記事では、事例も紹介しながらポートフォリオとは一体なんなのか分かりやすく解説しています。

Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

Webデザイナーに必須のポートフォリオとは

Webデザインを仕事にしている人は増えてきて、インターネットを使った仕事の受注や就職においてもその競争率は高くなってきています。そのとき重要になるのがアピールの方法です。

Webデザイナーの場合ポートフォリオという形で、自分の実績やスキルを相手に示すことができます。ロゴやバナー、Webサイトのデザインなど今まで作ってきたものをポートフォリオにまとめておけば、何を作ってきたのか一目で理解できます。

転職のしやすさにも良い影響を与えますし、フリーランスとして働く上では必ずと言っていいほど持つべきでしょう。

ポートフォリオの作り方

ポートフォリオは内容を詳細まで決められているものではありませんが、ある程度基本となる情報は載せておく必要があります。

まず、作ったWebサイトのタイトルとURL、スクリーンショットです。スクリーンショットがなければ文字での紹介となり意味がなくなってしまいます。

また、制作にかかった時間や、自己紹介もまとめておくことで面接時の質問を誘導することにも一役買います。

印象に残るようなデザインにすることは大切ですが、統一性を失ってはかえってごちゃごちゃとした印象になってしまうため見やすさを意識することも忘れてはいけません。

WordPressで使えるポートフォリオ用テーマも紹介しているので、手軽に作ることも可能です。

イケてるポートフォリオの事例

ポートフォリオを始めて制作する場合には特に、他人のポートフォリオを参考にすることでイメージが掴めるようになります。

Webデザイナーの成果物の居場所はすべてインターネット上にあるため、検索すればすぐに見つけることができます。ここでは、その中でも著名人の作ったポートフォリオの事例を紹介します。

Mana

ManaさんはWebデザイン界でも有名でポートフォリオの参考事例としてよく紹介されています。わかりやすさが特徴のデザインとなっています。

ポートフォリオ

フクシマナオキ

こちらは1ページにすべてを収めた構成が特徴的なポートフォリオです。ページを新たに読み込むことなくスクロールのみで見ることができ、ストレスのない見せ方ができています。

ポートフォリオ

Jojodesign

このポートフォリオは円を基調としたデザインとなっていて、滑らかに動く背景が印象的です。

ポートフォリオ

Shogo Tabuchi

音楽やアニメーションが多く活用され面白みのあるポートフォリオです。

動きを多く表現したいという方は参考になるはずです。

ポートフォリオ

秦 頌光

クールさのあるポートフォリオで、2DのWebサイト上で立体を意識した見せ方をしているのが特徴です。

各画面をスライドショーのように見せているのが印象的ですね。

ポートフォリオ

OH|割石裕太

わりえもんさんこと割石さんのポートフォリオ。フリマアプリFrilなどのデザインをしてきた実績が紹介されています。

ポートフォリオ

タカヤオオタ

MERYのロゴやデザインを手がけた人として有名な方のポートフォリオです。

自分が関わったプロジェクトが見やすく並べられていて、作ったロゴなどが一目で分かるようになっています。

ポートフォリオ

以上、ポートフォリオとは何なのか、何を載せるものなのか説明しました。

実際のポートフォリオも参考にしながら自分が作った作品を載せるポートフォリオを作ってみてください。

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを作ることが可能です。

独学に限界を感じている場合はご検討ください。

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30