teke teke my life おしごと編

ブログ運営やお仕事全般に関する雑感の保管庫。

undershirt自体が見づらいのか、レスポンシブデザインが問題なのか

少し前にブログテーマをminimalismからundershirtに変更したのですが、最近、なんだかモバイルページのトップページが見づらい気がしてきました。

というか、2カラムのカードがデスクトップでも見づらいんですかね…。ちょっと変更を検討しているので、変更を考えるために思考の過程を残しておきます。ブログ分割しまくったので、変更を加えるの面倒なんですよね…。

undershirtテーマのトップページについて

undershirtの2カラムのカード型記事一覧のメリット

多数の記事が目に入るのは明確なメリット

2カラム・カード型にした場合に、一番のメリットは多数の記事が即座に目に入るところです。通常の一覧だと、どうしても1ページに表示される量は5記事程度が限界ですが、2カラムにすることによって、2倍の量を表示します。

14記事表示にしても、あまりボリューム感を感じさせないところはいいところなのではないでしょうか。

カード型はアイキャッチ画像のインパクトが大きい

また、カード型にすると、記事の大見出しと同じぐらい、記事のアイキャッチ画像の占める割合が大きくなります。

基本的に、人間は文字情報よりも画像情報の方が即時にインプットできるそうなので、アイキャッチ画像のインパクトが大きくなることには効果があると思われます。

カード型記事一覧のデメリット

情報過多感はある

前述の通り、メリットはあるものの、情報過多感があるのは否めません。アイキャッチ画像が強調されているからそう感じるのか、そもそも1pに表示させる情報が多すぎるのか…。

minimalismテーマのトップページとの比較

デスクトップ上でのみやすさ

minimalismの方が見やすい気がする…

ぼくのブログ、別にアイキャッチ画像にやる気を出しているわけでもないので、実態としては、アイキャッチ画像メインになるとあまり見やすくもない、というところはあります。

その点、minimalismのトップページに変更すると、アイキャッチ画像が控えめに、文字情報がしっかり表示されるため、少し見やすいように感じます。いや、それも見やすいかというと微妙なんですけど。

モバイル版での見やすさ

モバイル版だとどっちもどっち感

モバイル版でレスポンシブデザイン適用した場合の見やすさは結構どっちもどっちですね。というか、minimalismが見づらい説があります。

とはいえ、undershirtのときも見やすいかというと…。やっぱアイキャッチ画像の工夫が足りないんですかね…。

レスポンシブデザインにしない方が見やすい感ある

仮にレスポンシブデザインを解除してみると、思ったよりも見やすい印象です。

実際、よく読むはてなブログをいくつかチェックしてみたところ、レスポンシブデザイン解除後のはてなの通常デザインでした。まあ、それは大昔からやっているから、レスポンシブデザインに変えるタイミングがなかった、ということのような気もしますが、モバイルではもしかしたらレスポンシブデザインを適用しない方がすっきりと見やすくなるのかもしれません。

今後のデザイン変更の方向性

デスクトップの表示はminimalismベースに戻す

ちょっと作業が面倒なのであれですが、デスクトップ上の表示はminimalismテーマ+本文デザインCSSに戻すかもしれません。いま、そんなに見やすい印象もないので、ちょっと戻すのを試してみるのはありかな、というところで。

(ゲーム系・漫画系はアイキャッチ画像の比率が高いので、undershirtのままにするかもしれません)

モバイル版はレスポンシブデザインを切って、はてな公式デザインにする

感覚的に、レスポンシブデザインを無理に適用するよりも、はてな公式デザインにしてしまった方が良さそうです。結局、小さい画面の最適解ってある程度決まっていそうですし、そのあたりははてながベースで作っているデザインが秀でている部分はありそうです。

というわけで、まあおいおい、デザインは見直していくことにします。