SWELLをインストールしたものの、
初期設定のまま使い始めても大丈夫？
高速化やSEO設定はどれがいい？
と迷う方も多いと思います。
SWELLは初期設定のままでもある程度きれいに表示され、そのままサイトを作り始める事も可能です。
作りながらでも設定を進める事も可能ですが、
運用を始める前に最低限だけでも整えておくことで、検索エンジンからの評価がスムーズに積み上がりやすくなり、結果的にSEOで有利に働きます。
逆に言うと、全部を完璧に作り込む必要はありません。
まずは以下の「最低限やっておきたい設定」だけ押さえておけば十分です。
本記事では、SWELL導入直後に済ませておきたい初期設定を、下記の順に、最短ルートで解説します。
下記の流れで進めると、大体1時間くらいあれば設定できると思います！
最初に初期設定しておくとサイト作成に集中出来ますが、ここを一気に飛ばしてサイト制作に入る事も出来ます。
設定ばかりだとモチベーション下がるという方はこちらを参考にして下さい。
サイトカラーやフォント、コンテンツ幅など、サイト全体のデザインを整えます。
ロゴやナビゲーションなど、サイト共通部分を設定します。
目次やアイキャッチ、SNSシェアボタンなどの表示を整えます。
キャッシュ・CSSの読み込み・画像のLazy Loadなどを設定して、表示速度を最適化します。
まだWordPress・SWELLの準備ができていない方へ
この記事では、WordPressの初期設定とSWELLのインストールが完了している状態から、SWELLのおすすめ初期設定を解説していきます。
まだ設定が済んでいない方は、先に以下の記事を参考にしてください。
SWELL初期設定チェックリスト
| 設定 | 重要度 | 設定する場所 |
|---|---|---|
| サイトカラー | ★★★ | 外観 → カスタマイズ |
| フォント・基本デザイン | ★★★ | 外観 → カスタマイズ |
| ヘッダー | ★★★ | 外観 → カスタマイズ |
| フッター | ★★☆ | 外観 → カスタマイズ |
| スマホメニュー | ★★★ | 外観 → カスタマイズ |
| 投稿・固定ページ | ★★★ | 外観 → カスタマイズ |
| 目次 | ★★☆ | 外観 → カスタマイズ |
| エディター | ★★☆ | SWELL設定 |
| 高速化 | ★★★ | SWELL設定 → 高速化 |
| SEO | ★★★ | SEO SIMPLE PACK |
| OGP | ★★☆ | SEO SIMPLE PACK |
STEP1 サイト全体のデザインを設定する
① メインカラーを設定
外観 → カスタマイズ → サイト全体設定 → 基本カラー
ページを作り始める前に、
- メインカラー
- テキストカラー
- リンクカラー
- 背景色
などを決めておくと、サイト全体のデザインを統一しやすくなります。
② サイトカラーを設定する
外観 → カスタマイズ → サイト全体設定 → 基本カラー
まず決めておきたいのがサイトのメインカラーです。
コーポレートサイトの場合は、会社のロゴやブランドカラーに合わせて設定するとバランスがよくなります。
メインカラーだけでなく、
- テキストカラー
- リンクカラー
- 背景色
なども確認しておきましょう。
③ フォントを設定する
外観 → カスタマイズ → サイト全体設定 → 基本デザイン→フォント設定
フォントもサイト全体の印象を大きく左右します。
企業サイトなら読みやすさを優先しつつ、会社のイメージに合わせて選びましょう。
最近、コーポレートサイトでよく利用されている文章の主流は『Noto Sans JP』、
明朝体なら『Noto Serif JP』がよく利用されています。
ＰＣでは大体15px~16px、スマホでは固定サイズ中（15px）がおすすめです。
スマホの「デバイス可変」は使わず固定値がおすすめです。
デバイス可変を使用すると、端末の画面サイズに合わせて文字サイズが変化するため、小さいスマホサイズになると文字が13pxくらいまで小さくなる事があり、見づらくなります。
最初に決めておくことがポイントです。
④ コンテンツ幅を確認する
外観 → カスタマイズ → サイト全体設定 → 基本デザイン→コンテンツの幅の設定
サイトの横幅も最初に確認しておきます。
コンテンツ幅を後から大きく変更すると、制作済みのページで文章の改行位置や画像サイズなどが変わる場合があります。
そのため、ページ制作を始める前に決めておくのがおすすめです。
私は1300pxくらいで作る事が多いです。
| サイト幅 | 向いているデザイン |
|---|---|
| 1100px前後 | テキスト多め・落ち着いた企業サイト |
| 1200px | 万能・迷ったらこれ |
| 1280〜1320px | 今っぽい広めのコーポレートサイト |
STEP2 ヘッダー・フッター・スマホメニューを設定する
⑤ ヘッダーを設定する
外観 → カスタマイズ → ヘッダー
続いて、コーポレートサイトでは特に重要なヘッダーを設定します。
ヘッダーはほぼすべてのページに表示されるため、サイト制作の早い段階で完成させておきましょう。
画面いっぱいのメインビジュアルにしたい場合は
ヘッダーの背景を透明にするかどうかを『する（文字色・白）』又は『する（文字色・黒）』に設定しましょう。
上のバーを消したい時は下記の2つの項目のチェックを外すと表示されなくなります。
表示設定の
SNSアイコンリストを表示する
コンテンツが空でもボーダーとして表示する
キャッチフレーズの表示位置
表示しない
⑥ ロゴを設定する
外観 → カスタマイズ → ヘッダー→ヘッダーロゴの設定
会社やサービスのロゴを設定します。
ロゴ画像はPCだけでなく追従サイズやスマートフォンでの表示も確認しておいた方がいいです。
画像そのものに余白が多く入っていると、設定上のサイズは同じでもロゴが小さく見えることがあります。
⑦ グローバルメニューを設定する
外観 → カスタマイズ → メニュー
ヘッダーメニュー、フッターメニュー作成方法
コーポレートサイトなら、
- 私たちについて
- サービス
- 会社概要
- お知らせ
- お問い合わせ
など、主要ページへの導線をヘッダーに配置します。
並びとしては上記の並びが一般的です。
メニュー項目を増やしすぎると分かりにくくなるため、ユーザーがよく見るページを優先して配置しましょう。
⑧ お問い合わせへの導線はわかりやすく作る
問い合わせ獲得を目的としたサイトなら、ヘッダーからお問い合わせページへ移動できるようにしておくのがおすすめです。
通常のメニューとはデザインを変えて、問い合わせボタンとして目立たせる方がいいです。
「お問い合わせしたい」と思ったタイミングですぐ行動できる導線を作っておきましょう。
ページが長くなるサイトは追従ヘッダーを設定しておいた方がいいです。
私はPCでは追従ヘッダーを使用することが多いですが、スマートフォンでは画面を圧迫する場合もあるため、実際の表示を確認して判断するのがおすすめです。
⑨ フッターを設定する
外観 → ウィジェット→フッター（PC1）（PC2）（PC3）
コーポレートサイトによくある3カラムのフッターの作り方を動画で説明しています。
フッターには、サイトを見終わったユーザーが次に必要とする情報を配置します。
企業サイトなら、
- 会社名
- 住所
- 電話番号
- フッターメニュー
- プライバシーポリシー
- コピーライト
などを掲載します。
⑩ エディター設定はそのままでOK
SWELL設定→エディター設定
コーポレートサイトでは吹き出しや、ボックス、文字の装飾などはほとんど使用しない為、基本そのままでOK！
エディターのカラーパレット設定だけ、サイトでよく使う色に変更しておくと便利です。
STEP4 投稿・固定ページの表示を設定する
次に投稿ページと固定ページの表示を整えます。
ここは、ブログとコーポレートサイトで設定を使い分けたいポイントです。
アイキャッチ画像の表示は投稿ページのみ表示
ブログ（投稿ページ）ではアイキャッチ画像を表示はオン、コーポレートサイトの固定ページでは不要です。
ブログのアイキャッチ画像はオンにしておくと、投稿ページよりページ事にオン・オフの設定が可能になります。
目次設定は投稿ページだけオン
『投稿ページに目次を表示』だけオンにしてたらOK！固定ページは不要。
投稿ページの目次設定をオンにすることで、投稿ページの設定で、オン・オフを選ぶことができます。
ここをオフにすると、投稿ページの方で目次をオンにしても表示されません。
SNSシェアボタン・著者情報・コメントは非表示
wordpressのSNSシェアボタンや、著書表示、コメントはブログ感が出てしまうので、コーポレートサイトでは消しておこう！
前後記事へのリンクは必ずチェックを入れておこう。
STEP3 SWELLの高速化設定をする
SWELLには、キャッシュや画像のLazy Loadなど、表示速度を改善するための機能が標準搭載されています。
難しい設定は不要です。ちょっとしたコツを押さえるだけで、サイトはもっと軽くできます。
ただし、高速化設定は「全部ONにすれば速くなる」というものではありません。
それぞれの機能を理解して設定していきましょう。
キャッシュ機能
SWELLのキャッシュ機能は、基本的にはONにしておいてOKです。
キャッシュを利用すると、一度生成したデータを一時的に保存して再利用できるため、ページを表示するたびに同じ処理を繰り返す必要がなくなります。
その結果、サーバー側の処理を軽減し、表示速度の改善につながります。
ただし、設定変更後に表示がおかしくなった場合は、一度キャッシュを削除して確認してみましょう。
ファイルの読み込み
おすすめは以下です。
SWELLのCSSをインラインで読み込む → ON
コンテンツに合わせて必要なCSSだけを読み込む → ON
フッター付近のCSSを遅延読み込みさせる → OFF
「コンテンツに合わせて必要なCSSだけを読み込む」をONにすると、そのページで使用されている機能やブロックに合わせてCSSの読み込みを最適化できます。
なお、「フッター付近のCSSを遅延読み込みさせる」は、「SWELLのCSSをインラインで読み込む」がONの場合は効果がありません。
そのため、CSSをインラインで読み込む場合はOFFでOKです。
画像等のLazy Load
画像等のLazy Loadは、
「loading=”lazy”を使用する」
がおすすめです。
Lazy Loadとは、画面にまだ表示されていない画像などの読み込みを後回しにする仕組みです。
ページを開いた瞬間にすべての画像を読み込む必要がなくなるため、初期表示の負担を抑えることができます。
SWELLでは、
- 使用しない
- loading=”lazy”を使用する
- lazysizes.jsを使って遅延読み込みさせる
から選択できます。
特別な理由がなければ、ブラウザ標準のLazy Loadを利用する「loading=”lazy”」でよいでしょう。
画像の表示がおかしくなった場合は、一度「使用しない」に変更して、Lazy Loadが原因か確認してみてください。
スクリプトの遅延読み込みは慎重に設定する
「スクリプトを遅延読み込みさせる」
をONにすると、指定したJavaScriptの読み込みを後回しにできます。
JavaScriptの処理が初期表示の負担になっている場合には、表示速度の改善が期待できます。
ただし、遅延させるスクリプトによっては、メニュー・スライダー・画像拡大などの機能が正常に動かなくなる可能性があります。
そのため、初心者の方は無理にONにする必要はありません。
アニメーションを設定する場合はOFFにしておいた方が安全です。
使用する場合は、設定後に動作が正常に作動するか確認しましょう。
Google Analyticsなどのスクリプトも遅延対象にできますが、計測への影響も考えられるため、仕組みが分からない状態で追加するのはおすすめしません。
SWELLの初期設定でよくある質問
SWELLは初期設定のままでも使えますか？
SWELLは初期状態でも利用できます。
ただし、コーポレートサイトを作る場合は、サイトカラー・ヘッダー・スマホメニュー・固定ページの表示などを最初に整えておくのがおすすめです。
ページをたくさん作った後に変更するより、制作前に設定しておいた方が修正の手間を減らせます。
高速化設定は全部ONにした方がいいですか？
すべてONにすればよいわけではありません。
たとえば「フッター付近のCSSを遅延読み込みさせる」は、SWELLのCSSをインラインで読み込む設定がONの場合は効果がありません。
また、JavaScriptの遅延読み込みはサイトの機能に影響する場合があります。
設定項目の役割を確認しながら必要なものだけ有効にしましょう。
コーポレートサイトでもブログの設定は必要ですか？
ブログやお知らせを運用するのであれば、投稿ページの設定もしておくのがおすすめです。
一方で、会社概要やサービス紹介などの固定ページには、目次・SNSシェアボタン・著者情報などが不要なケースもあります。
投稿と固定ページで設定を使い分けると、企業サイトらしいすっきりしたデザインにできます。
Google AnalyticsやSearch Consoleは必要ですか？
必須ではありませんが、サイト公開後にアクセス状況や検索流入を確認したい場合は設定しておくことをおすすめします。
特に問い合わせ獲得を目的とするコーポレートサイトでは、「どのページが見られているか」「検索からアクセスされているか」を確認できるようにしておくと、公開後の改善に役立ちます。
まとめ｜SWELLの初期設定を済ませてからコーポレートサイトを作ろう
SWELLには多くの設定項目がありますが、すべてを変更する必要はありません。
コーポレートサイトを作る場合は、どの順番からでも設定可能ですが
サイト全体のデザイン → ヘッダー・フッター → 投稿・固定ページ → エディター → 高速化 → SEO
という順番で整えていくとサイトが出来上がるイメージがしやすくスムーズです。
上記の流れで設定自体は自分でやるのも難しくはありません。
ただ『ここをもう少し調整したい』『設定項目が多くてよく分からない』『時間がない為、整った形にしてほしい』
という方には、SWELLの初期設定をまとめて行う代行サービスも用意しています。
SEO SIMPLE PACKのSEO設定やGoogle Analytics、Google Search Consoleなどは、まだ現在の段階で設定しなくても大丈夫です。
まずはSWELLの初期設定を済ませて、ホームページ制作を進めていきましょう。
サイトが完成したら、公開するタイミングでSEO設定やアクセス解析、Google Search Console、XMLサイトマップなどの設定を行います。
ここまで設定できたら、SWELLの初期設定は完了です。
次はいよいよ、実際にホームページを作っていきましょう。
ホームページ制作では、いきなりトップページを作り始めるのではなく、必要なページやサイト構成を決めてから制作を進めると、途中で迷ったり作り直したりするのを減らせます。
次の記事では、個人事業主がホームページを作るときに必要な準備から、費用、サイト構成、制作、公開までの流れを順番に解説しています。
