WordPressブログを作り直したあと、最初にやったのがSWELLの初期設定です。
テーマを入れただけでもある程度きれいに見えますが、そのままだと「自分のブログらしさ」や「収益化の導線」はまだ弱い状態です。
今回のコレやすブログでは、AI、デザイン、Web制作をテーマにした収益メディアとして育てるために、最初の段階で最低限の見た目と導線を整えました。
この記事では、SWELLを入れたあとに私が実際に設定したことを、初心者向けにまとめます。
完璧な設定集というより、「まずここまで整えれば、記事を書き始められる」という記録です。
最初に決めたのはサイトの方向性
SWELLの細かい設定に入る前に、まず決めたのはサイトの方向性です。
コレやすブログは、単なる日記や知識メモではなく、AI、デザイン、Web制作のノウハウを発信するブログとして作り直しました。
そのため、見た目は次のような方向にしました。
- クリエイター系
- 黒、白、オレンジを基調にする
- 余白を多めにする
- 初心者でも読みやすい雰囲気にする
- 収益化につながる導線を入れやすくする
ここを決めておくと、あとで色やメニューを設定するときに迷いにくくなります。
カラー設定を整えた
最初に整えたのは、サイト全体のカラーです。
今回のブログでは、次の色を基本にしました。
- メインカラー:
#FF6B35 - テキストカラー:
#111111 - 背景:
#FFFFFF - サブテキスト:
#666666
メインカラーは、ボタンやアクセントに使うオレンジです。
黒と白だけだと少し硬くなりますが、オレンジを入れることでクリエイター系の明るさを出しやすくなります。
初心者のうちは、色を増やしすぎないほうが整いやすいです。
私も今回は、基本的に黒、白、オレンジだけで進めました。
グローバルナビを作った
次に作ったのが、サイト上部のグローバルナビです。
コレやすブログでは、次のメニューを入れました。
- AI活用
- Illustrator
- Photoshop
- Web制作
- 動画編集
- 副業
- 運営者情報
ナビゲーションは、読者に「このブログでは何を扱っているのか」を伝える場所です。
まだ記事が少ない段階でも、カテゴリを先に決めておくことで、今後どんな記事を書いていくかが見えやすくなります。
私の場合は、AI、デザイン、Web制作を軸にしたかったので、最初からカテゴリを分けて設計しました。
固定ページ型トップページにした
SWELLを入れたあと、トップページは固定ページ型にしました。
新着記事だけを並べるブログ型ではなく、メディアサイトに近い見せ方にしたかったからです。
トップページには、次の要素を入れました。
- ヒーローエリア
- カテゴリ一覧
- このサイトで学べること
- 運営者紹介
- 最新記事
- おすすめツール
固定ページ型にすると、ブログの目的や読んでほしい記事を自分で設計しやすくなります。
特に収益化を考える場合、ただ記事を並べるだけでなく、おすすめツールやプロフィールへの導線を作れるのは大きいです。
記事ページの見え方を確認した
トップページだけでなく、記事ページの見え方も確認しました。
記事ページで特に見たのは、次の部分です。
- タイトルの見え方
- アイキャッチ画像
- 目次
- 見出し
- 関連記事
- 著者情報
- サイドバー
ブログは記事が主役なので、記事ページが読みづらいと意味がありません。
SWELLは初期状態でも整っていますが、実際に記事を入れてみないと見え方はわかりません。
私も第1記事、第2記事を公開しながら、目次やサイドバーの表示を少しずつ調整しました。
サイドバーを整理した
サイドバーは、最初の状態だと必要ないものも表示されます。
今回のブログでは、右サイドバーを次の構成にしました。
- 検索
- 最近の投稿
- カテゴリー
最近の投稿は、サムネイルを左、タイトルを右に表示する形に整えました。
アーカイブや最近のコメントは、現時点では外しています。
記事数が少ないうちは、アーカイブよりもカテゴリーや最新記事のほうが読者にとって使いやすいと感じたからです。
サイドバーは詰め込みすぎると見づらくなるので、最初は少なめで十分だと思います。
アイキャッチ画像のトンマナを決めた
記事を増やす前に、アイキャッチ画像の方向性も決めました。
コレやすブログでは、次のルールにしています。
- 生成りの白背景
- 黒の細い線画
- オレンジをアクセントに使う
- 文字は原則入れない
- 記事の内容を1つのアイコンで表す
アイキャッチの雰囲気が毎回バラバラだと、ブログ全体の印象も散らかります。
まだ記事数が少ないうちにトンマナを決めておくと、あとから一覧で見たときに統一感が出ます。
SEO系の基本設定を入れた
記事を書き始める前に、SEO周りも最低限設定しました。
今回設定したのは、主に次の項目です。
- SEO SIMPLE PACK
- XML Sitemap
- Google Analytics
- Search Console
- 各記事のSEO説明文
最初から完璧に分析できるわけではありませんが、記事を公開する前に計測できる状態を作っておくことは大切です。
あとから設定すると、最初の記事のデータが取れない期間が出てしまいます。
私は再構築のタイミングで、サイトマップ送信とアクセス計測までまとめて整えました。
最初から完璧を目指さない
SWELLは設定できる項目が多いです。
そのため、最初から全部を完璧にしようとすると、いつまでも記事を書き始められません。
私も今回、細かい部分はあとから直す前提で進めました。
まずは、次の状態を目指すくらいで十分だと思います。
- サイトの色が決まっている
- メニューがある
- トップページが整っている
- 記事ページが読める
- サイドバーが邪魔にならない
- SEO説明文を入れられる
- アイキャッチの方向性が決まっている
ここまでできれば、あとは記事を書きながら改善できます。
まとめ
SWELLの初期設定で大切なのは、細かい機能をすべて触ることではありません。
まずは、ブログの方向性に合わせて、読者が迷わず読める状態を作ることです。
私の場合は、カラー設定、グローバルナビ、固定ページ型トップページ、記事ページ、サイドバー、アイキャッチ、SEO設定を最初に整えました。
この状態まで作ると、ブログの土台ができて、記事制作に集中しやすくなります。
SWELLは設定項目が多いテーマですが、最初は最低限で大丈夫です。
まずは形にして、記事を公開しながら少しずつ育てていきましょう。
