読みやすく、統一感あるスマホデザインのためのカスタマイズ!

どうも、コトノハです。 はてなブログproにアップグレードしたことをきっかけに、パソコンとスマホのデザインを別々にしました。

今回スマホサイトのカスタマイズが一段落ついたので、やったことを書いてみたいと思います。

意識したポイントは2つ。

「ブログ全体の統一感」と「記事のよみやすさ」です。参考にどうぞ。

ブログ全体の統一感

before→after

f:id:kotonoha_sorakuni:20170607185811p:plain

デザインのテーマ

統一感を出すためには、一つのテーマを軸にカスタマイズするべきです。

いいとこ取りという方法もありますが、自力でコードをいじくるスキルが必要になりますし、時間がかかってしまいます。

そんなわけで、100%スマホから見ることを念頭につくられている、こどみす(id:codomisu )さんが作成したカスタマイズ集を軸にさせていただきました。ありがとうございます!

hitsuzi.hatenablog.com

まさか私のサイトが、こんなスタイリッシュになるとは思いませんでした。本当に感謝しかありません。

ブログのカラー

ブログの統一感で重要になるのは”色”です。

受ける印象は、色によって明らかに変わってきます。ブログを見てくれる人に、どのような気持ちになってほしいか考えて色を決めました。

ウェブデザインと色の関係は、こちらのサイトを参考になります。

WEBデザインで押さえるべき配色(ベース、メイン、アクセント)の基本「3つのカラー」|テクニカルブログ|株式会社エムハンド

デザインの基本として、ベースカラー、メインカラー、アクセントカラーを決め、それぞれ70%、25%、5%の比率で用いることで、統一感のあるブログができました。

具体的なカラーはこちらのサイトを参考に決めました。


いくつもの美しい配色デザインが投稿されています。順に見て、気にいった配色を選びましょう。

このサイトのテーマは、「映画」と「Web小説」です。どちらもエンタメ系なので、メインカラーには、”リラックス”・”穏やか”なイメージの緑系にしました。

この色をメインとして見出しや、引用ボックスを作成しています。

どのような印象になるか、実際に見ながらえらびたいときはこちらのサイトがおすすめです。配色のプレビューを見ながら、選ぶことができます。


記事の読みやすさ

誰にとってのよみやすさか

読みやすさといっても、だれにとっての読みやすさを目指すのか決めなければいけません。

若い人と、高齢者ではおのずとのぞましいフォントサイズも変わってきます。ある程度のベースラインをつくっておくことで、「ブログの統一感」にも影響がでてくるでしょう。

このブログの読者

このブログの読者をGoogle Analyticsから分析してみました。

18~34歳の人が約80%、男女別だと68:31の比率となっています。そのため、若い人が読みやすいデザインにする必要があります。

before→after

f:id:kotonoha_sorakuni:20170607211203p:plain

この結果がこれです。左から①→②→③とします。

①がなにもカスタマイズしていない状態です。改行したあとの行間が広いため、バランスがわるく読みにくい感じがありました。

②が改行したあとの行間を通常の改行と同じようにし、フォントサイズを大きくしたものです。フォントサイズは16px、行間は1.6ですが、若い人が読むにしては大きすぎる気がします。見出しとのバランスも悪いです。

③は決定版です。このブログでとりあげているWeb小説のサイトである、「小説家になろう」のフォントサイズとフォントカラーをとりいれました。サイズは14pxです。年齢層もぴったりですし、小説家になろうを読み慣れている人には、読みやすいデザインになったと思います。

文字の設定についてはこちらのサイトがおすすめです。ここからすべてできました。

まとめ

スマホデザインをつくっていくときに意識したことを書きました。これからつくって行く人の参考になればと思います。聞いてみたいことがありましたら、遠慮なくどうぞ!

現在読者募集中!

⇨便利な拡張機能まとめました

⇨マインドマップってものすごーくつかえます

コメントを残す