こんにちは。 前回のブログでは、日本や世界における「スマートフォン / タブレットの普及率」と各国Webサイトの「マルチデバイス対応率」についてのデータをご紹介させていただきました。
そのデータの中では日本のWebサイトのレスポンシブWebデザイン対応率というのは海外に比べるとまだまだ低いということが分かりましたが、それでも確実に対応するサイトが増えてきています。
ほんの2〜3年前は「レスポンシブWebデザイン」といえば大変新しい手法という印象でしたが、最近では普段目にするホームページもレスポンシブ化されているものを多く見かけるようになってきました。Googleが正式にレスポンシブWebデザインを推奨していることもレスポンシブWebデザインの普及を後押ししているかと思いますが、今では「目新しさ」よりも、SEOやユーザビリティを考えれば「当然対応しておくべきもの」という認識に移り変わりつつあるようです。
ウミでもこの4月より新規で作成させていただくホームページは基本的にはすべて、レスポンシブWebデザイン対応とさせていただいております。これまでにもたくさんのレスポンシブWebデザイン対応のホームページ制作をお受けしてまいりましたが、その中でレスポンシブWebデザイン（あるいはレスポンシブではなくともスマートフォン/タブレット対応のWebサイトデザイン）を行うにあたって気をつけておきたい点がいくつかあります。今回はそれらのポイントについてご紹介させていただきたいと思います。
1. 固定スペースの高さが240px以下に収まっているか？
まず最初は、ヘッダー部分の固定スペースの高さについてです。スマートフォンやタブレット端末はPCとは異なり画面サイズが小さいため、ヘッダー部分やグローバルナビゲーション（メインメニュー）などのページ上部に固定する部分はできるだけコンパクトに収める必要があります。
というのも、固定スペースがあまり大きすぎるとフロントページから別のページに移動した際に、変化が目につかずページを遷移したことがユーザーに大変分かりにくくなってしまうためです。
実機できちんと確認しながらデザインを進めていれば気づくことではあると思いますが、予め意識しながらデザインを行うとスムーズです。ちなみに240px以下というのはウミが独自に定めている基準ですので、画面で確認していただいてちょうど良いと思われるサイズに設定いただければ良いと思います。
2. ボタンは7mm以上を保っているか？
次に気をつけたい点はボタンサイズです。PCであればマウスポインタで選択するため範囲が多少狭くてもあまり気になりませんが、スマートフォンやタブレット端末の場合はタッチパネルを指で操作するため、ある程度大きめの範囲設定にしておかないと誤操作の原因となってしまいます。
リンクボタンの最小サイズに絶対的な決まりというのはありませんが、多く一般に推奨されているのは 縦横44px以上（Retina Displayの場合は88px）、液晶画面での実サイズでいうと縦横7mm以上と言われています。
Microsoftの研究によると、7mmでのタップ操作によるミスは100回に1回、9mmだと200回に1回、そして5mmでは30回に1回という結果がでています。基本は7mm、慎重な操作が必要な重要なボタンは9mm以上と覚えておくとよいでしょう。
またボタン間のスペースは「2mm（pixelでいうと12px, Retinaの場合は24px）」以上が推奨されています。合わせてリンクボタンの周囲に他のリンクボタンを密集させないように気をつけましょう。
このように基準となるサイズやルールを知っておくと縦横のサイズに悩むことも少なくなり作業が捗ります。一方であまりサイズにとらわれすぎてもデザイン全体のバランスが崩れてしまうかもしれません。例えば幅が広く周囲に何もリンク要素が配置されていないボタンであれば、たとえ高さが7mm以下であっても操作性に問題ないといえるでしょう。
実際の操作性を実機で確認しながらデザインのバランスを考慮して進めましょう。
3. タッチパネルでもリンクを認識できるか？
3つめの注意点は各リンクのデザインがマウスオーバーができないSPやタブレットでもリンクと認識できるデザインになっているかどうかという点です。PCであれば、マウスオーバーすると表示が切り替わるといった表現が可能ですが、スマートフォンやタブレット端末などでは「マウスオーバー」ができないため、パッと見てリンクだとユーザーが認識できるデザインにしておく必要があります。
実はこれは私も見た目のシンプルさや美しさばかりに集中しているとついつい忘れてしまうことがあり、自分に言い聞かせるつもりで書いています。
と書いておきながらも、写真だけをスッキリと並べてかっこよさを追求したいサイトなどではあえてリンクマークを付けたくない・・・でもクリックしてほしい・・・と日々悩まされるところではあります（涙）。
4. コンテンツの順序は統一されているか
4つめは非常に基本的なことなので挙げるほどでもないかもしれませんが、PC, スマートフォン, タブレット版でコンテンツの順序が変わらないように気をつけましょう。
普段からコーディングを行っている方でしたら特に意識しなくても自然と表示する順序も自然と判断がつくと思いますが、htmlをイメージせずに各端末で好き放題のレイアウトを行ってしまうとコーディングの際に思わぬ苦労をすることになります。
弊社ではデザインとコーディングを別々の者が担当することが多いのでこのあたりも注意点として社内で共有しています。
5. 実機での表示確認を行ったか
最後はこちらもごくごく基本的なことなのですが、改めて挙げさせていただきました。
やはりPCとスマートフォン / タブレットでは画面サイズも操作感も全く異なります。特にスマートフォン / タブレット版のデザイン制作経験があまりないうちは、必ず作成したデザインイメージを実際にスマートフォンやタブレット端末にデザインを実寸で表示させて確認するようにしましょう。作成したデザインをPCの画面上で見ているだけでは気づかないことも、実機で表示して始めて気づくことがたくさんあるかと思います。
主に確認しておきたいのは以下のポイントでしょうか。前述の項目も含まれていますが、参考にしてみてください。
- 固定スペースの高さは240px以下に収まっているか（ページを遷移したことが分かるか）
- 各リンクボタンはタッチしやすいサイズ・位置になっているか
- 各リンクボタンのタッチ範囲に他のリンクボタンが近接していないか
- フォントサイズは読みやすいサイズになっているか
- 画像に文字が含まれている場合、可読性が保たれているか
- ページが長すぎないか
以上、基本的な5つのポイントについて書かせていただきました。
レスポンシブWebデザインに限らず、スマートフォン/タブレット対応のWebサイトデザイン時であれば気をつけたい内容ばかりでしたが参考になりましたでしょうか。
ここで挙げさせていただいたのは本当に基本的な注意点だけだったので、既にスマートフォン/タブレット端末対応のデザイン経験を何度もされている方には物足りない内容だったかもしれません。とはいえこれらは欠かすことのできない内容ですので、弊社ではこれらをウミの「スタンダード」としお客様に常に品質の安定したものをご提供できるようチェックリストを設けて運用しています。
では次回も引き続きレスポンシブWebデザインやスマートフォン/タブレット対応のWebサイトデザイン時に気をつけたいポイントについて紹介できればと思います。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。