毎年素晴らしいサイトが生まれたり、リニューアルされていたりとWebの業界はとても早いです。デザインでも、様々な手法を用いたり、レイアウトで面白いものが生まれています。今回は主観で国内サイトで最近良く見かけるデザインのトレンドや手法をまとめました。
01.フラットデザイン
文字による文字のための文字のサイト type.center
2014年のデザイントレンドで外せないのが、はやりフラットデザインです。国内のサイトでも取り入れているサイトがとても多くなってきています。
フラットデザインを取り入れる際、一番難しいところは配色かなと思っています。
アートイベント 万国學生藝術展覧祭 | 學展 学展
上記サイトのサイトカラーの配色はとっても独特ですが、フラットデザインとしてとってもかっこ良くなっています。グローバルやボタンなども単色、アウトラインのみになっているのがフラットデザインの醍醐味なのでしょうか。スクロールに準じたコンテンツのアニメーションもとってもCOOLです!
他のフラットデザインの参考サイト
札幌の注文住宅、リフォーム、リノベーション|株式会社FPホーム
02.蛍光色を用いたサイト
メディアアートの教科書
背景などに蛍光色が強い配色を使い、上に乗るテキストなどを明度が低い色を使ったり、同じ蛍光色を用いいることにで文字の可読性はよくなります。上記のフラットデザインとの相性も◎。元気/ワクワクなどのイメージによく合います。
SMiLE Navi
グロバールが黄色ととってもド派手!
他蛍光色も用いた参考サイト
04.メインバナーの形
翠福祉会
今までメインバナーの形は”長方形”という概念があったのですが、メインバナーでは色々な形にしても面白いなーと最近思いました。少しリズムを崩したい時とかなどに用いいたりすると面白いかもしれませんね。
大阪樟蔭女子大学
メインバナーがバナーによって形がバラバラで、スライドのエフェクトもバウンドしたり面白い演出がありバナーをすべて見たくなってしまいます。
他のメインバナーの形が面白いの参考サイト
Kids and Life Photo | 子供写真スタジオのハピスタ
04.メインビジュアルがフルスクリーン
tref
アクセスしたらメインビジュアルがドーンと!使っているサイト。写真や素材に影響されますが、このぐらいフルスクリーンで使っているとインパクトが大きいですね。下にスクロールするとコンテンツがシングルページの構成なっていたり、パララックス効果を用いることが多いようです。
NHKスペシャル|カラーでよみがえる東京~不死鳥都市の100年~
上記サイト「カラーでよみがえる東京」でもパララックスエフェクトが使われており、ビジュアルの迫力とアニメーションの動きがマッチしておりとってもリッチなコンテンツになっています。
他のメインビジュアルがフルスクリーンな参考サイト
05.縦組みの文字
菓子処さかした
縦組みの文字を大きく見出しやキャッチにに使ったりしている和食、旅館、和物など和風なサイトに使っているのを見かけます。上記の「菓子処さかした」さんでは、ロゴ、見出し、フッターメニュー、タイトルなどを縦組みを取り入れ、余白のスペースも広くとってあるのでとっても視認性が良いです。
紙のデザインだと縦組みは使う場合がよくあるかと思います。Webだとなかなか使う時がないですが、少しリズムを崩したり、注目させたいところなどあったりしたら取り入れてみるのも面白いかもしれないですね!