最近のWebのトレンドデザインを紹介してみようと云う事で、日々チェックしているWebサイト群を改めて見直してみた訳ですが、「最近こう云うデザイン多いよね。」みたいな漠然とした感覚はあるものの、当然の事ながらトレンドは単純に年で区切れるものでもなく、明確な手法があるかと云うと甚だ疑問がある訳でして…。
そこで、此処は私の主観たっぷりで最近の傾向をピックアップしてご紹介してみたいと思います。
iOSのダークモードなどデバイスの進化などに伴って出回るトレンドデザインと云うものはあるなと思いつつ、いざピックアップしてみるとある種の傾向が見えたので、全二回に分けてお送りしたいと思いますのでお付き合い下さいませ。
印刷物の手法を取り入れたWebデザイン
近年の傾向として紙媒体のレイアウトっぽいデザインが増えているなと云う印象はありました。
CSSの進化に伴いある程度複雑なレイアウトも可能になって来たので、敢えて縦横の概念（グリッド）を壊すデザインに挑戦し始めたのかなと。
確かにデザインに動きが出るので単調な縦横デザインと比べるとデザイン性がアップするのはあると思います。
あと、グラフィックデザイナーがWebの仕事もする様になったから？と云う推論もありますが如何程に。
まぁ、私もグラフィックデザインの出身ですが、2000年代後半辺りからはグラフィックデザイン案件とWebデザイン案件はセットで依頼される傾向が高まり、自ずとグラフィックデザイナーもWebを作れないと置いていかれる様なイメージはありました。
それがより強まったのはあるかもしれませんね。
そんな訳で、今回はグラフィックデザイン的なWebサイトをピックアップしてご紹介致します。
雑誌風
先ずは雑誌の誌面レイアウトの様なWebサイト。
近年このテイストのデザインが多い印象ですね。
写真やテキストをずらして重ねたり、罫線を使ったりがこのデザインの特徴。
JEANASIS MEDIA
ファッションサイトなので尚更ですが、スタイリッシュに見えますね。
山本由貴 オフィシャルサイト
サイトを一目見て好いなぁと思いピックアップしました。
罫線を使ったプロフィールと日々のつぶやきの画面分割レイアウトも素敵ですね。
冊子風
続きまして小さな冊子をめくる様にスクロールするデザインです。
コンテンツごとの区切りが明確なので情報が把握し易いですね。
NINTENDO LABOってなに？｜ Nintendo Labo ｜ 任天堂
クラフト的な背景や太いフォントが可愛いデザインですね。
製品の世界観を巧く伝えているなと思います。
ドラえもん Vol.1 ｜ フェリシモ
コラージュ的な世界観が可愛らしく仕上がっていますね。
どちらのデザインも太めの区切り線が効いてます。
中吊り広告風
文字通り中吊り広告の様なWebデザインです。
ファーストビューにタイトルやメインビジュアル含め様々な情報を詰め込んだレイアウトが特徴ですね。
リアル脱出ゲーム×東京ドームホテル「夜のミステリーホテルからの脱出」
このまま印刷したらポスターになりそうなデザインですね。
要素をがっつり固定してるのかと思いきや、レスポンシブを考慮してそれぞれ分離されて作られてます。
見た目以上にレスポンシブの考慮が難しそうなデザインです。
パイロンPLシリーズ ｜ シオノギヘルスケア
各要素に動きをつけられるのはWebサイトならではですね。
表紙風
ファッション雑誌などの表紙をイメージさせるシンプルかつ洗練されたデザインです。
写真のクオリティの高さもありますが、フォントの使い方も効果的ですね。
HARE ｜ Official Brand Site
斜めに流れるモデルさんの写真に大胆に重ねられたフォントがインパクトありますね。
細かな各要素の配置やあしらいも洗練されています。
Lucest（ルーチェスト） ｜らしく、輝く。｜ ワコール
レイアウトはシンプルですが、写真やフォントの組み合わせがとても美しいです。
必要最小限で魅せるお手本の様なデザインですね。
やはり素材は大事だなと思わせられるWebサイトです。
終わりに
如何でしたでしょうか。
敢えて崩したレイアウトや大胆な要素の配置などでリズム感のある魅力的なデザインになりますね。従来のグリッド的なデザインと比べて表現の難易度は高くなりますが、インパクトが違ってくるので取り入れてみたいですね。
今後、より印刷物とWebの垣根を超えたデザインが増えて来るのではないでしょうか。
温故知新的に様々なデザイン手法をWebに取り入れられるか考えてみるのも面白いかと思います。
ホームページ制作ソフト「BiNDup」もまた、マガジン風のものやリズム感のあるデザインやWebフォントを効果的に採用したデザインのテンプレートが豊富です。
新作のテンプレートもまもなく発売になるので、ぜひチェックしてみてください。
それではまた次回。
BiNDupのテンプレートを見る
グリッドデザインやグラデーションなどオーソドックスな7つのデザイン手法別のデザインまとめはこちら。参考にしてください。
POINT
- 紙媒体の様な表現のWebデザインが増えている
- グリッドにとらわれない自由な配置でリズム感のある魅力的なデザインが多い
- レイアウトが複雑になるとレスポンシブWebを考慮する上で難易度が高くなる