40万人が使うサービスのUI刷新
会社が提供しているブラウザメールの操作画面に手が入り、そのUIデザインを私が担当することになりました。
これ、40万人もユーザーがいるサービスなんだよね…責任重大！
今回のリニューアルでは、デザインを刷新するだけでなく、Ajax を導入して操作性を改善する大きなプロジェクト。
CSSの崩れ直しや資料作りとは違い、システム全体の挙動を理解した上でデザインを決める必要がありました。
Ajaxを理解してデザインへ
当時参考にしたのは米国版Yahoo!メール。
そこで初めて「Ajax」という言葉に出会いました。
エージャックスって何？魔法の呪文みたい…
調べると、ページ全体をリロードせずに一部だけ更新できる仕組みとわかり、「なるほど、だから画面が軽いんだ！」と納得。
この挙動を前提に、UIの配置や動きを考えていきました。
Photoshopでのアイコン制作と色調整
最初に作ったのは「新規作成」「返信」「削除」など基本操作のアイコン。
Photoshopでひとつずつ描き、光沢感を強めるかフラットにするか試行錯誤しました。
背景色が濃いとアイコンが沈む、薄いと目立たない…難しい！
光の当たり方を決め、統一感を重視して最終的にはシンプルな光沢で仕上げ。
見出しとの色バランスも難しく、見出しの色を濃くしたらアイコンが目立たなくなり、再調整…の繰り返しでした。
毎日見られる画面だからこそ
このブラウザメールの画面は、ユーザーがログインするたびに目にする場所。
40万人が使うサービスだからこそ、少しでも使いにくいと毎日ストレスになります。
完成時点で品質が決まるって…プレッシャーがすごい
ホームページのように後から更新で改善するのではなく、
リリース時点で「完成度の高いもの」に仕上げる必要があります。
愛されるUIを目指して
まだ始まったばかりの業務ですが、「見やすい」「使いやすい」と思ってもらえる画面になるよう、色やアイコンの細部まで気を配って作っていこうと思います。
毎日見られる画面だからこそ、“この画面が好き”と思ってもらえるデザインにしたい！
