テンプレート解説マニュアル

この度はテンプレートをご検討・ご購入いただき誠にありがとうございます。
このページでは、当テンプレートをご利用いただくにあたり、スムーズにご利用いただけるようテンプレートの解説を行っております。導入の際はぜひご参考ください。

なお、当ページで解説しているStudioはバージョン5.0を元に解説しております。今後アップデートがあった際には、解説画面が異なる場合がございますので、ご了承ください。

このテンプレートでできること

まずはこのテンプレートでご用意している主な機能についてご紹介します。

1.WORKSとNEWSはCMSで投稿可能

CMSではWORKSの個別ページと、NEWSの個別ページがそれぞれ作成可能です。
個別ページを投稿すれば自動でサイトの該当箇所に表示されます。

また、NEWSは「news・event・media」の3つにカテゴリ分けが可能ですが、「media（メディア掲載情報）」を選択すればABOUTページのメディア掲載情報（MEDIA）にも自動で表示されるようになります↓

2.メインビジュアル右下のPRボックスもCMSから変更可能

メインビジュアル右下には告知したいイベント情報やPR情報をCMSだけで表示可能です。
まずはニュースをCMSで投稿いただき、それをCMSのコレクション内に入れ込むだけで表示されます。もちろん、PRしたいものがない場合は消すことも可能です。

3.メインビジュアルの背景画像はリストで編集可能

メインビジュアルの背景画像はデザインエディタ上のリストで自由に変更可能です。画像の入れ替えも自由です。

※補足：予定ではメインビジュアルもCMSから変更可能な仕組みとする方向でしたが、現状のStudioではCMSの読み込みが遅く、画像の表示が遅れてしまうためこの仕組みとしております。

4.Freeプランでも公開可能

当テンプレートはStudioのFreeプランでも公開可能なので、一度テンプレートを購入頂ければそれ以降の月額を気にせずご利用いただけます。

なお、Freeプランの場合は画面左下にStudioのバナー画像が入ってしまいます。
また、独自ドメインを使用したい場合や、CMSの投稿数が多くなってくると有料プランへの変更が必要になってまいりますのでご検討いただければと思います。

→Studioの料金プランはこちらをご覧ください

テンプレート変更手順

ではここから、テンプレートの具体的な変更方法について順番に解説していきます。
必ずこの通りにする必要はございませんが、おすすめの手順として参考にしてください。

1.WORKSを投稿

まずは、CMSのWORKSより「＋新規追加」をクリックいただき、設計事例などの投稿をしてください。

タイトルの入力

事例として掲載したいプロジェクト名などのタイトルを入れてください。

本文の入力

＋ボタンを押して、画像や文章の入力が可能です。

なお、画像や文章などを入力した後に、位置や順番の変更などが現状のStudioではやや行いづらいです（※当記事の執筆時点2026年1月）。
そのため、特に画像などは掲載順を決めたうえで投稿されるのがおすすめです。

文章の入力やリスト、表なども自由に入力可能です。
なお、文章内に入れるタイトルは必ず「H2 見出し2」から使用してください。

プロパティの入力

「Slug」は記事のURLとなります。未入力のままでも大丈夫ですが、変更されたい場合は入力してください。

「Cover」はこのページの顔となる重要な画像です。WORKS詳細ページのメインビジュアルやWORKS一覧で表示される画像となります。

「完成時期」や「竣工場所」は自由にテキストを入力可能です。入れる情報に悩む場合は、他サンプルページを参考にしてください。

完了後は公開ボタンをクリック

完了後は右上の「公開」ボタンを押して公開してください。
また、公開後に内容を変更した場合は「更新」ボタンに変わりますので、変更後は必ず押してください。

2.NEWSを投稿

NEWSはあとでも大丈夫なのですが、このままCMSの流れでご説明いたします。
※「WEBサイトをリニューアルしました」などのダミーでも結構です。

CMSのNEWSより「＋新規追加」をクリックしてください。

タイトルの入力

ニュースのタイトルを入れてください。

本文の入力

＋ボタンを押して、画像や文章などの入力が可能です。

本文内で各項目にタイトルを入力したい場合は、H2見出しから利用してください。「H2見出し＋本文」の本文内にさらに小見出しを付けたい場合は次のH3を利用してください。

プロパティの入力

「Slug」は記事のURLとなります。未入力のままでも大丈夫ですが、変更されたい場合は入力してください。

「Cover」はこの記事ページの顔となります。アップロードする画像がない場合は未入力でもかまいません。NEWS一覧などのサムネイル画像ではロゴが入ったダミー画像が表示されます。

「NEWSタグ」は「news（通常ニュース）・event（イベント情報）・media（メディア掲載）」の3つを設定していますので、ニュースのタイプに応じて入れてください。

なお、mediaを選択した場合はABOUTページの下部「MEDIA」欄にも自動で表示されるようになります↓

もしカテゴリを追加・変更したい場合はCMSページの「NEWS（カテゴリ）」より変更可能です↓（mediaのみ変更しないでください）

完了後は公開ボタンをクリック

完了後は右上の「公開」ボタンを押して公開してください。
また、公開後に内容を変更した場合は「更新」ボタンに変わりますので、変更後は必ず押してください。

3.トップページメインビジュアル右下のPRを設定

こちらはPRしたいものがない場合は設定不要ですが、設定方法のみご紹介しておきます。

CMSのコレクションに「トップページPR(1件まで)」がございますので、その中の「＋アイテムを追加」より、投稿したNEWSの記事を選択のうえ追加してください。

※こちらは1件のみ追加するようにしてください。また、ここに追加する場合は、必ず画像を入れたニュース情報としてください。

なお、公開後に情報を変更した場合は必ず右上の「変更あり → 更新する」ボタンを押してサイトに反映するようにしてください↓

不要な場合は✕ボタンを押して削除いただくことで、トップページでも非表示となります↓

4.サイト情報を入力

ここからはCMSではなく「デザインエディタ」での作業となります。

デザインエディタを開くと、右側に「ページ」と「サイト」というタブがございますので、サイトの方を開き、サイトタイトルと説明文を入力してください。

※補足：このタイトル＋説明文は、主にGoogleで検索した際に検索一覧で表示される際のタイトル＋説明文になります。

こちらは、もしページごとにタイトルや説明文を変更したい場合は、「ページ」の方を開いてタイトル＋説明文を入力いただくことも可能です。
その場合は、左側のアイコンから「ページ」をクリックし、変更したいページを選択のうえ設定してください。

その他、ソーシャルカバーとファビコンもアップロードしてください。なお、それぞれの詳しい説明は？マークをクリックいただくことで確認可能です↓

5.メインビジュアルを設定

メインビジュアルの設定を行います。
まずはトップページの設定画面を表示した状態にしてください。

もし表示されていない場合は、「ページアイコン」→「HOME｜トップページ」をクリックして表示してください↓

データを表示

続いて「レイヤーアイコン」をクリックし、「メイン → メインビジュアルエリア → メインビジュアル」の"メインビジュアル"を選択した状態で、右側の「データ」をクリックしてください。

画像をアップロード

すると、画像データが入った表（リスト）が表示されます。

変更したい画像をクリックし、左側の「画像をアップロード」より画像アップロードのうえ変更してください。

メインビジュアルの設定について

メインビジュアルの画像は必ず2枚以上設定するようにしてください。
最大枚数の決まりはありませんが、画像が多いとそれだけ読み込みに時間がかかってしまいますので7枚程度までがおすすめです。

なお、上から順にメインビジュアルが表示されると分かりやすいのですが、Studioスライドの仕様上、表の4番目からスタートされる形となっております。4→5→6→1→2→3→4...

画像の左側にマウスカーソルを当ててクリックしたままにすると、上下に順番が変更できるようになりますのでそちらで調整するようにしてください↓

必要がなくなった画像はゴミ箱マークで削除することもできます。

6.ロゴ画像を設定

ロゴ画像を設定します。
レイヤーから「ヘッダー → ヘッダーパーツ」の”ヘッダーパーツ”をダブルクリックしてください。

続いて表示されたレイヤー画面から「ロゴ → ロゴ画像」の”ロゴ画像”をダブルクリックしてください。

続いて表示されたレイヤー画面から「画像」をクリックしてください。

↑すると右側に「画像」項目が表示されますので、クリックし、ロゴ画像をアップロードのうえ変更してください。

ご用意いただくロゴ画像データについて

なお、ロゴ画像は背景を透明とし、ロゴ色は必ず「白色」としてください。
データ形式はPNG・WebP・SVGデータがおすすめです。（JPGは背景を透明にできませんので不可）

代替テキストの変更

合わせて、代替テキストのロゴ名称も変更してください。

ロゴ画像サイズ変更について

ロゴ画像のサイズ変更を行いたい場合は、画面左側の「ボックス」を選択すると幅の変更画面が表示されますので、そちらで変更可能です。

7.各ページの内容を変更

ここからは各ページ内で掲載している情報を変更していきます。
まずは変更したいページを開き↓

次にレイヤーアイコンをクリックして編集画面を開きます↓

画面の中央にはレイアウトされたWEBページが表示されますので、変更したい要素（文字・画像・リンク）を何度かダブルクリックします。

※またはレイヤーから直接選択しても大丈夫です。

すると、画面右側に「テキスト」「画像」「データ」の3つのタイプ別に情報が表示されるようになりますので、その内容を変更していきます。

1.テキスト

テキストという入力エリアが表示されますので、内容を書き換えると反映されます。

2.画像

画像という入力エリアが表示されますので、内容を書き換えると反映されます。

3.データ

データという形式が表示されますので、各内容を変更することで反映されます。

なお、データは「表形式」「単発形式」の2タイプに分かれています。

表形式は、主に「同一エリアで同じものが連続で繰り返されているパーツ」で使用されており、単発形式は「テキストを変えながら複数ページで使い回すデザインパーツ」で使用されております。

どちらも性質が異なるので分かりづらいかもしれませんが、画像で表現すると以下のようなイメージです↓

表形式の操作で注意したいこと

表形式の編集をしていると、クリックした先に「1. テキスト」の入力エリアに入り込むことがあります。青い文字で情報が入っている状態です。

これは「データ」の情報が入っておりますので編集は行わないで、次の画像のように、情報の「スキマ」をダブルクリックし、その状態で右側の「データ」をクリックするようにしてください。

または、左側のレイヤーからグループトップのレイヤーを選択する形でもデータが表示されます↓

WorksとNews関連は編集必要なし

なお、WorksとNews関連のサムネイル画像はCMSと連動して表示されておりますので、こちらは編集の必要はございません。
具体的には以下画像のエリアです↓

必要がないブロックは削除も可能

その他、必要がないブロックがあれば、そのエリアを選択し、deleteキーで消去することも可能です。

8.サイトを公開

テンプレートの内容がすべて変更されましたら、画面右上の「公開」ボタンより公開が可能です。

なお、公開の流れとしては以下Studioのサイトで詳しく解説されておりますので、引き続き参考にしてみてください。

→ ドメインを決めてサイトを公開する

マニュアルは以上となります。

当テンプレートについてのご不明点などございましたら当ショップページの「メッセージを送信」よりご連絡ください。

早めの返信を心がけておりますが、お時間がかかる場合もございますので、何卒ご理解いただければと思います。