イケてるWebデザインで作られたポートフォリオサイト5選まとめ

  • このエントリーをはてなブックマークに追加

Webデザイン ポートフォリオサイト まとめポートフォリオサイトに載せたい作品は決まっても、肝心のポートフォリオサイト全体のデザインが思いつかない、なんてご経験もあるのではないでしょうか。

ポートフォリオサイトは、転職において、それ自体のWebデザインも評価の対象となります。決して手を抜かず、魅力的なデザインと構成にすることが大切です。

であれば、一流の人が作成したクオリティーの高いポートフォリオサイトを参考にすることが、そのためには近道でしょう。

世の中には一体どんなポートフォリオサイトが存在するのか、今回は、ぜひ参考にしたい魅力的なポートフォリオサイトの紹介と、アピール力を増すために押さえておきたい6つのポイントについて解説できればと思います。

一流を目指すなら、一流から学ぼう

ポートフォリオサイトは、ただ作品を掲載するだけにとどまらず、それ自体で、自分の個性やセンス、スキルをアピールできるアイテム。したがって、こだわればこだわるほど、その作成者のデザイン性を色濃く表現することができるでしょう。

自分らしいポートフォリオサイトを作成するために、世のクリエイター達は、様々なアイデア、Webデザイン、構成の仕方を熟慮しています。これまでにポートフォリオサイトを作ったことがない人でも、一流のクリエイターが作ったポートフォリオサイトを参考にすることで、新しい切り口やWebデザインの仕方を勉強することができるかもしれません。

それでは、早速参考にしたいポートフォリオサイトを5つご紹介できればと思います。

ぜひ参考にしたい!イケてるWebデザインのポートフォリオサイト5選

MIDORI AOYAMA

MIDORI AOYAMA

MIDORI AOYAMAさんは、東京を拠点にDJやプロデューサーとして幅広く活動を行うアーティスト。これは、オフィシャルサイトでもありますが、ポートフォリオサイトとしても参考になるWebデザインなので、ご紹介です。モバイルファーストでの構築も勉強になりますし、清潔感のある動きに無駄の無いレイアウトが、より情報を視認しやすくしています。他要素と合わせて、サウンドクラウドのウィジェットにも影をつけるなど、シンプルなあしらいが目を引きますし、ページ下部に設置してある問い合わせフォームのデザインもクールです。

また、このサイトに始めて訪れた人でも、MIDORI AOYAMAさんが「何をしている人なのか」「どんな活動をしているのか」がすぐに理解でき、ポートフォリオ作成の視点からも、とても重要なポイントを押さえていると言えます。

参照:MIDORI AOYAMA

Mana

Webクリエイターボックス Mana

Webデザイナーなら一度は見たことがあるブログ『Webクリエイターボックス』。海外でも活躍するそのオーナーのManaさんは、ポートフォリオサイトのクオリティーの高さでも有名です。ポートフォリオ作成経験のない人は、まずは、このManaさんのポートフォリオを参考に着手してみてはいかがでしょうか。

転職活動においても、もしこのようなポートフォリオサイトを準備できれば、WordPressの基礎知識を持っていることが企業に伝わりますし、何よりも、これまでにどんな作品(成果物)を制作してきたのかが一目瞭然に伝わります。英語サイトも標準的に用意されていることから、グローバルな視点でポートフォリオサイトを作成していることもわかります。簡単そうに見えますが「これまでの実績を直感的にユーザーに伝える」ためのWebデザインが施されていると言えます。

参照:Mana

hasegawahiroshi

Webデザイナー 長谷川寛

Webデザイナー長谷川寛さんのポートフォリオサイトです。無駄の無いシンプルな構成に、大胆なフォント使いやInstagramの写真掲載など、遊び心を入れる余裕も感じさせるサイトです。トップページなどは、実際のポートフォリオのファイル(冊子)を連想されるようなデザインですね。

このポートフォリオサイトで気が付くのは、提供サービスの種類や内容、これまでの実績が、「ユーザー目線」で配置されており、遷移に迷うことが全くないということ。これは、サイト設計をするWebディレクターやWebデザイナー、UI/UXデザイナーなら、誰しもが通る技術ですが、なかなか簡単にできるものでありません。ユーザーが欲しい情報をユーザー目線の切り口で説明されているため、一目で、どのような実績を持ち、どのようなサービスを展開しているのかが分かります。

ブログの部分にカーソルをもっていくと、最新の記事タイトルが出るなど、ムダのないデザインと利便性も素敵です。

参照:hasegawahiroshi

中井颯人

Webデザイナー 中井颯人

Webデザイナーの中井颯人さんが作成したポートフォリオサイトです。スクロールをするとプロフィールやキャッチコピーが現れるなど、視差効果を上手に利用した完成度の高いサイトです。コンセプトも分かりやすく、実績も必要最低限の説明文に収められており、一目で分かるように掲載されていますね。

また、顔写真も大きく載せており、信頼性も高いサイトに仕上げていると思います。スキルや自己紹介にも、自分がどのようなWebデザインをしたいかということが吹き出しメッセージとして現れるため、サイト全体のページデザインを壊すことなく、ユーザーに必要な情報を必要なタイミングで提供しています。よく考えていらっしゃるなと、感心してしまいます。

参照:中井颯人

フクシマナオキ

フクシマナオキ

多くのポートフォリオサイトは複数のページに分けて作品やプロフィールを紹介していますが、フクシマナオキさんのポートフォリオサイトは珍しい「1ページ」構成です。シンプルながら洗練されたWebデザインで、伝えたいことがギュッと凝縮されています。Webフォントを上手に活用し、長すぎずシンプルすぎず、センスの高さがしっかりと伝わるポートフォリオサイトです。

モーダル表示で登場する実績も、携わった作品のトップページのファーストビューだけでなく、ページ全体、サイト全体が伝わるように細かく紹介していますし、ポートフォリオとしてあるべき姿に忠実なWebデザインが魅力的です。

参照:フクシマナオキ

アピール力のあるポートフォリオサイトを作るために押さえておくべき6つのポイント

以上、代表的なポートフォリオサイトをご紹介させていただきましたが、では転職の際のポートフォリオサイトで自分の人材価値や実績を最大限アピールをするためには、具体的にどのようなポイントを基準に作成すればいいのでしょうか。アピール力のあるポートフォリオサイトを作るためのポイントを確認しておきましょう。

Point1

分かりやすさを追求する

どれだけWebデザインの技術力が高くても、ページ内の要素がごちゃごちゃとしていて、どこを見れば知りたい情報が分かるのかが一目で理解できなければ、採用担当者の評価は下がってしまうでしょう。クオリティーの高いWebデザインとは、相手にとって分かりやすく情報を伝える力があるデザインです。

Point2

自分の強みを印象に残させる

受賞歴や実績など、自分が他人には負けないと思っている強みをしっかりアピールできることが大切です。打ち出したい情報をただ全て含ませるのではなく、閲覧者に合わせて取捨選択しながら、掲載の配置や、プロフィールの入れるタイミングなどによって、ポートフォリオで、今自分が一番アピールしたい部分を明確にするようにしましょう。

Point3

遊び心を入れる余裕を持つ

ポートフォリオサイト自体の完成度はもちろんですが、しっかりとサイトを作った上で、フォントや構成で遊ぶ余裕があるだけでも印象は大きく変わります。作品だけではなく、自分の個性をデザインでアピールすることも大切です。他の人と差をつけるためにも、自分らしいデザインを目指しましょう。

Point4

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

コーポレートサイトの社長挨拶ページでもそうですが、ポートフォリオのプロフィールに顔写真を入れていると信頼性が高まるでしょう。また同時にインパクトも大きくなります。魅力的なポートフォリオサイトの多くは、自身の顔写真を、大切なデザインの1要素として取り入れていたり、プロフィールページに差し込んだりしているのがわかります。

Point5

SNSやブログの活用も忘れない

多くのユーザーから多くの経路で流入してもらうためには、SNSやブログの活用はマストです。また普段からそのようなサービスを積極的に活用し、制作活動につなげているというのは人材としても強みになります。もしSNSやブログ等でコンテンツを持っている場合は、ボタンの埋め込みなど、積極的にポートフォリオサイトとも連携していきましょう。

Point6

見るのは他人であることを常に意識する

ポートフォリオサイトはついつい自己満足で作成しがちです。しかし、実際にそのサイトを見るのは、あなたのことを何も知らない人です。このことを常に念頭に置き、作品のコメント1つをとっても言葉足らずにならないよう、ユーザーに十分な情報が伝わるように心がけましょう。

まとめ

ポートフォリオサイトは作成者によって、そのWebデザインや構成の仕方が様々です。魅力的なサイトの中には技術が高く、ちょっと真似するのは難しいポートフォリオサイトもあるかもしれません。しかし、そのようなサイトでもデザインや切り口など学べる部分は多くあります。真似してみたいポートフォリオサイトがあればリストに入れておくなど、常に参考にできるようにしておくことも、Webデザイナーとしての自分を成長させるでしょう。ぜひぜひ、たくさんのポートフォリオサイトを見て、自分のポートフォリオサイトの参考にしてみてください。

サービスに関するお問い合わせ
0120-410-470 マイナビクリエイター事務局 受付時間 9:15〜17:45

サービスに関してご不明な点がありましたら、マイナビクリエイター事務局までご連絡ください。

Facebookページ - クリエイティブ・ティップス
Web・ゲームクリエイターにとって、少し得した気分になるティップス(情報)を配信しています。

転職ノウハウ
おすすめ記事コンテンツ
初めての方へ
企業の皆さまへ
ソーシャルメディア
TOPへ戻る