【意見下さい!】ブログ本文中の画像は中央寄せ・左寄せどちらにするべきか?

【意見下さい!】ブログ本文中の画像は中央寄せ・左寄せどちらにするべきか?
みるみ

追記 (2019/5/11) :この記事では色々言っていますが、現在は結局中央寄せに変更しています。主な理由は見た目というか雰囲気です…。

今回はちょっとアンケート的な感じ。

ズバリ「本文の画像は中央寄せにすべきか左寄せにすべきか」ってやつです。

昔はよくこの話題を耳にした気がするんだけど、今はググってもそれらしいのはあんまり出なかった。WordPressとかそれに類するテーマの作りとかが整ってきたから選択の余地も減ってきたのかな?

※以下二派閥に分かれてひとりでに議論が展開されていきますが、僕の心の中で勝手に思っている話です。世間一般の主張はむしろ知らないので教えてください

議論の前提

この議論にはいくつか前提条件が必要です。認識のすり合わせをしておきましょう。

  1. いわゆるアイキャッチみたいな「イメージ画像」ではなくて、本文内で内容として必要な画像の話
  2. 記事内のメインカラムで、カラム幅より画像が小さい場合の話
  3. PCとスマホでも大きく事情は変わる(と思う)
  4. 画像の大きさによっても意見は変わる
  5. まさか右寄せ派とかいませんよね!?

1.いわゆるアイキャッチみたいな「イメージ画像」ではなくて、本文内で内容として必要な画像の話

一応書きました。

midashi_image

こういう見出しのあとに置くよくある「イメージ画像」みたいなのではなくて、普通に内容の説明に画像が必要なときなんかの話が対象ですってこと。

2.記事内のメインカラムで、カラム幅より画像が小さい場合の話

これについてはまあ当然というか、そもそも親要素となるカラム幅より画像の横幅が大きいなら中央寄せも左寄せもクソもありません。

midashi_image2

ちなみに1番でいう「イメージ画像」はほぼ100%、カラム幅より大きいものを選んでいるはずでしょうから、ここでも除外されます。

3.PCとスマホでも大きく事情は変わる(と思う)

まず絶対的に画面横幅のサイズに違いがある、ということが条件としてかなり影響すると思っています。この話は次の4番でも登場です。

さらに、入力インターフェースの違いも挙げられそうです。つまりマウスカーソルがあるか指でスクロールするのかという具合。

ここは一概にはまとめられないので都度考慮する必要がありそう。

4.画像の大きさによっても意見は変わる

中央寄せにするのか左寄せにするのかは、その画像のサイズでも意見は変わると思っています。

例えば「カラム幅に対して画像がかなり大きい場合(目安75%以上くらい?)」なら、僕は迷わず中央寄せです。説明するのは面倒ですが、なんとなくみなさんも分かっていただけるでしょう?(雑

というわけで、今回は3番と併せて「画面横幅に対する画像サイズの比率」を定義しながら議論を進めてみます。

5.まさか右寄せ派とかいませんよね!?

ネタ枠。

中央寄せ党の主張

大雑把に言うと見栄え優先派ってところでしょうか。おそらく以下のような意見があると思います。

「そもそも真ん中にないとか有り得ない」

論よりパワーの主張です。明確な論拠なんか示せないけど、とにかく画像が端に寄っているなんて許せない!という方たちです。分かります。

画像はテキストとは差別化されているべきだから

つまり「より目立たせたいから」というニュアンスに置き換えられる感じでしょうか。

たしかに目を引くために設置している画像ならこれは理に適っていますね。

スマホ閲覧のことを考えると不格好さが増す

さっき定義した「画面横幅に対する画像サイズの比率」の件ですが、スマホは分母となる画面横幅が既に小さいので、多くの画像は中央に置いた方が良い、となりやすいという意見です。

さっき僕が即答した「大きい画像なら中央寄せ」の件だけど、つまりスマホだとその確率が高いというイメージですね。

ただ、これはcssでのレスポンシブデザインの一環で一蹴されてしまうかも。スマホだけ中央寄せすればいいって話になりますもんね。

左寄せ党の主張

変わってこちらは左寄せ党。どちらかというと論理派なイメージです。

文章を読んでいく上でいきなり真ん中にコンテンツが現れるのは見にくい

人の目は1行を読み終わったらまた左端に戻る癖がついているので、いきなり真ん中になにかが現れると少し目の移動距離が増えるんです。つまり、すらすらと本文の流れで画像を認識できないという主張。

見栄えで差別化、と真っ向から相対する意見という感じですね。

ちなみに、これは小さい画像で顕著に実感できます。読みやすさがかなり違うので一度お試しあれ。

マウスポインタはだいたい右側にあることを考えると、なるべく左にあった方が邪魔にならない

人間がPCでネットサーフィンをするとき、多くの人がマウスポインタを無意識のうちに画面の右側に置いておく傾向があることが分かっています。

それを考えると、極力邪魔と感じさせない位置に画像があるべきだ、という主張。

これだけだとちょっとこじつけ感あるんだけど、画像にtitleタグを入れている人はちょっと注意した方がいいかも

titleタグがついた画像は、マウスポインタが上に乗るとツールチップでタグ内容が表示されるのでものすごく鬱陶しいんです(ブラウザで差異あり)。

cursor-pointer-title-tag-toolchip

なので僕はもともとaltタグ(代替テキスト)のみ入れるようにしています(SEO的にもaltタグのみで問題ないという結論が出ています。画像のファイル名も意味のあるものにしておけば精神的な保険にもなるでしょう)。

今のところの僕の結論

というわけで、僕は基本左寄せをキープしています。
(※今は違いますが…)

なんだけど、特にスマホのスクショを挿入するときがかなり困っていて、縦に細長いという最も扱いにくい形状上いつもどっちにすべきか迷います…(横幅マックスは全体サイズでかすぎなのでナシ)。

僕の場合を一言でまとめておくと、

画像サイズが小さければ小さいほど左寄せに、大きくなれば中央寄せも検討していく

という感じです。

スマホは全部中央寄せにしちゃおうかもすごく迷っているんですが、それの実行の前に今回こんな記事を書いてみました。

みなさんの意見を聞かせてくださーい!!

みるみ
みるみ

ブロガー、ソフトウェアエンジニア。

文章を書くのが好きです。サイトは全部自分でつくっています。

この記事へのコメント
コメントはまだひとつもありません :)

新しいコメントを書く

  • 必須項目はコメント本文のみですが、お名前はぜひご記入いただけると嬉しいです。
    ※メールアドレスを書いた場合も公開されることはないのでご安心ください。
  • 特定のコメントに返信したい場合は各コメントにある「返信する」ボタンからどうぞ。
  • コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。
    ※ここ数年スパムが激化しており、誤って削除されてしまうケースが増えてきました。スパムボックスも毎日自分の目で確認するようにはしているのですが、どうしても限界があります。確実に僕に連絡を取りたい方は メールTwitter からお願いします。