梅屋敷商店街のランダム・ウォーカーのデザインをリニューアル!デバイスを問わないレスポンシブデザインに

水瀬ケンイチ

drinks-1283608_1280.jpg


本日、当ブログ「梅屋敷商店街のランダム・ウォーカー」のデザインをリニューアルしました。





今回のリニューアルのポイントは、「レスポンシブウェブデザイン」です。

レスポンシブ‐ウェブデザイン 【responsive web design】の意味

ウェブページデザインの手法の一。スマートホン、タブレット型端末、パソコンなど複数の端末に対し、単一のURL(HTML)で対応するもの。ブラウザの幅で端末を判断し、表示を切り替える。レスポンシブデザイン。RWD。
(出典:デジタル大辞泉


当ブログは、PCの大画面だと少しスッキリしただけであまり変わっていないように思われるかもしれません。でも、スマートフォンやタブレットの小さなで見ても、自動的に最適化されてPCと同じ内容、同じメニュー構成、同じイメージのデザインで見ることができるようになりました。

photo20180729.png
(PCのディスプレイで表示)

photo20180729_2.png
(5インチ液晶のスマートフォンで表示)

正直、今までPCで見ることを前提にブログを作成していました。PCでみていちばんきれいにまとまって見えるように作成して、それがスマートフォンやタブレットでどう見えるかは、あまり考えていませんでした。すごく古くてダサいデザインで、何年も放置してきたと思います。

しかし、アクセス解析のデータを見ると、もはや、当ブログをPCで見ている方は全体の40%に過ぎず、残りの60%はスマートフォンやタブレットで見てくれていました。

20180728.jpg
(出所:Google Analytics)

こりゃアカン。自分ではなく、見てくれるたくさんの方にとって見やすいブログであるべきだと思い直しました。そういう目で、世の中の投信ブログを見渡してみると、レスポンシブウェブデザインのブログがたくさんありました。気づかんかったなぁ。

当ブログも、レスポンシブウェブデザインにしたことで、スマートフォンやタブレットでも見やすくなったのではないかと思います。「ホーム」「記事一覧」「資産配分」などのグローバルメニューは、画面上部の「三本線のボタン」を押すと、PC版と同じメニュー構成で出てきます。

その他も、「プロフィール」「メールフォーム」「人気記事ランキング」「リンク集」等のコンテンツは、画面をスクロールすれば、PC版と同じコンテンツが下にまとまっています。たとえば、今まではスマートフォンではメールフォームが使えなかったのですが、今後は使えるようになります。

まだ、文字が小さいところなど違和感を感じる箇所が多々あります。時間を見つけて少しずつブラッシュアップしていきたいと思います。

ブログと同様、気分も一新してブログを運営していきたいと思いますので、今後とも、当ブログ「梅屋敷商店街のランダム・ウォーカー(インデックス投資実践記)」をよろしくお願いします。


管理人 水瀬ケンイチ

関連記事
Posted by水瀬ケンイチ