【参考にしたい！】Webデザイナーのオシャレなポートフォリオサイトまとめ

Webデザイナーとして仕事の幅を広げるなら、作成した作品を掲載するポートフォリオサイトを作成することがおすすめです。

フリーランスとして活動したり、転職活動する際は、自分のスキルを1つのサイトにまとめておくと、効果的に自己アピールできるでしょう。

またおしゃれなポートフォリオサイトは、デザインセンスを磨いたりデザインの引き出しを増やす際にも役立ちます。

今回は、Webデザイナーが参考にしたいポートフォリオサイト・作品についてご紹介します。

魅力的なポートフォリオサイトを作るためのポイントも解説するので、デザインスキルを伸ばしたい方・自分のポートフォリオサイトを作りたい方は、ぜひ参考にしてください！

オシャレでカッコいいWebデザイナーのポートフォリオサイト集

まずはおしゃれで参考になるポートフォリオをご紹介します。

ポートフォリオサイトは自分の作品を掲載できるだけでなく、サイトそのもののデザインでも、Webデザイナーとしてのスキルやセンスをアピールできます。

ここではデザインセンスを磨きたい方におすすめのポートフォリオサイトを7点ご覧ください。

OHTA TAKAYA

OHTA TAKAYAはアートディレクターのオオタタカヤさんのポートフォリオサイトです。

オオタタカヤさんはWebサイトやロゴデザインを多数手掛けており、サイトでは作成した作品がまず最初に目に入るよう構成されています。

サイトは白と水色が主体ですが、各作品にマウスオーバーすると、作品ごとにサイト事態の背景カラーに変わる仕掛けが特徴的です。

スタイリッシュで細部の仕掛けが光る素敵なサイトとして注目されています。

present.

present.はデザイナー・ディレクターとして活動する宇都宮勝晃さんのポートフォリオサイトです。

サイトは白と青を基調とした爽やかなデザインで、視覚的なUIで作品の魅力が最大限伝わる工夫が成されています。

またサイトは英語が主体で、グローバルに作品の魅力や実績を紹介できるサイトとしても注目です。

UNDERLINE

UNDERLINEは、Webサイトのデザイン・コーディング・ディレクションで幅広く活躍するトクダユウイチさんのポートフォリオサイトです。

サイトは清潔感のあるモノトーンで統一されており、トクダユウイチさんの仕事に関する信念やこれまで手掛けた作品がわかりやすく紹介されています。

サイト内には事業紹介だけでなく本人の写真やブログも掲載されており、トクダユウイチさんの人となりもよくわかる暖かみのあるサイトです。

S5 Studios

S5 Studiosは、Webデザイナー・エンジニア・ディレクターとして幅広く活躍する田渕将吾さんのポートフォリオサイトです。

シンプルながらスマートに展開するアニメーションが鮮やかなことが特徴で、ページ遷移もおしゃれです。

サイトはPCでの閲覧はもちろんスマホでの閲覧にも対応しており、スマホ版でもおしゃれで快適な閲覧が叶います。

TAKAAKI SATO

TAKAAKI SATOはWebデザイナー・カメラマンとして活躍する佐藤タカアキさんのポートフォリオサイトです。

トップページは優しいベージュカラーが主体で、本人をモチーフとした可愛らしいイラストを組み合わせたポップなテイストです。

作品はWORKSから一覧で表示され、SNS感覚でチェックしながら佐藤タカアキさんの作品を閲覧でき、使いやすさにもこだわられています。

mouf design

mouf designはWebデザイナー・グラフィックデザイナーとして活躍する勘村洋和さんのポートフォリオサイトです。

グレーをメインカラーに定めたポップでおしゃれなサイトで、スクロールすることでサイト内の情報をすべて閲覧できます。

作品はアイコンで表示され、クリックすると詳細が表示される仕組みのため、デザイン性・わかりやすさともに優れたサイトだといえます。

jojo design

jojo designはインタラクティブデザイナーの岡本順一さんのポートフォリオサイトです。

岡本順一さんは「jojo design」名義でデザイナー活動をしており、Webサイトをはじめとしたデザインも数多く手掛けています。

大きな特徴が、作品紹介から連絡先まで、サイト内の機能が1ページに集約していることです。

作品紹介についても丸型アイコンで視覚的に紹介されており、シンプルで洗練されたサイトだからこそ、多彩な作品の魅力が際立たされます。

あなたの個性が伝わりやすい！魅せるポートフォリオを作るためのポイント4つ

Webデザイナーとしての実績・スキルをアピールするなら、自身のポートフォリオサイトを作成しましょう。

ポートフォリオサイトは、それ自体もスキルや実績をアピールする手立てとなるため、サイト制作にも力を入れることが大切です。

ここでは魅力的でわかりやすいポートフォリオサイトを作成するための4つのポイントを解説します。

イメージボードを作成し見やすいサイトにする

まずはイメージボードを作成し、サイトのわかりやすさ・見やすさを検討しましょう。

イメージボードとは、サイトのビジュアルを視覚的にスケッチしたもので、デザイナーにとってのアイデア帳のようなものです。

どのようなサイトにしたいのか、構成はどうするべきかを大まかに想定し、作品の魅力が最大限伝わるサイトを構築する必要があります。

このとき意識したいのが「サイトに何を掲載したいのか」をあらかじめ列挙しておくことです。

作品・実績のほか、連絡先やブログ、スキルの紹介など、掲載したい情報を無駄なく入れこめるよう想定しながらイメージボードを作成しましょう。

あなたの強みを取り入れる

ポートフォリオサイトのデザインは、依頼主から見れば第一印象にもなります。

そのため得意とするスキルやデザイン・個性をふんだんに盛り込んで「この人に依頼したい」と思われるポートフォリオサイトを作成しましょう。

例えばスタイリッシュなデザインが得意なら、サイトもスタイリッシュなテイストに統一したり、アニメーションの構築が得意なら動的なデザインを組み込んで、サイトそのもので自分の強みをアピールすることが大切です。

印象に残るデザインにする

どんなにわかりやすいデザインでも、これといった特徴が無ければ閲覧者の印象には残りません。

そのため「よくあるサイト」にならないよう印象に残るデザインを検討することも、魅力的なポートフォリオサイトを作るコツです。

印象的なサイトを作るには、色やアニメーション・構成に工夫を凝らすほか、要所に遊び心を取り入れることも大切です。

フォントやイラストで個性を加えて、印象的なポイントを作りましょう。

プロフィールを作り込む

ポートフォリオサイトを構築するなら、依頼に繋がるよう「どのようなWebデザイナーなのか」がわかるプロフィール作りにもこだわりましょう。

実績や経歴について紹介するほか、Webデザイナーとして活動する上で何を大切にしているのかなど、クライアントが安心して仕事を依頼できるようプロフィールを整えましょう。

なかでも検討したいのが、プロフィールに顔写真を組み込むことです。

顔が見える相手の方がクライアントは安心感・信頼感を持って仕事を依頼できるため、プロフィールやサイトトップに取り入れることを検討しましょう。

Webデザイナーの作品を参考にあなたもオシャレなポートフォリオを作ってみよう

Webデザイナーが参考にしたいポートフォリオサイトの作り方についてご紹介しました。

おしゃれでわかりやすいポートフォリオサイトは、掲載する作品・実績だけでなくサイトそのものもスキルやデザインセンスのアピールになります。

そのためWebデザイナーとして仕事の幅を広げるのであれば、魅力的なポートフォリオサイトを制作することも視野に入れましょう。

仕事の実績やスキルを伸ばすのであれば、まずは企業で働きながら成長するのもおすすめです。

サクサク仕事探しでは、Webデザイナーの求人を数多くご紹介しています。

必要なスキルや待遇などからあなたに合った求人をスマートに見つけられる機能が揃っているので、Webデザイナーとして就職・転職を考えている方は、ぜひ利用してみてください！

文／おかねチップス編集部
監修文／おかねチップス編集部