2023/11/7
［ 初回公開日：
］
STUDIOのテンプレートの使い方と公開までの流れ
こんにちは、IT+ デザイナーの溝口です。
2023年3月末 ハイクオリティなSTUDIOのデザインテンプレートを売買できる「STUDIO Store」がオープンしました！
弊社もいくつかテンプレートを制作させていただいたので、今回はSTUDIOのテンプレートの使い方と公開までの流れについてご紹介したいと思います。
STUDIOを使ってみたいけど、デザインを一から作るのが難しい、、といった方でもテンプレートを使えば画像やテキストを変更するだけで簡単にWebサイトが出来上がるので、気になる方はぜひこの機会に試してみてください。
- 1.テンプレートとは
- 2.STUDIOのテンプレートの種類
- 無料テンプレート
- 有料テンプレート
- 3.テンプレートはこんな方におすすめ
- 4.テンプレートを使うメリット
- プロのデザイナーが作っているからオシャレでハイクオリティ
- 簡単に安価にスピーディーにWebサイトが作れる
- 幅広い業種・ジャンルに対応している
- 便利なCMSで運用がしやすい
- 5.テンプレートを使用して公開するまでの流れ
- 6.弊社制作テンプレートのご紹介
- マーケティング・コンサルティング会社向けコーポレートサイトテンプレート：THEマーケティングカンパニー
- 創作和食居酒屋向け飲食店テンプレート：創作和食居酒屋 渋三一
- 小規模クリニック向けテンプレート：紬クリニック
- 7.自分でカスタマイズする方法
- カラー変更
- フォント変更
- レイアウト変更
- 8.制作会社に依頼した方がいい場合
- 8.まとめ
- 9.関連記事
1.テンプレートとは
コーポレートサイトやサービスサイト、飲食店など幅広い業種やジャンルに合わせて、Webサイトとして必要なページや情報がサンプルの状態で全て揃ったものです。
自身の作りたいサイトのイメージに近いテンプレートを購入、もしくは無料のものから始めることで、画像やテキストを変更するだけですぐにハイクオリティなWebサイトを作ることができます。
しかも、サイトのプレビューだけでなく、実際のエディタも見ることができるので、とても便利！
2.STUDIOのテンプレートの種類
テンプレートには以前からあった無料のテンプレートと今回新たに追加された有料のテンプレートの2種類があります。
無料テンプレート
プロフェッショナルがデザインした、ビジネスや飲食店向けなど、幅広い業種やジャンルに対応した20種類のテンプレート。（2023年4月現在）
有料テンプレート
プロフェッショナルがデザインした、ビジネスや飲食店向けなど、幅広い業種やジャンルに対応したこだわりが詰まった美しい23種類のテンプレート。（2023年4月現在）
よりハイクオリティで各業種や媒体に特化したテンプレートが今後もどんどん増えていくでしょう。
3.テンプレートはこんな方におすすめ
STUDIOを使いたいけど、レイアウトを一から作るのにハードルを感じている人
とにかく早く簡単にWebサイトが欲しい人
コストをかけずにオシャレなWebサイトが欲しい人
とにかくハイクオリティでめちゃくちゃ便利なSTUDIOのテンプレート。
STUDIO Storeがオープンしたことで、対応している業種や見た目のバラエティの幅も広がっています。
制作会社に依頼する予算が今はない、、、という場合も、まずはテンプレートから始めてみて、次のフェーズでオリジナルのデザインを検討してみる。というのもおすすめです。
4.テンプレートを使うメリット
プロのデザイナーが作っているからオシャレでハイクオリティ
審査を通ったプロのデザイナー、テンプレートしか販売されないため、とにかくオシャレでハイクオリティなテンプレートが多いです。
必要なページや構成もしっかり組まれているので、必要な情報でシンプルにサイトを作る分には申し分ないのではないでしょうか。
簡単に安価にスピーディーにWebサイトが作れる
最初から必要なものが全て揃っているため、画像やテキストを変更するだけで簡単にスピーディーにWebサイトが完成します。
しかも安価！一番安価なものは4,980円というこんなに安くていいのかな、という驚くような価格帯でとても素敵なテンプレートが販売されているので、制作会社に依頼をする予算がない場合にはとても重宝されること間違いなしです。
※無料のテンプレートもあります。
幅広い業種・ジャンルに対応している
有料のテンプレートが増えたことで、コーポレートサイトやポートフォリオだけでなく、ヘルスケア、製造、美容院、クリニックなどなど、幅広い業種・ジャンルに対応したテンプレートが出てきています。
もちろん、それぞれの業種・ジャンルに必要なページや情報が組み込まれているので、どれか一つはお目当てのものが見つかるのではないでしょうか。
便利なCMSで運用がしやすい
STUDIOのとてもいい点の一つが直感的に使いやすいCMSです。
お知らせやブログといった日々運用更新が必要なものや、テンプレートによってはサービスページなど、専門的な知識がなくても直感的に追加や変更を行うことができます。
テンプレートに組み込まれているCMSはもちろん、ページの中でも追加や変更などがありそうなものはリスト機能といった簡単に追加・変更ができる形で作られているものが多いはずなので、とても便利です。
5.テンプレートを使用して公開するまでの流れ
1.サイトの目的・必要な情報をまとめる
まずはサイトを作る目的を決定し、それを伝えるために必要な情報をまとめましょう。
2.1に合ったテンプレートを購入or無料のテンプレートから始める
STUDIOの管理画面右上にある「+新しいプロジェクト」もしくは、「STUDIO Store」から1で決めた情報が反映できるテンプレートを、有料もしくは無料の中から選択しましょう。
（有料のテンプレートの場合は購入が必須です。）
プレビューや実際のエディタで試すこともできるのでとても便利。
ビジネスやクリニック、カフェ・レストランなど、業種やジャンルで選ぶことがほとんどかとは思いますが、もしかしたら、他の業種やジャンルのテンプレートでもカラーや画像を変更するだけで入れたい情報を反映できるテンプレートもあるかもしれません。
作りたいサイトに合ったテンプレートを選ぶようにしましょう。
※STUDIOでレイアウトをある程度組めるスキルがあれば、大体カバーできるかもしれませんが。。
3.画像・テキストの素材を準備する
テンプレートに入っている情報は全てサンプルのため、テンプレート決定後は反映させる画像やテキストを準備します。
撮影が必要な場合は適宜撮影。
今は安価でクオリティの高い有料画像素材サイトもあるので、そちらで揃えるのもよいかと思います。
4.素材を反映する
3で揃えた素材を反映していきます。
この際に便利なのが「コンテンツ編集モード」という機能です。
デザインを変更している内に知らず知らずの内に変なところを触ってしまい、気づいたらレイアウトが崩れてしまっていた。。ということもあるかもしれないため、このモードにしておくと画像と文字の編集以外はできなくなるため安心です。
5.サイトを完成させる
4の工程が完了すれば、ほとんどサイトは完成です。
あとは公開に向けた細かい設定へと入っていきます。
6.タイトル・説明文を設定する
Googleなどで検索した際に検索結果ページに表示されるタイトル（28文字以内）とその説明文（120文字以内）を「デザインエディタ ＞ ページ設定（右上）」より設定します。
7.ファビコン・カバー画像（OGP）を設定する
ファビコンはブラウザのタブに表示されるアイコン画像でSTUDIOでは32 × 32pxが推奨サイズです。
カバー画像（OGP）はSNSなどでシェアした際に表示される画像で1200 × 630pxが推奨サイズです。
どちらも「デザインエディタ ＞ ページ設定（右上）」より設定します。
※設定箇所は上記6と同じです。
8.プランの契約・STUDIO広告バナーを非表示にする
「管理画面 ＞ プラン&お支払い」より契約するプランを選択して決済を行います。
また、左下に表示されるSTUDIOのバナーを「管理画面 ＞ ホーム ＞ Apps ＞ STUDIO Banner」より非表示にして保存します。
9.DNS設定・GA設定・公開！
サイトの公開日を決めたあとは公開日に合わせてGoogle Analyticsやドメイン、DNSの設定を行います。
下記がSTUDIOの場合の詳細設定となっております。
また、ホームページとメールを同一のレンタルサーバーで運用していたものを、ホームページだけSTUDIOにてリニューアルを行い、メールはそのまま元のサーバーを利用するケースの場合は下記記事を参考にしてください。
他にも、サーチコンソール（Search Console）を使用することで自分のサイトがGoogle検索でどのように表示され、どのように機能しているかを把握し、最適化することができます。
※サーチコンソール（Search Console）はGoogleが無料で提供している、Webサイトの「Google検索上での健康状態」を診断・管理するためのツールです。
10.運用
公開後は運用フェーズです。
お知らせやブログなどサイトの目的に合わせて運用をしていきましょう。
6.弊社制作テンプレートのご紹介
STUDIO Storeのオープンに伴い、弊社でも下記のテンプレートを制作させていただきました。
マーケティング・コンサルティング会社向けコーポレートサイトテンプレート：THEマーケティングカンパニー
知的で洗練された印象を与えることのできるマーケティングやコンサルティング会社向けのコーポレートサイトのテンプレートです。
（背景画像・背景色を変更することで好きなテイストにカスタマイズも可能）
サービス内容や画像・テキストを変えるだけで、すぐに洗練されたコーポレートサイトを作成することができます。
創作和食居酒屋向け飲食店テンプレート：創作和食居酒屋 渋三一
和のテイストとシンプルな構成によって、洗練された印象を与えることのできる創作和食居酒屋やこだわりのレストランバーなどにぴったりな飲食店向けのテンプレートです。
（メニューやお店の情報部分の背景画像・背景色を変更することで好きなテイストにカスタマイズも可能）
あなたのお店の情報や画像に変えるだけで、すぐに魅力的なお店のWebサイトを作成することができます。
お品書きや店舗情報はリスト機能で簡単に追加変更、お知らせはCMS機能で簡単に追加・変更ができるのでオススメです。
小規模クリニック向けテンプレート：紬クリニック
優しく上品で洗練されたテイストとシンプルな構成によって、小規模クリニックや美容系クリニックなどにぴったりのテンプレートです。
（ボタンや背景の色を変更することで好きなテイストにカスタマイズも可能）
あなたのクリニックの情報や画像に変えるだけで、すぐに魅力的なWebサイトを作成することができます。
一目で分かる診療時間。診療メニューやお知らせはCMSで簡単に追加・変更ができるのでオススメです。
7.自分でカスタマイズする方法
最後にテンプレートのカスタマイズについてです。
テンプレートをそのまま使う人が多いとは思いますが、もちろんカスタマイズを行うことも可能です。
簡単なのはカラーとフォント変更です。
カラー変更
テンプレートはそれぞれのトーンに合わせて統一されたカラーで作られているはずなので、
それぞれの箇所を選択し、カラー数値を変更することで自分好みのカラーに変更することが可能です。
フォント変更
カラーと同様フォントも決められたテンプレートのトーンに合わせて設定されていますが、新しいフォントを追加し、それぞれのフォントを一括で変更することが可能です。
もしフォントを変えたい場合は試してみてもいいでしょう。
ただ、フォントが入り過ぎるとサイトスピードが落ちる原因にもなりますので、フォントは絞ることをオススメします。
レイアウト変更
変更のハードルが高いのがこちら。
単純に一つの要素をコピペして増やしたり、何かを削除したりするのは簡単ですが、新しいレイアウトの要素を追加したりするのはそれなりの学習コストがかかります。
もし変更する場合はページを複製して、そちらで試してみることをオススメします。
STUDIOの使い方を学ぶにはSTUDIOの動画チュートリアルがとても分かりやすいのでこちらで勉強して、自分なりにカスタマイズをしてみるのもいいかもしれません。
8.制作会社に依頼した方がいい場合
テンプレートを使うことは非常に便利でメリットも大きいですが、下記のような場合は制作会社に依頼した方がいいかと思っています。
見た目も構成ももっとこだわったものにしたい
完全オリジナルで制作したい
テンプレートは使うが、新規ページや新しいCMSのフォーマットを入れたい
などなど。
もしオリジナルで制作が必要な場合は弊社でもSTUDIOによるWebサイト制作を行なっておりますので、お気軽にご連絡ください。
8.まとめ
いかがでしたでしょうか？
STUDIOのテンプレートはとても便利なので、気になる方はぜひ一度試してみてもらえればと思っております。
それでは最後までお読みいただき、ありがとうございました。
9.関連記事
この記事を書いた人
