スマートフォン向けWebサイトのUI設計の際に参考にするリソースや考え方


wire

スマートフォン最適化という言葉を聞くようになってから、おそらく3年ほどは経ったかと思います。スマートデバイスやスマートフォン最適化サイトの普及を受けてか、Webブラウザベースの業務アプリケーションでもスマートフォン最適化を求められることが増えてきました。そこで、あらためてスマートフォンサイト(アプリケーション)のUI設計の際に参考にしたいリソースやポイントをまとめてみました。

[1] コンシューマー向けサイトのベストプラクティス

業務アプリケーションは、コンシューマー向けサイトとは目的が異なるため、必要となってくるコンポーネントやデザインも異なります。ただし、業務アプリケーションであっても実際に使用するのはコンシューマー向けサイトを使用しているユーザーであるため、慣れ親しんだパターンがあるはずです。コンシューマー向けサイトの中でよく利用されているUIパターンを取り入れられないか検討します。

■スマートフォンサイト事例紹介サイト

[2] 何がコンポーネントになりうるか?を考える

UIパターンの分析時には、どの単位でコンポーネント化(モジュール化)できそうか?どんなコンポーネントがクライアントのシステムに必要そうか?ページの部品をモジュール単位で考えます。
業務向けRIAで利用されてきたFlexにも多くのコンポーネントがありました。HTMLにもラジオボタンやボタンなどデフォルトUIの部品はありますし、HTML5でフォームに関する属性が新たに追加されましたが、アプリケーションの開発には十分ではありません。そこで、汎用的なパターンはモジュール化して考えます。

[3] CSSフレームワークからノウハウを吸収する

cssFramework
CSSフレームワークでは、汎用性の高いコントロールがパターン化されています。ページャーや、タブコンテンツなどWebサイト特有のUI要素もあり、ベストプラクティスが詰まっているといえます。開発にCSSフレームワークを導入しなくても、コントロールのパターンやベースとなるフォントサイズ、余白の取り方などをUI設計の参考にすることができます。

■CSSフレームワーク

[4] 各OSネイティブのデザインガイドラインを参考にする

Webサイト/アプリケーションであっても、iOSのヒューマンインターフェイスガイドラインをはじめとした各OSのネイティブアプリケーションのUIガイドラインが役に立ちます。各OSでのルールや、操作に対するインタラクション、ページ遷移の考え方、コントロールの使い方など参考になります。Webでは実現しにくいネイティブ特有のUIコンポーネントもあるので、設計思想やWebでよく見られるコンポーネントの部分に絞って参考にするのが良いです。

■各OSのUIガイドライン

[5] チェックリスト、チェックシートを参考にする

スマートフォン向けではありませんが、ユーザビリティやアクセシビリティの確認のため、チェックシートを公開しているWebサイトや団体があります。コーディングレベルのものや、少し古いものもありますが、ユーザビリティ関連の項目は現在のスマートフォン対応でも十分参考になります。

[6] フロントエンド実装の難易度を考慮する

UI設計は、実装に密接に関わってきます。スワイプでの画面遷移や、画面を下に引き下げ指を離すことで更新処理を開始するリフレッシュコントロールなどは、HTML/JS/CSSで実装した場合、対応端末やOSのバージョンによってはうまく動作しない恐れがあります。UI設計を行う際には、実装難易度や実装可否を考慮する必要があります。

まとめ

ネイティブアプリケーションとは異なり、スマートフォンサイトやアプリケーションにはWebプラットフォーム独自のUIガイドラインがありません。また、UIも日々変化しています([参考]日本のスマホサイトは2年間でこんなに変わった)。自由に設計できることもWebブラウザベースの魅力ではありますが、難しさもあります。様々なリソースのベストプラクティスを取り込み、UI設計に役立てていきたいものです。