Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。

その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。

しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。

そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実装したものが、かえってユーザー体験の足かせとなってしまっては元の木阿弥です。5つのチェック項目を確認してみてください。

「Webデザインでできること」と「ユーザーが求めていること」は必ずしも一致しない

browser.jpg

1995年に誕生したと言われるInternet Explorer以来、さまざまなブラウザがシェアを奪い合う*「ブラウザ戦争」*は現在でも続いています。2002年にはInternet Explorerが95％ものシェアを誇ったものの、次第にFirefox、そしてGoogle Chromeがシェアを伸ばし、現在ではGoogle Chromeが圧倒的首位に君臨しています。

参考：
Mozilla Firefox Internet Browser Market Share Gains to 7.4% - Search Engine Journal

その間、HTML・CSS・JavaScriptに加え、jQueryに代表されるライブラリやフレームワークの登場や、HTMLやCSS自身のバージョンアップによって、さまざまなことができるようになりました。TABLEレイアウトが主流だったころに比べて、かなり自由なデザインを行うことができるようになったのです。

しかし、jQueryなどを使って*「さまざまなことができる」ようになってから、Webデザイナーの中には「奇をてらった」ユーザーインターフェイスをデザインする人も目立つようになりました。「ユーザー体験(UX)とは何だろう？」*と前衛的なWebクリエイターたちが考えるようになったのは、2007年頃iPhoneという新しい機器によるインターネットが出現するようになった頃からです。

2010年頃には完全に「UX」の概念がWebの世界にも浸透し、「Web体験」を主導する*「UXデザイナー」という職種も定着してきました。ところが、UXデザインはUIデザインに比べて「目に見えないもの」を扱うことが多いため、業務は手探りで、さらにUX関連の職種であっても「企業・チームに1人だけ」という孤立無援体制で、実際には「目に見えるデザイン」に頼らざるを得なかった*、という現状もあったでしょう。

目に見える変化は分かりやすく、コピーされ広まりやすいのは、これまでのフラットデザインやスプリットスクリーン、デュオトーンなどのWebデザインの流行を見ても明らかでしょう。しかし、時勢に乗っかるだけではなく、*「本当に快適なユーザー体験を提供できているのか？」*を常に問い続けることが大切です。

Webデザインが進化したからこそ「やってはいけない」5つのこと

1. スクロールハイジャック

1-1.gif
One Page Scroll Plugin Demo Pageより

2016年から、「シングルページスクロール」や「フロアスクロール」、*「エレベータースクロール」*など、呼び方はさまざまですが1ページごとにスクロールするWebサイトが多数登場しました。アバブザフォールド(折り目の上の部分)を1枚のスライドに見立て、マウスで下に下げようとすると次の階層に移動するものです。

このような技術は当時目新しいもので、確かに一時的にはユーザーの目を引くことができたかもしれません。しかし、スクロールバーがあるにも関わらず、スクロールを制御できないという状況は、果たしてユーザビリティの観点から健全であると言えるのでしょうか。

このようなスクロールバーの制御不能状態を、一部のUXデザイナーたちは*「スクロールハイジャック」*(またはスクロールジャッキング)として揶揄してきました。

1-2.gif
Apple

例えばMac Proのページは右側にフロアボタンが付いており、まるで博物館を巡っているようなユーザー体験ができますが、せっかちなユーザーであればこのスクロールジャックされているページに苛立ちしか感じないかもしれません。しかも、一番下のフロアに到着した途端、通常通りスクロールできるという、ユーザビリティの観点から言えば「不気味」とも思える挙動をします。

どのページのスクロールも「同じように」スクロールされるべきで、特定のページに例外的なルールを適用するのは、心地よいユーザー体験を阻害することになります。何気ない機能の一つに思えるかもしれませんが、アクセシビリティに関してもWeb標準にしっかりと従うことが重要です。

2. Webフォントの濫用

2-1.png
Google Fonts

Webに登場するフォントと言えば、昔は「MSゴシック」や「メイリオ」のようなブラウザ標準フォントが圧倒的でした。しかし、Webフォントが登場し、Google FontsやAdobe Typekitのようにサーバーにフォントファイルをダウンロードしなくとも選べる幅が広がっていったことで、たくさんのホームページがWebフォントを取り入れるようになりました。

Webフォントをデザインのアクセントとして使うと、Webサイトに個性が生まれます。しかし、使いすぎは厳禁です。デザイン面と技術面で、Webフォントの使いすぎは*「百害あって一利なし」*が当てはまります。

まず、デザイン面ではフォントの使いすぎによって全体的な統一感が失われてしまいます。これは、前衛的なブルータリズムのWebサイトの多くが脱構築的な世界観を表現するのに何種類もの無秩序なフォントを使っていることからも明らかです。The SprawlやHEIMERをよく見てみるといいでしょう。

2-2.png
HEIMER

また、Webフォントは特別な設定をしない限り、フォントデータをそのまま読み込みます。とりわけ漢字を多く含む日本語フォントを何種類も設定してしまうと、読み込みが遅いためにユーザーを困らせてしまうだけでなく、SEO上も検索エンジンからのペナルティを受けてしまう可能性さえあります。

Webフォントは2〜3種類に絞り、ページの読み込み速度を意識したサイト設計にしましょう。

3. 水平スクロール

3-2.png
Nielsen Norman

今から15年以上も前のことですが、オンラインコンサルティングを行っているニールセンが興味深い調査を発表しています。そのタイトルは、*「2002年に起こった、Webデザインのよくあるミス・トップ10」*というものです。

詳細は調査を確認いただくとして、その中には*「価格を付けないこと」「FAQの中に頻繁には聞かれない質問が混じっていること」という、Web黎明期にありがちなミスから、「URLが75文字を超えるもの」「固定されたフォントサイズ」*といった、現在でも議論の余地がある深刻なものまで、さまざまなものが挙げられます。

しかしながら、この時にすでに問題になっているものとして*「水平スクロール」*が列挙されているのは、看過できないでしょう。もちろん、当時は「ユーザー体験」という言葉はほとんど使われていません。

3-1.gif
Archetipe Wine

水平スクロールは一般的なソフトウェアやアプリによる挙動と大きく異なっているので、ユーザーを困惑させてしまう原因になります。垂直スクロールの実装自体は特段難しいものではないですが、できる限り避けるのがよいでしょう。

4. 唐突すぎるモーダルボックス

4-2.png
Google

意外と知られていないかもしれませんが、Googleはユーザー体験を阻害するあらゆる要素にペナルティをかけています。とりわけ、モバイル上でのネットサーフィン時に唐突に出てくるポップアップは*「インタースティシャル・ペナルティ」*と呼ばれ、SEO上大きなペナルティの対象になってしまいます。

参考：
Helping users easily access content on mobile - Official Google Webmaster Central Blog

最近では非常に短いコードで、簡単にモーダルウィンドやポップアップを表示することができます。しかし、デスクトップ画面ならまだしも、小さく限られているモバイル画面上でポップアップを表示すれば、いままで閲覧していた情報が遮断されることになり、一気にUXが損なわれます。余計なモーダルウィンドウを消すのも面倒に感じるでしょう。

4-1.gif
codepen.io

ちなみにGoogleは、クッキーの使用、年齢制限、スクリーンサイズに対して合理的な大きさで表示するバナーはチェック対象にならないとしています。しかし、快適なユーザー体験を提供したいのであれば、できる限りモーダルやポップアップを使わないのが得策でしょう。

5. モンスター級の容量を誇るHDサムネイル写真

5-1.png
Apple

Appleが昨秋発売したiPhone XにはSuper Retinaディスプレイが搭載されており、同社のスマートフォンに搭載されたOLEDディスプレイの中でも史上最高レベルのディスプレイにまで仕上がっています。

しかし、iPhone全体で見ても、Business Insiderの報道を加味しても、iPhone Xの稼働率は2017年12月時点で4.7％程度で、iPhone 6s以降を使っているユーザーは6割以上を占めています。

最新端末で表示が粗くなってしまうため、超高画質の画像を使いたくなるかもしれませんが、少しばかり問題が発生してしまいます。

インターネットの通信速度は次第に早くなっているとはいえ、ストックイメージのサイトからリサイズせずに貼り付けた、不必要に大きいサムネイル写真は、ページ全体の表示速度を遅らせてしまう原因となります。特に古い端末でインターネットを巡回しているユーザーのブラウザエンジンが最新版にアップデートされていないことすらあるので、その場合はさらに表示が遅くなってしまうでしょう。

5-2.png
stock.io

この場合のベストプラクティスは、画面幅や解像度に応じて表示画像を切り替えることです。HTML 5.1では、imgタグの「srcset」属性・「sizes」属性を使うことで、CSSやJavaScriptを使わなくとも画像の切り替えを行うことができます。

参考：
“地味にスゴい”ってホント!? わかりやすくHTML5.1の追加された新機能を紹介

まとめ

これからも次々に新しい技術が登場するでしょう。しかし、大切なのは*「その技術がユーザーにどのように役立つのか？」*を考えることです。

技術ありきで考えてしまうと、長い目でみてユーザーが離れてしまうことにもなります。ぜひ、自社のWebサイトのデザインがUX上の妨げになっていないかをチェックしてみてください。

Webデザインについてさらにチェック

そのデザイン、ブランド強化に役立っていますか？

そのデザイン、ブランド強化に役立っていますか？

今回は、ブランドの個性をデザインを通じて表現するにあたり、どのような点を考慮しデザインを開発すべきか説明します。
Webアクセシビリティとは？みんなに使いやすいUI/UXデザイン

Webアクセシビリティとは？みんなに使いやすいUI/UXデザイン

Webアクセシビリティとは、誰もが「必要とする情報に簡単にたどりつけ、利用できる」ことを示します。工夫次第で情報が届きやすくなる、人にやさしいWeb仕様といえます。では、具体的にどのようなデザインが、誰もが使いやすいサイトといえるのでしょうか。Webアクセシビリティのポイントや事例とともに、「人にやさしいUI/UXデザイン」とは何か理解を深めていきます。