デザインリニューアルとレスポンシブデザインのメモ書き。

デザインリニューアルとレスポンシブデザインのメモ書き。
デザインリニューアルとレスポンシブデザインのメモ書き。

昨日、重い腰をあげてようやくブログのデザインをレスポンシブデザインにしました。はじめて作ったので、ばっちりという感じでもなくアバウトレスポンシブですが、作ってみた時のことを記録として残しておきたいと思います。

デザインをリニューアルした理由

前回のデザインはワンカラムで作っていて、ひとまずPCで見やすくという部分に着目していたのでスマートフォンなどの表示は二の次でした。ただアクセス解析を見てみると、2割~3割ぐらいがモバイル(もしくはタブレット)からのアクセスだったので、今後もっと増えることも予想してのリニューアルとなりました。せっかくなら、どの端末からでも見やすいほうが良さそうだし。それと単純にレスポンシブってどうやって作るのか、試したかったのもあります。自分のブログなら試験的に試せるので、色々やりたくなりますねー。

レイアウトを考えてみる

レスポンシブとなると、スマートフォン・タブレット・PCの3つの切り替えが必要になってくるので、ひとまずどういう風にするのかを考えてみました。色々レスポンシブデザインを見てきて、ざっくり感じたことをまとめてみます。

・スマートフォンはワンカラムでとにかく下にスライドして読む構成が多い
・タブレットは、スマートフォンよりも幅が広く使えるが、2カラム程度の構成が多い
・PCは、幅が広いから好き勝手に出来るというわけではなく、スマートフォン・タブレットでの構成を見据えてデザインしたほうがやりやすい

ほんとにざっくりですが、色々見ているとPCでの表示を自由にしすぎてしまうと、他の端末でのレイアウトでどう構成するかが複雑になってしまうので、まずはスマートフォン・タブレットでどのように構成するかを先に考えるのがやりやすいかなと感じました。

レスポンシブデザインについては、responsive-jpというサイトに沢山まとめて掲載されているのでおすすめです。

http://responsive-jp.com/

というわけで、構成はこんな感じに。

各デザインの構成案

スマートフォン用とPC用は最初からなんとなく、こんな感じかなーというのが出来ていました。ただタブレットについてはサイドバーをどうしよう?と考えた時に、サイドを2つに分けて左右に配置すればバランスが良いな、ということでこの配置になりました。

リニューアルにあたっての、デザイン&内容の変更

前回のデザインでちょっと不足しているなと感じたことは、ワンカラムであまり他の記事への導線をつけてなかったので、1人当たりの閲覧ページ数が極端に少なかったことです。なので今回は、サイドバーに記事紹介を強化しようと思いました。というわけでサイドバーには、新着記事・週刊ランキング・はてなブックマークのランキングの3種類を配置しました。どのページでも表示されるサイドバーなので、これからPV数に変化があるかは様子を見ていきたいと思います。

ヘッダーのメニューについては、端末ごとに切り替える(PCなどでは全部表示して、スマートフォンではタップして表示させるとか)ことも考えたんですが、コーディングに手間がかかる点と、ヘッダーはなるべく小さくして場所ととらないようにしたかったので、すべての端末で現在のような右上にメニューボタンを置いてクリックで開くようにしました。今までヘッダーは割と大きくスペースをとっていた分、今回はすっきりとした感じになりました。

また今までつけていなかった、パンくずリストもヘッダー下に表示させています。パンくずリストについては「breadcrumb navxt」というWordPressのプラグインを使用しています。

配色について

リニューアルの配色について

配色については、これから暑くなる季節に入ることもふまえて、さわやかで明るいイメージにしたいと考えました。ただ原色に近い色になると、目が疲れたりきつい印象を与えてしまうため、パステルカラーを採用しています。暑い季節で爽やかなものを連想した時に、晴れた日の海が思い浮かんだので、結果的にトリコロールカラーとして有名な青・白・赤の3色をベースに配色しました。アクセントになる色+爽やかさを増長させる色として、明るめの黄色をメニューボタンの一部や、サイドバーのタイトルに使用しています。ヘッダーやフッターを波線にしているのは、海や風といったゆるやかな雰囲気を出すためにデザインしました。

文字については、前回よりも小さめにしました。小さくなった分ページの高さも抑えられるので、スクロールさせる手間が少し解消させるメリットがあると思います。色も完全な黒ではなく、少し灰色寄りして目が疲れないような配慮をしました。

ブレイクポイントについて

コーディングはDW(CS6)でしたんですが、可変グリッドレイアウトというものがついているので基本的なCSSは自動で作成してくれました。前にも述べたように、レスポンシブデザインは使用する端末のサイズに応じてレイアウトが変わる必要があるのでブレイクポイント(どのポイントで切り換えるか)が必須になります。特に設定をしなければ、DWだとこのような感じになっていました。

ブレイクポイントについて

実際にDWを使った可変グリッドレイアウトの操作は、Adobeの公式サイトに手順が掲載されていたので紹介しておきます。

ブレイクポイントをどの部分で切り換えるかは、サイトによって結構まちまちです。768pxじゃなくて800pxのところもありますし、スマートフォンの切り替えも結構ばらばらです。端末が増えて複雑になっているので、その判断はどうしたらいいんだろう…というのはまだ迷うところです。

ブレイクポイントの切り替えはMedia Queriesで

サイズ別にCSSでスタイルを設定しないといけないですが、これはMedia Queriesを使って設定します。max-widthもしくはmin-widthを使った書き方がありますが、DWではこのようになっていました。

/* スマートフォン用css */

/* タブレット用css */
@media only screen and (min-width: 481px) {
}
/* PC用css */
@media only screen and (min-width: 769px) {
}

この場合はタブレット用・PC用の記述をして、それ以外がスマートフォン用になるようになっています。スマートフォン>タブレット>PCの順に設定が継承されてしまうので、色々と個別の設定が必要になってくるのが少し大変です。

同じくDWでのコーディングをされた記事があるので、そちらも見ていただくと流れがわかると思います。

Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など

Media QueriesのIE8以下対応

IE8以下の場合、Media Queriesは使えないので「Respond」や「css3-mediaqueries-js」といったjavascriptを使って対応することができます。以下は記述例です。head内に記述して使うことができます。<!–[if IE IE 9]>という記述はIE9以下の時だけ、という条件をつける時に使用します。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>

幅は%指定で調整

PC対応だけであれば、単純にpxを使うことが多いですがレスポンシブの場合は%指定で設定します。ようするに画面全体を100%ととらえて、そのうち90%がサイトが表示される幅、さらにその中の60%がメイン、40%がサイドバー…といった感じです。%指定をすることで、それぞれのブラウザ幅に合わせた表示が実現できるということですね(Fluid Gridと呼ばれています)。実際には余白の設定なども%で指定するので、もっと細かい数字になることが多いです。簡単な例は以下のような感じですが、これ以上大きくしたくない!という場合にはmax-widthを使って数値を指定してあげると良いと思います。

#container{
width: 90%;
max-width: 1200px;
}
#main{
width: 60%;
float: left;
}
#side{
width: 35%;
float: right;
}

画像の可変はheightの設定も必要

サイトの大きさも変わるのであれば、それに合わせて画像の大きさも変わらないと、タブレットやスマートフォンで表示したときに画面からはみだしてしまいます。横幅はmax-width: 100%;で対応できますが、それだけだと画像の縦幅は変わりません。height: auto;を指定してあげることによって、縦幅横幅それぞれがサイズに合わせて伸縮してくれます。画像がちゃんと可変にならない!と思ったらチェックしてみると良いと思います。DWの可変グリッドレイアウトだと、特に追記しなくてもサイズに応じて伸縮するようになっているようです。

img {
max-width: 100%;
height: auto;
}

スマートフォン対応にしたらviewportも忘れずに

何も設定していないPC用のサイトをiPhoneなどのスマートフォンで見てみると、表示が小さくて見づらいですよね。iPhoneはデフォルトが980pxになっているので表示が小さくなってしまうようです(間違ってたらすいません)。それを解消するために、head内にviewportの記述をしておきます。記述の中のwidth=の部分は数値を指定せずに、device-widthと入れることでそれぞれの端末の横幅に合わせた表示ができます。initial-scaleというのはページが読み込まれた時の拡大率のことです。

<meta name="viewport" content="width=device-width, initial-scale=1">

wp_is_mobile関数でgoogle adsenseを切り替え

google adsenseをPCやスマートフォンで切り換えする場合、display:none;で非表示にすると規約違反になる可能性があったり、表示ができなかったりする不具合があります。なのでWordPressのwp_is_mobile関数を使って切り替えたほうが良さそうです。この関数はWordPress3.4から加わったようなので使用時はWordPressのバージョン確認をしておきましょう。実際のコードは以下のコードを参考にしてください。ちなみにこの関数はタブレットもスマートフォン用の設定が適用されます。PCかそうじゃないか、という判断ということですね。

<?php if (wp_is_mobile()) :?>
 /* ここにスマートフォン用のgoogle adsenseを入れる */
<?php else: ?>
 /* ここにPC用のgoogle adsenseを入れる */
<?php endif; ?>

実際に作ってみた感想

実際に色々作りこんでいるとわからないこともあり、調べているうちにレスポンシブデザインに最低限必要な情報が見えてきた、という感じでした。ドメインやcssも複数作らずに、端末のサイズに応じて表示が切り替わってくれるので一度作ってしまうと楽だなと思います。その分最初のレイアウトを考慮するときに、スマートフォン・タブレット・PCでの表示をふまえて設計するのは少し大変そうです。なんとなくパズルを組み合わせて設計する感覚でした。

またぼちぼちカスタマイズして、より見やすく使いやすいブログにしていけたらと思っています。まだ作ったことがないけど興味がある方は、ものは試しでやってみることをオススメします。

2013 11/01 またいつかリメイクするかもしれないので、記念にスクリーンショット貼り付けておきます。ではでは。

screenshot

関連記事を読む

デザインリニューアルとレスポンシブデザインのメモ書き。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]