平成が終わる前に習得したい!最新のウェブデザインと導入例

平成が終わる前に習得したい!最新のウェブデザインと導入例

もうすぐ平成が終わり、新しい時代がやってきます。平成の時代にはさまざまなWEBデザインの手法が生まれ、流行し、同時に廃れていきました。急速に変わり続けるWEBデザインの世界においては“いま”のデザインテクニックのトレンドを掴むことが重要になります。
そこで今回は2018年、そして2019年にもトレンドになるだろう最新のWEBデザインテクニック4選と、その導入事例についてご紹介していきます。

モバイルファーストデザイン

近年はPCよりもスマホでネットを視聴する人の割合が増えてきました。それに合わせてWEBデザイン作成のあり方も大きく変化してきています。その変化のひとつとして挙げられるのが「モバイルファーストデザイン」です。

モバイルファーストデザインとはその名のとおりモバイルでの閲覧を最重要視し、モバイル用に最適化したデザインをメインに据えてPCでのデザインはそれに合わせて行うというものです。以前まではPCデザインがメインでモバイルデザインはおまけ……という流れが強かったですが今はそれが逆転しつつあります。

モバイルファーストデザインのメリットはいくつかありますが、そのなかでも大きいポイントは以下の二つです。

厳選されたコンテンツを配信することができる

モバイルでの閲覧はPCに比べると情報量が少なくなり限られてくるので、それだけPC版の情報を削ってコアな部分(最優先で伝えたい部分)を厳選して公開することになります。モバイルという小さな画面だからこそ、見せたいコンテンツだけに絞って凝縮して発信できるわけです。

デザインの修正をスムーズに行うことができる

モバイルデザインはPCデザインに比べると構成がシンプルで、公開後の修正やデザインの見直しがスムーズに行えます。ユーザーの反応を見ながら容易に改善していけるのは大きなメリットといえるでしょう。

優れたモバイルデザインでサイトを公開しているアバレルブランドやファッションECは「そのときに本当に見せたいもの」を効果的に表現しています。

・TIARA inc.
http://tiara-inc.jp/

・DHOLIC
http://www.dholic.co.jp/

マイクロインタラクション

マイクロインタラクションは、WEB上にアクション要素を取り入れてユーザーの関心を引く手法です。例えばテキストにカーソルが乗ったときに色が変わったり、ボタンを押したときに別のアクションが加わったりと視覚的にユーザーのエクスペリエンスを高めることができます。

近年はスマホ上において指でタップするため、マイクロインタラクションの重要性が高まっています。優れたマイクロインタラクションはそれだけでユーザーに心地よい操作性を与えます。スマホユーザーが急速に拡大している現在、今まで以上にユーザビリティの高いモバイルデザインが求められているといってもいいでしょう。

マイクロインタラクションの注意点としては、行き過ぎたアクションの導入は逆効果になりやすいということです。ときにデザイナーは自分のエゴを強調し、不必要なまでに過剰気味なアクションを加えることがあります。マイクロインタラクションで大切なことは「無駄な動きを省いてシンプルかつ心地よいユーザビリティを提供すること」です。デザイナーの自己満足なだけのデザインは必ずしもユーザーの満足度につながりません。

シンプルだけれどユーザー体験を高められるデザインか、演出過剰でユーザーが煩わしく感じるデザインか。その点を見極める必要があります。

優れたシンプルなマイクロインタラクションの例として以下のサイトが挙げられます。

・すすメトロ!
https://www.tokyometro.jp/susumetro/

フラットデザイン2.0

フラットデザイン2.0とは、本来のシンプルなフラットデザインのなかにマテリアルデザインの要素もプラスした新しいデザイン手法のことです。従来のフラットデザインは見た目が美しいものの、クリックしにくい、どこか見にくいといった課題がありましたが、そこに立体感や影などマテリアルデザインの要素を加えることでそれらのマイナス点をカバーしています。

フラットデザインが適度にマテリアル感を帯びることで、平面感が強すぎて課題のあったサイトをユーザビリティに優れたサイトに仕上げることができます。従来のシンプルなフラットデザインと、光・影・立体感・モーションなどが特徴のマテリアルデザインが“いいとこ取り”されたフラットデザイン2.0は2019年度以降もトレンドのひとつになるでしょう。

フラットデザイン2.0を上手く用いたサイトとして以下のようなものがあります。

・Ginco
https://ginco.io/

・Bloom
https://bloom.co/

ミニマルデザイン

ミニマルデザインは不必要なデザインや演出を一切省き、必要最小限の機能と演出によって洗練されたイメージに仕上げるデザイン方法のことをいいます。余計なものがなくシンプルだからこそ上品で高級感あふれるサイトを作り出すことができます。ファーストビュー、ファーストインパクトが重要視されるファッション・アパレル業界に適したデザイン方法といえるでしょう。

ミニマルデザインはシンプルだからこそ視覚的なイメージでどれだけブランド力をアピールできるか、ユーザーを引き込めるかがポイントになります。そういう意味ではどういう写真をトップに使用するか、どの写真を使えばより高級感が出るか、といった点を考慮する必要が出てきます。

ECサイトというとテキストの情報ばかりが散りばめられているという印象がありますが、近年はECサイトにもこのミニマルデザインが導入されてきています。ブランドそのものをアピールしたい企業はテキスト満載の雑多なデザインよりも、優雅で洗練された余白たっぷりのデザインを好み、自身のECサイトもミニマル化してブランディングイメージをより高めています。

ミニマルデザインでブランド力を効果的にアピールしているサイトを以下に3つ挙げます。

・Canlis
https://canlis.com/

・yuen
https://yuenjp.com/

・Noritaka Tatehana
http://rethink.noritakatatehana.com/

まとめ

今回ご紹介したデザイン手法はいずれも万能ではなく、必ずメリットとデメリットがあります。情報をより多く詰め込みたいのにミニマルデザインを選んだら逆効果ですし、視覚的にブランドイメージを強調したいのに簡素なフラットデザインを選んでいたらブランディングを高めることはできません。
業種、サイトの内容、訴えたいものの違いによってデザイン手法にも向き不向きがあります。自身が運営するサイトの業種やブランドにおいて、どのデザイン手法が最も適しているかを考慮した上で最新のテクニックを導入していく必要があるでしょう。

デザインカテゴリの最新記事