どうも、だらず夫です。実は少し前から、ブログのテーマを1から作り直していました。
この記事はデザインを検討した過程をまとめたものです。実際にWordPressへ組み上げていく中で起きたトラブル集は実装編にまとめています。
今まで使っていたNishikiというテーマ、無料でここまでできるのはすごくありがたいものでした。ただ、自分だけのデザインというものにはずっと憧れがあって。とはいえそんな知識もないし、というところで諦めていたんですが、最近Claudeくんという武器を手に入れまして。それなら一度やってみようか、と思ったのがきっかけです。
発想の原点は新卒時代の岡山トヨペット
デザインの方向性を考えていたときにふと思い出したのが、新卒で販促の仕事をしていた頃によく参考にしていた「岡山トヨペット」のウェブサイトでした。トップページを開いた瞬間にほとんどのメニューへ辿り着ける作りになっていて。当時「うまいこと作るなあ」とまで思っていたかというとそうでもないんですが（笑）、すごく洗練されたデザインだなとは感じていました。ただ、久しぶりに見返してみたらサイトのデザインも変わっていて。ウェブサイトって、こうやって定期的に手を入れていくものなんだなというのを改めて感じました。
それを自分のブログにも取り入れられないか、というところから今回のテーマ作り直しは始まっています。もともと今のテーマもほぼ初期設定のまま使っていたので、正直かなり味気ないトップページだったんですよね。それは前から自分でもわかっていたことでした。
配色は3段階の変遷を経た
まず手を付けたのはトップページのカテゴリー一覧（料理・日常・だらず世界史…といったジャンルごとのカードを並べた部分）でした。ここの色味は、実は3段階くらい試行錯誤しています。
- 1回目：カテゴリーごとにカラフルな背景色を敷いてみる → 情報量が多すぎて、パッと見たときにうるさい印象
- 2回目：背景は薄いクリーム色で統一して、カードの左端だけに色帯を置いてカテゴリーを見分けるようにする → 落ち着いたけど、今度はカードとカードの境目がぼんやりしすぎ
- 3回目：2回目の形はそのままに、カードのふちに細い線を足す → ここでやっと納得のいく見た目に
色の理論とか配色のルールみたいなものは正直まったくわかりません。ただ「なんかしっくりこない」「なんか違う」という感覚だけは自分の中にあって、それをその都度伝えて、実際の色に落とし込んでもらう、というやり方で進めました。
広告の見せ方も考えた
広告まわりも今回いろいろ決めることがありました。ブログを続けていく以上、広告収入は正直大事な部分です。ただ、それが読んでくれる人の邪魔になりすぎるのも本末転倒だなと思っていて。できるだけ自然に、読んでいる流れの中に広告が現れるような形を目指しました。
具体的には、カテゴリー一覧のすぐあとに広告を1つだけ置くことにしました。画面の上や下からいきなり被さって出てくるタイプの広告（オーバーレイ広告というやつです）も今は入っているんですが、これはそのうち消そうかなと考えているところです。
Amazonアソシエイトの商品を「今週の人気記事ランキング」の中に紛れ込ませる案もあったんですが、これはまだ実際の見た目を確認できていません。人気記事の集計がまだ十分に溜まっていないためです。動いてきたらまた見てみようと思います。
トップページ全体の並び順は、上から「ブログのイメージ（ヒーロー部分）」→「カテゴリー一覧」→「広告」→「人気記事ランキング」→「新着記事」としました。個別の記事をたくさん見せたい気持ちもあるんですが、それより先に「だらず夫って結局何をやっている人なの？」というのが伝わる作りにしたかったんです。ページを開いた瞬間に見える範囲（ファーストビューといいます）で、そこが伝わるかどうかを一番意識しました。
「日常」カテゴリーがなんでも屋になっていた
カードを並べる作業をしていて改めて気づいたんですが、今のWordPressのカテゴリーは「料理」「日常」「だらず世界史」「日ハム」の4つしかありません。ダイエットの話も、資格の勉強の話も、ガジェットのレビューも、全部「日常」というカテゴリーにまとめて突っ込んでありました。
これ自体は前からわかっていたことなんですが、さすがに「日常」で片付けるには記事の数が増えすぎてきたので、今回のテーマ作り直しをきっかけに整理することにしました。カテゴリーを分け直しても記事のURLが変わってしまう心配がないことも、あらかじめ確認済みです。実はこのあたり、当時の自分がちゃんと考えていたはず、という記憶もあります。
だらず世界史だけは特別扱いにした
カテゴリーページはどれも同じ作りにしたんですが、だらず世界史だけは専用のページにしました。毎週日曜19時の更新をずっと続けているシリーズなので、それに見合う見せ方をしたかったんです。
ページの上のほうには、これまで公開した話数・番外編の数・今後予定している話数を数字で表示して、「毎週日曜19:00更新」のマークも付けます。話の一覧は本編と番外編を分けず、公開した順番に1本の流れとして並べる形にしました。予約投稿している回があれば、「◯月◯日（曜日）19:00 公開予定！」というカードが自動で出るようにする予定です。
今後の予定（#10以降）については、1話ずつ並べると量が多くて見づらいので、いくつかの話をひとまとめにした単位でカードにしています。まだ構想の段階のものも多いので、その旨は書き添えた上で載せています。
デザインの検討はここまでで一区切りです。トップページ、カテゴリーページ、だらず世界史のハブページと、見た目の設計図としては固まりました。あとは記事ページの中身と、これを実際にWordPressで動くように組み上げていく作業が残っているんですが、この実装で結構な数のトラブルに遭遇したので、それは次回の記事にまとめています。
というお話でした。
