UI/UX改善提案
SHElikes MULTI CREATOR COURSEの実践課題。架空の既存Webサイトにおいてクライアントが感じている課題をUI/UXデザインにより解決するため、仮説要因を立て解決アプローチを見つけ、Figmaを使用し提案資料にまとめるところまでを行いました。
｜制作概要｜
制 作 期 間 ◆ UI/UX改善案（仮説要因・解決案・デザイン）作成：約 12 時間
提案資料作成： 約 3 時間
制 作 範 囲 ◆ 仮説要因立て・解決案作成・デザインカンプ修正・提案資料作成
使用ツール ◆ Figma
｜目次｜
1. 要件（課題内容）
2. UI/UX改善提案
3. UI/UX思考プロセス
4. 課題を通して学んだ点
1. 要件（課題内容）
2. UI/UX改善提案
◾️課題 1：購入商品数の平均が１個で購入単価が低い
◾️解決策（必須要件）
・カート画面に「買い物を続ける」ボタン（戻るボタン）を追加する
・カート画面の下部に他の商品をリコメンドする
◾️UI/UX改善提案資料（全3P）
◾️課題 2：フォームでの離脱率が大きく購入に至っていない
◾️解決策（必須要件）
・プレースホルダーの設定（記入見本を見せて直感的にわかるようにする）
・必須項目を明確にする
・手数料の記載（商品以外にかかる金額を明示し不安を取り除く）
◾️UI/UX改善提案資料（全3P）
3. UI/UX思考プロセス
- 課題に対して、類似のサイトがどういう対処を行なっているかの検証（リサーチ）
- 参考にできそうな部分をピックアップし、基本デザインルールに則りデザインカンプの修正
- 全体を見て一番強調すべきところ、一番ではないが重要な部分など、優先順位の意図通りに自然に見えるかどうかを考慮しながら、色やボタンなどデザインの調整を行った。
◾️全体のUI：Figma
4. 課題を通して学んだ点
◾️リサーチの重要さ
・課題解決をしていく上で、既存の類似サイトをたくさん見て検証していきました。普段はなんとなくサイトやアプリ画面を見ていたけれど実際にどう改善するかという観点で参考サイトを見ていくと、離脱しない工夫やわかりやすく使いやすいデザインになっているということがわかりました。
◾️Figmaを使ったUI/UX
・Figmaで既存のプロトタイプに手を加えていくという流れを経験しました。基本デザインルールに則ったデザインを制作することで、改めて統一感のあるデザインにすることは機能としても実装のしやすさという観点でも重要であるということを学びました。
・Figmaでの提案資料作成も今回初めて行いました。プロトタイプ作成、デザイン作成、資料作成にも使える便利なツールなので、今後も積極的に使っていきたいです。