テンプレートと見た目を選ぶ
テンプレートをプレビューして、サイトの色、フォント、レイアウト、ロゴを設定します。
チームのオーナーと管理者向け · 11ステップ
事前に必要なもの
- チームがサイトのサブスクリプションに加入している。無料チームの管理には、テンプレートの代わりにサイトを作るが表示されます。
- あなたがチームのオーナーか管理者である。
手順
ステップ1: テンプレートを開く
左のメニューでテンプレートを押します。
こう表示されます：テンプレートというタイトルのページに、テンプレートごとのカードが並びます。サイトで使っているものには使用中と表示されます。サイトにまだテンプレートがない場合は、各カードに選択が表示されます。押すとそのテンプレートが最初のパレットで選ばれ、デザインが開きます。
ステップ2: テンプレートをプレビューする
テンプレートのカードでプレビューを押します。
こう表示されます：プレビューと書かれたバーの下に、そのテンプレートで表示したあなたのサイト。開けるのはチームの管理者だけです。終わったら管理に戻るを押します。
ステップ3: デザインを開く
テンプレートページに戻り、右上のデザインを押します。
こう表示されます：デザインというタイトルのページ。片側にフォーム、その横にサイトのライブプレビュー（狭い画面では下）。
ステップ4: パレットを選ぶ
パレットで、テンプレートのプリセットを1つ選びます。
こう表示されます：選んだプリセットが枠で囲まれ、サイトのプレビューがその色になります。プリセットは5つの色と2つのフォントをまとめて設定します。
ステップ5: 色を変える
カラーで、メイン、アクセント、ハイライト、背景、テキストのいずれかに
#7dd3fcのようなカラーコードを入力します。横の四角を押して選ぶこともできます。こう表示されます：サイトのプレビューが変わり、パレットのカスタムが枠で囲まれます。各色にはテンプレートの初期値が表示され、リセットでその色を元に戻せます。
ステップ6: テキストと面に個別の色を設定する
テキストと面で、色を選ぶを押します（見出し、キャプション、カード、線、リンクとラベル、ボタン、ボタンの文字の横）。次にカラーコードを入力するか、横の四角を押します。どれも最初は自動で、テンプレートと同じように5つの色に合わせて決まります。自動にするで元に戻せます。
こう表示されます：サイトのプレビューが変わり、文字を載せる色の下に7.2:1 · 読みやすいのような数値が表示されます。背景やカードに対してどれだけはっきり見えるかを示す数値です。4.5:1未満（見出しは3:1未満）だと読みにくいと表示され、代わりに訪問者に表示される色が示され、読みやすくするが出ます。押すとその色がフィールドに入ります。
ステップ7: フォントを選ぶ
タイポグラフィで、見出しフォントか本文フォントを開き、フォントを選びます。各フォントはそのフォント自体で表示され、Heavy display、Condensed、Tech、Clean sans、Serif、Handwritten、Monospaceのグループに分かれています。名前を入力して探すこともできます。
こう表示されます：サイトのプレビューがそのフォントになります。フォントを変えると、パレットもカスタムになります。
ステップ8: ロゴを追加する
ロゴで、画像を選択を押します（ワードマーク、正方形ロゴ、ファビコンの横。設定済みなら置き換えと表示されます）。画像を挿入ボックスで画像を選ぶかアップロードし（JPEG、PNG、WebP、AVIF、5 MBまで）、挿入を押します。ロゴに代替テキストは不要です。
- 正方形ロゴは、サイトのナビゲーション、ホームの上部、ロスターに表示されます。
- ワードマークは任意です。チーム名を画像にしたもので、形は自由です。設定すると、ナビゲーションとホームの上部で正方形ロゴとチーム名の代わりに表示されます。
- ファビコンは、ブラウザのタブに出る小さなアイコンです。
ロゴが切り抜かれたり変更されたりすることはありません。 画像は常に全体が表示され、透明な背景は透明のままです。そのため、正方形ロゴとファビコンは256 × 256ピクセル以上の正方形でなければなりません。ほかの形の画像は保存時に拒否され、サイズを示すメッセージが出ます。このルールより前に選んだロゴは、変更するまで表示され続けます。
こう表示されます：枠の横に画像の名前。プリセットでこれらが変わることはありません。
ステップ9: テンプレートのオプションを設定する
さらに下のBroadcastのオプションで、Hero layout（Image behind the textかImage beside the text）とCard edges（Cut cornersかSquare corners）を選びます。ほかのテンプレートでは、ここに独自のオプションが表示されます。Neon GridのMotionはFull motionかCalm（すべて静止）、Hero glowはBright（ホームページの上部が背景色からアクセントカラーへ変わる）かダーク（メインカラーとアクセントを混ぜたダークグレーへ変わり、より暗い雰囲気に）。CrosshairのHero layoutはSplit（左にテキスト、右に画像と、その上に次の試合）かFull-width image。FaceoffのHero alignmentはCenteredかLeft、Home rosterはScattered（大きな「Meet the squad」の周りに選手のカードを配置）かGrid。ClutchのHero layoutはBento（ヒーローの横に最新ニュースのパネル）かFull width、CornersはRoundedかSquare。Varsityの背景はPinstripe（すべてのページの背後に薄い斜めのストライプ）かなし、Hero sizeはFull（メニューが重なる縦長の写真）かBanner（短めの写真）。RedlineのPhoto tintはDuotone（写真をメインカラーで染める）かNatural（元の色）、PanelsはOffset（写真やセクションの背後に暗いブロック）かFlatです。
こう表示されます：サイトのプレビューのレイアウトが変わります。
ステップ10: 保存する
フォームの下にある保存を押します。
こう表示されます：「デザインを保存しました」。まだ訪問者には見えません。保存した変更は、公開するまで下書きに残ります。
ステップ11: サイトを公開する
左のメニューで公開を押して公開します。詳しくはサイトを公開するを見てください。
こう表示されます：公開前の変更リストにデザインが表示され、公開後はサイトが新しい見た目になります。
うまくいったか確認する方法
- テンプレートページで、使っているテンプレートに使用中と表示されている。
- 公開後、サイトに色、フォント、ロゴが表示されている（ロゴは全体のまま、切り抜きなし）。
- 文字を載せる色すべてに読みやすいと表示されている。または、訪問者に表示される読みやすい色を受け入れている。
何かおかしい？
色を変えたのにサイトが変わらない
保存しただけでは下書きに残ります。メニューの公開を押して公開してください（ステップ11）。
色に「読みにくい」と表示される
その色の文字は背景やカードに対して目立たず、誰もが読めるとは限りません。通常の文字は4.5:1、見出しは3:1が必要です。読みにくい色が訪問者に表示されることはありません。 サイトでは代わりに最も近い読みやすい色が使われ、フォームにその色が表示されます。読みやすくするを押してその色を使うか、読みやすいと表示されるまで自分で色を選んでください。自動のままの色も、確認なしで同じように調整されます。公開時にも警告が出ますが、公開が止められることはありません。
サイト全体が1色で読みにくい
テキストと面（ステップ6）で、文字の種類ごとに色を設定します。たとえば見出しを赤、段落のテキストを薄いグレー、カードを少し明るい色にすると、パネルがページから浮き出ます。ページの一部を丸ごと別の色にしたいとき（暗いサイトの中に明るいストア、アクセントカラーの帯など）は、サイトの一部に別の配色を設定するを見てください。
テンプレートを切り替えるとコンテンツは消える？
消えません。コンテンツはテンプレートではなくサイトに属しています。色とフォントは新しいテンプレートで使われる部分に引き継がれ、テンプレート独自のオプションは初期値に戻り、表示できないセクションは削除されずに非表示になります。切り替える前に開くボックスにこの3点が表示され、キャンセルもできます。サイトがまだプラットフォームの初期の色とフォントのままなら（パレットを選んだことも色を変えたこともない場合）、代わりに新しいテンプレートの最初のパレットが使われ、サイトはテンプレートの見本どおりになります。ボックスの色とフォントにもそう表示されます。テンプレートは7つあります。Broadcastは試合当日の雰囲気。Neon Gridは黒とネオンの見た目で、ヒーローの背後にアニメーションするグリッドと光るグラデーション、その上に浮かぶロゴ、実績カウンター、動画ウォール。Crosshairは黒くテクニカルな見た目で、枠付きパネル、ブラケットのラベル、大きなフッターのワードマーク、写真が主役。Faceoffは青みがかった黒とアイスシアンの見た目で、試合カードごとにあなたのロゴと相手のロゴが向かい合い、大きなヒーローと巨大な見出しの周りにメンバーが散らばります。Clutchは明るい見た目で、白い角丸カード、幅広の大文字の見出しと1つの鮮やかな色。次の試合がヒーローに表示され、広い画面ではすべてのページの上部にも表示されます。Varsityはキャンパス風の見た目で、ネイビーの帯と1つのゴールド、ロスターの上に大会の最高成績、試合はスケジュール表で表示。Redlineはほぼ黒に1つの赤で、写真はメインカラー（初期値は赤）で色付けされ、四角いボタン、試合は両チームのロゴがVSを挟む写真の行で表示されます。Clutchの見出しはArchivo Expandedで、どのテンプレートでもHeavy displayから選べます。パソコンやタブレットでは、Faceoffのすべてのページ上部にあるJoin our Discordボタンは、SNSでDiscordのリンクを追加したときだけ表示されます（SNSを追加する）。ライブ配信はどのテンプレートでも同じように表示されます。当日はカウントダウン、配信中はホームページの上部にTwitchのプレイヤー、ほかのすべてのページにLiveバーが出ます（配信を予約する）。
「開いた後にこのサイトが変更されました」と表示される
ほかの管理者が先に保存したため、あなたの変更は保存されていません。再読み込みを押してから、もう一度変更してください。
「このロゴは… 正方形の画像をアップロードしてください」と表示される
正方形ロゴとファビコンは切り抜かないため、正方形（幅と高さが同じ）で256 × 256ピクセル以上である必要があります。メッセージに画像のサイズが表示されます。正方形のバージョンを作り（横長のロゴなら周りに透明な余白を追加）、アップロードしてもう一度保存してください。正方形でないロゴはワードマークに設定します。
「このロゴのサイズが記録されていません」と表示される
画像のサイズがわからないため、正方形かどうか確認できません。もう一度アップロードし、新しい方を選んで保存してください。
フィールドと保存がグレーになっている
チームのサブスクリプションが切れているため、再開するまでサイトのページは読み取り専用です。更新してください。詳しくは請求を管理するを見てください。
関連記事
まだ解決しない？ サポートに問い合わせるか、support@spawnfront.comにメールしてね。今いるページとステップ番号を教えて。