初めまして､笠井枝理依です！
下の名前を読めない方が時々いらっしゃるので念のため､「えりい」と読みます｡サザンオールスターズのファンである父親が､『いとしのエリー』という曲から名前をとりました｡(皆さんに名前を覚えていただく作戦です！)
Actcatには初のデザイナー&初の女性メンバーとして9月頭に入社し､バンクーバーからリモート勤務しています｡私は今でこそデザイナーとして働いていますが､ずっとそうだったわけではなく､IT業界で様々な職種を経験してきました｡
- ハウツーサイトを運営する企業でインハウスライター
- 決済サービスを運営する企業で法人営業
- 人材紹介プラットフォームを運営する企業でマークアップエンジニア
- IT企業への投資をメインに展開する､バンクーバーの企業でUIデベロッパー
- Actcatでデザイナー
Actcatではこれまでの経歴を活かしてライティング､マーケティング施策から実装まで幅広く取り組ませていただいてます！
さてさて自己紹介もさせていただいたところで､この記事の本題に入りましょう｡今回はActcatのデザイナーとして初めて取り組んだ､SideCIの新機能「負債カンバン」のデザイン変遷をご紹介します｡デザイナーがデザインする際にどんなことを考えているのか､一例として参考になるところがあれば幸いです｡
デザインの変遷をご紹介する前に
負債カンバンとは
「負債カンバン」とは､SideCIがユーザーのGitリポジトリを解析して発見した問題点(負債)をカードにし､優先度に応じてエリア毎にカードを並べる機能です｡各カードをクリックすると､その問題点の詳細を確認することができるようになっています｡現在はベータ版でRubyのみ対応していますが､今後対応言語を広げていく予定です｡
ワイヤーフレーム
こちらがデザインのベースになったワイヤーフレームの一部｡負債カンバンのモックアップ作成は体験入社の課題も兼ねており､ワイヤフレームはActcatで既に用意されていました｡
第1弾: 情報をとにかく削ぎ落とす
受け取ったワイヤーフレームを元に作成した､一番最初のモックアップがこちら｡
デザインした当時考えていたこと
ワイヤーを渡されて最初に思ったのは､視覚情報が多すぎるということでした｡各カードに表示するテキスト量が多く､ユーザーがぱっと見た時に面倒だと感じさせてしまいそうです｡カードの詳細情報も当初はツールチップで表示するようになっていたので､カーソルを合わせただけでぶわっと詳細が出てくる仕様｡それだとカーソルを動かす度にカードの詳細が表示され､ガチャガチャとうるさくなりそうでした｡
そこでまずは､情報をとにかく削ぎ落とし､極力シンプルになるようデザインしてみました｡
ポイント
- 色情報を抑える
- 背景やディレクトリをグレースケールにして､色情報を抑える
- 一方で各カードには緊急度に応じてポイント色を入れ､エリアの優先度をわかりやすくする
- 指摘内容のカテゴリに合わせたアイコンのみを使用して､極力カード内の文字を少なくする
- アイコンにカーソルを合わせて初めて､ツールチップでカテゴリを表示する
- カードの詳細はツールチップではなく､クリックでのモーダル表示にする
- カード内に表示しなかった情報もモーダル内に収める
このデザインで生じた課題
表示する情報をだいぶ抑えたことでページがスッキリしたのは良いのですが､一方で下記のような課題も出てきました｡
- 結局ツールチップが無くなっていない
- ツールチップで表示される情報量は少なくなったものの､依然カーソルを動かすことで画面がガチャガチャする
- むしろ同じカード内なのに､カーソルを合わせる位置によって表現が違うのはユーザーに不親切
- カード､エリアの優先度がわかりづらい
- ポイント色で同じタイプのカードがどれかはわかるが､そのカードの優先度や評価がわかりづらい
- 左から右に向かって優先度が低くなっていることが､テキストを読まないとわからない
第2弾: 優先度の表現を意識しすぎてカラフルに
課題が残ったままのデザインではありましたが､伸び代を見出していただけたようです｡晴れてActcatの一員になった私は､早速負債カンバンのデザインをブラッシュアップすることになりました｡しかし前回のデザインで生じた課題を解決しようと試行錯誤した結果､とんでもなくカラフルになってしまったのです｡
デザインした当時考えていたこと
まず認識不足だったのが､同じエリアにコード品質が高いものと低いもの､両方がある可能性です｡つまりコード品質が例えA評価だとしても､指摘内容によっては「早急に対応してください」というエリアに分類されたりもするということ｡前回のモックアップではその状態がイメージしにくかったので､各エリアに様々なコード品質のカードを並べることにしました｡
次はカード内の情報を再検討｡いくつか追加する際に､表現に強弱をつけて情報のメリハリを意識しました｡こうしてアイコンは無くなり､ツールチップを完全に廃止｡またエリアの優先度についても､直感的にわかるように背景色を敷くことにしました｡
ポイント
- カードの指摘内容とコード品質を表すアルファベットを再追加
- カード自体の優先度がわかりやすくなるよう､アルファベットをカードのポイント色に揃える
- 一方で指摘内容は詳細をモーダル内で表示しているので､ここでは薄めのグレーに留める
- 左から順に､「赤→オレンジ→灰色→白」の背景色を敷く
- 特に左側の2つに注目してもらいたいので､右側の2つはグレースケールにする
- カードのポイント色が強いので､視覚的にきつくならないように背景色は薄めにする
このデザインで生じた課題
エリアの優先度も重要､カード自体の優先度も重要…と色を加えるうちに､結局どれが大事な情報なのかが伝わらない､うるさいデザインになってしまいました｡これは情報の優先順位を考え直す必要がありそうです｡
- 色を使うルールがそもそも崩れている
- 背景色は赤/オレンジ/灰色/白
- カードは赤/オレンジ/緑
- どれが一番重要なカードなのかわかりづらい
- エリアとカード､優先度の軸が2つあり､両方の軸で似たようなカラーの表現をいれている
- 赤のエリアにオレンジや緑のカードが入ってしまうことでユーザーを混乱させる
第3弾: 情報設計の見直しと､色使いの調整
前回のカラフルなデザインで情報の優先順位づけに困った私は､他メンバーや外部のデザイン顧問の方の協力を得て､優先順位を整理することにしました｡その結果､カードの優先順位よりもエリアの優先順位をユーザーに理解してもらう方が､より重要だという結論に｡そうしてできたモックアップがこちらです｡
デザインした当時考えていたこと
エリアの優先順位の方が重要と結論が出たおかげで､色使いのメリハリも考えやすくなりました｡まずはカードから思い切ってポイント色を抜き､エリアの優先度をわかりやすくすることに集中したのです｡そうした時に気になってくるのは､「果たして背景色だけで､直感的に優先度を理解してもらえるかどうか」ということ｡直感的にわかるようにする一案として､エリアタイトルの横にアイコンを置くことにしました｡
ポイント
- エリア > カード
- カードはグレースケールにして､赤やオレンジといったカラーはエリアの背景色だけに使う
- カードはファイル毎に作られているので､カード内情報ではファイル名を目立たせ､あとの情報をグレーにする
- カードは全て同じカラーリングになったので､カードの左端に入れていたカラーボーダーも不要
- カード自体の優先度はアルファベットの並び順によって認識してもらう
- タイトル横にアイコンを入れる
- エリアによってアイコンを変えることで､違いを表現
- 左から右にいくに従って優先度が低くなるので､アイコンに一貫性をもたせる
このデザインで生じた課題
色使いがスッキリしたことで､カード内情報のグルーピングや､アイコンの表現により目を向けられるようになりました｡
- カード内情報のグルーピングがわかりづらい
- 現状はファイル名の下に線が一本入っているだけで､グルーピングとしては物足りない
- アルファベットだけカードに表示されても､パッと見ただけでは何を表しているのかわからない
- アイコンの視認性が高くない
- アイコンの肌色が背景に馴染んでおり､表情も細かいので違いがわかりづらい
第4弾: 情報のグルーピングとアイコンの変更
そしてこれが現状の負債カンバンです｡第1弾に比べるとだいぶわかりやすくなったのではないかと思います｡情報のグルーピングとアイコンのわかりやすさを改善するため､色んなアイディアを出し合っては形にしてみて､ここまでたどり着きました｡
デザインした当時考えていたこと
せっかくカードから色を抜くことができたのだから､カードに必要以上のものを載せたくありませんでした｡またアイコンについても､顔のような複雑なものは使わないようにしつつ､抽象的過ぎてユーザーに伝わらないのも避けたいと考えていました｡
ポイント
- カード内情報のグルーピングは必要最低限を意識
- 線を無くす代わりに薄いグレーの背景を入れることで､よりグルーピングをはっきりさせる
- アルファベットだけだと何を表しているのかわかりづらいので､「コード品質」というラベルを小さく挿入する
- タイトル横のアイコンをビックリマークにすることで視認性を高める
- 案1として考えたお天気アイコンはわかりやすいが､複雑なデザインになる
- 案2として考えたの目盛りアイコンは単純なデザインだが､抽象度が高く､違う意味で捉えられる可能性がある
- アイコンとエリアの背景色を同系色にして調和させ､中のビックリマークの数を増やすことで重要度を表現する
おわりに
いかがでしたでしょうか？自身が過去に作った拙いデザインを公開するのは恥ずかしいものですが､各段階を見れた方が読み手にとっても参考になると思ったので､思い切って載せることにしました｡
こうして何段階かの変遷を経た負債カンバンですが､ベータ版ということで今も尚改善中です｡ユーザーの皆さまにとって使いやすいものを提供したいと､デザインサイドでも日々奮闘しておりますので､ぜひお気軽にご意見・ご要望をお寄せください！
そしてその改善を手伝ってくれるメンバーも随時募集しております！興味のある方はぜひこちらもチェックしてみてくださいね｡