最新のWebデザインについて、注目すべきトレンドをまとめました。Webデザイナーだけでなく、Webエンジニア、社内Web担当者など、幅広い方に参考にしていただければ幸いです。
ストーリーテリング
ここ数年はスマホの登場もあり、縦に長いシングルページのWebページが増えてきています。ユーザーはより一層、長いページを読まなくてはならず、これが引き金となって離脱を招いてしまうことも考えられます。
Web界隈でいま最も注目を集めているストーリーテリング（storytelling）を採り入れることで、こういった問題点が解決できます。加えて、ユーザーにより良いUX（User Experience、ユーザー体験）が提供できるようになるでしょう。
ストーリーテリングは「物語を語ること」といった意味合いがあるのですが、簡単に言うとWebページにストーリーを盛り込むのです。ユーザーは物語を読むようにページを見ていきます。ユーザーがこの体験を魅力的だと感じてくれれば、コンバージョンへもスムーズに進んでくれることでしょう。
ストーリーテリングの事例として、イギリスにおける水使用の啓発を行っている下記ページをご紹介します。朝起きてから一日を過ごす中で、どれほどの水が使われ、無駄にされているか。それをイラストを使ってわかりやすく解説しています。
» Every Last Drop – An Interactive Website about Water Saving
パララックスデザイン
パララックス（Parallax、視差）は数年前から注目を集めているデザイン手法なのですが、上で取り上げたストーリーテリングと併用されることが多いのでご紹介します。
パララックスデザインとは、異なる要素を異なるスピードでスクロールさせるデザイン手法のことです。遠近感も表現できるため、立体感や奥行きを出したい時に向いています。
パララックスはユーザーがスクロールしたときに見せることの多い方法なので、縦に長いWebページとの相性が良いです。ストーリーテリングと併用することで、ユーザーを飽きさせず、物語に没頭してもらえるようなWebページを作り上げられるようになるでしょう。
大塚製薬のオロナイン軟膏のサイトでは、パララックスが上手に利用されています。スクロールをしていくと、商品（オロナイン軟膏）だけがくるくると回転するようにデザインされています。
» Oronine Official Website | Otsuka Pharmaceutical
スプリットスクリーン
日本ではまだ導入事例は少ないのですが、海外を中心にいま注目を集めているのがスプリットスクリーンです。「分割する」という意味のスプリットからわかるように、Webページを2つのエリアに分割して表示をします。スクロールも別々な場合もあります。
Webページは普通は1つのエリアで出来ているので、スプリットスクリーンはインパクトを残すことに役立つでしょう。一度に2つのコンテンツが見られるので、ユーザーもたくさんの情報が得られるというメリットが得られます。
注意点としては、ただ単に画面を分ければいいというわけではないということ。そもそも画面を分割すれば、それぞれのエリアが小さくなってしまいます。それ自体はマイナス要因なので、その点に配慮をして導入していく必要があります。
スプリットスクリーンの事例としては、Good Morning Sunshineをご紹介します。こちらはスポーツを題材にしたWebマガジンなのですが、左側に特集記事のイラストを大きく配置して、画面右側には他の記事がリストアップされています。スクロールは右側だけ効くようになっています。
シネマグラフ
シネマグラフとは、表示されている画像の一部分だけを動かすデザイン手法のことです。静止画ではありませんし、動画とも異なります。動画のように全体が動かないのですが、むしろ動画よりもユーザーの注意を惹くことができるはずです。
少し技術的な話をすると、シネマグラフはGIFを使って実現されています。GIFは画像のファイル形式の一つなのですが、簡単なアニメーションを表示することもできます。複数の画像を入れることで、パラパラマンガの要領でアニメーションが作れます。動画よりも圧倒的にデータ量が減らせますし、シンプルなアニメーションでよければむしろGIFの方が最適なのです。
さて、シネマグラフの事例をご紹介しましょう。下記のページでは、シネマグラフを利用して料理をする様子がストーリー仕立てで紹介されています。パララックスデザインなど、他のデザイン手法の参考としても一見の価値ありです。
タイポグラフィー
タイポグラフィーをいかにデザインするかは、最近のWebデザインでは大きなトレンドになっています。GoogleフォントなどのWebフォントも十分に普及していますし、そういった既成のものではなく独自にデザインをしていることもあります。極端に大きな文字やウェイトを配置している例もよくみかけます。
また、文字そのものをデザインとして採り入れているケースも多く見られます。従来のように規則正しく文字を並べるのではなく、あえてバラバラにしたり、1文字ずつデザインを変えるなど。
下の事例では、アイスクリームの画像を背景に少しレトロで見栄えのあるタイポグラフィーが使われています。コンテンツ部分でも、非常に細かくタイポグラフィーが指定されています。
» Coneflower Creamery – Farm to Cone Ice Cream • Omaha, Nebraska
ミニマルデザイン
ミニマルデザイン自体は以前からあるデザインなのですが、廃れることなく今でもさまざまなWebページで活用されています。シンプルでフラットなデザインにしたり、要素の装飾を極端まで減らしていたり。
ゴーストボタンやテキストだけのナビゲーションなど、人気のデザイン技術との相性も良く、今後もミニマルデザインの活用は続くと予想されます。
ミニマルデザインの事例として、下記のネイルサロンのホームページをご紹介します。大きくあしらった背景画像の上に、サイト名やメニューなどの最低限の要素のみ配置してあります。
あとがき
2017年に注目すべき、Webデザインの最新トレンドについてまとめました。どれも魅力的なトレンドなので、自社サイトや提案の材料として活用していきたいところ。それぞれの特徴をしっかりと理解しつつ、使っていくようにしましょう。