今はもうみんなPCではなくスマートフォンでWebを見ることが多い時代。
時を経るごとに需要を増やし、今ではすっかり無視出来ない存在になりました。
そんなわけで、スマートフォンサイトのデザインを作る時の注意点などを書いてみたいと思います。

  • ・実機で確認し、事前にある程度の使用感を想定する
  • ・スマートフォンで見た時の体感に注意する
  • ・ボタンを間違ってタップさせないようにレイアウトを考える
  • ・画像のサイズ指定に注意する
  • ・実機で逐次確認を行う
  • ・トライ&エラーの回数をとにかく増やす

以下が各詳細になります。

実機で確認し、事前にある程度の使用感を想定する

スマートフォン用のデザインを起こす際、普段の倍以上のサイズでフォント・ボタンを作る必要があるため、「こんなに大きいサイズでよいのか」「大袈裟では無いか」等の考えが頭をよぎる事も多いと思います。
ですが実際に使用してみて「やはり駄目だった」では本末転倒。
実機で確認する、実機で見た時のサイズ感等をある程度Photoshop上で確認しておく、等が重要です。

スマートフォンで見た時の体感に注意する

PCではコンテンツ内のテキストを12pxで作ることが多いことから単純計算で24pxを指定するケースが多いと思いますが、個人的には26px・28pxが最適な数値だと思います。
Photoshop上でデザインを確認する際、表示倍率を50%で見るのではなく35%ほどで確認してみると、実機で見た時のサイズに近い状態で表示されます。
どうでしょう。思ってる以上に小さく表示されませんか?
ベストなサイズは対象ユーザー等によってまちまちだと思いますが、スマートフォン上ではかなり小さく表示されるという点を知っていただければと思います。

ボタンを間違ってタップさせないようにレイアウトを考える

タップ出来るボタンのサイズ下限はiOSヒューマンインターフェイスガイドラインによると、44×44px以上あればタッチしやすいと言われています。
ですがマウスと違って細かい操作が出来ない関係上、ボタンが細かく敷き詰められていると押し間違いが発生しがちです。
それを解決する手段として、

  • ・それぞれのボタンが干渉しないようマージンを取る
  • ・横並びの数をある程度、例えば3つに制限する
  • ・プルダウン形式にし、ボタンの領域を大きめに取れるようにする

等が挙げられます。
合わせて、「○○に応募する」「問い合わせる」「この条件で探す」等といったページの主目的となるボタンは100×100px以上で指定したいところです。

画像のサイズ指定に注意する

タイトルの通りですが、画像のサイズ指定には細心の注意を払って作ること。
特に、画像が小さいほどサイズ指定のミスが目に見えて起こりやすくなります。
12×12pxの矢印アイコンのサイズを間違えて11pxで書き出したり実装時にサイズがずれてしまい、表示がぼやける・・・何度か経験したことはあると思います。
切り抜きのしやすさや実装時の指定間違いを未然に防ぐために、

  • ・矩形で領域をくくる
  • ・20×20px等、計算のしやすいサイズで画像を作成する
  • ・よく使うアイコン類はスマートオブジェクト化する
  • ・アイコン類を別途、予めフォントにしておく
  • ・罫線はCSSで書けるデザインにする

が挙げられます。

実機で逐次確認を行う

20140210_sp_designpoint_05_01

色々気をつけて制作しても、やはり実機で見なければ最適な形に仕上がっているかは確認できません。
DropboxにJPEGを入れる・テストサーバやMAMPで仮想環境を立ち上げてURLを叩く・等と実機確認する方法はありますが、個人的にオススメしたいのはSkala Previewです。
Skala PreviewはPCと接続デバイス間をリモート接続し、表示している画像をリアルタイムで表示・反映してくれるソフトです。
編集中のpsdをそのまま表示することができ、画像ファイルとして都度書き出す必要もありません。
複数のデバイスを接続する事も可能で、例えばiPhone5S・iPhone4・Xpearia A・Galaxy S IIIの4デバイスを一度に同期させることも可能です。
デバイスが増えれば増えるほど確認が面倒になりますが、その手間を減らす大きな助けとなってくれます。

≫ Skala Preview

トライ&エラーの回数をとにかく増やす

20140210_sp_designpoint_05_02

スマートフォンサイトは待ち時間や移動中等の「合間の時間」で見られることが多いため、目的を達成させるための障壁をとにかく取り払う努力を積み重ねることが重要です。
上記を踏まえ、実機で確認・修正を繰り返し、目的を達成出来るデザインへと洗練させていくことが最も大事だと考えております。

如何でしたか。
リキッドレイアウト・デバイスフォントとCSSを駆使したサイズ減量の工夫・コンバーション達成にあたっての優先順位の付け方・・・そうした点は今まで沢山議論されており、皆さん各々の答えをしっかり持っているかと思い、今回はデザイン制作におけるトライ&エラーの回数を少しでも増やせるよう、意識づけている点をお話させていただきました。