おもてらいとの使い方STEP 33

デザインをお店らしく整える — テンプレート・カラー・フォントの選び方

オンボーディングでサイトが自動公開されたあとは、「デザイン」画面で見た目を整えていきます。3種類のテンプレート、カラープリセット、フォントの選び方と、保存すればすぐ公開サイトに反映される仕組みを解説します。

執筆: おもてらいと編集部ホームページ運用チーム

オンボーディングでサイトの土台ができあがったら、次は「デザイン」画面で見た目を整えていきます。ここでは、テンプレート・カラー・フォントという3つの調整項目を、実際の画面に沿ってご案内します。

先に、要点をまとめます。

  • デザイン画面ではテンプレート・カラー・フォント・ロゴを調整する(文章や写真はそのまま引き継がれる)
  • 色は個別指定のほか、24種類のプリセットから一括選択もできる
  • 保存すれば、公開済みのサイトにはすぐに反映される

テンプレートを選ぶ(3種類)

「デザイン」画面を開くと、まずテンプレートの選択パネルがあります。「レイアウト・余白・カード表現をまとめて切り替えます。入力したテキスト・画像はそのまま使い回されます。」という説明のとおり、中身の文章や写真を作り直す必要はありません。

用意されているのは次の3種類です。

テンプレート雰囲気こんなお店に
ウォーム(既定)やさしく親しみやすい。余白と柔らかいカードが特徴サロン、カフェ、教室など温かみを出したい業種
クラシック直線的で端正。四角い面と罫線を強めたコーポレート調士業、法人向けサービスなど信頼感を重視する業種
モダン情報密度高め。強い見出しとニュース導線を持つ情報整理型制作会社、多店舗展開など情報量の多い業種

好みのテンプレートを選ぶと、右側のプレビューに即座に反映されます。何度でも切り替えて試せるので、まずは3つとも試してみることをおすすめします。

カラーを整える

テンプレートの下に、カラーの設定パネルがあります。調整できるのは次の5項目です。

  • メインカラー
  • サブカラー
  • アクセントカラー
  • 本文カラー
  • 背景カラー

それぞれ個別のカラーピッカーで指定できるほか、「ナチュラル」「ビジネス」「モダン」「フォレスト」「オーシャン」「さくら」など24種類のカラープリセットから一括で適用することもできます。

自分で1色ずつ決めるのが難しい場合は、お店の雰囲気に近いプリセットを選び、必要な部分だけ個別に微調整するのが簡単でおすすめです。

フォントを選ぶ

フォントの設定は、ゴシック体・明朝体・丸ゴシック・デザイン書体の4グループ、あわせて16書体から選べます。既定は「Zen Kaku Gothic New」です。

士業や法人向けなら明朝体で端正に、親しみやすさを出したいなら丸ゴシックで柔らかく——テンプレートやカラーとあわせて全体の印象を調整してください。

プレビューで確認しながら進められます

画面の右側には、いま選んでいる内容がそのまま反映されるプレビューが表示されます。パソコン表示・スマートフォン表示を切り替えて確認できるので、両方の見え方をチェックしてから保存するのがおすすめです。このプレビューはあくまで保存前の確認用で、実際に保存するまで公開中のサイトには反映されません。

セクション(実績・コラムなど)について

実績やコラムのセクションを使いたい場合、これらはStandardプラン以上の機能です。Freeプランでは該当のセクションにロックアイコンと「Standard限定」のバッジが表示され、切り替えることができません。使ってみたい方は、プラン変更と支払い方法の管理からプランの変更をご検討ください。

セクション自体の表示・非表示や並び順の変更は、この「デザイン」画面ではなく「基本情報」の編集画面(ページ設定パネル)で行います。

保存すると、すぐに反映されますか?

はい。「保存する」ボタンを押すと、公開済みのサイトであればそのまま公開URLに反映されます。別途「再公開」のような操作は必要ありません。保存中は「保存中...」、完了すると「保存しました」の表示に変わります。

まとめ:気軽に試して、保存で確定

デザイン画面での調整は、テンプレート・カラー・フォントのどれも入力済みの内容を壊さずに何度でも試せます。プレビューで見え方を確認しながら、お店の雰囲気に合う組み合わせを探してみてください。

見た目が整ったら、次はホームページを公開する手順で公開・非公開の切り替え方をご案内します(オンボーディングを完了した時点で、実はすでに公開済みです)。

運営・編集

おもてらいと編集部 - ホームページ運用チーム。法人・事業所のホームページ運用、AIO、問い合わせ導線づくりを実務目線で発信しています。

ガイド一覧へ戻る