どうも、Wizです。 はてなブログproにアップグレードしたことをきっかけに、パソコンとスマホのデザインを別々にしました。
今回スマホサイトのカスタマイズが一段落ついたので、やったことを書いてみたいと思います。
意識したポイントは２つ。
「ブログ全体の統一感」と「記事のよみやすさ」です。参考にどうぞ。
現在このブログははてなブログからWordPressに移行しています。（テーマ：SANGO）
記事内に書かれている内容やデザインはあてはまらない部分があることを前提にお読みください。
目次
ブログ全体の統一感
before→after
デザインのテーマ
統一感を出すためには、一つのテーマを軸にカスタマイズするべきです。
いいとこ取りという方法もありますが、自力でコードをいじくるスキルが必要になりますし、時間がかかってしまいます。
そんなわけで、100％スマホから見ることを念頭につくられている、こどみすさんが作成したカスタマイズ集を軸にさせていただきました。ありがとうございます！
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳
まさか私のサイトが、こんなスタイリッシュになるとは思いませんでした。本当に感謝しかありません。
ブログのカラー
ブログの統一感で重要になるのは”色”です。
受ける印象は、色によって明らかに変わってきます。ブログを見てくれる人に、どのような気持ちになってほしいか考えて色を決めました。
ウェブデザインと色の関係は、こちらのサイトを参考になります。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」｜テクニカルブログ｜株式会社エムハンド
デザインの基本として、ベースカラー、メインカラー、アクセントカラーを決め、それぞれ70％、25％、5％の比率で用いることで、統一感のあるブログができました。
具体的なカラーはこちらのサイトを参考に決めました。
Color Hunt – Color Palettes for Designers and Artists
いくつもの美しい配色デザインが投稿されています。順に見て、気にいった配色を選びましょう。
このサイトのテーマは、「映画」と「Web小説」です。どちらもエンタメ系なので、メインカラーには、”リラックス”・”穏やか”なイメージの緑系にしました。
この色をメインとして見出しや、引用ボックスを作成しています。
どのような印象になるか、実際に見ながらえらびたいときはこちらのサイトがおすすめです。配色のプレビューを見ながら、選ぶことができます。
記事の読みやすさ
誰にとってのよみやすさか
読みやすさといっても、だれにとっての読みやすさを目指すのか決めなければいけません。
若い人と、高齢者ではおのずとのぞましいフォントサイズも変わってきます。ある程度のベースラインをつくっておくことで、「ブログの統一感」にも影響がでてくるでしょう。
このブログの読者
このブログの読者をGoogle Analyticsから分析してみました。
18~34歳の人が約80％、男女別だと68：31の比率となっています。そのため、若い人が読みやすいデザインにする必要があります。
before→after
この結果がこれです。左から①→②→③とします。
①がなにもカスタマイズしていない状態です。改行したあとの行間が広いため、バランスがわるく読みにくい感じがありました。
②が改行したあとの行間を通常の改行と同じようにし、フォントサイズを大きくしたものです。フォントサイズは16px、行間は1.6ですが、若い人が読むにしては大きすぎる気がします。見出しとのバランスも悪いです。
③は決定版です。このブログでとりあげているWeb小説のサイトである、「小説家になろう」のフォントサイズとフォントカラーをとりいれました。サイズは14pxです。年齢層もぴったりですし、小説家になろうを読み慣れている人には、読みやすいデザインになったと思います。
文字の設定についてはこちらのサイトがおすすめです。ここからすべてできました。
【CSS】line-heightで行間を調整する方法：おすすめの値は？
【コピペ＋α】はてなブログで文章を読みやすくするカスタマイズ集 – いつ俺〜いつから俺ができないと錯覚していた？〜
まとめ
スマホデザインをつくっていくときに意識したことを書きました。これからつくって行く人の参考になればと思います。
【GoogleChrome】ブログ執筆がはかどる拡張機能はこれだ！
ブログのカスタマイズの記録はマインドマップが最適な方法だ！
