グラフィックデザインのポートフォリオ例10選

Outlines of various graphic design tools – pens, pencils, tablets, paint brush, websites, etc. – against a blue and green gradient background

グラフィックデザイナーのネットワーキングの素晴らしい点のひとつは、作品がご自身を代弁してくれることです。詩的なカバーレターや気の利いたおしゃべりで潜在的なクライアントを甘やかしておく必要はありません。最高の仕事、スキル、そしてデザインの経験を、ターゲットとなる人々の前に示すだけでいいのです。でも、どうやってそれをすればよいのでしょうか。それは、何世代にもわたって行われてきた方法、つまりグラフィックデザインのポートフォリオを通じて行いましょう。幸いなことに、これまで以上に簡単に作成できるようになりました。

では、アートディレクター、クリエイティブディレクター、クリエイティブエージェンシー、デジタルエージェンシー、そして重要な意思決定者にアピールするプロ仕様のデジタルデザインポートフォリオを作るには、どうしたらいいのでしょうか。簡単です。次の10のグラフィックデザインポートフォリオの例を見て、インスピレーションを得ましょう。チェックリストにしたがって、ポートフォリオの必需品を集めましょう。そして、無料のポートフォリオWebサイトテンプレートを使って、夢のデジタルポートフォリオをデザインしましょう。

Levels
1

グラフィックデザインのポートフォリオとはどのようなものでしょうか。

グラフィックデザインのポートフォリオは、作品をビジュアルにまとめたもので、これまでに達成したこと、そしてこれから達成したいことを紹介するものです。グラフィックデザイナーとして、(特にフリーランスのグラフィックデザイナーとして)潜在的なクライアントに才能をアピールするために、ポートフォリオは欠かせません。

かつてグラフィックデザイナーは、唯一無二の巨大なアートポートフォリオを手渡しで潜在的なクライアントにレビューしてもらっていましたが、今日では、デジタルグラフィックデザインポートフォリオを作成して、興味のある相手にリンクを送るだけでよくなっています。定期的にポートフォリオを更新し、SEOキーワードを使用することで、Google検索で新しいクライアントが作品に出くわす可能性を高めることができるのです。

The tenmplate for a printed-out formal graphic design portfolio

グラフィックデザインのポートフォリオ素晴らしい10例

これらの注目を集めるオンラインポートフォリオをスクロールしながら、どのように構成されているか、どのようなグラフィック・デザイン作品が掲載されているかに注目しましょう。

組織的な観点から見ると、1つのスクロールするホームページの例と、複数のセクションを持つ完全なホームページの例があることに気づきます。中には、デザイン以外のコンテンツがほとんどない、シンプルな写真のポートフォリオもあります。また、ケーススタディやモックアップ、ビデオ、オンラインクラスやeコマースショップのオファー、アバウトページ、デザインスタジオを覗くページなども作れます。また、タブの配置や名前にも気を配りましょう。

デザインのインスピレーションを得るには、レイアウト、色、フォント、画像の選択に注目しましょう。白黒、カラー、太字、ソフト、フルスクリーン、サムネイルなど、個人Webサイト用のポートフォリオデザインを検討する際の選択肢のひとつです。それでは、最高のグラフィックデザインポートフォリオの例をいくつか見てみましょう。

1.アリエス・モロス

Various graphic design projects – two designs of people against various backgrounds, chapstick packaging, and a sweatshirt

https://www.ariesmoross.com/

もし、自分自身を物語るようなデザインポートフォリオを作りたいのであれば、アリエス・モロスにインスピレーションを求めない手はないでしょう。モロスは受賞歴のあるグラフィックデザイナーで、視覚的に美しいWebサイトを作成し、印象的で美的な作品集を展示しています。彼らのデザイン・ポートフォリオには、テキストはほとんどなく、彼らの作品そのものが語られるようになっています。また、モロスの作品はいくつかのタイプやメディアに分かれていて、潜在的なクライアントが彼のスキルや経験を理解しやすいようになっています。

2. ザ・ダッチマン

"Sydnei's Portfolio" with a graphic of a close of up the bottom half of a face

https://express.adobe.com/page/wF8W0IyeANnUn/

このポートフォリオは、Adobe Expressを使用したスクロール式のホームページで表示されます。1ページのスクロール型ポートフォリオは、すでにコミュニケーションが始まっている潜在的なクライアントに送るのに適しています。ナビゲーションバーがないため、ページの一番下までスクロールしてもらうことができます。つまり、ランディングページのデザインポートフォリオは、単にクリックするだけでなく、ポートフォリオ全体を見てもらいたい場合に有効な戦略です

3.マリア・マリー

A graphic design portolio with images of various projects spaced out into squares with a pastel color palette

https://mariamarie.com/

また、マリア・マリーの創始者であるマリオリのポートフォリオも、それを物語っている一例です。レイアウトとカラーパレットによって、注目を集めながらも落ち着いた雰囲気のポートフォリオに仕上がっていて、文字がなくてもマリオリの仕事ぶりとディテールへのこだわりを十分に語っています。このポートフォリオは、特殊なカラーパレットと興味深い幾何学的なレイアウトを用いることで、真に魅力的なデザインポートフォリオを作成することができることを示す好例です。

4.ゲイリー・シアー

"Gary Shear Graphic Designer" with a blurry image POV image of a train moving fast along elevated tracks in a city

https://express.adobe.com/page/RUestmsVHFVcK/

ゲイリー・シアーは、1スクロールページのテクニックを使いながら、いくつかの追加情報を加えて自分のデザインポートフォリオを作りました。Adobe Expressを使って、重要な連絡先や外部サイトへのリンクを掲載し、擬似的なWebサイトのようなページを作りました。1ページにすべてを掲載することで、潜在的なクライアントにスクロールしてすべてを見てもらうとともに、外部の事例へのリンクや個人の連絡先を掲載することで、信頼性を示しています。

5. ナオミ・ウメズ

"Naomi Umezu Portfolio 2019/2020" with graphics of plans and birds in the background

https://www.behance.net/gallery/94853223/Portfolio-2020

ランディングページ戦略を活用したもう一つの素晴らしいデザインポートフォリオは、ナオミ・ウメズのものです。このデザイナーのポートフォリオ全体が、デザインもWebページも含め芸術作品と言えるでしょう。各スライドは、共通のテーマとカラーパレットで統一されており、統一感があります。

6.スカイラー・ヘフリー

"Skyler Hefley: Owner of Homestuck Creative" in front of a laptop with the screen angled downward reflecting light onto the keyboard in a dark setting

https://express.adobe.com/page/KNIGfUWGGQc69/

他のシングルスクロールページのデザインポートフォリオとは異なって、Skyler Hefleyのポートフォリオには情報が満載されています。ケーススタディや様々なモックアップを掲載することで、Hefley氏は自分の作品と潜在的なクライアントのために何ができるかを効率的に示しています。Adobe Expressで作成された、シンプルかつ効果的なデザインポートフォリオの素晴らしい例です。

7.イ・ジェビン

"Design + Art Portfolio & contact information" with two wolves standing above clouds with a foggy mountain in the background

https://drive.google.com/file/d/1sq9TJk-dcOrwFbHcie1eEXJNMhTWTrZM/view

イ・ジェビンによるこのデザインポートフォリオは、目次やフォント、裏表紙など、ほとんどチャプターブックのように作られています。デザインは各ページを支配していますが、小さなテキストの断片が見る人に多くの情報を与えています。この短く効果的なデザインポートフォリオは、基本的かつ重要な情報を見る人に伝えると同時に、さらなる議論や仕事の可能性への扉を開いてくれる素晴らしい方法です。

8.シャノン・マクナマラ

"Graphic Designer & Conceptual Artist | Educator | MBA" in front of a boathouse with lots of canoes and kayaks

https://express.adobe.com/page/uMXmODG4I2QQB/

シャノン・マクナマラは、機能的で魅力的なデザインポートフォリオを作成、個人的なセンスもふんだんに盛り込んでいます。フォントの選択からYouTubeの動画の埋め込みまで、このデザインポートフォリオはマクナマラさんと彼女のデザイン経験について多くを語っています。外部のBehanceデザインポートフォリオへのリンクもあり、このデザイナーについて必要な情報はすべてこのページか、便利なリンク先にあります。もし、自分とご自身の作品について多くを語るデザインポートフォリオを作りたいなら、シャノン・マクナマラの作品を参考にしてみましょう。

9.ローレン・ホム

"Hom Sweet Hom" graphic design portolio with a grid layout showcasing various projects

https://www.homsweethom.com/work

ローレン・ホムは、自身のデザインポートフォリオを展示するためのWebページ「Hom Sweet Hom」を制作しました。幾何学的でブロッキーなレイアウトは、見る人を圧倒することなく一度に多くの作品を表示することができ、各画像はそれぞれ個別のデザインページにリンクしています。これは、ショップフロントやクラスの提供などの追加セクションを含む、完全なデザインポートフォリオWebサイトの素晴らしい例です。

10.クレイグ・ブラック

Graphic design portfolio with images of various dyed circular objects

https://craigblackdesign.com/

クレイグ・ブラックのデザインは、スクロールして各画像にカーソルを合わせると、ちょっとした情報が得られ、さらに詳しく知ることができます。白と黒を基調としたミニマルなデザインに、大きな画像を組み合わせることで、彼のデザインに焦点をあてています。これは、潜在的なクライアントを画像で惹きつけてから詳細な情報を提供する、プロフェッショナルで洗練されたWenサイトデザインポートフォリオの素晴らしい例です。

グラフィックデザインポートフォリオの素晴らしい10個の例を手に入れたところで、5つのステップのチェックリストに沿って、ご自身のグラフィックデザインポートフォリオの作り方をもう少し学びましょう。

グラフィックデザイン用ポートフォリオのチェックリスト

努力の結晶をクリエイティブなスキルを表現する洗練されたパッケージにする前に、何を盛り込みたいのかを知っておきましょう。以下のステップを踏んで、最高のポートフォリオを作りましょう。

ひとつずつ取り上げていきましょう。

1.ベスト作品をキュレーション

A person taking notes on a tablet with a view of a design portfolio on a desktop

フリーランスの初心者であっても、または個人的なプロジェクトを紹介したいだけであっても、これまでデザインスキルを向上させるために長い道のりを歩んできたことでしょう。しかし、デザインポートフォリオは、過去のデザインプロジェクトのビジュアル自叙伝ではありません。

名刺と映画の予告編を組み合わせたようなものです。ブランド力をアピールしてください。わずか数秒で、見る人の注意を引き、注目してもらえるようにしましょう。そのチャンスを逃さないようにしましょう。

デザインを徹底的に編集し、最も有名なデザインも含めて、ご自身の仕事を最もよく表している15~20点を選びましょう(価値があると判断した場合)。多才さと、どのような仕事ができるかをアピールしましょう。

ここでもう一度、選んだ作品を見てみましょう。選んだすべての画像は、ご自身が知られるようになりたいスタイルまたはスタイルを表していますか。外れているものはありますか。もしそうなら、それらを取り除きましょう。

ブランドアイデンティティを作り上げ、クリエイティブな人々に自分が何者かを伝えるのだと考えましょう。もし、スタイルがアニメで、アニメで有名になりたいと思っているなら、デザインしたコストコのバナー広告は、ご自身のためになりません。だから、主だった仕事がアニメとランダムなバナー広告だけであるならば、こだわらない方がよいでしょう。少ない方がいいのです。

同じことが、得意とするデザインのタイプについても言えます。活版印刷、サイケデリックな1960年代のハンドレタリング、書籍レイアウト、Webサイトデザイン、ロゴデザイン、パッケージデザイン、ビデオアニメーション、または上記各種が皆好きですか。クリエイティブポートフォリオで、潜在的なクライアントに能力の幅を知らせましょう。

デザインスタイルやスキルを視覚的に表現するために、15点程度のデザインに絞り込みましょう。

2.ケーススタディの掲載

Design ideas and creations printed, cut out, and laid on a wooden surface

クライアントは、目の前のデザイン課題にどう取り組むか、デザインプロセスがどのようなものであるかを知りたがっています。彼らが望むものを提供しましょう。

特に誇りに思っている過去のプロジェクトを使って、プロジェクトの課題を簡単に説明、どのように始まり(課題)から終わり(最終成果物)に至ったかを示しましょう。その際、スケッチやスクリーンショットなど、完成に至るまでに繰り返された作業も含めましょう。デザインスキルを駆使して、丁寧にレイアウトしましょう。

3.適切なプラットフォームを選択

"Create an online portfolio for free. Build an online portfolio with ease using Adobe Express." with hands typing on a laptop

オンラインデザインポートフォリオで最もわかりやすいのは、グラフィックデザインポートフォリオサイトです。上記の例で見たように、1つのWebページとして作成されているものもあれば、複数のページを持つポートフォリオサイトもあります。どれだけの情報を掲載するか、どのようにレイアウトするかによって、最適なデザインが変わってきます。

: 検討する際には、次のうちどれを入れたいかを自問自答してみましょう。

手っ取り早く始めるなら、Adobe Expressの無料のeポートフォリオWebサイトテンプレートをお試しください。adobeがポートフォリオをホストするので、文字通りわずが数分でポートフォリオを構築することができます。eポートフォリオの作成ページにアクセスすると、ページテンプレートが実際に表示されます。一番下までスクロールして、独自の美しいポートフォリオを作成しましょう。

Adobe Expressは、インライン画像、パララックススクロール、フルワイド画像、ウィンドウ、Webサイトリンク、ビデオ、フォトグリッドなどを備えた、完全に洗練された非常にセクシーな1ページのWebサイトをプラグアンドプレイで作成する方法を特徴としています。

複数ページのWebサイトは、より多くの時間と思考を必要とします。幸いなことに、ウェブ開発のブートストラップはこれまで以上に簡単で、自分自身のためのWebデザイナーとして活動することができます。人気のあるオプションを検討した上で、ナビゲーションが簡単になるように、すっきりと整理されたデザインにすることを心がけましょう。

4.個性を発揮

Pins with strings connecting them and shooting outward to create the outline of a person's side portfolio

ポートフォリオのすべての要素を集め、デジタル形式でレイアウトしたら、1日ほど離れて、また戻ってポートフォリオのデザインを見直してみてください。アートディレクションに全力を尽くしましたか。もしそうなら、個性を発揮できるよう、最終的なブラッシュアップを行いましょう。

個性を表現するのは、デザインだけではありません。ご自身や作品を表現する言葉、選んだフォントや色、プロフィールや掲載画像など、ちょっとした工夫で何者であるかを知ることができます。作品を売るのと同じくらい、ご自身を売り出すことになるので、ポートフォリオには、個性を十分に盛り込みましょう。

さて、グランドフィナーレです。ポートフォリオに間違いがないか、最終的な校正を行いましょう。提案した個性的な各種特徴がずさんにならないようにしましょう。

4.言葉を伝播

A hand holding a phone face up with various social media icons floating above the screen

ポートフォリオが完成したら、次はそれを世に送り出す番です。キーワードはSEO(検索エンジン最適化)に役立ち、デザイン関連の検索結果に表示されるようになりますが、SNSもまた、視覚的才能を共有する素晴らしい方法なのです。実際、Instagram、LinkedIn、Pinterestなどのサイトは、優れたデザインを世界中に運び、知らない潜在クライアントの前に置くことができるミニポートフォリオとして簡単に機能することができます。

まだの場合は、デザインビジネス用のSNSアカウントを維持して、個人アカウントとは区別しましょう。クライアントはご自身の個性を知りたがっていますが、これらのアカウントは、デザイン、最新のプロジェクト、才能を紹介する場所なのです。そのため、個人的な見識や情熱、活動など、プロフェッショナルなイメージを高めるような内容を盛り込み、適宜キュレーションしましょう。ポートフォリオサイトが個人のプロジェクトを紹介する場所であっても、自分のポートフォリオはできるだけ広く共有するようにしましょう。

最後に、PDFのポートフォリオを作成しましょう。潜在的なクライアントがオフラインで作品にアクセスできることが重要です。ハードディスクやデスクトップに置いておくか、サイトからダウンロードできるようにするか、またはその両方が必要です。

以上のことができれば、プロフェッショナルなポートフォリオを獲得したことになります。おめでとうございます。今、ご自身の将来への重要な投資を行ったのです。

新しい仕事を獲得、共有できる新しい作品を持ち続けるなら、ポートフォリオの更新を忘れないようにしましょう。ポートフォリオのテンプレートがあれば、更新は簡単です。

この記事は2023年1月10日に更新されました。

Adobe Expressを今すぐ開始

関連記事を探索