先週20日（金）、OSMC（オンラインショップ・マスターズクラブ）の
『東京スマホ勉強会』がマミオンの研修室にて行われました。
参加された方々は、およそ20人強。
山形や仙台、静岡など、東日本各地からお集りです。
勉強会の後半に、マミオンの佐藤より
「スマホ対応のポイント」としてお話をさせていただいたので、
その内容をご紹介したいと思います。
スマホ対応のポイント
実際に勉強会で使用したスライドはこちらです。
スライドの内容は、前回のブログ記事を元に作成しています。
また当日は、Reflection.appというスクリーンキャストのソフトを用い、
実際のサイトをiPhoneで閲覧している様子も交えながらお話ししました。
iPhone、iPadのユーザーテストが簡単に！Reflection.appを試してみた - stj064 Life Lab
スライドの最後で紹介した『フラノデリス』という洋菓子ショップでは、
商品を選ぶ段階ではPCサイトと同じページで、
商品をカートに入れてからはスマホ最適化デザインに変わります。
こちらが実際にサイトを使用している動画です。
//youtu.be/ZTkVPSzt3O8
これが意識して作られたものなのかどうかはわかりませんが、
結果的に商品を選ぶ段階では一覧性が高く、眺めていて楽しい一方で、
注文段階では入力や確認がしやすいというサイトになっています。
こういった「組み合わせ対応」も、一つのよい事例かと思い紹介しました。
今回のポイントに基づき、サイトのレビューを行いました
次に、今回紹介したポイントをもとに
参加されたオーナーさんのサイトをいくつかレビューさせていただきました。
田中かばん店
・見出しが見えないので、どこを拡大すべきかパッと判断できない
・大きな画像の上に空白があってもったいない
・大きな画像は商品なのか？イメージ画像なのか？わからない
・ページ内検索のフォームが見つからない
・ページ下部で商品が並んでいるところの方が楽しそうに見える
・商品詳細ページで、「カートに入れるボタン」があるブロックが幅広すぎる
ネイル＠Color
・トップに大きな空白スペース（Flashではなくレイアウト崩れ？）
・ある程度見出しの大きさはあるものの、コントラストが小さく読みにくい
・左側のメニュー見出しが小さく、拡大して下まで全部確認しないとならない
・商品詳細ページで画像をタップしたときの別ウィンドウへの挙動がわかりにくい
（直上に書いてはあるが、読むタイミングがない）
アーロンチェアの庄文堂ネクスト
・スマホ専用サイトが用意されているが、無機質で寂しい感じがする
・スマホでアーロンチェアのサイトに来る人は、何を求めているのか？
（買いやすさよりも、ラインアップや情報を見たいのでは？）
・PCサイトのバナー部分を縦に並べて見ているだけでも楽しそう
お守り文字
・見出しや余白が大きく、写真も適切に配置されていて、拡大すべき場所を決めやすい
・ブロックを拡大した時に、次への誘導リンクからアクションを起こしやすい
・メルマガ登録フォームがサイドバーにあり、適切な大きさに拡大しやすい
今回見た中で特筆すべきは、最後の『お守り文字』さんのサイトです。
知ってか知らずか今回紹介したポイントを見事にクリアされていて、
スマホでも非常にスムースな閲覧ができました。
特にトップから一度DIVブロックを拡大させて、さらにその次へ誘導する流れは、
スマホユーザーの行動をうまく設計していると思いました。
またスマホへの対応を考えると、
やはりTableタグレイアウトよりもDIVブロック中心のレイアウトの方が
横幅や見栄えの制御がしやすいので有利だと感じました。
まとめ：スマホ対応しながら、PCサイトも改善できる
今回紹介したスマホ対応のポイントは、
PCサイトにも副次的によい効果をもたらすことができます。
デバイスによるユーザーの違いについて考えること、
ジャンプ率の高いデザインにすることでPCでも見やすくなること、
Tableや画像中心のデザインから、CSSやブロック中心に切り替えること等々。
また細かいユーザビリティ改善ももちろん大事ですが、
一番大切なのは、どんなユーザーがどんな目的で使っているかを把握することです。
それを知るために必要なのが、アクセス解析やユーザーテスト。
マミオンではこれらを組み合わせて、ECサイトのオーナーさんに最適なサポートをご用意しています。詳細はECサイト向けサービスをご覧ください。
Follow me!
