ブログデザインの決め方｜プレビューを比較してWordPressテーマを整えた記録

ブログのデザインを最初から一度で決めるのは難しいと感じました。「どいやさんぽ。」では、テーマをサイトとしてプレビューし、実際に記事を読んだりボタンを押したりしながら調整しています。この記事は、その変更記録と、次にデザインを考えるときの手順です。

最初に「サイトで何を見せたいか」を決める

このブログの目的は、Web制作などの記事を書きながら、自分の制作物も紹介することです。そのため、作品だけを大きく並べるサイトでも、記事だけの一覧でもありません。初めて来た人が「何を作っている人か」を理解し、作品と記事の両方へ進める構成を考えました。

最初のオリジナルテーマをプレビューし、記事カード中心、落ち着いたブラウン、雑誌風、余白の多いデザインなどを比較しました。静止画だけでは分からない、記事への移動や文字量の見え方も確認できます。

途中では「カード型の記事一覧の構成」と「落ち着いた文字・色」の組み合わせも試しました。同じ配色でも、記事一覧の形が変わると読みやすさは大きく変わります。比較するときは、一度に全部を変えず、構成・色・文字・画像のどこを選んだのかメモすると戻しやすくなります。

トップの紹介、サイドバーのAbout Me、ページ下のブログ紹介が重なっていた時期がありました。そこで、トップには短い自己紹介とPortfolioへのボタンを残し、詳しい情報は別ページへ移す方向に整理しました。

「IORI SATO」の文字を大きく見せた案も試しましたが、名前が目立ちすぎると感じてサイズを調整しています。読者が次に押すボタンより装飾が目立つ場合は、見出しの大きさや余白を見直します。

トップの「Portfolioを見る」は、制作物を載せたPortfolioページへつなぐ役割です。一方、新着記事には「すべての記事を見る」から記事一覧へ進めるようにしました。

ヘッダーの「ブログ運営」「Web制作」「日々のこと」も、読者が興味のある記事へ移動するための導線です。ボタンが表示されていても、その先に記事がない場合があります。記事を公開するときにタグとリンク先を一緒に確認します。

後半では、ポートフォリオを大きく見せるレイアウトと、白・黒を中心に細い線と控えめな赤を使う雰囲気が気に入りました。気に入った案を丸ごと選ぶのではなく、構成と色を組み合わせて現在の方向へ整えています。

見た目の判断基準は「スタイリッシュでシック、でもごちゃごちゃしないこと」。記事タイトルが読めるか、制作物へ進めるか、ボタンの優先順位が伝わるかを確認しました。

特にテーマを変更した後は、以前あったボタンや関連記事が消えていないかも確認します。実際に、AI質問ページを変更した際に「ブログ運営」「Web制作」「日々のこと」のボタンが見えなくなり、戻したことがありました。新機能の確認と、既存機能の確認はセットで行います。

目的を一文にする → 構成案を複数出す → 同じ記事を入れてプレビューする → 色と文字を選ぶ → トップと記事ページを両方見る → スマホで確認する。この順番なら、好みだけでなく使いやすさも判断できます。