本記事にはプロモーション（広告）が含まれます。
ブログのデザインをプロっぽく
センス不要の7原則
「センスがないからデザインは無理」と思っていませんか。私もそうでした。
でも実際にやってみて分かったのは、プロっぽく見えるかどうかは、センスではなく「守っているルールの数」で決まるということです。
この記事では、デザイン知識ゼロの私が実践している7つの原則を書きます。どれも「決めて、守るだけ」です。
素人っぽく見える原因は「バラバラ」
先に結論を書きます。素人っぽく見えるブログには、共通点があります。
この記事の7つの原則は、全部「揃える」ための話だと思って読んでください。
①色は3色以内に絞る
使う色をメインカラー1色・文字色1色・アクセント1色の3つに決めます。それ以外は使いません。
| 役割 | 使う場所 | 選び方 |
|---|---|---|
| メインカラー | 見出しの背景、ボタン、囲み枠 | 濃い色にすると白文字を乗せやすい |
| 文字色 | 本文 | 真っ黒より少し柔らかいグレー寄りが読みやすい |
| アクセント | 強調したい一箇所だけ | 使いすぎると強調にならない |
色は「決めた瞬間に迷いが消える」ので、最初にやると一番ラクになります。メモアプリに色のコード（#1d3557のような英数字）を書いて保存しておくと、毎回同じ色が使えます。
②フォントは2種類まで
1つのブログで使うフォントは見出し用と本文用の2種類までにします。
迷ったら、見出しは太めのゴシック体、本文は読みやすいゴシック体か明朝体。WordPressテーマの初期設定のまま使うのが、実は一番失敗しません。
Webフォントは1種類増えるごとに読み込みが重くなります。見た目のために表示速度を落とすのは本末転倒です。2種類までなら、体感できるほど遅くなることはありません。
③余白を怖がらない
素人デザインで一番多い失敗が詰め込みすぎです。
「ここ空いてるから何か入れよう」と思ったら、たいてい入れないほうがきれいになります。「もう少し余白があってもいいかな」と感じるくらいが、ちょうどいいです。
具体的には、段落の間、見出しの前後、囲み枠の内側——この3か所を意識的に広めに取ります。それだけで印象が変わります。
④文字の大きさを3段階に固定する
これは意外と見落とされがちですが、効果が大きい原則です。
- 大：見出し——記事の骨格
- 中：本文——スマホで読みやすいサイズに（小さすぎないこと）
- 小：注釈・キャプション——補足情報だけ
この3つ以外のサイズを作らないと決めると、記事ごとのバラつきが消えます。「ここだけちょっと大きく」を始めた瞬間に崩れます。
⑤アイキャッチを統一する
ブログの印象を決めるのは、実は記事の中身よりトップページに並ぶアイキャッチ画像です。
ここがバラバラだと、どんなに中身が良くても雑に見えます。逆に揃っていれば、それだけできちんと運営されているサイトに見えます。
作り方はブログのアイキャッチ画像の作り方【Canva無料版で10分】にまとめました。ひな形を1つ作って、以降はコピーして文字だけ変える方法です。
⑥装飾の「型」を決めて使い回す
記事の中で使う囲み枠やボックスも、種類を決めて使い回します。私が使っているのは4種類だけです。
| 型 | 使う場面 |
|---|---|
| 注意ボックス（⚠️） | 失敗しやすい・危ない箇所 |
| チェックボックス（✅） | 手順や確認事項の箇条書き |
| ポイントボックス | その記事で一番伝えたいこと |
| ステップカード | 順番のある手順 |
毎回同じ型を使うと、読者が「この色の枠は注意書きだ」と学習してくれるので、読みやすさも上がります。装飾は飾りではなく、意味を伝える道具です。
⑦テーマはシンプルなものを選ぶ
派手なテーマより、シンプルなテーマのほうが結果的にきれいになります。理由は3つあります。
- カスタマイズしやすい——凝ったテーマほど、いじると崩れます
- 表示が速い——装飾が少ないぶん軽い
- 飽きにくい——流行のデザインは数年で古く見えます
私は無料テーマのCocoonを使っています。無料だから劣るということはありません。 テーマにお金をかけるより、記事の中身に時間をかけるほうが効きます。
スマホで確認しないと全部台無しになる
パソコンの大きな画面で「いい感じ」と思っても、スマホだと文字が小さすぎて読めない・表が横にはみ出す・余白がなくて窮屈ということが普通に起きます。公開前に必ずスマホで開いて、上から下まで一度スクロールしてください。 これをやるかやらないかで、印象がまるで変わります。
特に気をつけるのは表（テーブル）です。列が多い表はスマホでつぶれます。列は3つまでに抑えるか、横スクロールできるようにしておくと安全です。
やりがちな失敗5つ
- 色を増やす——「ここは緑にしよう」が積み重なって崩壊します
- 文字を大きくして強調する——太字か色、どちらか1つで十分です
- 装飾を毎回変える——記事ごとに違う枠を使うと、統一感が消えます
- アニメーションを付ける——読む邪魔になり、表示も遅くなります
- デザインに時間をかけすぎる——これが一番の失敗です
時間がない人がやる順番
全部やる必要はありません。効果の大きい順に3つだけ挙げます。
よくある質問
Q. 有料テーマにすべきですか?
最初は不要です。無料テーマで不便を感じてからで十分間に合います。テーマ代を払うより、記事を1本厚くするほうが効果があります。
Q. CSSがわからなくても大丈夫ですか?
大丈夫です。テーマの設定画面でほとんど調整できます。どうしても必要になったら、やりたいことを日本語でAIに伝えれば書いてもらえます。
Q. デザインはSEOに影響しますか?
直接の順位要因ではありません。ただし読みにくくてすぐ閉じられるのは間接的にマイナスです。凝る必要はありませんが、読みやすさは確保してください。
Q. 途中でデザインを変えてもいいですか?
問題ありません。ただし変えるなら中途半端にせず、全体を揃え直してください。新旧が混在するのが一番よくない状態です。
まとめ
📚 ブログデザインをもっと学ぶ
一生使える見やすい資料のデザイン入門（楽天・Amazon）
ブログのデザインはPCやスライドと共通する原則で成り立っています。「余白・色・フォント」の基本を学べる入門書です。
※本リンクはアフィリエイトリンクです
- 素人っぽく見えるのは下手だからではなく揃っていないから
- 色3つ・フォント2つ・文字サイズ3段階を決めて守る
- 余白は多めに。詰め込みが一番ダサく見える
- アイキャッチの統一がいちばん費用対効果が高い
- 装飾の型を決めて使い回すと、読者が意味を学習してくれる
- 公開前に必ずスマホで確認。読者の6〜7割はスマホ
- デザインを整えても読者は増えない。時間の配分を間違えない
デザインは「引き算」です。何か足したくなったら、まず「これは無くても伝わるか?」と自分に聞いてみてください。たいていの場合、無いほうがきれいです。
見た目より先にやるべきことがある方は検索流入ゼロの原因を5分で診断する方法を、テーマ選びで迷っている方はWordPressプラグインは最小限でいいをどうぞ。
コメント