search
New サムネイル GORMでError 1054: Unknown column ‘valueR New サムネイル Goをインストールしてバージョンを確認する(Mac) New サムネイル 新元号・令和の意味を万葉集から理解する:令は「良い」を表す漢字!

好まれるサイトのデザインと構成(2019年版)~ユーザビリティと閲覧者のストレスを考える

広告

好まれるサイトは、第一に嫌われないサイトです。まずは嫌われるデザインと構成を考えます。

閲覧者にストレスを与えるもの

  • 広告が多すぎる
  • スマホ対応になっていない
  • 文字が小さすぎる
  • 勝手に音(BGM)が流れる
  • 色が奇抜すぎる
  • 暴言や低俗な表現が多い

多すぎる広告とスマホ非対応は、閲覧するスマホユーザーに過度の負担を与えます。ただしスマホ対応でなくても

  1. 文字そのものが大きい
  2. 画像メインである
  3. 専門的な知識をきちんと網羅している

といった特殊なページは、ある程度許容されるかもしれない。スマホ非対応がストレスになるのは

  1. 文字が小さくなり
  2. 画面を指で拡大することを

閲覧者に強いるからです。「指の操作を強いる」のはスマホ非対応だけではなく、無駄なテキストをつめこんでスクロールを強いるページも含まれます。

90 年代後半から 2000 年代前半にかけて、勝手に音が流れるサイトが出てきましたが、今はほぼ絶滅しています。「操作していないのに勝手に操作される」サイトは高確率でブロックされるでしょう。

暴言はもちろん、特定の掲示板で用いられるニッチな言いまわしと記号は、サイトをすべての人にオープンにするという姿勢とまったく合わない。電車でそういった記事を読んでいる姿を他人に見られたくない、と思うのは自然なことです。

見る人によってストレスになるもの

  • 多すぎる誤字脱字と文法の誤謬
  • 大半が引用または転載
  • 著作権フリーの人物画像を何枚も貼っている
  • 「これ、いつも見るサイトデザイン」というデザイン
  • 「いかがでしたでしょうか」のしめくくり
  • キュレーション風

記事に誤字脱字が多いと、そのサイトは長期的に信用を失う。引用と転載で占められる記事は、広告収入という目的が露骨であり、人によっては強烈な嫌悪感を抱かせる。

また多くのサイトでは、著作権フリーの人物画像が大流行していますが、記事に無関係の写真をアクセントとして掲載されることに抵抗を覚える人もいるでしょう。

(自分で撮った夕飯の画像)

上の写真は極端ですが、記事と関係ない写真があっても邪魔でしかないわけです。

パソコンでサイトを見る人、なかでもデザインに敏感な人は、サイトがよくあるテンプレートだと「このサイトデザイン、どこにでもある…」とげんなりするかもしれない。誰かが作った WordPress のテーマをそのまま使っているとそうなります。

最後にキュレーションサイトとの類似。私たちの多くは、読者であると同時に発信者(書き手)でもあり、著作権を侵害してコピーをくりかえすキュレーションを嫌う人は増えています。キュレーション風のデザイン、あるいはキュレーションの記事でよく見かける「いかがでしたか?」の締めくくりも、キュレーションを思いおこさせて悪い印象を与えてしまうかもしれない。

2017年~に好まれる可能性のあるデザインと構成

サービスがあふれかえって、ユニークだったりクールだったりするデザインや構成が常に追求されている今、「好まれるデザイン」に正しい答えはないと思います。が、ここではあえて、今年から来年くらいまでは通用しそうなデザインと構成を考えます。

デザイン(見た目)

  • 狭いヘッダー
  • 青と赤を使う
  • モーダルウィンドウなどで黒を使う
  • 三次元的なデザインを消す
  • フラットデザインを強調しない
  • スクロールするとふわっと出てくる要素をつけない
  • h2 と h3 の装飾をおさえる

デザイン(記事)

  • まず結論からはじめる
  • スクロール量を意識する

見た目のデザイン

スクロールにストレスを感じるユーザーがいます。私は(コンテンツ量に照らしあわせて)スクロール量の多いサイトは今後廃れると考えています。ユーザーに無駄なスクロールの負担をかけないためには、第一に、サイトタイトルを含むヘッダーの高さをおさえることが重要です。

次は色。インテル、Google、ツイッター、ファイスブックのメインカラーはどれも青です。BBC と yelp は赤。すべてではないにしても、多くの巨大メディアが青と赤を採用していることから、メインカラーは青または赤にすると無難かもしれません。

アマゾンのフッターを見るとわかるように、サイトの一部を黒っぽくすることもアクセントとしていいでしょう。

上の記事(英語)では、数十社のロゴを色別に並べています。ネット系の会社がいかに青を好んでいるかがわかります。

また、デザインは基本的にフラットデザインにして、ふわっと浮いているようなボタンはつけない。

立体的なデザインは iPhone4 が出た頃にブームになりましたが、今では時代遅れになっています。その反動で今はフラットデザインが氾濫していますが、トレンドに完全に乗っているような雰囲気はかえってみすぼらしいと思う人もいるでしょう。

フラットデザインをうまく採用しつつ、次のトレンドになりそうな独自性を実験していく。少なくともそういった姿勢を持つことは重要です。

記事のデザイン

見る人によっては、当サイトはかなり奇異に映ると思います。この Irohabook というサイトは、最初に結論を書いて、無駄な内容と言葉を剃っています。

結論から始めると、長い前置きに慣れた人からは拒絶されますが、忙しい人からは一定の注目を集めます。狭い領域に多くの情報がうまく敷きつめられているコンテンツは、結論を早く知りたいユーザーから支持を受けます。

一部の書き手は、文章をうまくつなげるために

  • それでは説明しましょう
  • 以上になりますが、いかがでしたか?
  • ◯◯を理解できるようになったと思います

といったクッションを多用しますが、目がこえた厳しいユーザーはそれらの冗長さにストレスを覚えます。キュレーションによくある「いかがでしたか?」は代表例です。

2018 年以降は「見た目と記事の両面からシンプルさを追求する」というデザインのスタイルがどこからか出てくると思います。

まとめ

いかがでしたでしょうか? 好まれるサイトのデザインについてご理解いただけたでしょうか? 2017 年も好まれるデザインを追求したいものですね。

………

こういった仕上がりにしてはいけないということです。

広告

広告

広告

コンピューター コンピューター
プログラミング プログラミング
数学 数学
英語 英語
国語 国語
理科 理科
社会 社会

Python入門

Python入門

化学入門

化学入門

漢字辞典

漢字辞典

整数辞典

漢字辞典

Lord Candy

Lord Candy