色と配置を整えズラす。白黒シンプルな配色が特徴のWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

白黒のシンプルな配色が特徴のWebデザイン。美術大学のWebデザインって素晴らしいものが国内外問わず多い。白黒シンプルに対してキーを「はずす」ことによって単調さがなくなっているデザインもポイントです。

整列っぷりが良いです。情報が多いサイトにありがちな典型的な３カラムですが、その整列具合からグリッド配置のマルチカラムを想起させます。

あぁ、言葉にしてわかったんですが、このサイトが「引き締まってる」と感じたのは、シンプルな色合いもそうなんですが、整列されていることによるものが大きいと思う。

例えば上の画像で言えば、路地ができているかのようなスクエア型の配置など、しっくりきっかりまとめられています。

また、上部のグローバルメニューとロゴの配置が大きく観るとL字状に配置されています（わかりやすく画像ではロゴは黒のものを利用しています）。

これがきっちり配置されているので、自然とその下にある要素と”区切り”ができているんですね。それによって情報が多いものを分けてそれぞれ見ることが出来ている。

グローバルメニューの配置が一番トップではなく、スライドショーの直下にあります。そしてその下にはすぐにTOPICSなどニュースが並んでいます。

なるほどそれを活かしたメニューの開閉方法。マウスホバーでメニューが上に開きます。

上にスライドショーやスクリーンショットがあるサイト多いですが、このようにグローバルメニューを下に配置して、上に広げるっていう手もあるんですねー。それでもっと重要なコンテンツを上に配置すると・・・。なるほど参考になる。

白黒シンプル。整列。。でもそれはキッチリし過ぎな印象を与えることもあります。そんな時に有効なのが、「あえてはずす・ずらす」という方法。

ずらすといえば、「整列を少し乱す」ということが多いですが、武蔵野美術大学のWebデザインでは、整列からずらすのではなくて、色からずらしています。それがトップ左の武蔵野美術大学のロゴ。リロードするごとにこの要素は変わり、整いきったデザインに軽い刺激を与えてくれています。

色をずらす。ということを考えると、ロゴの他には文字などの要素帯は全て白黒で、美術大学としての作品画像やユーザーを引き連れたい広告のみが色つきですね。このようにきっかりとした差別化もまた、情報量が多いサイトをしっかりとまとめあげ、そして惹きつけるところを惹きつけるために必要なデザインなのでしょう。

武蔵野美術大学のWebデザイン、とても参考になりました！

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！