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

更新日: 2019年06月07日

デザイン

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