> | > SwapSkills「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」

SwapSkills「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」

小川貴史

このエントリーをはてなブックマークに追加

モバイルファーストは「もしもこの世に、モバイルしかなかったら」を念頭に、デスクトップファーストとの違い、ユーザーの行動、コンテキストを考慮して考える必要があります。

SwapSkills in Nagoya「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」に参加してきました。前半はモバイルファーストの座学、後半はそれをふまえてのワークショップです。

モバイルファーストとは

Webサイトの制作みならず、マーケティング手法も含めて全部モバイルからまず考えること。現在、大半のWebサイトの制作はデスクトップファースト、PC版から作ってそれをモバイルに展開している。

モバイルファーストが採用される理由

  1. モバイル市場の拡大。
    モバイルの広がり、拡大の速度はTVを超えている。重要性が増している。
  2. Constrain(スマホの制限)。
    画面が小さいため、必要な情報だけのせざるを得ない。情報、UIが洗練されていなければならない。
  3. Capability(スマホの機能)
    Siriや加速度センサなど、モバイルならではの機能が生まれてきている。

こういった状況の変化に対応するために、モバイルファーストが採用されている。若いユーザーは、PCではなくモバイルからスタートしているということも重要な要素。

モバイルファーストの考え方

もしもこの世に、モバイルしかなかったら」を念頭に考える。「デスクトップの場合はどうだったっけ」という考えを捨て「モバイルだった場合、どんなUIにする必要があるか」を考える必要がある。モバイルファーストの考え方に慣れるまでは、どうしてもデスクトップっぽい考えになってしまう。

モバイルサイトを制作する際には、下記のことを考慮する必要がある。

  1. デスクトップファーストとモバイルファーストの違い
  2. モバイルユーザーの3つの行動
  3. モバイルユーザーのコンテキスト

デスクトップファーストとモバイルファーストの違い

A機能 = A機能 ではなく、
B機能 = B機能 でもなく、
A機能 + B機能 = C機能 を見つけ採用するのがモバイルファーストの特徴。画面サイズの制限から極力UIをコンパクトにしていく必要がある。

モバイルユーザーの3つの行動

モバイルユーザーの行動は、大きくこの3つに分類されることを念頭に置いておく必要がある

  1. 暇つぶし
  2. 同じ事を繰り返す(カレンダーを操作)
  3. 急いでいる(電車の時間や行き先へのルートなど)

モバイルユーザーのコンテキスト(取り巻く環境や、置かれている状況)

  1. 注意力が散漫
  2. スクリーンが小さい
  3. 片手で動かす
  4. 両手がふさがっている場合もある
  5. 62%がTVを見ながら利用している
  6. トイレで利用することも多い
  7. 行列待ちをしている場合、76%が利用している
  8. 69%が買い物中に利用している(価格.comなど)

スマートフォンサイト設計ワークショップ

ワークショップでは、ケーキショップのスマートフォンサイトを考えました。座学で教えていただいたことを念頭に、まずはシナリオを考え、そしてその目的をかなえるためにはどんなUIが必要か考えていきます。

シナリオ
小学5年生男子が、お母さんに頼まれて妹の誕生日ケーキを買いに行く。その際、欲しいケーキの種類と値段をメモし、ケーキショップに買いに行く。
設計時の注意点
  1. 機能はなるべくアイコンで表現
  2. なるべく無駄なスペースを減らす
  3. 選択肢はなるべく減らし、ユーザーを導く
  4. 検索が必要なUIにしない
  5. 1つ1つの情報を細かく切って、そしてまとめる
  6. モバイルの最大の特徴、電話機能を有効に使う。
  7. シナリオは「出来なかった時」も考える。

まとめ

モバイルサイトを考える時、思っていた以上に「PCの時のUIはこうだったから...」とPCを基準に考えていました。長年身に染みついた癖ですね。

ワークショップの最後に「スマートフォンユーザーは、画面が小さい、急いでいることが多い、野外が多いという特徴がある。そして、PCユーザはそれに比べて、もっとゆったりしている。モバイルファーストの考えで作った場合、PCユーザーに合うのでしょうか。」という質問をさせていただきました。

解答として「合うと思う。うまく作らないといけないが、モバイルファーストの考えはPCユーザーの利便性につながると思う。」と、講師の菊池 崇さんに仰っていただきました。

モバイルファーストの考え方は正論だし、時代に合っていると思います。しかし、まだイマイチしっくり来ていないというのが正直なところです。まあ、何度か場数を踏んだ時に「ああ、そういうことか」と気づけるように、常に自問自答しながら行動したいと思います。

非常に貴重な経験をさせてもらいました。

まとめ追記:
ああ、そうか。モバイルファーストでつくって、PCユーザはレスポンシブWebデザインで補足してやればいいのか。

このエントリーをはてなブックマークに追加

読者のコメント

コメントを投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

(HTMLタグは使用できません)

トラックバック

このエントリーのトラックバックURL
http://www.ibnet.ne.jp/mt/mt-tb.cgi/1037

ホーム > Webサイト管理 | Webデザイン > SwapSkills「ワークショップで学ぶ!モバイルファーストを取り入れたスマートフォンサイト設計」

このページの先頭へ