テンプレート機能で簡単ホームページ作成!
「ホームページを作りたいけれど、HTMLやデザインの知識がなくて不安…」そんな方にぴったりなのが、すぐサイトのテンプレート機能です。あらかじめ用意されたデザインに、お店の情報やメニュー、写真を入れていくだけで、誰でも数分でプロ品質のホームページを公開できます。本記事では、飲食店テンプレートを例に、実際の操作手順を画面ごとに詳しく解説します。
1. テンプレート機能とは?
すぐサイトのテンプレート機能は、HTMLコードを1行も書かずにホームページを作成できる仕組みです。プロのデザイナーがあらかじめ用意したレイアウトに、お店の情報や写真を入力していくだけで、見栄えの良いサイトが完成します。
ブロック単位で編集できるエディター方式
ホームページは「メインビジュアル」「メニュー」「店舗情報」などのブロック(セクション)で構成されており、各ブロックをフォーム感覚で編集できます。文字を打ち込んだり、画像をドラッグ&ドロップでアップロードするだけなので、スマートフォンやパソコンに慣れた方なら誰でも操作できます。
現在利用可能なテンプレート
- 飲食店テンプレート:レストラン・カフェ・居酒屋などに最適なデザイン(本記事で詳しく紹介)
- ポートフォリオテンプレート:近日公開予定
こんな方におすすめ
・ホームページを作りたいけれどHTMLがわからない
・業者に依頼すると費用が高い
・とにかく早く公開したい
・きれいなデザインで安心したい
2. 飲食店テンプレートでできること
飲食店テンプレートは、レストラン・カフェ・居酒屋などの店舗サイトに必要な要素を網羅したテンプレートです。シンプルで洗練されたデザインで、お店の魅力を引き立てます。
主な編集機能
- スプラッシュ画面:サイトを開いた瞬間に表示されるおしゃれなオープニング画面(ON/OFF切替可能)
- メインビジュアル:店舗名、キャッチフレーズ、背景画像を自由に設定
- 店舗紹介:お店のコンセプトや歴史を紹介する文章と画像
- お知らせ:季節のイベントや休業情報などを掲載
- メニュー管理:カテゴリや商品を自由に追加・削除・並び替え、画像と価格も登録可能
- 営業時間:曜日ごとの営業時間、定休日
- アクセス:住所、最寄り駅、駐車場情報、地図の埋め込み
- 支払い方法:現金・クレジットカード・電子マネーなどの対応状況
- 連絡先:電話番号、メールアドレス
- ヘッダー・フッター:ロゴ、ナビゲーション、SNSリンクのカスタマイズ
さらに、スマートフォン・タブレット・パソコンのどの画面サイズでも自動で最適なレイアウトに調整されるレスポンシブ対応も標準装備です。
3. STEP1:サイト作成方式を選ぶ
それでは、実際にテンプレートを使ってホームページを作ってみましょう。まずはすぐサイトにログインし、管理画面トップから「新規サイト作成」ボタンをクリックします。
次に表示される画面で、サイトの作成方式を選びます。「テンプレートから作成」を選びましょう。
標準方式とテンプレート方式の違い
標準方式は、自分で作成したHTMLファイルをアップロードする方式。テンプレート方式は、用意されたテンプレートを編集するだけでOK。HTMLを書いたことがなければ、テンプレート方式を選びましょう。
4. STEP2:飲食店テンプレートを選ぶ
次の画面で、利用可能なテンプレートの一覧が表示されます。各テンプレートのサムネイル画像をクリックすると、デザインのプレビューが確認できます。
ここでは飲食店テンプレートを選択してください。
テンプレートは後から変更することはできませんが、各セクションのデザインや内容は自由に編集できるため、幅広い業態の飲食店に対応できます。
5. STEP3:サイトURL・概要を入力する
テンプレートを選んだら、サイトURL(サブドメイン)とサイト概要を入力します。
サブドメインの決め方
サブドメインは、サイトのURLの一部になります。たとえば「my-cafe」と入力すると、サイトのURLは https://my-cafe.mysugusite.com となります。お店の名前や覚えやすい英単語を使うのがおすすめです。
- 半角英数字とハイフンが使用可能
- 他のユーザーと重複するサブドメインは使えません(入力時に自動チェック)
- 後から独自ドメイン(例:
my-cafe.com)への切り替えも可能
「作成する」ボタンを押すとサイトが作成され、エディター画面に自動で移動します。
6. STEP4:エディターで各セクションを編集する
いよいよ実際の編集作業です。エディター画面では、画面左側に編集対象のセクション一覧が並び、選んだセクションの編集フォームが中央に表示されます。右側にはリアルタイムプレビューが表示されるので、編集結果をすぐに確認できます。
編集できるセクション一覧
スプラッシュ画面
サイトを開いた瞬間に表示される演出画面(ON/OFF切替可能)
メインビジュアル
サイトを開いたときに一番最初に目に入る、トップの大きな画像エリア
店舗紹介
お店のコンセプトや特徴を伝える紹介文と画像
お知らせ
イベントや休業情報などの告知
メニュー
料理・ドリンクなどをカテゴリ別に掲載
営業時間
曜日ごとの営業時間、定休日
アクセス
住所、最寄り駅、駐車場情報、地図埋め込み
支払い方法
現金、クレジットカード、電子マネーなどの対応
連絡先
電話番号、メールアドレス
ヘッダー / フッター
ロゴ、ナビゲーション、SNSリンク、著作権表記
メインビジュアルの編集手順
まずは一番目立つメインビジュアルから編集しましょう。
- 左側メニューから「メインビジュアル」を選択
- 「店舗名」にお店の名前を入力(例:「Cafe Solstice」)
- 「キャッチフレーズ」にお店のコンセプトを短く入力(例:「季節の素材で、ひとつひとつ丁寧に。」)
- 背景画像の「画像をアップロード」ボタンをクリックし、お店の外観や料理の写真を選択
- 必要に応じて「ロゴ画像」に切り替え、ロゴ画像をアップロード
メニューの編集手順
メニューはお店の顔とも言える大事な要素です。カテゴリと商品を自由に追加できます。
- 左側メニューから「メニュー」を選択
- 「+カテゴリを追加」ボタンを押し、「フード」「ドリンク」「デザート」など好きなカテゴリ名を入力
- カテゴリ内の「+メニューを追加」ボタンを押し、商品名・説明・価格を入力
- 「画像をアップロード」ボタンから料理写真をアップロード
- 「↑↓ボタン」で表示順を並び替え、不要なメニューは「削除」で消去
- カテゴリごとに同じ操作を繰り返してメニュー一覧を完成させる
メニュー画像のコツ
料理写真は明るい場所で撮影し、真上または斜め45度から撮ると美しく見えます。スマートフォンで撮った写真でも十分使えますので、まずは手軽にはじめてみましょう。
店舗情報(営業時間・アクセス・連絡先・支払い方法)の編集
お客様がお店を訪れるために必要な情報を入力します。
- 営業時間:曜日ごとの営業時間と定休日を入力
- アクセス:住所、最寄り駅からの徒歩時間、駐車場の有無を入力。Googleマップの埋め込みURLを貼り付けると地図も表示されます
- 連絡先:電話番号とメールアドレスを入力
- 支払い方法:対応している支払い方法(現金/クレジットカード/電子マネー/QR決済)にチェック
ヘッダー・フッターの編集
ナビゲーションバーやフッターに表示されるロゴ・SNSリンク・著作権表記を編集します。Instagram、Facebook、X(旧Twitter)などのSNSアカウントを持っている場合は、URLを設定しておくとお客様との接点が広がります。
保存と公開
編集内容はエディター右側のプレビューエリアにリアルタイムで反映されます。問題なければ画面右上の「保存」ボタンを押して完了です。STEP3で設定したサブドメイン(例:https://my-cafe.mysugusite.com)にアクセスすると、作成したホームページが世界に公開されています。
7. テンプレート機能を使うメリットとまとめ
いかがでしたか? すぐサイトのテンプレート機能なら、HTMLやデザインの知識がなくても、フォームに入力する感覚で本格的なホームページが完成します。
テンプレート機能の3つのメリット
- スピード - 最短数分で公開可能。業者に依頼すると数週間〜数ヶ月かかる作業が、自分のペースですぐ終わります
- プロ品質のデザイン - プロのデザイナーが設計したレイアウトと配色で、誰が作っても見栄え良く仕上がります
- スマホ対応 - レスポンシブデザインで、スマートフォンからのアクセスにも自動対応
すぐサイトなら安心してはじめられます
- サーバー知識不要 - アカウント作成後、すぐに編集・公開が可能
- ドメイン取得不要 - すぐサイトのドメイン(
○○○.mysugusite.com)を無料で利用可能。独自ドメインも使えます - SSL証明書自動対応 - セキュアなHTTPS通信を標準提供
- 月額220円から - 初回30日間は無料でお試し可能
お店のホームページを、今日から始めてみませんか?