Googleアナリティクス画面をトレースする その1
自社案件でチャットボットの管理画面デザインを考えることになりました。
管理画面のデザイン。どうやって考えたらいいのか？
管理画面デザインの良し悪しで業務がスムーズに進むかロスが出るか差がつくそうじゃないですか。なので自分なりに調べてみます。
まずは画面の土台をトレースしてみる
UIをトレースしたら何か気づきがあるかな？
と言う事で、Googleアナリティクスの画面をトレースしようと思います。
なぜGoogleアナリティクスかと言うと、
・広く利用されている
・自社案件のチャットボットには解析ツールがついているためGoogleアナリティクスが参考になると思った。
という理由からです。
Googleアナリティクスとは？
アクセス解析を行うことができる無料のアクセス解析ツールです。
Google Analytics（アナリティクス）を利用することで、
「どのページにアクセスが集まっている」
「どのページがランディングページとなっている」
「離脱率が高いのはどのページ」
「どこからのアクセスが多いのか」
「ユーザーはPC利用者が多い、又はスマホ利用者が多い」
といった事を確認することができます。
さっそくトレースしながら気づいた事をまとめます
弊社の実際の画面を使ってトレースするため画面全体をお見せできないので、部分的にご紹介します。
今回はホーム画面です。上が見本、下がトレースしたものです。
まずヘッダー。
この段差（Step）の影が、画面をスクロールすると少し色が濃くなる。
しかも濃くなるのは中央部分だけで、左右の端は濃くならない。なぜかは分かりませんが。
（こんな細かい事…あっても無くても支障の無さそうな事、気にする人っています？？悪口ではなく素朴な疑問です。）
さらに、ヘッダーの段差の境界線には1pxの線が引かれていました。
拡大したものがこちらです。
すぐに影かと思いきや、1pxの線が引かれていることでよりハッキリと境目が強調され、立体感が出ていると思います。
そして、ヘッダーとサイドメニューが重なっている部分はこのようになっています。
ヘッダーには1pxの線があるのに、サイドメニューには無い。すぐに影が始まっています。やはりヘッダーはどこよりも区別したいという意図があるのでしょうか？
次にスクロールバーです。
拡大したのがこちら。なぜ余白が？
スクロールバーにマウスを合わせてみます。すると
・バーがレールがに乗っかた
・バーの色が濃くなった
レールが現れるとバーの両サイドに1pxの余白が生まれました。このための余白だったんですね。
これで土台が完成しました。
①ヘッダー
W:2073（ウィンドウサイズによって変わる）
H:64
塗り #FAFAFA
線 #DCDCDC
②サイドメニュー
W:255
H:999（ウィンドウサイズによって変わる）
塗り #FAFAFA
項目が展開していくと高さが足りなくなるためスクロールに切り替わる
③スクロールバー
W:9
H:465（画面の内容によって変わる）
塗り #C2C2C2
線 #AEAEAE
マウスオーバーさせた時と外した時でバーの色が変わる
④編集エリア
塗り #F2F2F2
このエリアが各要素の一番下（底面）にいる
色が白ではなく薄いグレーなのは、このエリアに乗っかるカード（グラフや情報など）が白いから。カードが目に入りやすい様に浮き立たせるような配色になっているのだと思います。
まとめ
画面の土台に「白色」が無いことに気づきました。それぞれのパーツに薄いグレーが使われています。
これは最も見せたいもの（Googleアナリティクスの場合はデータなどの情報や設定画面）のエリアを目立たせるためなのかな？と感じます。グレーの中にある白って目に入りやすいですもんね。
今回はこんな感じです。ではまた。
