6月10日16 分
最終更新: 6月25日
更新日 2024年6月10日（公開日 2017年4月19日）
駆け出しデザイナーや未経験デザイナーにとって、ポートフォリオサイトの作成は大きな課題です。作品はあるものの、ポートフォリオサイト全体のレイアウトやポートフォリオの構成を考えるとなると悩みが尽きません。
そこで今回は、プロのデザイナーによって作成された Wix のポートフォリオテンプレートから、ポートフォリオにおすすめのレイアウトを紹介します。
ポートフォリオの作成において、構成やレイアウトはその出来上がりや印象を大きく左右します。写真のスタイル、ジャンル、表現したい内容を決めた上で、最適なテンプレートレイアウトを選択しましょう。
\ 約 900 種類のテンプレートから自由に選択 /
目次
ポートフォリオサイトレイアウトのポイント
ポートフォリオレイアウトアイデア17選
01. イラストレーターアートのポートフォリオ
02. インテリアデザイナー向けポートフォリオ
03. クリエイティブディレクターのポートフォリオ
04. ジュエリーデザイナーのポートフォリオ
05. プロダクトデザイン向けポートフォリオ
06. 3Dアーティストのポートフォリオ
07. アートディレクターポートフォリオ
08. ファッションデザイナーのポートフォリオ
09. 自主制作映画作品のポートフォリオ
10. グラフィックデザイナーのポートフォリオ
11. ブランディングコンサルのポートフォリオサイト
12. テキスタイルデザイナーのポートフォリオ
13. アートスタジオのポートフォリオサイト
15. 3Dアニメーターのポートフォリオ
16. ゲームデザイナーのポートフォリオ
17. 空間デザイナーのポートフォリオ
ポートフォリオテンプレートをカスタマイズするコツ
Wix プロギャラリーのレイアウト
動画とテキストの追加について
ポートフォリオレイアウトを選ぶ前に、まずは、魅力的なポートフォリオの作り方とポイントを簡単に紹介します。以下のポイントをポートフォリオレイアウトを選ぶ際にお役立てください。
サイトデザインはシンプルかつクリーンに保ち、作品を主役にする。
サイトを効率的に閲覧できるよう、メニューはわかりやすく配置する。
レイアウトがモバイルからのアクセスにも最適化されるようにする。
自身の経歴や強みをアピールする自己紹介ページを設ける。
仕事の依頼やフィードバックを受け付けられるよう、お問い合わせフォームを設定する。
ポートフォリオは、作品が大きく配置され、みやすいレイアウトであることが大切です。ここでは、ポートフォリオレイアウトの参考になる、おすすめのテンプレートを、分野ごとに紹介します。
→ いますぐこのテンプレートを試す
このテンプレートの特徴は、アニメーション付きのスプラッシュページです。矢印をクリックすると、フルスクリーンレイアウトでデザインされたイラストポートフォリオが表示されます。
それぞれのセクションに表示されているイラストには、パララックススクロール効果が追加されており、ページ下へとスクロールすると奥行きのある動きをもたらします。
Wix では、すべてのテンプレートにネットショップ機能を追加することができます。作品をオンラインで販売してみたいクリエイターはぜひ、ネットでイラストを販売する方法をチェックしてみてください。
→ いますぐこのテンプレートを試す
このインテリアデザイナー向けポートフォリオは、画像がフェードインするアニメーションのある、非対称レイアウトのポートフォリオテンプレートです。トップページの他の部分はより落ち着いていて、写真が主役的存在になります。
テンプレート上部の隅にはデザイナーのフルネームとタイトルが記載されており、これはこの Web サイトが何に関するものなのかを明確にするための重要な役割となります。このテンプレートには、ブログ機能も組み込まれています。ポートフォリオの一部としてブログを作成することは、Google 検索での露出度を高め、より多くの人に見つけてもらいやすくなります。他にもデザインのコンセプトや、活動内容を記録することで、潜在顧客に訴求する可能性を増やすことができます。
→ いますぐこのテンプレートを試す
矢印をクリックすることで、ギャラリー画像変更することがきるトップページを採用した、カードレイアウトのポートフォリオサイトテンプレートです。
サイドメニューをクリックすると、メニューが展開し「会社案内」や「作品一覧」を表示することができます。
デザイナーのポートフォリオでは、これまで参加してきたプロジェクト経歴を明確に示すことが重要です。共同制作の場合は、他のメンバーへの配慮も忘れずに行いましょう。協力者の名前を挙げることで、チームワークの良さが強調できます。
→ いますぐこのテンプレートを試す
このテンプレートは、分割レイアウトを活用したドラマティックな雰囲気のあるデザインが特徴です。アーティストやクリエイター向けの魅力的なポートフォリオサイトが作成できます。
トップページは画面が 2 つに分割されたユニークなレイアウトを採用し、中央に固定表示された文字が左右を結びつけ、バランスのとれたデザインです。分割された左右のエリアには、大きな画像やビジュアルを掲載できます。作品の魅力を存分に引き立て、視覚的なインパクトを与えることができるでしょう。
このテンプレートは ネットショップとしての機能を搭載しており、商品の掲載や在庫管理、予約販売機能など、作品をネット販売するために役立つ機能が豊富にあります。はじめてのネットショップ作成でも使いやすい直感的なツールとなっています。
→ いますぐこのテンプレートを試す
プロダクトデザインや工業デザインを想定して作成された、このテンプレートは、トレンドの大きなタイポグラフィが特徴です。ミニマリストスタイルを採用しながら、大胆でわかりやすいグリッドレイアウトとなっており、シンプルな構成で作品の魅力が際立ちます。
デザイナーの受賞歴や展示会、メディア掲載実績などを掲載できるページが組み込まれており、受賞歴や掲載実績をアピールすることができます。
このテンプレートをカスタマイズするには、トップページの画像を、ご自身のプロジェクト画像に差し替え、それぞれのプロジェクト紹介ページにて詳しい説明や作品の解釈を加えることができます。
→ いますぐこのテンプレートを試す
ポートフォリオレイアウトで最も重要なものは、印象的なファーストビューの構成です。ポートフォリオサイトの第一印象はファーストビューで決まります。そのため、メインビジュアルを使ってテーマやデザインの印象を視覚的に強く訴えかけましょう。印象的なファーストビューデザインは海外アーティストのポートフォリオ事例を参考に、自分のポートフォリオをカスタマイズしてみてください。
このテンプレートは、ファーストビューにフルスクリーンのビデオループを掲載していることが特徴です。アーティストの名前、作品についての説明が前面中央に配置され、訪問者がポートフォリオを一目見ただけで、必要な情報がわかるようなレイアウトになっています。すこしサイトをスクロールすると、Wix プロギャラリーを活用した作品集が表示され、作品のサムネイル画像をクリックすると、作品の詳細や追加の画像が見られるような構成にのポートフォリオになっています。
Wix プロギャラリーは、数クリックで作品の追加や削除ができるため、ポートフォリオを簡単にアップデートできます。常にポートフォリオを最新の状態にしておきたいアーティストにとって便利なツールです。
→ いますぐこのテンプレートを試す
このアートポートフォリオテンプレートは、短い会話のような文を使ってサイト訪問者を温かく迎えます。テキストは大きくカラフルで、ファーストビューの大部分を占め、ページ全体のデザインを装飾するような彩りを加えます。
サイトの他のコンテンツも、同じように親しみやすいトーンで書かれています。トップページの下部には、読者にコラボレーションを呼びかけるシンプルな言葉やスマイリーフェイスがあります。心のこもったアートポートフォリオで自分の個性を輝かせることは、本物の、そして信頼につながる個人ブランドを構築するための早道となるでしょう。
フッターの下部には、ソーシャルメディアへのリンクと連絡先があり、ファンや顧客がさらに詳しい情報を得たり、興味を掘り下げていったりが可能です。
→ いますぐこのテンプレートを試す
分割表示レイアウトをアレンジした、このファッションデザイナー向けテンプレートは、左側にスライドショーで切り替わる画像を配置し、右側に静止画像を配置しています。このデザインを使って、最新コレクションから、ムードボードからのインスピレーション写真まで、様々なビジュアルでポートフォリオの雰囲気を作りましょう。
深みのあるムーディーな色調のまとまりのあるカラーパレットを使用し、ファーストビューの雰囲気をサイト全体を通して用います。パララックススクロール効果のおかげで、ポートフォリオがインタラクティブな体験の場となり、まとまりのあるストーリーが伝えられるポートフォリオサイトとなるでしょう。
09. 自主制作映画作品のポートフォリオ
→ いますぐこのテンプレートを試す
ページに動きを使って注意を引き、ダイナミックでリズミカルな雰囲気を加えたポートフォリオテンプレートです。現在の動画のトレンドに合わせて、ファーストビューに大きなビデオストリップがあり、訪問者を瞬時にこのポートフォリオテンプレートに引き込みます。このストリップは太いブラックのボーダーで縁取られ、サイドバーと製作者のイニシャルのロゴを入れるスペースがあります。
この印象的なイントロダクションの後に、その他の動画のギャラリーが続きます。その後ろには、家庭用テレビの黎明期を思い起こさせる、レトロな雰囲気の動画背景があります。さらに興味を持った訪問者は、Web サイトのフッターから、製作者のニュースレターが購読できます。Eメールマーケティングを上手に活用することは、ファンやクライアントに作品の最新情報を提供し、Web サイトへのトラフィックを増やす効果的な方法です。
ヒント：ビデオメーカーを使って、Wix エディタ上で動画編集ができます。動きのあるポートフォリオの作成に役立てましょう。
→ いますぐこのテンプレートを試す
このポートフォリオテンプレートは、Wix のソーシャルフィードのようなカードレイアウトで構成されています。ソーシャルシェアアイコンを使えば、サイト訪問者は素晴らしい作品をウェブ上で簡単に拡散できます。
このテンプレートのモバイルサイト版には、カラフルなベクターアートでできたカスタムメイドの「トップへ戻る」ボタンがあり、ポートフォリオのイラストと合わせることも可能です。
11. ブランディングコンサルのポートフォリオサイト
→ いますぐこのテンプレートを試す
ブランディングコンサルや、ブランディング会社のポートフォリオサイトには、これまでの事例が一覧で見ることができる、画像重視のポートフォリオテンプレートが必要です。
非対称レイアウトのファーストビューに合わせて、事例画像のギャラリーも不規則なレンガレイアウトとなっています。
このポートフォリオテンプレートは背景を白にし、シャープな画像がトップページを横切り、これまでの制作事例を魅力的に魅せることができます。さらに、おしゃれなフッターには、ソーシャルメディアへのリンクと連絡先があり、簡単にお問い合わせや仕事依頼の連絡を取ることができるようになっています。
→ いますぐこのテンプレートを試す
このアートポートフォリオテンプレートはフリーランスのデザイナーに最適で、クリエイティブなキャリアを後押しするために必要なものがすべて備わっています。トップページのプロジェクトギャラリーではデザインを披露でき、詳細な「About Me（自己紹介）」ページ、オンラインストア、絶賛のレビューやお客様の声を誇る「Press（プレス）」ページ、コラボレーションを開始するための連絡先ページがあります。
このテンプレートのオンラインストアの一部としてメンバーズエリアがあり、顧客がログインしてストアメンバーになることが可能です。一度登録すれば、買い物時のチェックアウトプロセスがより簡単におこなえ、注文の追跡もできるようになります。
13. アートスタジオのポートフォリオサイト
→ いますぐこのテンプレートを試す
アーティストの協同組合の活動を魅力的に紹介するこのポートフォリオテンプレートは、まず動画が埋め込まれたアニメーションループで始まります。一番下のコーナーには CTA（行動喚起）ボタンがあり、サイト訪問者がクリックして協同組合についてもっと知ることを促しています。
このテンプレートは、様々なデザインミュージアムに展示したり、様々なイベントを開催したりするアーティストのニーズに対応しています。ニュースや今後のミートアップを告知する「Updates」セクションと、ファンが予約できる「What's On」ページがあります。
14. 風景写真家ポートフォリオ
→ いますぐこのテンプレートを試す
写真ポートフォリオに最適なテンプレートで、ビジュアルを前面に押し出したデザインです。レイアウトはすっきりとしたミニマル、余白をたくさん取ってあり、2つのサンセリフフォントの組み合わせが洗練されています。
ページ上部のロゴはサイトの他の部分と同じフォントに設定され、ナビゲーションしやすいようにトップページに固定されています。
トップページのプロジェクトギャラリーに、縦長と横長の写真が混在していることに注目してください。不揃いな比率で並べることで、壮観な自然の風景写真が楽しめる、ユニークなアシンメトリーの外観に仕上がっています。
おすすめ関連記事
▶︎ 初心者向け：風景写真撮影のテクニック25選とポートフォリオ事例
15. 3Dアニメーターのポートフォリオ
→ いますぐこのテンプレートを試す
このデジタルアーティストポートフォリオテンプレートは、ストリップが画面いっぱいに表示され、リンク先のプロジェクトの魅惑的な小さなスニペットとして機能します。同じプロジェクトがページ下部のギャラリー形式で再表示されるので、訪問者は好みのナビゲーション方法を選べます。
内側のプロジェクトページでは、デザインの詳細なケーススタディが見られます。大きなヒーロー画像に続いて、テキストによる説明、関係者全員のクレジット、作品の追加写真が掲載されています。多くのインスピレーション溢れるグラフィックデザインのポートフォリオサイトに見られるように、プロジェクトの詳細な分析を載せることで、サイトの内容にさらに深みが増します。
16. ゲームデザイナーのポートフォリオ
→ いますぐこのテンプレートを試す
ゲームデザイナーのポートフォリオには、ビデオゲーム制作の背後にある技術的な能力を伝えるための強力なポートフォリオテンプレートが必要です。この没入感のある映画のようなポートフォリオテンプレートには、ゲーマーの目を引くグラフィックが含まれています。
トップページをスクロールすると、ビデオゲームのプロジェクトが1位から3位まで順番に整理されて表示されます。ユーザーは CTA でポートフォリオページに導かれ、そこですべてのゲーム作品にアクセスできます。
17. 空間デザイナーのポートフォリオ
→ いますぐこのテンプレートを試す
ここでは、ファーストビューの大きな写真でクリアなトーンを設定し、デザイナー紹介、正方形フォーマットのギャラリーにプロジェクトが表示されます。
ギャラリー内の画像は、クリックするとライトボックスに展開し、画面いっぱいに拡大することも可能です。こうすることで、訪問者は作品を十分楽しみながら閲覧できます。
1ページのポートフォリオサイトとして、このテンプレートはページ内の様々なセクションへのリンクにアンカーを使用しています。これにより、カテゴリーごとに新しいページを用意しなくても、直感的なウェブナビゲーションが実現します。
『Wix プロギャラリー』は、高解像度の写真をオンライン上で美しく表示するだけでなく、画像のシャープ補正、右クリック禁止による画像保護、SNS 共有など、写真家やアーティストに必要なさまざまな機能が揃ったツールです。
プロギャラリーで掲載された画像は、自動的にモバイル最適化され、様々な画面表示サイズで美しく表示されます。
グリッド：Pinterest や Instagram でもお馴染みのレイアウト。縦、もしくは横向きに関わらず、たくさんの画像や写真をすっきり表示するのに最適です。
コラージュ：さまざまなアスペクト比の写真を、ギャラリー内にランダムに配置する形式です。
メーソンリー：異なるアスペクト比のコンテンツを一列に並べることなく、煉瓦やタイルのようにパッキングするレイアウト手法で、視覚的にすっきりした印象を与えます。
サムネイル： 画面下に配置した小さなサムネイルで他作品のプレビューが可能です。訪問者は全体を確認しながら、見たい写真を選ぶ事ができます。
スライダー： 前後の作品の断片が表示され、「より深く味わう」感覚を提供する形式です。
スライドショー：他の作品のプレビューや断片的な画像表示はないので、1枚の作品に集中してもらうことができます。テキストを追加した場合、画像の下にテキストが表示されます。
Wix プロギャラリーは、動画やテキストを写真と共に配置することが可能です。
すべてのレイアウトで使用できますが、グリッド・レイアウトで使用するのが最も効果的です。追加したい場合、Wixプロギャラリーの 「メディアを管理」をクリックしてください。
テキスト利用する上手な例として、作品に関する引用文を表示したり、関連作品のリンクを貼ったりする方法があります。
また、写真以外に掲載したい動画があれば、ギャラリーに追加してインパクトを与える演出が可能です。動画はホーバーエフェクト（マウスオーバーしたときに効果を与える）か、デフォルト（標準)で自動再生させることが可能です。
ポートフォリオサイトを作成することは、自分のスキルや作品を世界に示す素晴らしいステップです。特にデザイナーとしてキャリアをスタートさせようとしている方々にとって、魅力的なポートフォリオは、将来的な成功に不可欠な要素です。
ポートフォリオのレイアウトに悩んだ際は、プロフェッショナルなテンプレートや、有名なアーティストのポートフォリオからインスピレーションを探してみましょう。
自分のデザインやアートを公開して、反響を得ることで、自信を持って次のステップへと進めるはずです。是非、この機会にポートフォリオサイトを作成してみてください。
\ 約 900 種類のテンプレートから自由に選択 /
あわせて読みたい記事
編集者：Miyuki Shimose
SEO & ブログコンテンツマーケター