テンプレート解説マニュアル
2026.06.01
この度はテンプレートをご検討・ご購入いただき誠にありがとうございます。
このページでは、当テンプレートをご利用いただくにあたり、スムーズにご利用いただけるようテンプレートの解説を行っております。導入の際はぜひご参考ください。
なお、当ページで解説しているStudioはバージョン5.0を元に解説しております。今後アップデートがあった際には、解説画面が異なる場合がございますので、何卒ご理解ください。
このテンプレートの特徴
まずはこのテンプレートでご用意している主な機能についてご紹介します。
1. WORKSとJOURNALはCMSで更新可能
CMSではWORKS・JOURNALの投稿が可能です。サイトの基本設定を行っていただければ、それ以降はCMSの更新のみで日々の更新が可能になります。
※補足：予定ではメインビジュアルもCMSから変更可能な仕組みとする方向でしたが、現状のStudioではCMSの読み込みが遅く、画像の表示が遅れてしまうためこの仕組みとしております。
2. Freeプランでも公開可能
当テンプレートはStudioのFreeプランでも公開可能なので、一度テンプレートを購入頂ければそれ以降の月額を気にせずご利用いただけます。
なお、Freeプランの場合は画面左下にStudioのバナー画像が入ってしまいます。
また、独自ドメインを使用したい場合や、CMSの投稿数が多くなってくると有料プランへの変更が必要になってまいりますのでご検討いただければと思います。
3. フォトグラファー以外のポートフォリオにも活用可能
掲載写真や文章を変更することで、デザイナー、イラストレーター、映像作家、建築設計事務所、クリエイティブスタジオ、ブランドサイトなど、幅広い用途に対応できます。
作品や想いを美しく伝えるためのテンプレートです。ぜひご活用ください。
テンプレートの変更
ではここから、テンプレートの具体的な変更方法について順番に解説していきます。
必ずこの通りにする必要はございませんが、おすすめの手順として参考にしてください。
ロゴの変更
オープニング（ローディング時）の色変更
メインビジュアルの変更
テキストの変更
サイト情報の入力
CMSの更新
サイトを公開
お問い合わせフォームの設定
1. ロゴの変更
ロゴ画像は以下レイヤーに含まれており、こちらを変更するだけですべての箇所のロゴが変更されます。
ヘッダー → ヘッダーコンポーネント（ダブルクリック） → ロゴエリア → ロゴ → ロゴコンポーネント（ダブルクリック）
ロゴは、画像にしたい場合と、テキストにしたい場合の2つのタイプを入れておりますので希望される方を表示してください。
※デフォルトでは画像タイプで表示しております。
なお、画像でご用意いただく際は必ず「白色のロゴ＋背景透明」のデータでご用意ください。
データ形式はSVG・WebP・PNGデータがおすすめです。PNGデータの場合はボケない程度の画像サイズであれば大丈夫ですが、横幅300px以上あれば大丈夫だと思います。
サイズを変更したい場合はタイプによって以下の箇所で変更可能です↓
※画像内の説明テキストを参考にしてください。
画像の場合
テキストの場合
2. オープニング（ローディング時）の色変更
ローディング時のオープニング色を変更する場合、背景色については以下カラースタイルより簡単に変更可能です↓
ロゴはデフォルトで白色ですので、もし暗くしたい場合は以下手順で明度を下げて暗くしてください↓
3. メインビジュアルの変更
メインビジュアルは以下より変更可能です↓
メインビジュアルの画像は必ず2枚以上設定するようにしてください。
最大枚数の決まりはありませんが、画像が多いとそれだけ読み込みに時間がかかってしまいますので7枚程度までがおすすめです。
なお、Studioの仕様上、メインビジュアルは以下のように表の中央から表示される形となっております。
7枚画像の場合「4→5→6→7→1→2→3→」
表の上から順に表示されると分かりやすいのですが、フェードインで切り替わる画像の場合はこの作りとなってしまうようです。
画像の左側にマウスカーソルを当ててクリックしたままにすると、上下に順番が変更できるようになりますので順番を変える際はそちらで調整するようにしてください↓
↑ゴミ箱マークで削除することもできます。
4. テキストの変更
各ページのテキストなどを変更していきます。基本的には、変更したい箇所を何度かダブルクリックいただくことで編集可能になりますのでお試しください。
なお、WorksとJournalに関するエリア・ページは基本的に変更いただかなくて大丈夫な形となっております。※細かく調整したい場合はもちろん変更いただいて大丈夫です。
SNSアイコンに関しては変更方法をご説明します↓
※以下画像から参考にしてください。
▼プロフィールのSNSアイコンへのURL設置方法
▼フッターのSNSアイコンへのURL設置方法
※どのページでもOKですので、フッターをダブルクリックして開いてから以下手順を実施してください。
アイコンを変更したい場合は、アイコンを選択した状態で以下手順より変更可能です↓
5. サイト情報の入力
どのページでも大丈夫ですので、右側に「ページ」と「サイト」というタブがございますので、サイトの方を開き、サイトタイトルと説明文などを入力してください。
こちらは、もしページごとにタイトルや説明文を変更したい場合は、各ページの「ページ」の方を開いてタイトル＋説明文を入力いただくことも可能です。
その他、ソーシャルカバーとファビコンもアップロードしてください。
ソーシャルカバーはサイズは1200×630pxでご用意ください。ファビコンは当ページの場合は500×500pxで作っています。
6. CMSの更新
CMSではWorksとJournalのページ更新が可能です。
Worksのページ更新
Worksのページを開くと、「写真」と「本文」でブロックが分かれておりますので、基本はそれぞれに分けて入れる形がおすすめです↓
プロパティの項目にあるwork用タグは、サンプルとして「Personal」「Advertisement」の2つを入れております。こちらは、増やしたり変更したい場合はWork用タグから変更可能です↓
また、こちらを変更いただくとWorksページの絞り込みにも自動で反映される形となります↓
以下のページではWorksページ投稿に関する簡単な解説も行っておりますので、合わせてご覧ください↓
Journalのページ更新
こちらは「本文」のみのブロックとなっております。
こちらも、以下のページでJournalページ投稿に関する簡単な解説を行っておりますので、合わせてご覧ください↓
編集中画面について
なお、編集中は自動で保存されていきますので、特に保存ボタンはございません。
また、下書きの状態でも「プレビュー」画面では表示されておりますが、公開画面には表示されておりません。
「公開ボタン」を押すことで、公開中の画面にも表示される形となっております。
7. サイトを公開
テンプレートの内容がすべて変更されましたら、画面右上の「公開」ボタンより公開が可能です。
なお、独自ドメインでの公開の流れとしては以下Studioのサイトで詳しく解説されておりますので、引き続き参考にしてみてください。
8. お問い合わせフォームの設定
最後に、お問い合わせフォームの設定を行います。
通常、サイトを公開すればプロジェクトを登録した際に設定したメールアドレス宛にお問い合わせメールが届くようになっております。
設定したメールアドレスはダッシュボード内の「フォーム → 設定」よりご確認いただけます↓
もし受信用メールアドレスを変更したい場合は、「編集」ボタンを押して変更が可能です↓
また、受信したメールタイトルは「You have a new response in お問い合わせ of…」といった形でシステムメールのようなタイトルになりますので、これを変更したい場合は、以下、個別設定内の「お問い合わせ」をクリックして変更が可能です↓
設定が完了したら、公開済みWebサイトのお問い合わせフォームより実際にテストメールを送信してみてください。
テストメールは、設定したメールアドレス宛に届くほか、ダッシュボードの「フォーム」にも表示されておりますので、合わせてご確認ください↓
マニュアルは以上となります。
最後までご覧いただき、ありがとうございました。
テンプレートについてのご不明点などございましたら当ショップページの「メッセージを送信」よりご連絡ください。
早めの返信を心がけておりますが、お時間がかかる場合もございますので、何卒ご理解いただければと思います。
このテンプレートが、皆さまの素敵なサイトづくりのお役に立てれば幸いです。
Journal
