« ブログのトップページに戻る

2019年 Webデザインの潮流

   投稿者 : 2019年3月13日 By

イメージ画像

Webデザインはその年、その年で新しいものが生まれ、トレンドとなったり、ならなかったりする。
2018年のトレンドと言えば、グラデーション、スプリット(分割)レイアウト、タイポグラフィデザインなど見た目のデザインが多かったように感じられる。
今年はどうだろうか? デザインを行うには「見た目のデザイン」と「機能のデザイン」を抑えなければならないとよく言われるが、2019年のトレンドはフラットデザイン2.0やユーザビリティといった「機能のデザイン」が打倒し始めている気がする。
今回は、参考にしたいWebデザイントレンドを見ていこう。

フラットデザイン2.0はフラットデザインの拡張

フラットデザインはこれまでデザインの基本となっていた。
スキューモグラフィックではなく、フラットで軽く見た目もすっきりさせ、スマートフォン時代に対応したデザインとして浸透した。しかし、ユーザビリティの課題が指摘されいたのも事実である。
「フラットデザイン2.0」とはこの課題となっていたユーザビリティに対応したフラットデザインと言える。 通常、使わないドロップシャドウやグラデーションやCTAボタンとわかるように角丸四角を使ったデザインなどがそれにあたる。

ドロップ
https://itsalive.io/

マイクロインタラクションはユーザビリティである

マイクロインタラクションとは、ユーザーのアクションに対して、フィードバックやステータスの変化といったものを伝えるイベントであり、反応である。
ユーザーがボタンを押した時の動きであったり、画像にマウスがホバーした時のエフェクト、スクロールアニメーション、ページを更新した時のビープ音など様々なものがある。
ユーザーの使いやすさを考慮してデザインする場合は、このマイクロインタラクションにこだわったデザインが必要となるだろう。

マイクロインタラクション
https://dribbble.com/shots/2445047-Daily-UI-002-Credit-Card-Payment

モバイルファーストはデスクトップセカンドは常識となっている

モバイルファーストデザインは、2018年、Googleの「モバイルファーストインデックス」が正式スタートし、サイトデザインをする際の常識になりつつある。
従来であれば、PC画面のデザインを最初に行い、後にモバイル画面に合わせてCSSメディアクエリを設定するというプロセスだった。 だが、最近はスマートフォン画面のデザインを最初に行い、その後PC画面のメディアクエリを設定するプロセスに変わってきている。これが、本来のモバイルファーストである。
どちらの方法で製作しても、スマートフォンデザインを作るということには変わりはない。 しかし、スマートフォンからのアクセスが多いと最初からわかっている場合は、スマートフォンのデザインを最初に行うべきだろう。
スマートフォンの持ち方や親指の動きに合せたレイアウト、ナビゲーション位置の設定など、実機で確認しながら行う必要があるからだ。
筆者が在職しているWebデザインの専門学校でも、昨年から、PC用Webデザインから教えるのではなく、スマートフォン用Webデザインから授業を始めている。

ユーザビリティ向上はデザイナー役割である

ユーザーにいかに快適に、使いやすいサイトサービスを提供するかが「ユーザビリティ」である。
ECサイトなどは、買い物ステップのどこかにユーザーが躓いてしまうようなサイト設計では、それだけでユーザーは離脱し、大きな損害を生みだすことになる。
ユーザーにとって快適な、使いやすいサイトは、ユーザー数が増加し、売り上げに大きな影響を及ぼすだろう。
前段で記述したフラットデザイン2.0、マイクロインタラクションやチャットボットの導入などはユーザビリティの向上に役立つだろう。
モバイルデバイスやPCなど幅広いデバイスに対応したスピーディな表示速度や動作も重要である。

ユーザビリティ
https://calar.ink/works/

定番になったビデオコンテンツのトップページ

ビデオコンテンツはもはやトップページデザインの定番となったと言えるだろう。 テキストと写真のみのデザインと比べると多くの情報量、つまり、企業や商品イメージにあった魅力的な印象、ブランドイメージを与えることができる。
2019年はさらに広がると予測している。 新しい点としてはGoogleの検索表示に動画も表示されるようになったことがある。 Webサイトでは動画コンテンツを埋め込むことで、検索されやすくなり、さらに動画だとシェアされやすくなるので、このトップ画面の動画や動画コンテンツは検討れるべきである。
また、トップページ動画は動画再生のオフボタンやサウンドのオンオフの選択もできるようにし、ユーザビリティを考慮する必要があるだろう。

動画のトップ画面
https://www.intelligent-home.jp/

ECサイトデザイントレンドは何?

WEBチャットはトレンドとなるか?

2019年、ECサイトではチャットボットがトレンドとなるかもしれない。 なぜなら、Aiやディープラーニングの進歩で、より賢く効率的になる可能性が高いからだ。

チャット
https://www.aliceandwhittles.com/?sscid=31k3_a8201%20#home

ナビゲーションメニューは上部が基本? それとも左か?

これまで、ナビゲーションメニューは最上部に固定配置が定番だったが、プルダウンメニューなどはメインコンテンツの閲覧を妨げているとも考えられ、最近では左側に配置されるのがトレンドとなっている。

左側にメニュー
https://www.dropdead.co/

ECサイトの商品画面は情報過多ぐらいがちょうど良い

最近のサイトデザインはメッセージが一目でわかるようシンプルにデザインする傾向が強いが、ECサイトデザインは逆の場合が多い。 つまり、ECサイト内に商品数が多いことや商品説明が細く記載されるものが受け入れられている。
つまり、ユーザーは商品を購入する前に、他の商品と比較し、詳細情報を読み、 可能な限りその商品について知ろうとする傾向にある。
デザインはシンプルが基本であるが、そのために必要な情報を省略してはならない。
下記のサイトでは、言葉では説明できない商品の良さを数秒の動画再生で示している。

動画で商品説明
https://www.toryburch.com/

まとめ

以前から続いているトレンドもあったが、デザイントレンドをチェックし、Webサイトを使いやすく、魅力的に見せることは重要な要素である。
「デザインを最適化する」、「適切な形でサイト構築する」とは、トレンドをふまえつつ、様々な環境の人が快適に閲覧でき、また、色々な世代の人が使いやすいデザインを構築することである。
そうすることで、一人でも多くのユーザーを獲得することが可能になり、収益の確保にも繋がるのである。

関連する記事

2018年の日本のEC市場規模は緩やかに上昇... 今回は、以前のブログに引き続き、経済産業省の「平成30年度 我が国におけるデータ駆動型社会に係る基盤整備」報告書に基づき、日本国内のEC市場の状況を中心にまとめた。 報告書によると、2018年の日本国内のBtoC-EC市場規模は、17兆9,845億円となっている。この数字は2017年比、8...
JANコードが海外販売に有利な理由 店舗で売られている商品には必ず、商品パッケージに必ずバーコードがついている。 バーコードと呼ばれている、縞模様と数字で表されいる表記は商品を管理するためのコードである。 これをレジで店員がコードリーダーで読み取ることで、その商品の情報や売れた時間、個数などが記録され、POSシステムをはじめ...
保護中: 中国Eコマース最新情報 Macyが中国ECを一時中断した理由とは?... Macy'sをご存知でしょうか? アメリカではとても有名な小売店でオンラインストアでも世界中のユーザーに支持されているサイトです。そのMacyですが、中国大陸にもマーケットを拡大しているようですが、結果的にはこのマーケットではうまくいっていないようです。やはり中国市場での越境ECは難しい...
越境ECで売り上げ好調なサイト -NO.2 –... 日本では国内向けEC市場は成長を続けるものの、少子高齢化問題など、一部市場では伸び率に翳りが見られる分野もある。そのような中、早い時期に国内から海外に視点を変えることで、成功している企業も多い。12月20日のジェトロの報告書にもあるように海外販売で日本の商材を販売するという市場は魅力的な分野...
お客様はここで離脱してるかもしれない:クレジットカード入力を最適化する8項目... ECサイトでは通常、お客様情報を入力した後に、決済(支払い)方法に遷移する。 その時、クレジットカード決済を選択した場合には、お客様は、カード番号や有効期限などのカード情報を入力する必要がある。説明が不十分なために、ここで離脱する割合が多い。 今回は、クレジットカード情報の入力内容で気を...
新しく立ち上げたEコマースサイトに人を集めるには?その1... 新しくEコマースサイトを立ち上げる場合、できることなら初めからたくさんの人を集めて、手ごたえのあるオープンにしたいものです。そこで、2回にわたって、さまざまなメディアを使ってトラフィックを増やす方法をいくつかご紹介したいと思います。 ユーザーへのアクセスを増やそう トラフィックを増やすには、...

タグ: , ,

このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。