使用に注意!UXを低下させてしまうかもしれない2017年のWebデザイントレンド
毎年、Webデザインの業界では、ユニークなトレンドが数多く登場します。
最近で言えば、スプリットデザインやパララックスエフェクトなど、新しく登場したものからここ数年使われているものまで、あらゆるトレンドが登場しています。
しかし、トレンドが登場したからといって、闇雲にそのトレンドに乗っかってしまう前に、一度立ち止まって次のことを考えてみるのが大切です。
「本当にこのデザイントレンドを採用することでユーザーにメリットはあるのか?」
「このデザインは自己満足で終わっていないだろうか?」
もしこの質問を聞いてドキッとしたのであれば、ぜひこの先を読み進めてみてください。
というのも、トレンドを追いかけていった結果、UXが悪化してしまう場合すらあるからです。
今回は、UXを低下させてしまうかもしれない2017年のWebデザイントレンドについて、使用時の注意点とともに確認してみましょう。
使用に注意!UXを低下させてしまうかもしれない2017年のWebデザイントレンド
1. パララックスエフェクト
※ pexels.com
Webデザイントレンドとしてのパララックスエフェクトは数年前から登場していますが、さまざまなオブジェクトが異なるスピードで動くので非常に面白い動きをするので、今でも人気のトレンドのひとつです。
最近では、その名の通り「視差効果」を表現するだけでなく、さまざまなマウスイベントを使ったスクロールエフェクトも登場しているので、こうした効果を取り入れるだけであっという間にユニークなホームページが出来上がります。
しかしながら、こうしたパララックスエフェクトは確かにクールではあるのですが、処理速度があまり早くないデバイスだと、動きが遅くなってもっさりしてしまうというデメリットもあります。
言うまでもないですが、動きが遅くなってしまえば、UXは著しく低下してしまいます。
また、たとえデバイスの処理速度に問題がないとしても、使いすぎは禁物です。
そもそも視差効果は本来そうではないものを立体的に見せているにすぎませんが、ホームページのすべての要素にパララックスエフェクトが使われていたらくどいと感じてしまいます。
あくまでも、パララックスエフェクトの利用範囲はホームページ内の一部に留めておき、デバイスの処理速度を落とすほど重い処理をかけないように心がけましょう。
2. ゴーストボタン
※ pexels.com
ゴーストボタンは、背景が透けて見えることからその名前がつきました。
ゴーストボタン自体は、2015年頃から日本でもよく見られるようになったトレンドで、グラデーションやドロップシャドウなどもなく、外枠も1〜2pxほどで、色も白や黒などのシンプルな作りになっています。
こうしたことから、ゴーストボタンは「クリックしてもらうために、とにかく目立つように」というボタンのデザインとは、根本的に違う作りになっています。
とにかくシンプルで、デザインの邪魔にならないので、ゴーストボタンを併用する場合もあります。
しかし、こうしたメリットは、裏を返せば、シンプルすぎてデザインに馴染んでしまい、ボタンとして認識されない可能性もあるというデメリットを抱えています。
「より目立ったほうがクリックされやすい」という、従来のボタンの考え方とは真逆であるので、ユーザーによってはそもそもボタンであるということが認識できず、どうすればいいのか立ち往生してしまう場合もあります。
場合によってはクリックされないことすらあるという可能性も考慮に入れておいたほうがいいでしょう。
3. ブルータリズム
※ pexels.com
2017年上半期には、ブルータリズムと呼ばれる、既存のスタイリッシュで機能的なホームページとは一線を画す、大胆なWebデザイントレンドが登場しました。
ある種のWebデザインにおける前衛芸術のようなものと捉えることができますが、これは一部のデザイナーによる新しい表現方法であるとだけ捉えて、基本的にはブルータリズムを会社のホームページにするようなことは避けたほうがよさそうです。
構図や色使いなど、どれを取っても大胆なブルータリズムですが、ユーザビリティの観点から言えば、お世辞にも使いやすいとは言えないでしょう。
芸術作品がWebの世界まで進出してきたと考えれば面白いですが、闇雲にブルータリズムを取り入れる前に、一度立ち止まって考えてみましょう。
4. デュオトーン
※ designers free resources
デュオトーンは、2016年中頃を境に広まってきたWebデザイントレンドです。
2017年になってからは以前ほど見る機会は少なくなってきましたが、それでもデュオトーンを好んで使っているWebデザイナーもいます。
デュオトーンも、ブルータリズムほどではないですが、奇抜で斬新であるために、ホームページのユニークさやオリジナリティを演出することが可能です。
しかし、デュオトーンで使う2色の組み合わせのほとんどは、普段であれば組み合わせないであろう彩度の高い2色(水色とピンク、オレンジと緑など)が選ばれるので、目がチカチカして疲れてしまいます。
だからと言って主張の控えめな2色を選ぶとデュオトーンのよさが失われてしまうので塩梅が難しいですが、ユーザーが不快にならないような組み合わせを選ぶように心がけましょう。
5. マイクロインタラクション
※ pexels.com
マイクロインタラクションは本来、ユーザーの操作に対して「かすかな」フィードバックをアニメーションなどで動きをつけてユーザーに伝えていくものです。
「本来」と述べたのは、そうではないケースも往々にして存在するからです。
マイクロインタラクションを実装する際には、「かすかな」フィードバックが最も望ましいのですが、そうではなく主張の激しい動きをする、もはや「マイクロ」とは言えないインタラクションが行われる場合があります。
例えば、ボタンにマウスカーソルを合わせたときにあまりにも激しく振動したり、ホバーリンクの大きさがあまりにも急激に変化したりといった具合です。
マイクロインタラクションの目的は、ユーザーのアクションに対して「認識していますよ」というフィードバックを示すことです。
その目的を超えて過剰にアピールをすると、ユーザーは目障りに感じてしまうことがあるので、避けましょう。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザビリティ
- ユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング