ブログのデザインを最初から一度で決めるのは難しいと感じました。「どいやさんぽ。」では、テーマをサイトとしてプレビューし、実際に記事を読んだりボタンを押したりしながら調整しています。この記事は、その変更記録と、次にデザインを考えるときの手順です。
先に結論：目的を一文にする → 同じ記事と制作物を入れた複数案を比べる → スマホで読んで操作する → 変更後に以前の導線も確認する。この順番で決めると、好みと使いやすさを両方見られます。
最初に「サイトで何を見せたいか」を決める
このブログの目的は、Web制作などの記事を書きながら、自分の制作物も紹介することです。そのため、作品だけを大きく並べるサイトでも、記事だけの一覧でもありません。初めて来た人が「何を作っている人か」を理解し、作品と記事の両方へ進める構成を考えました。
1. 画像だけで決めず、サイトとして比較する
最初のオリジナルテーマをプレビューし、記事カード中心、落ち着いたブラウン、雑誌風、余白の多いデザインなどを比較しました。静止画だけでは分からない、記事への移動や文字量の見え方も確認できます。
途中では「カード型の記事一覧の構成」と「落ち着いた文字・色」の組み合わせも試しました。同じ配色でも、記事一覧の形が変わると読みやすさは大きく変わります。比較するときは、一度に全部を変えず、構成・色・文字・画像のどこを選んだのかメモすると戻しやすくなります。
2. 自己紹介を重複させない
トップの紹介、サイドバーのAbout Me、ページ下のブログ紹介が重なっていた時期がありました。そこで、トップには短い自己紹介とPortfolioへのボタンを残し、詳しい情報は別ページへ移す方向に整理しました。
「IORI SATO」の文字を大きく見せた案も試しましたが、名前が目立ちすぎると感じてサイズを調整しています。読者が次に押すボタンより装飾が目立つ場合は、見出しの大きさや余白を見直します。
3. 記事と制作物への道を分けて作る
トップの「Portfolioを見る」は、制作物を載せたPortfolioページへつなぐ役割です。一方、新着記事には「すべての記事を見る」から記事一覧へ進めるようにしました。
ヘッダーの「ブログ運営」「Web制作」「日々のこと」も、読者が興味のある記事へ移動するための導線です。ボタンが表示されていても、その先に記事がない場合があります。記事を公開するときにタグとリンク先を一緒に確認します。
4. 最終案は構成と配色を別々に選ぶ
後半では、ポートフォリオを大きく見せるレイアウトと、白・黒を中心に細い線と控えめな赤を使う雰囲気が気に入りました。気に入った案を丸ごと選ぶのではなく、構成と色を組み合わせて現在の方向へ整えています。
見た目の判断基準は「スタイリッシュでシック、でもごちゃごちゃしないこと」。記事タイトルが読めるか、制作物へ進めるか、ボタンの優先順位が伝わるかを確認しました。
5. 毎回同じページを確認する
- トップ：最初の説明と記事・Portfolioへのボタン
- 記事ページ：本文、見出し、関連記事
- 記事一覧：件数、並び順、次ページへの移動
- 固定ページ：制作物やプライバシーポリシー
- スマートフォン：ヘッダー、カード幅、文字サイズ
特にテーマを変更した後は、以前あったボタンや関連記事が消えていないかも確認します。実際に、AI質問ページを変更した際に「ブログ運営」「Web制作」「日々のこと」のボタンが見えなくなり、戻したことがありました。新機能の確認と、既存機能の確認はセットで行います。
比較するときは同じ材料を使う
デザイン案ごとに違う文章や画像を入れると、見た目の差なのか内容の差なのか判断しにくくなります。トップページの自己紹介、同じ長さの記事タイトル、本文の見出しと箇条書き、制作物の紹介文を共通の材料にして見比べます。長いタイトルでもカードが崩れないか、本文の段落が続いても読みにくくないかを確認できます。
私は気に入った箇所を「配置」「文字」「色」に分けてメモしました。例えば、構成はA案、余白と配色はB案の方がよいなら、その理由を書いてから組み合わせます。感覚だけで決めるより、次の修正で迷いにくくなります。
公開後に確かめたい読者の動き
トップから記事を探す、記事から関連記事へ移る、制作物を見に行く、問い合わせに進む。この4つを自分でたどり、各画面で次の行き先が分かるか確認します。ボタンを増やしすぎると優先順位が曖昧になるため、最初に見せたい行動を一つ決めてから配置します。
見た目を直した後は、スマートフォンで本文の行幅、見出し間の余白、画像のはみ出し、メニューの押しやすさを確認します。記事一覧だけ整っていても、本文が読みにくければ目的を果たせません。読者が記事を読み終えたところまで確認するようにしています。
次にデザインを決めるときのメモ
目的を一文にする → 構成案を複数出す → 同じ記事を入れてプレビューする → 色と文字を選ぶ → トップと記事ページを両方見る → スマホで確認する。この順番なら、好みだけでなく使いやすさも判断できます。
コメント