
ポートフォリオをもっとカッコよく!上手なポートフォリオサイト20選
作品紹介のためにポートフォリオ(実績をアピールするサイト)を用意したいとは思っても、重要なポートフォリオサイトのデザインが決まらない!と悩んでしまう方も多いのではないでしょうか。
作品の評価はもちろん、ポートフォリオサイト自体も当然評価対象となりますので、素敵なデザインに仕上げたいものです。
もしポートフォリオサイトをもっとカッコよくしたいと思ったら、クオリティの高い既存のデザインを参考にするといいでしょう。今回は、ポートフォリオサイト作成の参考になるデザイン20選とポートフォリオサイトの作り方をご紹介します。
【Webデザイナー・Webディレクター】のポートフォリオサイト
1. Mana's Portfolio Website
http://www.webcreatormana.com/
Web関連で有名なブログ『Webクリエイターボックス』の運営者、Mana氏のポートフォリオサイトです。シンプルな構成が特徴で、どのような仕事をしてきたかがわかりやすいデザインです。
また、英語に切り替えが可能で、海外の方にもわかるようなポートフォリオとなっています。
こういった点もポートフォリオサイトも参考例になるのではないでしょうか。
2. Joyce Van Herck
ロンドン在住のWebデザイナー、フロントエンドエンジニアのJoyce Van Herck氏のポートフォリオサイトです。三角形や斜めの線を取り入れ、シンプルながらも目を引く個性的なデザインとなっています。
ポートフォリオページの画像はスライドショーになっており、代表的な作品を見ることができます。
3. UNDERLINE
大阪府でフリーランスとしてWeb制作を行う、徳田優一 氏のポートフォリオサイトです。Web関連のポートフォリオサイトで、一番最初にプロフィール写真・メッセージを掲載しているデザインというのは珍しいのではないでしょうか。メッセージと白を貴重としたページ全体のデザインから、信頼できそうな印象が伝わってきます。
サービス内容を文章だけではなく、アイコンでも説明するなど、わかりやすい作りになっているのも参考ポイントです。
4. oniguili
Webデザイナー・グラフィックデザイナーとして活動を行う、西村沙羊子 氏のポートフォリオサイトです。
シンプルなモノクロカラーでまとめながらも、個性的なレイアウトやアクセントを取り入れた遊び心のあるデザインです。作品ページのサムネイル画像も全てモノクロで、ページ全体のデザインを損なわないようになっています(画像にカーソルを合わせるとカラー画像に変化するのも参考になります)。
トップページ左端に各種SNSのリンクを設置しており、シームレスにアクセスができるのも参考例として注目です。
5. S5-Style
Webデザインからアートディレクションまで、多方面で活躍している田淵将吾 氏のポートフォリオサイトです。アニメーション、音楽を効果的に活用したデザインで、ユーザーの目を引きます。作品ページの見せ方にもこだわりがみられるポートフォリオサイトです。マウスオーバーで色が変化したり、徐々に画像を表示するアニメーションを表示したりと、様々な手法を駆使しているため、技術的な参考例として注目のポートフォリオサイトといえます。
6. フリーランスデザイナー フクシマナオキ
フリーランスデザイナー フクシマナオキ氏のポートフォリオサイトです。シンプルなシングルページで、1ページ内で作品、コンセプト、プロフィールを全て見ることができます。コンパクトにまとめることで、伝えたいことを完結かつ確実に発信することができる参考例ではないでしょうか。
7. Mike Ingham Design
http://www.mikeinghamdesign.com/
Web・グラフィックデザイナー MIKE INGHAM氏のポートフォリオサイトです。デスク上にアイテムを配置したようなメイン画像と、マウスオーバーした時の色の変化が美しい、オシャレなデザインに仕上がっています。細部までこだわっているポートフォリオサイトという印象です。
8. normo.jp
デザイナー Yu Ishihara氏のポートフォリオサイトです。美しい波がゆらゆらと動く、インパクトの強いデザインです。文字だけというシンプルなデザインながら、1度見たら忘れないデザインとなっています。文字中心のポートフォリオサイトに置ける好例です。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪(thumb nail)という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- トップページ
- インターネットのウェブサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つウェブサイトの最上位のウェブページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンセプト
- コンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。
ツール紹介記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
その他のカテゴリ
