タッチデバイス向けデザイン
前回は、レスポンシブウェブデザインの制作手順につきまして、ワイヤーフレーム制作ツールのご紹介を含め記載いたしました。
レズポンシブウェブデザインの制作になれるまでは、googleのデベロッパーツールなどで頻繁にチェックすることが大変なことと思います。また、前回も記載いたしましたが、実機でのデザインおよび動作確認も重要なことになります。
それでは、具体的にレスポンシブウェブデザインのサイト設計をする際に、検討すべきことを記載していきます。レスポンシブウェブデザインでは、スマートフォンやタブレット端末などが対象に含まれるため、PCだけを対象とするサイトを作成する際に考慮しなくてよかったいくつかの点を事前に検討しておく必要があります。
まずは、スマートフォンやタブレットの操作性を元に、求められるデザインを考察していきます。
という事で、それでは今回はッ、
・操作性を考慮したUIの作成
上記について記載していこうと思います…。
タッチデバイスの特徴
PCとスマートフォンやタブレットの大きな違いの一つに「操作性」があります。PCは主にマウスを使用して操作することと思いますが、スマートフォンやタブレットは指を使用して操作します。
これを「タッチデバイス」といいます。Windows8を搭載しているPCにはタッチ操作に対応しているものもあります。
マウスによるPCの操作はあまり直感的でなかったため、慣れるまでに時間がかかりますが、タッチデバイスの操作性は直感的であるため、多くのユーザーがすぐに使いこなせるようになる事と思います。今では、フリックによるページスクロールや、ピンチオープンやピンチクローズによるページの拡大・縮小は当たり前の操作になっています。
そのため、タッチデバイス向けのサイトを制作する場合は、タッチデバイスの特徴や操作方法を考慮して、ページデザインをおこなうことが必要になります。
タッチデバイスの特徴
・複数の指によるマルチタッチが可能
・マウスには無い様々なジェスチャーが用意されている
・文字入力はソフトウェアキーボードで行う
上記を踏まえ、スマートフォンやタブレットなどでの閲覧を想定したウェブサイトを制作する必要がでてきます。また、以下の点に注意する必要もございます。
ボタンのサイズ
マウスカーソルは画面サイズ比において非常に小さいため、多少ボタンが小さくても容易に押すことができます。これに対して、指先はマウスカーソルよりも大きいため、PCサイトと同じ考え方ではボタンを配置すると非常に押しづらくなってしまいます。
スマートフォンやタブレット向けのページでは、このことを踏まえてform要素などのボタンサイズを調整する必要があります。具体的なサイズに関する参考資料としては、Apple社がiOSアプリの開発者向けに提案している「タップ可能なUI要素の快適な最小サイズは44×44ポイント」が参考になります。このサイズを基準にして、レイアウトまたはUIデザインの参考にし調整することをおすすめいたします。
当たり判定範囲の調整
上記で記載したボタンサイズと同様に、スマートフォンやタブレットでは文字リンクなどもタップしづらいので、文字リンクを配置する際は周囲のpadding領域も当たり判定の範囲に含めるなどの工夫が必要になってきます。
操作性を考慮したUIの作成
スマートフォンは画面サイズが小さく、また移動中・電車の中や屋外などで利用されることが多いデバイスです。スマートフォン向けのページデザインを決める際は、このような利用シーンなどもしっかりと考慮してUIを決める必要があります。
ボタンやリンクがタップしにくい場所に配置されていると、サイトの閲覧性や操作性が低下してしまいます。
ただし、レスポンシブウェブデザインではワンソースで各デバイスに対応する関係上、スマートフォン専用のサイトを制作する場合と比べ、ページのレイアウトや掲載要素にある程度の制約も生じます。PCやタブレット向けのページデザインとのバランスを取りながら、より良いUIになるように工夫が必要です。
なお、ページデザインを制作する際の1つの考え方に「モバイルファースト」という考え方があります。レスポンシブウェブデザインのサイトを制作する際は、参考になる点が多いので次回以降記載したいと思います。
デバイスに適したコードを書く
サイト内でJavaScriptを使用する場合は、デバイスごとに最適なコードで記載することをおすすめします。例えば、JavaScriptにはタッチデバイス用のイベントであるtouchStartやtouchMove、touchEndなどが用意されています。PC用のイベントであるClickやMouseDownなどでも動作はしますが、可能であれば、それぞれに最適化されたコードを使用することをおすすめします。
それでは最後に、Appleが提供しているユーザインターフェイスのデザインのヒントのリンクを記載しておきます。スマートフォン・タブレットでのUIデザインを制作する際に、非常に役立つことと思います。
という事で今回は、タッチデバイス向けデザインにつきまして、注意点などを記載いたしました。
最後にご紹介いたしました、Appleが提供しているユーザインターフェイスのデザインのヒント、ワイヤーフレームを作成する際や、またモックアップの時点でも問題ないと思いますので、確認することをおすすめします。
私がコーディングを行う際も、細かなところで非常に役に立つページと思っております。特に配置や構成、ウェブデザイン制作初心者の方には、参考になる要素が沢山記載されています。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- デザイン, レスポンシブウェブデザイン, タッチデバイス, UI
