SwapSkills「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」
モバイルファーストは「もしもこの世に、モバイルしかなかったら」を念頭に、デスクトップファーストとの違い、ユーザーの行動、コンテキストを考慮して考える必要があります。
SwapSkills in Nagoya「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」に参加してきました。前半はモバイルファーストの座学、後半はそれをふまえてのワークショップです。
モバイルファーストとは
Webサイトの制作みならず、マーケティング手法も含めて全部モバイルからまず考えること。現在、大半のWebサイトの制作はデスクトップファースト、PC版から作ってそれをモバイルに展開している。
モバイルファーストが採用される理由
- モバイル市場の拡大。
モバイルの広がり、拡大の速度はTVを超えている。重要性が増している。 - Constrain(スマホの制限)。
画面が小さいため、必要な情報だけのせざるを得ない。情報、UIが洗練されていなければならない。 - Capability(スマホの機能)
Siriや加速度センサなど、モバイルならではの機能が生まれてきている。
こういった状況の変化に対応するために、モバイルファーストが採用されている。若いユーザーは、PCではなくモバイルからスタートしているということも重要な要素。
モバイルファーストの考え方
「もしもこの世に、モバイルしかなかったら」を念頭に考える。「デスクトップの場合はどうだったっけ」という考えを捨て「モバイルだった場合、どんなUIにする必要があるか」を考える必要がある。モバイルファーストの考え方に慣れるまでは、どうしてもデスクトップっぽい考えになってしまう。
モバイルサイトを制作する際には、下記のことを考慮する必要がある。
- デスクトップファーストとモバイルファーストの違い
- モバイルユーザーの3つの行動
- モバイルユーザーのコンテキスト
デスクトップファーストとモバイルファーストの違い
A機能 = A機能 ではなく、
B機能 = B機能 でもなく、
A機能 + B機能 = C機能 を見つけ採用するのがモバイルファーストの特徴。画面サイズの制限から極力UIをコンパクトにしていく必要がある。
モバイルユーザーの3つの行動
モバイルユーザーの行動は、大きくこの3つに分類されることを念頭に置いておく必要がある
- 暇つぶし
- 同じ事を繰り返す(カレンダーを操作)
- 急いでいる(電車の時間や行き先へのルートなど)
モバイルユーザーのコンテキスト(取り巻く環境や、置かれている状況)
- 注意力が散漫
- スクリーンが小さい
- 片手で動かす
- 両手がふさがっている場合もある
- 62%がTVを見ながら利用している
- トイレで利用することも多い
- 行列待ちをしている場合、76%が利用している
- 69%が買い物中に利用している(価格.comなど)
スマートフォンサイト設計ワークショップ
ワークショップでは、ケーキショップのスマートフォンサイトを考えました。座学で教えていただいたことを念頭に、まずはシナリオを考え、そしてその目的をかなえるためにはどんなUIが必要か考えていきます。
- シナリオ
- 小学5年生男子が、お母さんに頼まれて妹の誕生日ケーキを買いに行く。その際、欲しいケーキの種類と値段をメモし、ケーキショップに買いに行く。
- 設計時の注意点
-
- 機能はなるべくアイコンで表現
- なるべく無駄なスペースを減らす
- 選択肢はなるべく減らし、ユーザーを導く
- 検索が必要なUIにしない
- 1つ1つの情報を細かく切って、そしてまとめる
- モバイルの最大の特徴、電話機能を有効に使う。
- シナリオは「出来なかった時」も考える。
まとめ
モバイルサイトを考える時、思っていた以上に「PCの時のUIはこうだったから...」とPCを基準に考えていました。長年身に染みついた癖ですね。
ワークショップの最後に「スマートフォンユーザーは、画面が小さい、急いでいることが多い、野外が多いという特徴がある。そして、PCユーザはそれに比べて、もっとゆったりしている。モバイルファーストの考えで作った場合、PCユーザーに合うのでしょうか。」という質問をさせていただきました。
解答として「合うと思う。うまく作らないといけないが、モバイルファーストの考えはPCユーザーの利便性につながると思う。」と、講師の菊池 崇さんに仰っていただきました。
モバイルファーストの考え方は正論だし、時代に合っていると思います。しかし、まだイマイチしっくり来ていないというのが正直なところです。まあ、何度か場数を踏んだ時に「ああ、そういうことか」と気づけるように、常に自問自答しながら行動したいと思います。
非常に貴重な経験をさせてもらいました。
まとめ追記:
ああ、そうか。モバイルファーストでつくって、PCユーザはレスポンシブWebデザインで補足してやればいいのか。
- このエントリーのトラックバックURL
- http://www.ibnet.ne.jp/mt/mt-tb.cgi/1037