はじめて1からレスポンシブデザイン作ってみた~Google UX course 6~
こんにちは！courseraで受講しているGoogleのcourse 6 "Responsive Web Design in Adobe XD" がようやく完了しました🙌🏻
今回はその作成プロセスとアプリデザインと違って苦労した点などまとめていきたいと思います。
※XDを仕事で使うイメージがなかったので、今回もFigmaで作成しました。受講生通しで課題チェックしますが、半数弱くらいは同じようにFigmaで作成していました。
course5まではこちらにまとめています↓
そもそもGoogleUXってどんなこと学べるの？と言ったこともまとめてるのでこちらも是非読んでいただけると嬉しいです。
成果物をサクッとみたい方はこちら↓
🔗 SPプロトタイプ
01. 要件整理
作成するプロダクトの決定
テーマについては教材として用意されていたルーレットのようなものから「映画館の予約サイト」を選択しました。
インタビューの実施
映画館のオンライン予約を利用する4名の方に協力いただき、インタビューを実施しました。半構造化インタビューで
・映画を見る頻度
・誰とみにいくか、1人で行くのか
・いつ予約するのか
・どのくらい前に映画を見ようと決めるのか
・みたい映画は決まっているか、決まっていない場合どのように探すのか
…などを深堀りしながら聞いていきました。
インタビュー内容をまとめる
1人につき、1つエンパシーマップを記入していきました。そして全員分をまとめてハイライトをまとめの1つにまとめました。
人によって映画を見る頻度なども違い、重要視する項目も違うところもありましが、1つにまとめることで「何度もページを遷移して比較するのが面倒」など共通している項目が見えてきました。
Problem Statement
まとめたエンパシーマップを元に、Problem Statementを作成しています。
あれこれとまとめていますが、これくらいシンプルにまとめると見返した時に迷子にならずにいいですよね。
ペルソナ
Problem Statemsntをよりイメージしやすいようにペルソナに起こしています。
行動フロー整理
Problem Statemsntとペルソナの作成で、ある程度方向性がまとまってきました。それを実際の行動フローに起こすことで、具体的にどんな機能が必要かなどプロダクトのイメージをしやすくなりました。
競合分析
実際にある映画予約サイトを見ながら、「どんな機能があるのか」「インタビューで聞いた内容がどれだけ反映されているか」など確認していきました。
少し画像が小さいのですが、
・第一印象
・アクセシビリティ
・ビジュアル評
・トンマナ
・ナビゲーション評価
…など細かくチェックしています。
02. Low-fiのデザイン作成
サイトマップ
まず、どんな画面でどんな機能が必要かサイトマップを作成し整理しました。
ペーパーワイヤーフレーム
サイトマップを元に、必要な画面をペーパーワイヤーフレームでパターン出ししながら試行錯誤しました。画像が残っていなかったのですが、crazy8などを使って主要機能はパターン出しもしてみました。
（引くほど汚いです…小学生の男の子でも、もっと綺麗に描けるのでは…思考のスピードに合わせて忘れないうちに次へ次へと書いてたらこうなりました、すみません、言い訳です。）
デジタルワイヤーフレーム
ペーパーワイヤーフレームを描いた中で、もっとも良いと判断したものをデジタルに置き換えていきました。
これを使ってユーザーテストを実施することを目的としているため、細かいデザインは整えずまず全体の機能がユーザーが理解できる程度で作成しています。
デジタルワイヤーフレーム（PC）
PC版は正直作り慣れていなく苦戦しました…
とりあえずMaterial DesignのResponsive Layout Gridを開いてグリッドを設定してみました。
あとは、レスポンシブデザインの事例をひたすらみてみました。日本のWebアプリ系はレスポンシブ対応しておらずSPとPCで別が多いですが、海外のサイト開くとほぼレスポンシブなので簡単に探せました。
03. ユーザーテスト
計画書作成
02で作成したLow-fiをプロトタイプにして5名にテスト協力してもらいました。協力者それぞれで質問項目がバラけないように、事前に計画書を作成しています。
結果のマッピング
テストが終わったら、ハイライトを付箋にまとめてマッピングしました。協力者ごとに色を使い分けています。
Pattern Identification
ユーザーテストでお願いしたタスクの中で、定量的に判断するために何人中何人が〜をしたという形でまとめました。
① 5人中5人は会員登録をしていなかった。
→会員登録せずの導線を重要視すべき
② 5人中5人が予告編をみていなかった。
→予告編の重要度を下げても大丈夫
③ 5人中5人がお気に入りを使わなかった。
→あり方について考え直す
④ 5人中4人は日付を先に決めていた。
→日付設定の選択について見直す。
⑤ 5人中2人は当日見れる映画を探していた。
→いますぐ見れる映画をすぐに飛ばす。
Insite Identification
Pattern Identificationでパターンを導き出したので、それらをどのように活かすのかInsite Identificationでまとめました。
① 会員登録せずの導線を重要視すべき
→登録せずの購入フローの優先度をあげる
② 予告編はほとんど見られなかった
→予告編の重要度は下げても大丈夫
③ お気に入りのあり方について考え直す
→お気に入りはなくても良い
④ 日付設定の選択について見直す
→日付×公開映画
⑤ いますぐ見れる映画を探していた
→今日×公開映画（スケジュール）
04. テスト結果による修正とHi-fiのデザイン作成
ホーム画面の修正
初期モックアップテストでいまいち今すぐ見たい映画に辿り着けないことがわかりました。
今日見たい、今週末見たい、というケースが多く見られたため1クリックで今日、明日、今週末の検索ボタンを設置して見ました。また、上映中の作品も一覧ページにせずそのまま並べました。
検索一覧の修正
初期モックアップテストであらすじや予告編が比較要件に入っていないことが多いことがわかりました。
より比較されている上映時間を一覧に表示させることで無駄な遷移を無くしました。
詳細ページの修正
比較する映画は3つ程度のケースが多く、その中で公開時間や場所で比較されていたため、それらを中心にした画面に変更しました。
アクセシビリティの考慮
前回後からアクセシビリティをチェックしたら基準にあったカラーになっていなかったという反省があったため、今回は最初から考慮して作成しました。
簡単なデザインシステムの作成
◆カラー
アクセント、テキスト、バックグラウンド、ボーダーに分けてカラーを設計しました。カラーシステムに登録しているので、簡単にデザインできました。
◆余白
階層を意識して作成しつつ、後でまとめてずれているところを調整していきました。
◆フォントサイズ
8の倍数で階層を意識して作成しつつ、後でまとめてずれているところを調整していきました。
◆コンポーネント
一部ですが、CardUIはいくつも並べながら作成し途中で修正することが多いのでコンポーネント化させて作成しました。
05. まとめ
ここまで読んでいただきありがとうございます！
一番上のものと重複になりますが、ここまでのフローをまとめたものが以下になります。
06. レスポンシブデザインとアプリデザインを比較して
ランディングページ
ユーザビリティテストをしながら、アプリと違ってユーザがランディングするのはどのページかわからないなと気づきました。
「映画館名 エリア名」「エリア名 映画名」など、Gooleである程度絞ってからランディングするケースが多いとなると、その検索結果で最適なデザインは何かとアプリデザインとは違った考えどころが出てきました。
良い面もあり、「東京 映画名」でランディングしすでにその条件で絞ってしまえば最短で見せたいものが見せられる、となりかなり改善を加えることができました。
ヘッダーとフッター
細かいですが、header/footerどうするかも考慮しました。今回チケット購入画面からは削除してコンバージョンポイントで離脱しないように考慮しました。
アクセシビリティ、SEO
どちらの観点でもアプリ以上に階層構造は意識すべきところだと思いました。どれをH1にするかなど、エンジニア側で考慮してくれるかもしれませんが、ある程度ルールに基づいて設計した方がエンジニアを迷わせる懸念を減らせるかなと思いました。
レスポンシブ
レスポンシブに対応させるため、SPとPCのデザインの差を極力減らして実装工数を下げるように作成しました。この時に、今回映画予約サイトのためSPがメインユーザーの想定となるためモバイルファーストで作成し、そのデザインを実装しやすい形でPCに置き換えたデザインも作成しました。PCのデザインは慣れておらず難しかったです。
最後までありがとうございます🙇🏻♀️
残りcourse7をやり切れば認定証にたどり着けるので後少し頑張りたいと思います！