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

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

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

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

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

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

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. スクロールハイジャック

One Page Scroll Plugin Demo Pageより

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

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

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

Apple

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

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

2. Web フォント の濫用

Google Fonts

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

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

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

HEIMER

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

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

3. 水平スクロール

Nielsen Norman

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

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

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

Archetipe Wine

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

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

Google

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

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

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

codepen.io

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

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

Apple

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

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

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

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

stock.io

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

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

まとめ

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

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