YochiYochiサイトデザインリニューアルしました[2016秋]

トップページのスクリーンショット

もはやこのサイトの恒例行事となりつつあるサイトデザイン変更のお知らせです(笑)

1ヶ月ほど前に、「6ステップでマスターする 「最新標準」HTML+CSSデザイン」の本を使ってサイトデザインを変えてみたのですが、いじっている内にいろいろと装飾を付け足してしまって、ごちゃごちゃしたと感じになってしまったのが気になっていました。
6ステップでマスターする 「最新標準」HTML+CSSデザイン

シングルページは1カラムでの表示でしたが、文章に集中できるというメリットはありますが、中央にデデンと文字が並んでいるのは意外と読みにくいような気がしたので、よくあるブログサイトの2カラムに変更することにしました。

また、これまで変えていなかったサイトアイコンも今回ちょっぴり変えてみました。

今回のテーマはシンプル・ベーシック

今回考えた、サイトデザインのテーマはなるべくシンプル・ベーシックなものにしようと思い、作成することにしました。
先ほどにも書いたようにレイアウトもよく見る形の2カラムとなっていますし、色の種類もあまり使いすぎないように心がけました。
サイトのレイアウトは「WordPressデザインブック」と同じような形になっていますね。
WordPressデザインブック

最近は、自分の好きな色であるネイビーをサイトのデザインに取り入れていたのですが、元々の考えていた(予定していた)サイトカラーは緑でしたので、ところどころ緑を使ってアクセントにしてみました。

文字も大きめにして、デザイン性よりも読みやすさ、分かりやすさを重視しています。
特にパソコン上からなら、文字の大きさが感じられるかもしれません。
文字サイズをpxでなく、remで指定しているので、ブラウザ設定から行える文字サイズの変更にも対応しています。
詳しく試してはいないため、拡大したらどこかしら崩れたりすることがあるかもしれませんが、もしそのような所を見つけたら教えていただけるとありがたいです。

Webページの高速化も意識

Webページ表示の高速化することも今回意識して取り組んだことで、GoogleのPageSpeed Insightsでのモバイルの速度が、以前よりも20ポイント近く上がりました。

リニューアル前のPageSpeed Insights速度
以前のデザインのときの速度
リニューアル後のPageSpeed Insightsの速度
今回のテーマデザインの速度

参考にしたのはもちろん、エビスコム本(笑)の「これからの「標準」を学ぶ マルチデバイス対応サイト構築」という本の情報を元に行っています。
これからの「標準」を学ぶ マルチデバイス対応サイト構築

正直、まだレンダリングとか意味を分かっていないまま対策しているので、それはそれでどうかとは思いますが、実際スマホで自分のサイトを見てみても、速度は体感でも上がっている気がするので自己満足しています。

とりあえずはこのデザインでいきます

個人的には満足の出来だと思っているので、しばらくはこのデザインテーマでやっていきます。(いつもアテにならない…)
気になったところがあったら、その都度ちょこっと修正する感じでやっていきましょうかね。

今回も、無駄にFlexboxを使ってレイアウトしているので、もし表示がおかしくなっているところがありましたら、ぜひ教えてください。
私はapple製品持っていないので、iPhoneでの表示がどうなっているかとか確かめられないんですよね…

コロコロとデザインを変えているため、毎回見ているには迷惑をかけているかもしれませんが、これからもよろしくお願いします。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です