公開投稿
2024.11.08 12:00
【クリエイター向け】デザインテンプレートの選び方❗
10946
こんにちは、クロスフォリオ事務局です。
「ポートフォリオをこだわって作りたいけど、どのテンプレートを選んでいいかわからない！」って悩んでいる方はいませんか？
これからポートフォリオを作る方や、ポートフォリオのデザインを変えたいと思っている方必見🙌
この記事では、そんなあなたの悩みを解決するため、テンプレートを比較・紹介していきます❗
【💡デザインテンプレートとは】
ポートフォリオを簡単に作成するための、あらかじめ用意されたデザインのひな形のことです。現在10種類のテンプレートをご用意しています。
クロスフォリオでは、まずこのテンプレートを選んで、ポートフォリオ制作を始めます。
※簡単ポートフォリオ制作を選択した場合は、テンプレート「standard」が設定されます。
🌟どんな違いがあるの？
各テンプレートには設定やデザインに違いがあります。
ここでは、テンプレートを選ぶ上で重要な2つのポイント、「キービジュアル」と「UI（ユーザーインターフェース）」についてご紹介します。
【１】キービジュアルの違い
まずはポートフォリオの顔となるキービジュアル！各テンプレートでキービジュアルのデザインや設定が違います。
中には、動きのあるもの（アニメーション）やページの背景になるもの、
また、「今すぐポートフォリオを公開したい！」「小説がメインでキービジュアルが準備できない」方にオススメの、キービジュアルが省略可能なものもあります。
【２】UIの違い
メニューのデザインや表示箇所、外部リンクの表示箇所、ボタンのデザイン、使用フォントもテンプレートごとに異なります
作品の雰囲気や世界観に合わせたり、自分の好みのテンプレートを探してみましょう！
▲メニューは「タブ」と「ボタン」２種類あります！
🌟テンプレートを比較！
ここまで紹介したポイントを一覧で一挙比較！
※UIは、「メニュー」と「フォント」についてご紹介いたします
🌟テンプレート毎にご紹介！
現在使える全10種類のテンプレートをご紹介！
standard
standardはキービジュアルを画面横いっぱいのレクタングルで表示する、シンプルなデザインとなっています。
ポートフォリオ内の各ページへのリンク（ナビゲーションメニュー）は、キービジュアルの右上にタブ形式で表示されます。
【仕様】
キービジュアル：《省略可》
UI：《メニュー：タブ》《フォント：游ゴシック体, Montserrat》
＜キービジュアルの推奨サイズ＞
PC：2880px × 1100px
mobile：750px × 480px
emotion
emotionは複数のキービジュアルを、バランスよく配置して見せることができるデザインテンプレートです。
キービジュアルに設定できる作品数は7作品で、よりたくさんの作品をファーストビューで見せたい方におすすめです。
【仕様】
キービジュアル：《省略可》
UI：《メニュー：タブ》《フォント：Noto Sans JP Regular, Libre Baskerville》
＜キービジュアルの推奨サイズ＞
｜A(中央)：960px×1360px｜B,E(左右)：640px×400px｜C,D(左右)：640px×640px｜F,G(左右)：706px×720px｜
background
backgroundでは１つの作品を背景として設定し、その上でポートフォリオの各コンテンツを滑るようにスクロールさせることができるデザインテンプレートです。
ベースとなるイメージを明確に打ち出したい場合や、視覚的な奥行きを演出したい場合にご利用ください。
【仕様】
UI：《メニュー：ボタン（右中央）》《フォント：游ゴシック体, Lato》
＜キービジュアルの推奨サイズ＞
PC：2880px × 1340px
mobile：750px × 980px
dark
darkは１つの作品をキービジュアルとして設定することができ、background同様にポートフォリオのコンテンツがその上を流れていくよう設計されたテンプレートです。
キービジュアルの左にはポートフォリオ名を単色背景で表示するスペースが設けられており、ロゴなどを配することも可能なので、ポートフォリオ名をしっかりと目立たせたい時などに有効なテンプレートです。
【仕様】
UI：《メニュー：ボタン（右下）》《フォント：游ゴシック体, Oswald》
＜キービジュアルの推奨サイズ＞
PC：1664px × 1220px
mobile：720px × 720px
colorblock
colorblockはサイズの違う3つの作品をキービジュアルを設定できるデザインテンプレートです。
躍動感のあるファーストビューを演出したい場合におすすめのテンプレートとなっています。
【仕様】
UI：《メニュー：ボタン（右下）》《フォント：Noto Sans JP Regular,》
＜キービジュアルの推奨サイズ＞
｜A(右)：1520px × 1400px｜B(中)：720px × 960px｜C(左)：720px × 720px｜
popslider
popsliderは動きのあるテンプレートで、丸く切り抜かれたキービジュアルが自動で右から左に流れていきます。
キービジュアルとして設定できる作品数は最大5作品（mobileの場合は2作品のみ表示）で、これらがループして表示されます。
【仕様】
キービジュアル：《省略可》《アニメーション》
UI：《メニュー：タブ》《フォント：Noto Sans JP Regular, Poppins》
＜キービジュアルの推奨サイズ＞
PC＆モバイル共通：960px × 960px
sharpslider
sharpsliderはキービジュアルとして設定した作品が一つずつ左に流れながらクローズアップされ、緩やかにズームアウトしていくテンプレートです。
キービジュアルとして設定できる作品数は4つからとなります。
【仕様】
キービジュアル：《アニメーション》
UI：《メニュー：ボタン（右下）》《フォント：Noto Sans JP Regular, Josefin Slab》
＜キービジュアルの推奨サイズ＞
PC＆モバイル共通：1440px × 1340px
verticalslider
verticalsliderは、キービジュアルとして設定した作品が右縦に並び、これらが一つ一つ中央に拡大表示されてループしていくテンプレートです。
キービジュアルとして設定できる作品数は4作品からとなります。
【仕様】
キービジュアル：《アニメーション》
UI：《メニュー：ボタン（右下）》《フォント：Noto Sans JP Regular, Red Rose》
＜キービジュアルの推奨サイズ＞
PC＆モバイル共通：1120px × 1100px
black
blackはその名の通り黒を基調としたテンプレートで、キービジュアルに設定された作品をひとつづつ、緩やかに拡大していきます。
キービジュアルは1つから設定できますが、テンプレートの視覚効果を生かすには2枚以上の設定をする必要があります。
公式の推奨登録枚数は７枚です。
【仕様】
キービジュアル：《省略可》
UI：《メニュー：ボタン（右下）》《フォント：游ゴシック体, Archivo Black》
＜キービジュアルの推奨サイズ＞
PC＆モバイル共通：2560px × 1360px
popanimation
popanimationはキービジュアルとして設定された作品を順番にクローズアップするテンプレートで、次に拡大表示される作品は右下の円形の中に表示されます。
また、このテンプレートはちょっと変わった動きをします。
このテンプレートをスクロールさせてみるとわかるのですが、クローズアップされたキービジュアルと、テンプレート全体のスクロール速度が違い、まるでキービジュアルが少し奥にあるような、画面が立体的な層を成しているかのような動きをします。
これはいわゆるパララックス（視差効果）と呼ばれており、近年のWebサイトなどでよくみられる手法です。
キービジュアルは1つから設定ができますが、クロスフォリオでは7作品以上の設定を推奨しています。
【仕様】
キービジュアル：《アニメーション》
UI：《メニュー：ボタン（右下）》《Noto Sans JP Regular, Prata》
＜キービジュアルの推奨サイズ＞
PC＆モバイル共通：2000px × 1340px
以上、今回はテンプレートの選び方についてご紹介いたしました❗
是非、お気に入りのテンプレートを選んでこだわりのポートフォリオを作ってみてください🙌
事務局コミュニティでは取り扱ってほしい話題や、気になる質問などを随時募集しています！
皆様の疑問にお答えできればと思いますので、ご意見をお気軽にお寄せください！
それでは、クロスフォリオで楽しいひと時を！