スマホが変えたWebデザイン

掲載日:2015年9月7日

印刷物での読みやすいデザインは大きく変わることはないが、Web サイトではデバイスの変化や技術的な要因によって読みやすいデザインが変わってくる。 JAGAT 印刷総合研究会では、Web サイトデザインのトレンドを知るため、数多くのWeb 案件を手掛けるロフトワークのクリエイティブディレクター濱田真一氏に話を伺った。

トレンドを作るのはモバイル

Web サイトのデザインは非常に短いスパンで変化している。そしてデザインが変化する裏側には、原因となるさまざまな環境や技術の変化がある。

例えばインターネット回線が高速化したことでFlashを用いたリッチなコンテンツが増えた。PC 環境の画面解像度が上がると、それに合わせてWeb サイトの横幅が大きくなった。このように、トレンドと呼ばれるような変化が起きる背景は何かを理解した上で、適切に用いることが重要になってくる。

今、もっともトレンドを起こしているものとは、スマートフォン、タブレットなどのモバイルである。個人的に日々の業務で得た体感的な印象だが、モバイルからのサイト閲覧は、BtoB 企業で20%、大学で50%、EC や情報サイトといったBtoC 企業では70%ぐらいだ。あくまでも個人的な感覚で正確なデータではないが、この比率は今後上がりこそすれ、下がりはしないだろう。モバイル(特にスマホ)からWeb サイトを閲 覧する人が増えたことで、デザインもそれに最適化したものが増えてきた。

モバイルが作ったトレンドの代表的な例としては、ページが縦に長く、1 段組み(シングルカラム)レイアウトのWeb サイトが挙げられる。2 年くらい前まではあまり見かけなかったが、最近増えてきたデザインだ。さいたま市をはじめ、自治体など公共団体のWebサイトでも徐々に採用され始めている。

このデザインのポイントは、シンプルなレイアウトなのでモバイルでの表示(レスポンシブWeb デザイン)に対応しやすいことである。さらに縦に長くスクロールで遷移するため、ユーザーは意識せずに画面の下へ読み進むことができる。

ページを遷移するときにはサイト上にあるボタンやリンクを探してクリックする必要があるが、スクロールするときはマウスホイールの操作や画面のスワイプだけで済む。そのため、最近ではスクロールのほうがクリックより操作コストが低い(=実行するのに苦にならない)といわれている。

以前は、PC からの閲覧が主であった。そのためスクリーンに表示される画面より下のページはユーザーに見られにくいためできるだけ1 画面でおさめた方が良いと言われていた。現在では逆に、縦に長いデザインは、モバイルユーザーに配慮したデザインとされ、デメリットでは少ないと考えられないようになっている。また、このデザインではタッチスクリーンでの操作を前提として、各ボタンは大きく作られていることが多いのも特徴である。

画面内で、どの程度の情報と余白があればユーザーが目的とするものを探しやすいかを考えた結果が、縦に長いページというデザインにつながっている。モバイルに配慮したシングルカラムのデザインでは、それほど多くの情報は入らない。以前は、Web サイト上に情報を沢山置いておき、ユーザーが必要な情報を探すという考え方だったが、デザイン面で迷わないように情報密度を調整するのが最近のサイトの考え方である。

(『JAGAT info』2015年7月号より抜粋)

関連セミナー

日経新聞電子版のスマートフォン世代向け戦略

2015年09月18日(金) 14:00-16:00 予定
スマートフォン世代をターゲットにしたユーザー獲得施策として、日本経済新聞社はWebやアプリを積極的に活用している。本研究会では、日経電子版におけるアプリの位置付けなどについて話を伺う。