プロダクト画面にデザインを反映してきた変遷
こんにちは。SPEEDAのUIデザイナーのあんざいです。
今回は既存のプロダクト画面にデザインシステムのUIの反映を行なっている「デザイン刷新PJ」でプロダクト画面がどう変化してきたのかを辿りたいと思います。
PJが発足してから1年半くらいになります。(記憶朧げですが確かそれくらい)
私は2021年4月入社なのですが、入社から2,3ヶ月後からPJにアサインされました。そのからPJを通してSPEEDAはゆっくり、着実に変化をしてきました。漏れもあるかもしれませんが、刷新してきたものは下記になります。
今回載せるもの
・Table/Text Linkの色変更
・Global Navigation / Header の変更
・Loading画像の差し替え
・Tab / Button / Pager / Segment Control
の変更
割愛
・ロゴの差し替え
・複数アイコンの差し替え
・イラストの差し替え
・Context Menuのスタイル変更
・Checkbox / Radiobuttonのスタイル変更
・Bodyのフォントの変更
など
デザイン刷新PJは今までデザイナー2人、エンジニア2人の4人体制で行ってきました。
今期からはDESIGN BASEの仲間であるデザインエンジニアさんが加わってくれてさらに加速する予感です！！！
デザイン変遷を辿る
SPEEDAは載せられないところが多いので、基本的にぼかし&ダミーテキスト多めですが順番に見ていきたいと思います。
Table / Text Link
※テキストはダミーです
SPEEDAの中では圧倒的に表組みが多く使用されています。
そのため、SPEEDAの印象を大きく変えることができるポイントでもあり、PJで初めに変更を試みた部分になります。
変更前は表組みの見出しには重たいグレーが使用されていましたが、ライトグレーに変更し線の色も明度を上げることで、より文字の可読性が高まりました。
また、テキストリンクのカラーも水色から青に変わりました。
テキストリンクについては進藤さんのnoteで詳しく紹介されています！
Global Navigation / Header
2020年に比べて2021年はだいぶ印象が変わりました。
ちょうどSPEEDAのリブランディングがされた時期なのでその影響があるかと思います。
リブランディングのお話はリリーさんのnoteで詳細が語られています！
私自身は入社前だったので詳細な背景までは分かりかねますが、全体的にのっぺりした感じからスタイリッシュに変化しました。
最近ではグローバルナビゲーションの選択時の色にSPEEDAのキーカラーであるピンクの差し色がついに実装されました。
プロダクト内にピンクを取り入れたい話が出たのは一年前の話。
SPEEDAデザインチームで何度も検証を繰り返し、決まってからだいぶ時間をあけての実装となりました。個人的にも思い入れのある部分です。
また、目立つ部分であるので、社内からの反響も良く、嬉しかったです！
Loading
ローディングも青い点がくるくる回ってるものから、モノトーンの円に変化しました。ローディングは時代が出る部分だと思うので、今回の刷新で比較的に流行り廃りのないデザインに変わりました。
Tab / Button / Pager / Segment Control
先ほどの表組み・テキストリンクに加え、タブ、ボタン、ページャー、セグメントコントールの刷新がされました！ここまでくるとだいぶ印象が変わってきますね！
タブは、2021年の10月(?)くらいから着手し、3月にリリース。ボタンは2022年3月から動き出し、6月末くらいに新しいスタイルでリリースされました。
デザイン刷新PJは基本作業はエンジニアさん1名で行っており、とても丁寧にデザイナー確認などを行ってくれます。またSPEEDAは10年プロダクトのためページによっては作りが違っていたり、表面的には見えない苦労がたくさんあるので刷新していくのがとても大変だと改めて感じます…。
終わりに
SPEEDAの変遷はいかがだったでしょうか？
割愛した箇所も多いですが、少しでも変化が感じられたら嬉しいです。書きながら悔やみましたが、該当するページのスクショがなかったりしたので、刷新をしてる方は撮り溜めておくことを推奨します！
PJを通して、新規開発だけではなく、現行のプロダクト画面を刷新していくことは重要だと、画面が少しずつ変化していくたびに感じます。
また、実際に実装していただく中で、気づきもあります。
私たちはデザインシステムを作っているので、基本的にはそのスタイルに合わせて実装していただいていますが、SPEEDAの仕様上どうしても実現できないスタイルもあり、その際にはデザインシステムの方を再検討するなど、柔軟な対応しています。やってみないとわからない部分だとしみじみ感じます。一筋縄ではいかないところもまたやりがいの一つですね。
今後もSPEEDA刷新PJは続いていきます。早く変えていきたい気持ちが迸るところですが、着実に進めていきたいです！
私の所属するDESIGN BASEでは素敵な記事が毎週月曜に更新されます！
今までのメンバーの記事もぜひご覧ください！
[ Cover Design: Kurumi Fujiwara ]