縁の下のUIデザイン―少しの工夫で大きな改善!
第26回 「○○っぽいデザイン」のエッセンス
デザイナーなら,
当然何も考えずにまねてしまうと模倣になってしまい良くありません。しかし
今回はこの
- 注1)
- 本コラムでの
「模倣」 は, 意図を理解せずにまねるというネガティブな行為を指しています。
「○○っぽさ」の3つの観点
「○○っぽい」
❶ UIデザインを指すパターン
目で見ることができる,
(a) 画面全体のベースカラーが「ベージュ」 で, アクセントカラーに 「緑」 を用いている (b) 一覧画面のデザインが格子状にびっしりと並んでいる(c) ホーム画面の上部に大きなバナーを使った導線があり,画面下部は最新情報がリスト形式に並んでいる
このように,
❷ 体験そのものを指すパターン
具体的なUIデザインではなく,
(a) ボタンを押したときのフィードバックや画面のロードタイムがとても早い(b) 気が付いたらそのサービスをずっと使っていた(c) 買いたいものがすぐに見つかった
❶とは違って,
❸ 利用者の傾向を指すパターン
たとえば,
その場合,
具体的な活用事例
では,
UIデザインのエッセンスを引き出す
Pinterestの一覧画面からエッセンスをピックアップすると,
(a) 情報が2カラムに配置されている(b) 写真がレンガ状に互い違いに並んでいる(c) 写真とラベルだけで情報の要素が少ない(d) 余白が最小限で,少ないスクロールで数多くの情報を見ることができる
対象サービスに適したエッセンスを考える
対象とする日本の絶景スポットの元のデザインは図2
- (b)
情報を2カラムに配置されるように変更した例 - 各項目がグリッド状に配置されていてコンテンツに目線を合わせやすい
- (c)
上記 (b) に加え写真の良さを引き出すためそれぞれオリジナルの縦横比にした例 - 情報がレンガ状になり,
目の行き来が多く情報の要素も多いため, 散漫な印象がする - (d)
一覧での情報量を減らした例 - 少ない情報でレンガ状に配置されているため,
探索的な体験を提供できる
どれもPinterestのUIのエッセンスを引き出したデザインになっていますが,
このように,
今回は
本誌最新号をチェック!
WEB+DB PRESS Vol.128
2022年4月23日発売
B5判/160ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-12789-3
- 特集1
演習で慣れる!
データベース入門
SQL操作,テーブル設計,分析用データ処理 - 特集2
クラウド構築ツールの大本命!
ゼロから学ぶTerraform - 特集3
チャットやIssueでちゃんと伝えたい!
エンジニアのための英語
バックナンバー
縁の下のUIデザイン―少しの工夫で大きな改善!
関連記事
- 2021年3月第1週号 1位は,2021年に注目すべき4つのUI/UXのトレンド,気になるネタは,ドコモとKDDI,回線解約ページを検索エンジンから隠ぺい 総務省の指摘受け修正
- 2021年1月第5週号 1位は,自分にはTailwind CSSが向かない理由,気になるネタは,反Facebookの「MeWe」が急成長--広告なし,プライバシー重視のSNS
- 2020年12月第3週号 1位は,2021年に向けてのUIデザインのトレンド,気になるネタは,「Apple M1」搭載Macのモニター出力に複数の制約--EIZOが注意喚起
- 2020年11月第3週号 1位は,エンゲージメントを高めるお問い合わせページをデザインする方法,気になるネタは,「Googleフォト」,無制限の無料ストレージを2021年5月末で終了へ
- 2020年10月第4週号 1位は,UIデザインのためのユーザビリティの経験則10選,気になるネタは,グーグル検索,気になる曲をハミングすると曲名を教えてくれる新機能