スマートフォン/タブレット対応のWebサイトデザインで気をつけたい5つのこと【 その2 】

こんにちは、森山です。 前回のブログでは、「スマートフォン/タブレット対応のWebサイトデザインで気をつけたい5つのこと【 その1 】」というタイトルで、レスポンシブWebデザインやスマートフォン/タブレット対応のWebサイトデザインをする際に気をつけておきたいポイントについてご紹介させていただきました。
前回ご紹介したポイントはウミで制作するサイトの品質の安定をはかるために運用しているデザインチェックリストにも含まれている項目の中から紹介させていただいたのですが、今回は特に社内ルールとして取り決めているわけではないけれど、私が個人的に気をつけている点についてご紹介させていただきます。

1. PC > スマートフォン > タブレット の順にデザインする

これは私がこれまでにレスポンシブWebデザインを制作してきた中で気づいたことのひとつです。
私は従来はPC版のデザインをした後は、タブレット版のデザインを制作し、最後にスマートフォン版を制作というように画面サイズの大きい順に制作していたのですが、そうではなく、PC版のデザインを作成した後は、タブレットよりも先にスマートフォン版のデザインを作成してしまって、最後にタブレット版をデザインするのが1番早いという結果にたどり着きました。
レスポンシブWebデザインでは基本的にはできるだけどの端末でも同じパーツやデザインを使うようにします。どの端末で見ても統一されたデザインイメージを保つためと、その方がコーディング時の工数が削減できるためです。ただ、PC版とスマートフォン / タブレットでは画面サイズや操作方法などが大きく異なりますので、必要に応じて部分的に最適なデザインに変更する必要が出てきます。その際に作成する小さな画面サイズやタッチパネルなどに合わせて最適化したデザインパーツを、タブレットをベースに作成してしまうと、スマートフォンはタブレットよりもさらにサイズが小さいため、せっかく作成したパーツがスマートフォンでは納まりきらず、結果的に PC版 / タブレット版 / スマートフォン版の3パターンのデザインパーツを作成する必要が出てきてしまったりします。 一方、それらをスマートフォンベースで作成しておけば、タブレットに割り当てるのは比較的簡単です。
PC版とスマートフォン版のデザインを先に作成してしまえば、タブレット版のデザインは大抵どちらかのデザインパーツのちょうどいい方を組みわせるだけで完成させることができ、デザイン制作にかかる時間もぐっと短縮できると思いますのでぜひお試しください。

2. 標準ブレークポイントを決めておく

次はレスポンシブWebデザインをする際に多くのデザイナーを悩ませる「ブレークポイント」についてです。
最適なブレークポイントというのは諸説あり、一概にどれが正しいというのはないと思いますが、自分の中で基本のブレークポイントを決めておくとデザインをする際も割と想像しやすく作業がはかどる気がします。
私がデザイン作成する際のデザインカンプはいつもお客様への分かりやすさを考えて、320px, 768px, 1400pxの3パターンにしていますが、実際のブレークポイントはDrupalのテーマで下記を使用されていることが多いらしいので下記を想定しながら作業を進めています。

• mobile（スマートフォン向け）: 559px以下
• narrow（主にタブレット向け）: 560px - 850px
• wide（主にPC向け）: 851px -（最大幅はお好みで）

最大幅はサイトのターゲットやコンセプトに合わせて都度設定していますが、最近は横幅が広めのサイトが増えてきているので最近は1100pxくらいにすることが多いです。

3. スマートフォン / タブレットの特性を活かせているか？

次に気をつけている点はスマートフォンやタブレットの端末の特性を活かせているかどうかという点です。
PCと違ってスマートフォンやタブレットではタップやフリック、スライドなど独自の操作が可能で、それをうまく活用することでユーザーにとってより便利で快適なホームページにすることができます。
例えば左右にフリックすることで別メニューを表示したり、タップで電話をかけるボタンを設置するなど、スマートフォン / タブレット独自の操作をうまく取り入れたサイトにできるとよいですね。

4. PC版のデザインイメージを保てているか？

これは1つめでご紹介したように各端末で同じパーツを使い回せば必然的にほぼ同じデザインイメージになるかと思うのですが、時々注意が必要です。
PCの画面であればスペースが十分にありますのでゆったりした余白を活かしたデザインになっていたサイトとも、スマートフォンサイトでは画面が小さくなるのでWebサイトを構成しているパーツがぎゅっと凝縮されたような状態になりやすいです。マージンなどをきちんと確保していれば問題ないとおもいますが、メインビジュアルや見出しなどの要素は必然的にPC版より縮小されることが多く、一方でリンクボタンなどのクリックする必要がある要素は最低限のサイズを保持する必要があるため、Webサイトを構成する要素のバランスが変わってくることで印象がちぐはぐになってしまう場合があります。
特に注意したいのは「色の割合」です。
PCサイトは左右に余白があることが多く色がそんなに目立っていなかったデザインでも、スマートフォンで見ると色の割合が多く見えPCサイトと印象が大きく変わってしまう場合があります。特に使用している色数が少ないシンプルなデザインほど、ひとつひとつの「色」の分量が印象を大きく左右するので注意したいですね。PC, スマートフォン, タブレットのデザインを見比べて丁寧に色の分量を調整することをおすすめします。

5. ウェブクリップアイコンを作成しよう

これは注意点ではありませんが、「ウェブクリップアイコン」というものを皆さまご存知でしょうか。スマートフォンなどではホーム画面にブックマークのアイコンを置くことを、「ウェブクリップ」と呼びます。その時にホーム画面に表示されるアイコンが「ウェブクリップアイコン」です。
意外と忘れがちなのですが、これがきちんと設定されていると「ちゃんとしたサイト」感が出るのでぜひ設定されることをおすすめします。
設定方法についてはググっていただければ情報がたくさん掲載されているかと思いますのでぜひ設定してみてください。
私は自分の作ったサイトのウェブクリップアイコンが画面に並んでいるのを見て密かに楽しんでいます（笑）

以上、今回も5つのポイントについてお伝えしてまいりましたがいかがでしたでしょうか。 少しでも皆さまのお役に立てれば幸いです。