デザインをお店らしく整える — テンプレート・カラー・フォントの選び方
オンボーディングでサイトが自動公開されたあとは、「デザイン」画面で見た目を整えていきます。3種類のテンプレート、カラープリセット、フォントの選び方と、保存すればすぐ公開サイトに反映される仕組みを解説します。
執筆: おもてらいと編集部(ホームページ運用チーム)
オンボーディングでサイトの土台ができあがったら、次は「デザイン」画面で見た目を整えていきます。ここでは、テンプレート・カラー・フォントという3つの調整項目を、実際の画面に沿ってご案内します。
先に、要点をまとめます。
- デザイン画面ではテンプレート・カラー・フォント・ロゴを調整する(文章や写真はそのまま引き継がれる)
- 色は個別指定のほか、24種類のプリセットから一括選択もできる
- 保存すれば、公開済みのサイトにはすぐに反映される
テンプレートを選ぶ(3種類)
「デザイン」画面を開くと、まずテンプレートの選択パネルがあります。「レイアウト・余白・カード表現をまとめて切り替えます。入力したテキスト・画像はそのまま使い回されます。」という説明のとおり、中身の文章や写真を作り直す必要はありません。
用意されているのは次の3種類です。
| テンプレート | 雰囲気 | こんなお店に |
|---|---|---|
| ウォーム(既定) | やさしく親しみやすい。余白と柔らかいカードが特徴 | サロン、カフェ、教室など温かみを出したい業種 |
| クラシック | 直線的で端正。四角い面と罫線を強めたコーポレート調 | 士業、法人向けサービスなど信頼感を重視する業種 |
| モダン | 情報密度高め。強い見出しとニュース導線を持つ情報整理型 | 制作会社、多店舗展開など情報量の多い業種 |
好みのテンプレートを選ぶと、右側のプレビューに即座に反映されます。何度でも切り替えて試せるので、まずは3つとも試してみることをおすすめします。
カラーを整える
テンプレートの下に、カラーの設定パネルがあります。調整できるのは次の5項目です。
- メインカラー
- サブカラー
- アクセントカラー
- 本文カラー
- 背景カラー
それぞれ個別のカラーピッカーで指定できるほか、「ナチュラル」「ビジネス」「モダン」「フォレスト」「オーシャン」「さくら」など24種類のカラープリセットから一括で適用することもできます。
自分で1色ずつ決めるのが難しい場合は、お店の雰囲気に近いプリセットを選び、必要な部分だけ個別に微調整するのが簡単でおすすめです。
フォントを選ぶ
フォントの設定は、ゴシック体・明朝体・丸ゴシック・デザイン書体の4グループ、あわせて16書体から選べます。既定は「Zen Kaku Gothic New」です。
士業や法人向けなら明朝体で端正に、親しみやすさを出したいなら丸ゴシックで柔らかく——テンプレートやカラーとあわせて全体の印象を調整してください。
プレビューで確認しながら進められます
画面の右側には、いま選んでいる内容がそのまま反映されるプレビューが表示されます。パソコン表示・スマートフォン表示を切り替えて確認できるので、両方の見え方をチェックしてから保存するのがおすすめです。このプレビューはあくまで保存前の確認用で、実際に保存するまで公開中のサイトには反映されません。
セクション(実績・コラムなど)について
実績やコラムのセクションを使いたい場合、これらはStandardプラン以上の機能です。Freeプランでは該当のセクションにロックアイコンと「Standard限定」のバッジが表示され、切り替えることができません。使ってみたい方は、プラン変更と支払い方法の管理からプランの変更をご検討ください。
セクション自体の表示・非表示や並び順の変更は、この「デザイン」画面ではなく「基本情報」の編集画面(ページ設定パネル)で行います。
保存すると、すぐに反映されますか?
はい。「保存する」ボタンを押すと、公開済みのサイトであればそのまま公開URLに反映されます。別途「再公開」のような操作は必要ありません。保存中は「保存中...」、完了すると「保存しました」の表示に変わります。
まとめ:気軽に試して、保存で確定
デザイン画面での調整は、テンプレート・カラー・フォントのどれも入力済みの内容を壊さずに何度でも試せます。プレビューで見え方を確認しながら、お店の雰囲気に合う組み合わせを探してみてください。
見た目が整ったら、次はホームページを公開する手順で公開・非公開の切り替え方をご案内します(オンボーディングを完了した時点で、実はすでに公開済みです)。
Related
関連ガイド
テンプレートの選び方と基本情報の入力
登録が終わったら、AIとの対話形式でお店の情報を伝えていきます。実際にはどんな質問をされるのか、テンプレート(デザイン)はいつ選ぶのか。オンボーディングから公開までの流れを実際の画面に沿ってご案内します。
ホームページを公開する手順 — 公開前チェックとAI審査の流れ
「公開する」ボタンを押すと何が起きるのか。公開前チェックリストの内容、AI審査にかかる時間、公開後のURL、編集後の反映方法まで、実際の画面表示をもとに公開・非公開の操作を解説します。
おもてらいとの始め方 — 登録からログインまで
おもてらいとを使い始めるための最初の3ステップをご案内します。お名前と法人名を入力し、メールに届く6桁のコードで認証し、パスワードを設定するだけ。難しい設定は一切ありません。