!-- VISA Session Recording Code -->
top of page
  • 執筆者の写真刹那

デザイン一新:レシポンシプがグッド


本サイトのPCデザインを一新することにした。


AdSenseの自動広告も直せる目処が立たず、固定広告に戻す意味もある(自分のスキル不足?)


はてなブログのテーマを変更。


変更の主な理由

まず、テーマだが、レシポンシプデザインにしたい。


これまではタブレットで見ると画像がはみ出ていて気分が悪かったからだ。

またテーマの「寿司ゆき」を使用していたが、正直に嫌な箇所もあった(全体的なバランス感は好きでしたけどね)。


気にっていなかったところ

  1. プログトップ画像が横いっぱいにならない。

  2. ヘッダの寿司ゆきが動いていて落ち着かない。

  3. サイドバーアイコンの寿司ゆきがほのぼのしすぎ。

特に赤字の1と2は最悪に感じていた。


画像を横いっぱいに表示するカスタマイズも試してみたが、寿司ゆきのテーマではできなかった。

先日たまたま横いっぱいにできるテーマ「Comfort(コンフォート)タク (id:oyomiyo)さん」を見つけ一目惚れし、デザインを変える決心がついた。


またこの機会にAdSenseは固定化に戻した。(「寿司ゆき」さん短い間でしたがありがとう)


全体のレイアウト

記事はカードフォーマットにしたい。

正直に言うと記事のカード化は、日付けを見れば分かりますが、直感的に時系列がわからないのが欠点です。


が、最近の投稿記事全体感を、見渡すことができる利点もありでデザイン的には良い。

慣れの問題にも思えるのでしばらくカード形式で使ってみることにした。


固定のAdSense広告

広告が入るとデザインが崩れてしまうので、多用はせずに効率的にしたい。

AdSenseの本を読むとブログトップ画像の下は「ゴールドエリア」のようで、閲覧者が一番目にするところと言われている(「ゴールドエリア」は私独自の名称)。


確かに収益の観点では理解できるが、デザインが・・(「自動広告」では有無を言わせずに配置され気分が悪かった)。

自分のデザインセンスを優先して、ここの配置はやめることにした(「記事の中身」で勝負できない自分が悲しい)。


あとはフッターに横大の広告を配置したが深い意味は無い。

そもそも、一番最後までページをスクロールして見る方はいないので、目につくことはないだろう。


デザイン的にページの終わりを明確にし、かつ広告を出すというのが目的だ。


読者になるボタン

今ひとつ「読者になる」ボタンが気に入っていない。標準のボタンは小さいので目立たせたい。


カスタマイズできるがボタンデザインだけで、「読者中」なのか見た目で判断ができない。

これまでは標準のボタンは判断ができる。

目立たせることと読者中の動作を両立したボタン配置していたが、中央に寄せることができずに60点という感じであった。


もう少しこだわりたいので、自作してみようかな・・。(現在は単純にフォローボタンのみとした)


 まとめの感想

とにかくレシポンシプデザインが気持ちが良い。


スマホ版もレシポンシプデザインを考えたが、小さい画面の割にレイアウトがごちゃごちゃする。

私の美学と会わなかったので、シンプルに標準のスマホデザイン(+カスタマイズ)を採用した。


最後に、簡単にできる範囲の画像の品質を抑えて、ファイルサイズを1/10に小さくしてみた。心なしか表示速度が速くなったのがわかる。


一手間かけて小さな積み重ねが、アクセンシリビティ向上につながるのだろう(大量にある古い画像は諦めてます)。


閲覧数:3回0件のコメント
bottom of page