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

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

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

このテンプレートの主な特徴

まずは当テンプレートでご用意している主な特徴についてご紹介します。

1.画像エリアはロゴ・アイコン・画面キャプチャだけでほぼ完成

画像エリアは、スマホアプリのロゴ・アイコン・画面キャプチャをベースに構成していますので、新たに画像を制作する手間を最小限に抑え、スムーズに紹介サイトを作成できます。

2.どんなアプリにも使いやすいデザイン

さまざまなジャンルのアプリに対応しやすいよう、テンプレートのデザインはできるだけシンプルに設計しました。紹介内容も偏りのない構成とし、アプリ紹介に必要な情報を分かりやすく掲載できます。

3.アプリカラーに一発変更

サイト全体のキーとなるカラーは、設定を1か所変更するだけで全ページに反映されます。アプリのブランドカラーに合わせて、簡単にデザインを変更できます。

また、カラーの上に文字が載っている箇所では、カラーの強弱の影響で文字が見えづらい場合に備え、調整用のカラー設定もご用意しております。

4.お知らせ・コラムをCMSで更新可能

アプリの最新情報や活用方法を発信できる「お知らせ」と「コラム」をCMSでご用意しています。

記事公開日は記事ごとに表示・非表示を切り替えられるため、更新頻度が少なくなったあとも、サイトの運用スタイルに合わせて柔軟に設定できます。

5.Freeプランから利用可能

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

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

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

テンプレート変更方法

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

1. 各コンポーネントの編集

2. カラーの設定

3. メインビジュアルの設定

4. 使い方は簡単3ステップ箇所について

5. よくある質問について

6. ご利用者の声について

7. 必要がないコンテンツについて

8. トップページ以外のページ編集について

9. お知らせ・コラムCMSの編集について

10. サイト情報を入力

11. サイトを公開

各コンポーネントの編集

まずは基本設定となる以下のコンポーネントを編集します。

• ロゴ

• アプリアイコン

• iOSリンク

• Androidリンク

• iOS QRコード

• Android QRコード

• ループボックス

• CTA

おすすめの変更方法として、まずはトップページ最下部のフッターを選択し↓

コンポーネント一覧から以下の順番に各コンポーネントをすべて配置してください↓

• ロゴ

• アプリアイコン

• iOSリンク

• Androidリンク

• iOS QRコード

• Android QRコード

• ループボックス

• CTA

そのうえで、各コンポーネントをダブルクリックし、内包されている要素を変更していく流れです。

ロゴの設定

ロゴコンポーネントをダブルクリックするとロゴ画像の設定画面が表示されますので、「ロゴ画像」を選択した状態で、画面右側の画像エリアより、画像を変更してください。

ロゴ画像は必ず「白色＋背景透明」としてください。テンプレート上では色を反転して表示しております。

データはSVGまたはPNGデータとし、PNGの場合は横サイズ1,000px以上がおすすめです。

こちらのデータを変更いただければ、ヘッダーのロゴはもちろん、以下で使用しているロゴも自動的に変更されます。

▼コラムの画像投稿なしの場合の背景

アプリアイコンの設定

同じように、アプリコンポーネントをダブルクリックで開き、表示された「画像」を選択したうえで、右側の画像からアプリアイコン画像を変更してください。

アプリアイコンは正方形でご用意ください。角丸は自動で適用されますので加工いただく必要はございません。

データはSVGまたはPNGデータとし、PNGの場合は縦横サイズ1,000px以上がおすすめです。

iOSとAndroidのダウンロードリンク

iOSリンク、またはAndroidリンクのコンポーネントをダブルクリックして開いた状態で、画面右の「設定」タブを開き、リンクを入れてください。

リンクには、iOSダウンロードページ、Androidアプリダウンロードページの各URLを入れてください。

各QRコード

QRコードコンポーネントの「QRコード画像」を選択し、それぞれiOS・Androidダウンロードページ用のQRコード画像を入れてください。

QRコードは、当サイトをパソコンで閲覧中のユーザーのために、スマホに簡単にインストールいただくために配置しております。（タブレット・スマホビューでは表示されません）

なお、QRコードは「QRのススメ」などを利用のうえ、作成したアプリページのQRコードを作成のうえ配置してください。

https://qr.quel.jp/

ループボックス

ループボックスコンポーネントにもロゴ画像を設定してください。※ループボックスはロゴ画像が横に流れるアニメーションです。

ロゴ画像と同じく「白色＋背景透明」としてご用意ください。

SVGデータがおすすめですが、PNGデータの場合は画像が小さいとボケてしまうため、ボケない程度の画像サイズがおすすめです。

CTA

CTAコンポーネントを編集してください。
※CTAとは（コール・トゥ・アクション）の略で行動を促進するためのエリアです。

各要素は何度かダブルクリックしていくと編集ができるようになりますので、コピーなどの文章と、スマホの画像イメージを変更してください。

コンポーネントの編集箇所は以上となります。

編集が完了しましたら、自動で各パーツに反映されておりますので、フッターの下に配置した各コンポーネントは削除してください。

カラーの設定

続いて、カラーの設定を行います。

画面左の「スタイル」を開くと、「メインカラー」と記載のある箇所がありますので、そこをクリックしてアプリカラーなどに変更してください。

なお、メインカラーはメインビジュアルなど、文字が載っている箇所でも使用しております。

カラーを設定いただいたあとにテンプレートをご確認いただき、カラーが強すぎて文字が見えづらい場合、「メインカラー」の下に「メインカラー調整用」のスタイルがございますので、透明度などを変更のうえ調整してください。

メインカラー調整用は白色で作成しておりますので、黒など他の色に調整いただくことも可能です。

基本設定は以上となります。

続いては各パーツの調整に入りますが、基本的にはパーツを何度かダブルクリックいただくことで編集可能となりますので、主に補足項目のみ解説してまいります。

メインビジュアルの設定

メインビジュアルのスマホ画像エリアの編集について解説します。
現状は以下のデザインで構成されております↓

それぞれの編集箇所は、まずは以下を開いて頂き

それ以降はそれぞれ以下に格納されておりますので、それぞれの変更方法を解説します。

▼左ボックス

左ボックス → 紹介ブロック → ブロック

▼スマホ

スマホ → 画像読込み

▼右ボックス

右ボックス → 紹介ブロック → ブロック

左右ボックスについて

左右ボックスの画像アイコンはアイコンではなく「画像」で配置されております。

現状のStudioでは「アイコンパーツ」を直接%指定することができないため、拡大縮小するとボックスをはみ出てしまうため、面倒ではございますがこの形としております。

以下サイトより、希望のアイコンをダウンロードのうえ配置してください。

▼Material Symbols and Icons
https://fonts.google.com/icons

なお、この「左右ボックス」はアイコンと文字を消して別の要素を入れることも可能です。
ただし、左右ボックスはスマホ以下では表示されない仕様のため、それでも問題ないレベルの情報とされることをおすすめします。

スマホ画面の画像について

こちらは「スマホ→画像読込み」を選択いただいたうえで、画面右側のデータタブを開いていただき、表示された表から各画像の変更をお願いします。

こちらの画像は増やすことも減らすことも可能です。

使い方のステップ紹介について

「左側のリンクエリア」と「右側の解説エリア」はページ内スクロールで連携されております。

ただし、解説エリアを追加すると自動で左側にリンクが表示されるわけではございませんので、解説エリアを追加した際は、以下の流れでリンクも追加するようにしてください↓

よくある質問について

「よくある質問」はデータで管理されておりますので、以下の「リスト一覧」を選択したあと、画面右のデータタブ→表から編集してください。

メインコンテンツ → コンテンツエリア → よくある質問 → リスト一覧

ご利用者の声について

「ご利用者の声」も同じくデータで管理されておりますので、以下の「ボックス一覧」を選択したあと、画面右のデータタブ→表から編集してください。

メインコンテンツ → コンテンツエリア → ご利用者の声 → ボックス一覧

必要がないコンテンツについて

必要がないコンテンツやブロックはそのエリアごと選択のうえ削除してください。

なお、その際、「ヘッダー」と「メニューモーダル」にもページ内スクロールリンクがございますので、該当箇所も削除するようにしてください。

トップページ以外のページ編集について

トップページ以外で編集の必要がある箇所はそれほど多くありませんが、以下の箇所となります。

お知らせ・コラム個別ページ

画面右側に表示される「アプリをダウンロード」のエリアと、記事内のSNSボタンを変更・編集してください。

メインコンテンツ → コンテンツ → DL促進エリア → ボックス → 内容

メインコンテンツ → コンテンツ → 記事コンテンツ → SNS

お問い合わせページ関連

お問い合わせページは最低限そのままご利用いただける形でご用意しておりますが、お問い合わせ完了ページも含めて、必要に応じて内容を編集してください。

プライバシーポリシーと利用規約ページ

こちらはダミーで内容が入っております。必要に応じて編集してください。

お知らせ・コラムCMSの編集について

お知らせ・コラムCMSはダミーで色々とコンテンツを入れておりますので参考にしてください。

また、テキストのスタイル確認用に「テキスト確認用ページ」もご用意しておりますので、こちらも合わせて参考にしてみてください。

カテゴリは現状、ニュースとコラムの2つを設置しておりますが、希望に応じて増やすことも可能です↓

また、日付の表示・非表示も各記事ごとに可能となっておりますので、必要に応じてご活用ください。

記事で使用するアイキャッチ画像サイズについて

CMSの記事で使用する画像サイズは「1500×1000px」を基準としております。

そのため、サムネイルピッタリの画像を作りたい場合はそのサイズ（もしくは比率）としてください。

サイト情報を入力

サイトのタイトルや説明文を入力します。

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

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

こちらは、もしページごとにタイトルや説明文を変更したい場合は、「ページ」の方を開いて、各ページごとにタイトル＋説明文を入力いただくことも可能です。

その他、ソーシャルカバーとファビコンもアップロードしてください。

ソーシャルカバーのサイズは「1200 × 630px」、ファビコンのサイズは決まりはありませんが、正方形でご用意ください。当サイトでは500pxで作成しております。

サイトを公開

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

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

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

マニュアルは以上となります。
最後までご覧いただき、ありがとうございました。

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

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

このテンプレートが、皆さまの素敵なアプリサイトづくりのお役に立てれば幸いです。