最近、サイドバーが長すぎてレイアウトが崩れたことがありました。10年ほどの時間の間財団が積み上げた情報量が多すぎたのが原因だと思われます。今は記事の部分の高さを調整して問題は解決されてますが、根本的にサイドバー自体を改善する必要があると判断しました。
まず、本家の方式と同じく各リンクを同じ主題のリンクを一つのラインに集めて高さを減ることができました。こちらで確認お願いします。(リンクだけじゃなく配置やCCのアイコンなどの修正がありました)
しかし、どんどんUI的に古い感じがするのも確かなので、グラフィック作業ができる方があればサイドバーの各リンクをアイコン化するのが一番良いことだと思われます。
皆さんのご意見お願いします。
そうですね。サイドバーの情報は多すぎますね
この解決策は、サイドバーを切り詰めるか、サイドバー自体を改善するかですが、サイドバー自体の改善が妥当でしょう。
さて、サイドバーの各リンクをアイコン化するのは、良いアイディアだと思います。検討進めていきましょう。
a.k.a. 鬼食料理長
近年だと、WEB系のUIでも、スマホ向けのアプリっぽい物が主流ですね。
アイコン化は急にUIの雰囲気が変わるので、慣れ親しんだ層は強く違和感を感じそうです。
個人的には面白いし見やすいと思うのですが、フォント変更の際も反応が大きく、結局戻したのを思い出します。
最近だと、メニューに項目を増やすよりは、ページ自体を遷移させてより下の階層へ行くようなユーザー導線が多くなりつつあります。メニューとして出すのは、多くても10項目くらいで、下位の項目は次のページで出てくるような感じが多いです。この記事とか参考になるかも。 国内だと東京ガスがわかり易い例です。ただ、SCP財団のサイト構造上、これはちょっと厳しいですね。
違和感を抑えるアイデアとしては、インフォグラフィック系のアイコン+名前のリンクを起点として、ドロップダウンメニューを実装するとかになるでしょうか。要は折りたたみだけで出来るので、実装は簡単になります。ただ、見た目はそんなに変わりません。
別案としては、Windows系のような、「インフォグラフィックアイコン + タイル系のレイアウト」にするのも良いと思います。グリッド感が出て、段組みがわかりやすいので、比較的直感的に操作できる利点があります。あとコーディングが少し楽。その場合は、メニューの幅をより大きく取るか、いっその事、カードUIのように、画面全体にフローティングでメニューを広げてしまうのも、操作性・視認性は良くなると思います。