見た目の印象

もし、ピンポイントで探している商品の取り扱いがひとつしかない場合、いくら古くても見づらくてもユーザーはホームページをくまなく探し、必要な情報を手に入れようとします。
例えば製造メーカーなど、商品の取り扱いが広く多い場合はサイトの修正ひとつ取っても膨大な時間がかかるため、なかなか新しいものに変更できず見た目が古いままのサイトも多くあります。

そんな大掛かりな商品を取り扱う製造メーカーは、企業の名前や製品の確かさという過去の積み上げた実績があるため、多少見た目が古く分かりにくいサイトであっても「ここにしかない」「製造メーカーで正しい情報」というバリューにより、ユーザーは滞在します。

では、探している商品を取り扱っている店舗が沢山あった場合、ユーザーはどこを見て買う店を決定するでしょうか。

1）商品の価格や送料など、料金

2）会社の評価（口コミなど）

3）商品ページの見た目（綺麗な写真が載っているからちゃんとしてそうなど）

4）検索して最初に出てきた（探すのが面倒）

多くのユーザーはこのような感覚で商品を探すのではないでしょうか。「価格」や「評価」は特にですが、食品や美容・ファッション、リフォームなどの施工事例などは特に「見た目」が重要なポイントになります。
ユーザーには同じ商品でも他社より良く見えるだけで、少しくらいの価格差なら「こっちのほうがちょっと価格は高いけど、見た目が綺麗で商品を丁寧に扱ってそう」という心理が働きます。

競合が多い業種の場合は、まずユーザーから選ばれる候補になるための手段の一つとして、デザインを新しくする工夫も必要です。

見た目が古いだけで「商品がよくわからないし、同じ品なら新しそうな写真を載せていて分かりやすい別の会社にしよう」と思われてしまうかもしれません。

ユーザーの探しているものや見たい内容などのシーンにより、見た目に対して抱く反応は変わります。
しかし10年前に流行したデザインのサイトは、今のユーザーにとって「古い=見慣れない」サイトです。見た目が古いというだけで候補から外されてしまうのは、せっかく良い商品を取り扱っているのに勿体無いですよね。「古い」というだけで、ユーザーにとっては探しにくく見づらいものになっているということを理解しましょう。

操作性と構成

デザインが優れているオシャレでステキなサイトは、見ていてとてもワクワクします。
しかし、ただデザインが素晴らしいだけで次に移動するリンクが小さくて見づらかったり、内容が分かりづらい構成の場合、優れているデザインと言えるでしょうか？

デザインは見た目だけではありません。ユーザーを誘導するための導線が整っていないと、優れたデザインのサイトと言うことはできません。特にパソコンサイトの場合、動きも重要なデザインのひとつとなっていて、ボタンを押すと動く・ページのトップに簡単に上がれるといった「操作性」の部分も重要なデザインのひとつになります。
このようなユーザーが操作しやすい機能が盛り込まれているサイトは「UI（ユーザーインターフェース）」のデザインが良いサイトと言えます。

パソコンサイトとモバイルサイトではユーザーの動き方が違うため、導線を整えること・操作しやすいUIで配置することまで考えられてウェブサイトは作られています。
中には、レスポンシブサイトなのに「パソコンではAの情報をBの場所に入れて、スマホにはAの情報をCの場所に入れて！」と指示をされる場合があります。やって出来ないことはありませんが、見た目のデザインがおかしくなってしまうだけでなく、無駄な情報が入っているとクローラー（検索ロボット）に判断されてしまいます。そうなるとSEOの観点からホームページとしての質が低いと判断されてしまうため、検索順位が落ちたりする場合があります。

ユーザーが迷わずに情報を見ることができるかがポイントになるため、見た目のデザインだけにこだわって自己満足のサイトにならないよう、操作性や構成までデザインのひとつの要素になると覚えてください。

リッチデザインとフラットデザイン

リッチデザインとフラットデザインの違いは次のとおりです。

リッチデザインとは...文字通り見た目がリッチなデザインです。グラデーションを使って立体感を出したり、細かな画像や素材を使って世界観を表現しているサイトです。画像を多用するためスマートフォンでの読み込みに時間がかかる場合があります。

フラットザインとは...シンプルで素材感や立体感の無い平べったいデザインです。画像やグラデーションを多用しないため、読み込み速度が早いのでレスポンシブデザインに適しているデザインです。

例えば、アートや見た目を重視される職業でホームページを作る場合は「リッチデザイン」のほうが世界観を表現できるためオススメです。独自の世界観をお持ちの美容室、高級感のあるホテルやエステサロンなど、見ただけで「すごくリッチだ！」と思えるサイトが多くあります。
反対に、会社案内や採用サイトのような信頼感や清潔感を売りにしたいサイトは「フラットデザイン」をオススメします。空間と大きな写真で構成されることが多いため、スッキリとまとめられた印象を与えます。リッチデザインのように素材の情報が多く目に入ってこないため、ユーザーに見せたい情報を正しくしっかり伝えることができます。

「1カラム」と「2カラム」

まず聞きなれない「カラム」という言葉ですが、簡単に言うと「列」という意味です。
「1カラム」は1列で出来ているサイト、「2カラムは2列で出来ているサイト」を表しています。

「1カラム」は画面いっぱいに大きく写真を配置することが出来るほか、文字を大きくしたり、空間を広く取ることで写真や絵、文字などの要素を印象付けるなどの効果があります。レスポンシブ化したときに、パソコンとスマホのデザイン上の見た目を大きく変更することなくレイアウトすることができます。

「2カラム」は主にサイドメニューと本文で構成されます。サイドメニューはどこのページにいても見たい情報がある場所に移動できたり、バナーによってにぎやかに見せる効果もあります。
2カラムは情報を探すという点では分かりやすくて良いのですが、画面の幅を2つに区切るため少し狭い印象になります。ニュースサイトや大きな企業、EC（ショッピング）サイトなど、情報量の多いサイトはサイドメニューをオススメします。

レスポンシブ化するとスマホ画面での2列の配置は狭くてとても見づらいサイトになるため、基本的にスマートフォンサイトからの見た目は2列になっていた情報を1列に整理して表示させます。そのため、パソコンから見た印象とスマホから見た印象が少し違ったものになります。