【デザイナー必見】ポートフォリオ参考20選!未経験でも大丈夫?

デザイナー

「今後の仕事のためにもポートフォリオサイトを作りたい」

「ポートフォリオサイトのデザインが思いつかない」

「有名なポートフォリオサイトを参考にしたい」

 

この記事を読まれているあなたは、そんなことを思っているのではないでしょうか。

Webデザイナーにとって必須であるポートフォリオは、自分の実績をアピールする作品集ともいえます。

 

今回は、そんなポートフォリオサイトの参考になるデザインや、作成する際のポイントを徹底解説しますので、参考にしてみて下さい。

 

参考になる!デザイナーのポートフォリオサイト20選

On-Line – A Connected Life

 

ポートフォリオは、自分の作品を掲載するだけにとどまらず、見てくれる人に自分のセンスや個性、実績をアピールするためのツールでもあります。

ポートフォリオを見て、仕事の依頼が来る場合や、仕事を探すときの履歴書の役割を果たすこともあります。

 

自分らしいポートフォリオサイトを作成するためにも、一流のデザイナーのポートフォリオを見て、構想や作り方の参考にしてみて下さい。

 

WEBデザイナーのポートフォリオサイト

 

まずは、WEBデザイナーのポートフォリオサイトをご紹介します。

WEBデザイナーにとってポートフォリオサイトは自分を表す鏡ともいえる存在であり、かなりこだわって作成している人が多いです。

 

自分がどんなポートフォリオをつくりたいか、イメージを膨らませながらご覧ください。

 

KATOSHUN.com

                          画像参照元:http://katoshun.com/

 

WEBデザイナーとして活躍する加藤俊司さんのポートフォリオサイトです。

「WORKS」「ABOUT」「MESSAGE」「BLOG」が1ページになっていて、スクロールすると切り替わる便利なつくりになっています。

 

また、スクロールすることで、蝶が羽をはばたかせたりと画像が動くユニークなしかけもあり、何度も見たくなってしまうのが魅力です。

 

スマホで閲覧したときに、サイトがレスポンシブ対応がなされていつため、過去の実績をスライドで見ることができます。

 

自らの「強み」が明確にあるデザイナーは、加藤さんのようにBlogを格納したり自らのポートフォリオサイトにその技術を生かすと良いかもしれません。

 

KATOSHUN.com

 

Mana

                      画像参照元:http://www.webcreatormana.com/

 

WEBデザイナーなら誰もが見たことのある『Webクリエイターボックス』のオーナーであり、海外でも活躍するマナさんのポートフォリオサイトです。

作品だけでなく、マナさんご自身の趣味や経歴もサイト内に盛り込まれており、マナさんの人柄や個性を感じ取ることができます。

 

サイト自体は色鮮やかでありながらまとまりがあり、ポートフォリオのクオリティーも申し分ないので、ポートフォリオ初心者の方にも是非参考にしていただきたいサイトです。

 

Mana

 

Takeshi Oide

                            画像参照元:Takeshi Oide

カナダでWebデザインデベロップメントをするフリーランス活動を行っているTakeshi Oideさんのポートフォリオサイトです。

トップページのメニューバー「WORKS」「ABOUT」が写真と一体となったようなアーティスティックに表示されており、そのアニメ―ジョンや回遊などから遊び心や個性が感じられます。

 

英語と日本語を組み合わせた紹介文は、海外で活躍したいと思っている方の参考になります。

 

Takeshi Oide

 

maima.me

                              画像参照元:maima.me

ファッションブランド・コスメブランドなどのWebディレクションデザインを手掛けているMAI IMAKITAさんのポートフォリオサイトです。

こちらのサイトの特徴は、なんといっても1ページでサイトが完結している点にあります。

 

ページを移動する必要がない・バックカラーが白で統一されていることから、非常に情報が得やすく、作品が際立つつくりとなっています。

各作品の画像をクリックすると詳細が分かるようになっていて、どの部分を担当し誰が案件に関わっているのか完結に示されている点も魅力的です。

 

maima.me

 

MEGURU MURAMOTO

m.meguru                        画像参照元:MEGURU MURAMOTO

WEBデザイナーとして活躍する村本 芽繰さんのポートフォリオサイトです。

2020年現在新しいサイトの準備中とのことでしたが、お知らせページの文字の上にカーソルを合わせると過去の作品が浮かび上がる大変ユニークなサイトとなっています。

 

また、WEB業界のトレンドであるマウスストーカー、砂嵐背景などが活用されており、WEBデザインを勉強されている方に大変勉強になります。

 

MEGURU MURAMOTO

 

UNDERLINE

Contact | UNDERLINE 大阪でフリーランスのWeb制作を行っています。                            画像参照元:UNDERLINE

フリーランスでWeb制作におけるディレクション、デザインなどを手掛けるデザイナーの徳田優一さんのポートフォリオサイトです。

白を基調としたシンプルな構成となっており、見やすく、実績である作品をよりクリーンに引き立てています。

 

また、トップページで顔写真とご自身の理念を明記することで、信頼性や個性を感じ取ることができます。

全体的に統一感があり、ボタン操作もシンプルかつ回遊しやすいい作りになっており、参考にできる部分が多いサイトと言えます。

 

UNDERLINE

 

present

present. - Art Direction & Design                             画像参照元:present.

present.の名義でフリーランスとして活躍する宇都宮 勝晃さんのポートフォリオサイトです。

サイト動作にまでこだわりがあり、スクロールエフェクトや画像にマウスオーバーした際の動きが遊び心を感じさせます。

 

また、実績をトップページに持ってくることで、一目でどんな人なのか分かるようになっており、作品には、自身の作品にかける思いも簡潔に述べられています。

 

日本語でなく、英語中心で発信されているので、いずれは海外でも活躍したいと思っている方にも参考になるサイトといえます。

 

present

 

S5-Style

S5-Style】Webデザインギャラリー / Web Design Inspiration                            画像参照元:S5-Style

WEBデザイナーとして、アートディレクション、空間デザイン、フロントエンドエンジニアリングなど、多方面で活躍している田渕将吾さんのポートフォリオサイトです。

「Hello World」というコンセプトのもと、画面全体を駆使したアニメーションと、BGMがファッショナブル・見る人をわくわくさせるつくりとなっています。

 

技術を駆使し、画像だけでは分からないデザインの立体感や特徴を感じることのできる部分も魅力的です。

 

また、ポートフォリオ内のコンセプトを定めている点・プロフィールに顔写真を掲載している点も信頼できる点です。

 

S5-Style

 

MITSUGU TAKAHASHI

Your Perfect Wedding Photographer | Mike Ingham Design                        画像参照元:MITSUGU TAKAHASHI

イギリス拠点Webデザイナーグラフィックデザイナーフロントエンドエンジニアとして活躍しているMike Inghamさんのポートフォリオサイトです。

トップページのメニューバーをクリックすると、上部にメニューバーが出現する珍しいつくりとなっており、見たいページに移動しやすくなっています。

 

また、落ち着いた色味を基調としたまとまりのある構成となっており、英語/日本語表示を選択できる点も魅力的です。

 

MITSUGU TAKAHASHI

 

hasegawahiroshi

サイトリニューアルのことなど - ウェブデザイン hasegawahiroshi.jp                          画像参照元:hasegawahiroshi

 

WEBデザイナーとして活躍する長谷川寛さんのポートフォリオサイトです。

トップページに方針やコンセプトが明記されており、「SERVISE」「WORKS」「CONTACT」などの概要も簡潔に記されているので、非常に情報がつかみやすいです。

サイト全体がイエローとホワイトを基調として構成されていることで、統一感が感じられます。

 

また、無駄の無いシンプルな構成に、大胆なフォント使いやイラストの活用など、遊び心を入れる余裕も感じさせるサイトとなっています。

 

hasegawahiroshi

 

その他デザイナーのポートフォリオサイト

続いて、WEBデザイナー以外のデザイナーのポートフォリオサイトをご紹介します。

WEBデザイナーとはまた違った工夫や特徴のあるポートフォリオから、新しい発想やインスピレーションを受けることができるでしょう。

ヨシダ ナギ

                           画像参照元:ヨシダ ナギ

フォトグラファーして活躍するヨシダナギさんのポートフォリオサイトです。

まず、トップページにアクセスしたときに飛び込んでくるアニメーションに惹き付けられます。

 

世界中の少数民族を撮影しているヨシダさんがどのような写真を撮っているのか、一目でわかるようになっており、ファーストインプレッションの大切さがわかります。

ヨシダさんのサイトも、1ページですべて完結するようになっており、カテゴリーごとにバックカラーが変化する点も魅力的です。

 

ヨシダさんならではの世界観が表現されたポートフォリオは、参考になる部分が多いのではないでしょうか。

 

ヨシダ ナギ

 

TAKAYA OHTA

                         画像参照元:TAKAYA OHTA

デザイナー・アートディレクターとして活躍するタカヤ・オオタさんのポートフォリオサイトです。

タカヤさんは、ストーリーとコンセプトを重視し、CI/VIを起点としたデザインを得意とする方です。

 

トップページには実績が掲載されていて、作品をタップするとその作品の詳細が浮き出てコンセプトやストーリーが1つ1つ丁寧に紹介されています。

 

タカヤさんの仕事への真摯な姿勢やユニークさも感じさせるサイトから気づかされることも多いでしょう。

 

TAKAYA OHTA

 

coton design

                           画像参照元:coton design

グラフィックデザイナーとして活躍する酒井博子さんのポートフォリオサイトです。

トップページに作品だけを表示する構成御となっており、グレーベースに色鮮やかな作品が際立ちます。

 

左側のメニューバーをクリックすると、ジャンルごとの作品が浮かびでるユニークなつくりになっている点も魅力的です。

右上のバーの「about」には、経歴や理念が明記されているので、信頼感を得ることができます。

 

coton design

 

MAKOTO HIRAO

 

平尾 誠 |WEB_DESIGNER MAKOTO HIRAO | デザインのこと - Web design ...                          画像参照元:HIRAO MAKOTO

フロントエンドエンジニアの平尾 誠さんのポートフォリオサイトです。

海外で働くことを前提に、全く知らない外国人がみても自分のことを知ってもらえるように英語表記中心で紹介を作成されたそうです。

 

ページ遷移のアニメーションがジャンルごとに違っていたり、違和感を感じスクロールさせるためにメインビジュアルのコピーを画面からはみ出させたりと技巧をこらした構成が「流石」としか言いようがありません。

 

デザインにとどまらず、見てもらう人が見たくなるようなサイト作りを心掛けることは、ポートフォリオサイト作成において大切な要素です。

 

HIRAO MAKOTO

 

mouf design

mouf design                          画像参照元:mouf design

ウェブ、グラフィック、ゲームUIデザイン制作などを中心に活躍する勘村 洋和さんのポートフォリオサイトです。

 

トップページの文字が徐々に浮き出るアニメーションがファッショナブルで、実績作品にカーソルを合わせるとサイト名が浮き出るユニークなデザインが特徴的です。

 

勘村さんのサイトも、「Portfolio」「About」「Contact」が1ページで完結しているデザインとなっており、右上のメニューバーで回遊をフォローしているので操作しやすいです。

 

mouf design

 

musubime

                           画像参照元:musubime

グラフィックデザイナー、コンセプターとして活躍するカワセ タケヒロさんのポートフォリオサイトです。

縦書き表記という新鮮な文章が、日本人である私たちの頭の中にスッと入りこんできます。

 

基本は縦スクロール1ページ完結、実績の部分だけが横スクロールで作品を見ることができるシンプルな構造で情報を得やすく、分かりやすいです。

 

「Profile」の部分で、さまざまな領域の仕事経験のあるカワセさんの経歴や理念を知ることができるのも魅力的です。

 

musubime

 

TAIKI KATO

TAIKI KATO | 加藤 タイキ                           画像参照元:TAIKI KATO

アートディレクター、デザイナーとして活動している加藤タイキさんのポートフォリオサイト『TAIKI KATO』です。

有名女優や芸人が起用されたメディアにディレクターとして参加したりと、実績のある加藤さんですが、自身のポートフォリオもハイクオリティとなっています。

 

まず、実績の1部がトップページに掲載されており、どんな作品をつくるのか一目でわかるようになっています。

 

また、サイト内にある各カテゴリーをクリックすると、作品がアニメ―ジョンでソートされて並ぶようになっており、ユーザーがサイト内で迷いにくくなる工夫がされているといえます。

 

作品自体も、質の高い画像が使われており、何枚かピックアップされていたり、制作過程の写真を掲載したりとものづくりへの真摯な姿勢が伺えます。

 

TAIKI KATO

 

学生のポートフォリオサイト

 

将来デザイン系の職業につきたいと考えている学生の中には、ポートフォリオサイトをつくってみたいと思っている人もいるのではないでしょうか。

学生であっても社会人に負けないハイクオリティーなポートフォリオを作成されているひとはたくさんいます。

 

比較的シンプルな構成になっているものも多く、初心者の参考になりやすいと思います。

 

Nana’s Portfolio

Nana's Portfolio                          画像参照元:Nana’s Portfolio

専門学校でWebを勉強している敷島菜那さんのポートフォリオサイトです。

ご自身で作成された工作やお菓子などをトップページのアイコンとして使用し、独自の世界観を表現されています。

 

14歳の頃からサイト作りを行ってきたという敷島さん。

全てを自分の手で手作りすることにこだわっているからこそ、伝わってくる作品に対する真剣さや個性があります。

Nana’s Portfolio

 

Bread

                             画像参照元:Bread

WEBデザイン学科に通うデザイナー志望の方が作成したポートフォリオサイトです。

トップページの左側に「FIRSTLY」「WORKS」「PROFILE」「牧BLOG」の4つのカテゴリーを作り、1ページ内で完結するというシンプルな構造になっています。

 

WORKS」の部分では、スマホ画面に作品が移っているように見えるデザインが、今の時代を感じさせます。

非常に分かりやすく、シンプルでありながらこだわりも感じさせるサイトは、学生や初心者に参考になるのではないでしょうか。

 

Bread

 

モリフォリオ

                           参照元:モリフォリオ

架空のアプリやサイトを作成したものを主に掲載しており、勉強しながら自分の作品をアップしている様子が伺えます。

初心者の方は、このように架空のサイトをつくって自身の経験やスキルを磨いていく方法が有効です。

 

作品1つ1つに作品の説明と感想が述べられているので、自分の記録にもなりますし、見る人にとっても意図や詳細がつかみやすくなっています。

 

モリフォリオ

 

未経験者こそポートフォリオを作るべき!

 

ポートフォリオは、すでにデザイナーとして活躍されている方だけでなく、
「デザイン業務未経験だけど、これからデザイナーとして働きたい」
と思っている学生や他業界で働く方にとっても重要なものです。

 

なぜなら、ポートフォリオは、デザイン業界で就職する際の履歴書の役割を果たすのに加えて、自分自身のスキルを向上させるためにも大変有効だからです。

 

「未経験可」と書かれている求人でも、全くの未経験者を歓迎しているということではなく、デザイナーとしての実務経験はないが実際にデザインの勉強をしていてサイトやアプリを作成したことのある人を求めています。

 

つまり、同じ未経験であっても

ポートフォリオを制作できるスキルがある
ポートフォリオに掲載するだけの作品数を持っている

といった人の方が企業の評価は高く、選考通過率も高くなります。

 

また、自分の作品をまとめたポートフォリオが目に留まって、仕事の依頼をしてもらえたという場合も多々あります。

 

そのため、ポートフォリオは未経験者こそ作るべきものと言えます。

 

「ハードルが高い」「作るのが難しそう」と思っている方もいるかもしれませんが、ポイントを押さえればグッとチャレンジしやすくなるので、本記事で紹介されているポイントや作る方を参考にトライしてみて下さい。

 

ポートフォリオサイトを作るときに押さえておくべき7つのポイント

 

ポートフォリオサイトを作るときに、「これだけは気をつけたい」ポイント7つをご紹介します。

自分らしいポートフォリオサイトを作るときの参考にしてみて下さい。

 

分かりやすいサイト作りをする

 

まず、なんといっても見る人にとって知りたい情報が得やすい、つまり分かりやすいサイトを作ることが大切です。

 

いくら優れた技術力があって、それをふんだんに活用したポートフォリオサイトだったとしても、まとまりがなく、どこに注目すればよいのかわからないサイトでは採用する側の評価も下がってしまいます。

 

相手にとって見やすいサイトかどうかという点も、クオリティーの高いサイトのの必須条件の1つです。

 

自分の強みを印象に残す

 

実績やスキルの中で自分が最もアピールしたい部分が相手に伝わるようなサイトづくりも重要なポイントです。

 

そのために、自分の最大の武器をトップページに持ってくるのか、プロフィール部分に持ってくるのか、はたまた画像で表現するのか、自分の中で軸を決めてその部分を中心にサイトを作成していくと良いでしょう。

 

SNSやブログを活用する

 

SNSやブログを活用することで、より多くの人に認知してもらう機会ができ人脈も広がります

 

また、現代においてSNSなどを利用して制作活動につなげる力はとても大切になっています。

SNSやブログを利用している方は、ポートフォリオサイト内にボタンで埋め込む・URLを掲載するなど自分のアカウントをリンクさせておきましょう。

 

プロジェクト名や作品を確認できるURLを記載する

 

作品の画像を掲載するだけでなく、プロジェクト名や完成したサイトのURLを記載することでより信頼感も上がります。

 

また、自分が作品のどの部分に関わっているのか、どのような思いでプロジェクトに関わったのかなどの詳細を簡潔に記載することで、自分の人となりやデザイナーとしてのスタイルを知ってもらうことができます。

あまり長くなりすぎないように注意しながらも、伝えるべきことは明記すると良いでしょう。

 

遊び心を忘れない

 

ただクオリティの高いサイトでも、その人の個性が見られなければ魅力的ではありません。

見る人がワクワクするような仕掛けや、自分だけのオリジナリティのある世界観を表現することで魅力的なサイトになります。

 

誰もが心の中に持っている遊び心や独特のイメージを忘れず、自分らしさをアピールしましょう。

 

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

 

ポートフォリオに顔写真があるだけでグッと信頼度が上がります。

どこの誰が作っているのか分からないものよりも、作り手の顔が分かっているものの方が安心感や信頼感がありますよね。

 

また、優れたポートフォリオサイトの中には、自分の顔写真をアートの1部分として表現していたり、トップページに大胆に掲載しているものもあります。

 

掲載作品数は10~20個程度に収めるようにする

 

ポートフォリオに掲載する作品数に上限はありません。
しかし、あまりにも多すぎると見る人の負担になってしまいます。

 

そのため、作品数が多い場合は自分が掲載したいものを選抜したり、さまざまなジャンルの作品を掲載するようにするなどして、多くても20個程度に収めるようにしましょう。

 

また、作品を探しやすいようにジャンル別にカテゴリー化するのもおすすめです。

 

ポートフォリオを作成できるサービス3選

 

最後に、ポートフォリオサイトを作成することのできるツールをご紹介します。

ポートフォリオサイトを0から作成する余裕がない方はツールを活用することも1つの手です。

 

Ameba Owned

                          画像参照元:Ameba Owned

アメーバブログでお馴染みのサイバーエージェントが提供する無料作成ツールです。

今どき風のオシャレでスタイリッシュなデザインのテンプレートが多いので、簡単にまとまりのあるデザインを作成することができます。

 

また、スマートフォンからも投稿ができるので、過去の作品がSNS内やスマホフォルダにあるという方でも簡単に移行できます。

 

Ameba Owned

 

PORTFOLIOBOX

Portfoliobox-あなたのオンラインポートフォリオウェブサイト                         画像参照元:PORTFOLIOBOX

世界55万人が使用する人気ツールです。

会員登録をすると、無料で10ページ・30画像まで掲載でき、パソコン表示用だけでなくモバイル用サイトも制作できるので初心者から経験者まで幅広い人に適しています。

 

シンプルで統一感のあるサイトを作成したいと思っている方にもおすすめです。

 

PORTFOLIOBOX

 

Salon.io

                             画像参照元:Salon.io

ドラック&ドロップで誰でも簡単にポートフォリオやWebサイトを作成できるサービスです。

コード知識は一切不要なので、初心者の方でも簡単そして自由に作成することができます。

 

コードエディターでHTMLやCSSを追加し、サイトをカスタマイズすることもできるので、短時間で自分の思い通りに作成したいという方におすすめです。

 

Salon.io

 

まとめ

今回、本記事では、

・デザイナーがポートフォリオを作成するときに参考にすべきサイト20選
・ポートフォリオを作成する際のポイント7つ
・ポートフォリオが簡単に作成できるツール3つ
について、徹底解説しました。
ポートフォリオは、デザイナーにとって自分を表現する場所であり、自分を知ってもらう最高の居場所です。
初心者の方もそうでない方も、自分の納得のいくポートフォリオサイトを作成し、デザイナー人生に活かしていきましょう。

 

コメント

タイトルとURLをコピーしました