Redesign study:one screen
UIデザイン

 

一画面リデザインの目的

 

・UIグラフィックのスキルアップにフォーカスするため、設計や機能は変更しません。

・ユーザーが困惑するようなUI大幅変更ではなく、目標を絞って一部変更します。

・サービスコンセプトや他画面の制約を含めた思考力を磨くため、架空ではなく実在サービスの一画面をリデザインさせていただきます。

 

※作業工程や思考フローをチェックされたい方は以下ご覧ください

 

Figmaをみる

 

 

リデザイン内容は「+詳細を見る」よりご覧ください。

 

Kindle

詳細を見る

目標:ユーザーが本を探しやすいように導線を整える

1.枠なし文字ボタンが6つ並んでいると直感的にわかりづらいので「押せる感」を出すため、ボタンに変更。オブジェクトとしての優先度は低いため控えめな装飾にした

2.タップした後の動作をわかりやすくするため「>」から「すべて表示」に変更

3.横スライドで他の本があることに気付きやすくするため、4冊目の本を少しだけ表示

4.本のジャケット画像によって枠線のバラつきがあり、境界線がわかりづらいので、ジャケット画像の枠線をつけるよう統一

5.本の高さのバラつきによる余白のバランス感を調整するため、「kindleunlimited」のロゴは下に表示して反復。あわせてセクションごとにボーダーを追加

6.カタログ機能に合う表現として「新しい本を検索する」に文言変更。あわせて検索窓アイコンを消して検索フォームをタップしやすくした

 

SHARE DINE

詳細を見る

目標:欲しい情報が目に入りやすいように、コンテンツの優先順位を調整する

1.可読性を上げるためにline-heightを調整(200%→150%)
タイトルも他のフォントとバランスを考慮して調整(14px→13px)

2.役割ごとに色を分けるため、タップできるカレンダー/認知させたい評価の「★」のみ有彩色を使用。他の要素は黒/グレーの無彩色に変更

3.メインの料理サムネイルを目立たせるため、シースルー型アイコンに変更

4.シェフの写真と情報(名前/エリア)を近くに配置。訪問サービスの安心材料として、シェフの写真は優先順位が高いためサイズアップ

5.役割ごとに色を分けるため、ボーダーをプライマリーカラー からグレーに変更

 

SIRU +

詳細を見る

メイン目標:伝えたい要素を目立たせるため、フォントサイズや配色を調整する
1.ハンバーガーメニューと画面タイトルは別の役割なので、近くに置かず画面タイトルを中央に配置する
2.プライマリーカラーの背景色でブランドイメージは伝わりやすいが、印象が強く、他のオブジェクトで使用しているプライマリーカラー に意識が向きづらいので調整
3.「選択中」のフォントサイズ・配色を調整
4.各カテゴリーのフォントを調整(選択中のボタンは他の帯(テーマの「選択中」やサムネイルの「今が旬」)と差をつけるため、選択状態のボタンはグラデーションに変更。視認性アップのためにフォントはボールドに変更)
5.「今が旬」のフォントサイズ・配色を調整。
帯の色は、メリハリをつけるためにプライマリーカラー (#499A97)と明度・色相の差が大きい#C0000に変更
オレンジから赤に変更することで、ユーザーのメンタルモデルから赤=スーパーのチラシを連想しやすく、「買い物」を直感的にイメージしやすいと考えた。

 

サブ目標:リピートユーザーを増やすため、利便性を上げる
1.ハンバーガーメニューの中のある「お知らせ」機能をヘッダー右上に変更し、タップしすくした
2.「買い物レポ」までタップしないとテーマ変更できないので、テーマ変更のボタンを配置
3.アプリに親近感を感じさせるため「あなた」をアカウント名に変更

 

Sumally

詳細を見る

 目標:「want it」「have it」ボタンのタップ率を上げるため、要素の配色・配置を調整
1.前画面の商品一覧と同じ構成にするため、サムネイルの下にタイトルを配置
2.ヘッダーアイコンの優先度は高くないため、プライマリーカラー から無彩色に変更
3.多くの人がタップしていることを表現するため、アイコンを重ねて表示
4.グレーアウトしてるように感じるため、押せる感を出すために色を変更
※購入画面で表示される「購入するボタン」と色が被らないよう、プライマリーカラーは使用しない

 

 

補足

・サービスご担当者様:勝手なリデザイン申し訳ございません。学ばせていただき、感謝しております。

・坪田 朋さんの記事「UIデザイン力を鍛えるリデザインの勧めとコツ」を参考にさせていただきました。