サイドバー色々制作してみた

おはようございます〜〜〜！

突然ですが、世の中にサイドバーが存在するUIってたくさんあるじゃないですか。

どれも個性的というか、色んなパターンがあると思うけどそれぞれどんな印象があるのかなと疑問に思ったので、同じUIでもサイドバーが変わるだけでどんな変化があるんだろうということを検証してみたいと思います。

本当はUI制作した上で、これはこうだから人の感情はこうなってこういう動きをするだろうまで言語化できると良いのですが、、、、言語化ひどく苦手で練習途中なので公に外出しするのはもう少し先になりそうです、、、。(完璧を追求し過ぎないのも大事、わかる)

動機

最近サイドバーがあるUIを制作することが多いんですけど、その中でもサイドバーの立ち位置というか役割って異なると思っていて、どういう見た目のUIだとこう見えるというのが気になったので今回の題材に持ってきました！

実際作ってみた画面

内容とかは全く架空で、こちらを参考にさせていただきました、、、！！

サイドバーの検証なので他の要素は全て同じです。

1. サイドバーの色薄く、シャドーついてるパターン(notionのサイドバー引っこめてホバーするとこれが登場しますね)

2.背景一体型(youtubeとかgmailとか)

3.primaryとか結構しっかりした色を使用するパターン(slackとかasanaとかsaasに多いイメージ)

4.上のバーがサイドバーの領域まで浸透してるパターン(noteとかfigmaもこれなのかな)

意識したこと

意識というか、ピンタレストとかsaasリサーチしてみて大〜〜〜〜きくカテゴライズしたらこの4つに収まったのでこれらを制作しました。

感想

なんだろう、サイドバーも結構存在感出すべきならパキッとした色使うべきなんだろうけど、画面の真ん中になんの障壁もなく誘導するには背景一体型が一番スムーズなのかなと思いました。youtubeとか背景一体型ですよね、コンテンツ優先だからかな。

休日UI作るプロジェクト滞ってきた感じするけど、仕事外のアウトプット止めたくないですね。

では👋🏻