サイトのデザインを変える
サイトのデザイン設定では、公開ページの配色・フォント・角の丸みを、コミュニティの雰囲気に合わせて変えられます。まずプリセットから土台を選び、そこから細かく調整できます。この記事では、デザイン設定の使い方を説明します。
1. デザイン設定を開く
左メニューの「運営・設定」→「サイト設定」→「デザイン」タブを開きます。上部の切り替え（カラー・フォント・形・スタイルガイド）で編集する項目を選びます。右上の「プレビュー」を押すと、実際の公開ページで見た目を確認できます（保存前でも色やフォントは即反映されます）。編集した内容は「保存する」を押すまで公開ページには反映されません。
このプレビュー中は購入・お申し込みのボタンが働きません。ショップのカート・プラン加入・チケット購入・予約・回数券の各画面では、ボタンの下に「プレビューでは注文を確定できません。」「プレビューではチケットを購入できません。」のように、その画面に合わせた案内が出ます。デザインを確かめている最中に、うっかり自分で買ってしまうことを防ぐしくみです。実際の購入の流れを試したいときは、プレビューを閉じて通常の公開ページから操作してください。
2. カラー（プリセットと色）
「カラー」では、まずプリセットから配色セットを選びます。色・フォント・角丸が整った状態でまとめて適用されるので、迷ったらここから始めるのがおすすめです。
テンプレートから来たときも、この画面が受け皿になります。ページのテンプレートを選んでデザインを取り込むと、この画面に「（テンプレート名）の配色・フォントを読み込みました。」というお知らせが出た状態で開きます。読み込んだだけではまだ公開ページに反映されていませんので、内容を確かめてから「保存する」を押してください。気に入らなければ、保存せずにこの画面を離れれば元のままです。
- メイン色：ボタンや強調に使われる色です。単色のほか、ベース色から調和する2色を自動で作るグラデーションも選べます。
- アクセント色：バッジや小さな強調に使われる色です。
- ボタンの文字色：「自動」なら、背景に対して読みやすい白／黒を自動で選びます。
- モード：ライト／ダークを選べます。背景やカードの色はモードから自動で決まります。
読みづらくなる色の組み合わせには注意メッセージが出るので、安心して調整できます。
3. フォント
「フォント」では、見出しと本文の組み合わせを「ペア」でまとめて選べます。実際の書体でサンプルが表示されるので、印象を確かめながら選べます。「個別に選ぶ」にすると、タイトルと本文の書体を別々に指定することもできます。
公開ページには、選んだ書体分だけが配信されるので表示も軽く保てます。
4. 形（角の丸み）
「形」では、公開ページのカードとボタンの角の丸みを、それぞれスライダーで調整できます（0＝角ばり／100＝まる）。すぐ下のサンプルで、動かした結果を確認できます。
5. スタイルガイドで確認する
「スタイルガイド」は、今の設定で公開ページの各部品（配色・見出し・ボタン・カード・フォーム）がどう見えるかをまとめて確認できる見本帳です（読み取り専用）。上の設定を変えると即座に反映されるので、保存前に全体の印象を確かめられます。
気に入った状態になったら「保存する」で公開ページに反映します。反映後に元へ戻したいときは、右上の「前のデザインに戻す」で直前の状態に戻せます。
- 戻せるのは1つ前の保存内容だけです。何世代もさかのぼることはできないので、大きく作り込む前の状態を残したいときは、色やフォントの設定をメモしておくと安心です。
- 押すと入れ替わります：戻したあとにもう一度押すと、戻す前のデザインに戻ります。見比べたいときは、この2つを行き来できます。
- まだ一度も保存していないコミュニティでは、このボタンは表示されません。
見た目が決まったら、公開サイトの導線も整えましょう。
- メニューの並び：ヘルプ記事「公開サイトのメニューを整える」
- SNSでシェアされたときの見え方：ヘルプ記事「SNSでシェアされたときのカード画像（OGP）」
- 自分のドメインで公開する：ヘルプ記事「独自ドメインを使う」