#

2018年
1月9日

2018年
1月9日

2018年 Webサイトのトレンド

#

こんにちは田中です。めでたく年も明けたということで、今回は、今年のWebデザインのトレンドを調べたのでまとめていきたいと思います。


縦書き

縦書きWebデザインアワードというアワードが開催されていたり、cssで簡単にマークアップできるようになったりなど、縦書きのデザインをよく目にします。ロゴやタイトルなどに使用することにより動きが出たり、アクセントになったりします。そして、一番の魅力は和風感が出るところだと思います。なので和風のWebサイトや日本語感を出したいWebサイトには必須だと思います。


ローディングアニメーション

その名の通り、ページの読み込み中に流れるアニメーションです。読み込み時間が長いと感じるとユーザーはページから離れていってしまうので、アニメーションを見せてページ離脱を防ぐという重要な役割もあります。また、ロゴを動かすアニメーションを使うとユニークさも出しつつ、ユーザーに覚えてもらえるかもしれないと思いました。調べてみると、cssだけで作ることができたり、コピペもあるみたいです。


パララックスエフェクト

別名「視差効果」とも呼ばれ、スクロールするスピードを変えたり、差をつけることでWebサイトに奥行や立体感を出すことです。説明文がこれで合っているかは自信がありません。


スプリットスクリーンレイアウト

画面を大きく分割するレイアウトのことで、真ん中で二つに分割しているWebサイトをよく目にします。片方は大きめの画像を使用し、もう片方が文字をいう構成が一般的っぽいです。モバイル版では分割した片方を下に配置することが一般的で、レスポンシブデザインと相性が良いといえます。また、分割した片側のみスクロールするという他ではできない少し変わったデザインが印象に残っています。


左右に配置されたナビゲーションメニュー

ナビゲーションメニューは上に配置されることが多いですが、横に配置することで目立ったり、違った印象を与えることができます。スプリットスクリーンレイアウトと一緒に使われていることが多い印象です。


ミニマルデザイン

要素が少なく、余白を大きくとるのが特徴です。デザインするときに要素を増やしがちですが、ミニマルデザインがうまくきまればおしゃれに見えて、インパクトが出ます。また、見やすくてわかりやすいですが、要素の配置や余白の取り方がとても難しいので、良いデザインを見てもっと勉強したいと思います。


VRを使う

わかりやすい例がGoogleマップのストリートビューで、マウスを動かしてグラフィックを360°見渡すことができます。Web業界にも関わりがあったんですね。VRはこれからももっと進化していくと思うのでどんな機能がWebサイトに使用されるのか楽しみです。


グラデーション

インスタグラムのアイコンが特に有名で、画像の上に重ねたり、背景として使ったり、使い方がたくさんあります。ブランドカラーとして使ったり、オリジナリティが出しやすいことが魅力だと思います。数年前に流行っていたらしいですが、また流行るんでしょうか。


非同期遷移

ページの移り変わりをユーザーに意識させることなく、スムーズに変わる。こちらも説明が合っているか自信がありません。別のページへ行くボタンをクリックしたら、下や上、背景などから次のページが現れることです。普段あまり意識しないページ遷移にも動きがあると、おぉってなりますよね。


今回調べたデザインが今年のトレンドになるのかはわかりませんが、これからWebサイトを見たり、制作するときには、意識して取り組みたいと思います。

関連

Comments