【必読】あなたのサイトはどれくらい嫌われてる?スマホユーザーが嫌う10のこと

<質問>

スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか?

<回答>

文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはWEBを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う10個のことを紹介します。

① リンク箇所が一目で判らないと嫌われる

 

モバイルリンクのクリックされやすさスマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大切です。※クリック率や離脱率などの数値に影響します。

マウスでクリックと、指でタップの違い

パソコンでは、マウスのカーソルを動かしてリンク箇所を確認することができますが、スマホではそれができません。スマホユーザーは、リンク箇所だと思ったエリアを直接指でタップするわけです。その際、指でタップする前に、リンク箇所がどこだろう?と迷ってしまったり、いくら指でタップしてもリンク先に到達しないという事態になる可能性も。 ユーザーが一目でリンク箇所を判別できるデザインであれば、このような事態を回避できます。

② リンク箇所が並ぶ時、間隔が近すぎると嫌われる

link_kinsetsu

WEBサイトでは、リンクのリストやバナーなど、リンク箇所が並ぶ場合があります。 リンク箇所が密集していると、誤って隣のリンク箇所をタップしてしまう可能性があります。リンク箇所とリンク箇所の間隔を充分に確保して、ノーストレスで操作できる環境を用意しましょう。

親指タップを意識して

スマホは、指でタップすることで、次のリンク先に進みます。ではどの指がよく使われているのでしょうか? ・片手でスマホを使う場合⇒親指 ・両手でスマホを遣う場合⇒人差し指 または 中指 したがって、手の中でも一番太い指・親指にあわせて、デザインを検討すると良いでしょう。

子供やお年寄りへは、タップエリアを大きめに

また、パソコン向けWEBサイトと比較して、子供から大人まで幅広い年齢層が使用する傾向もあります。まだコントロールが効かない子供や、老眼が多い世代を考慮して、デザインを検討しましょう。

③ 電話をワンクリックでかけられないと、嫌われる

link_tel

電話番号をクリックしたら、電話が始まるのは、今や当然の機能です。 電話をするということは、その店舗や会社にコンタクトを取ろうとしてくれているということ。この重要なユーザーの行動を邪魔しないようにすることはとても大切です。

④ アクセス情報を地図アプリで開けないと、嫌われる

link_map

地図アプリは、単純に地図を開くだけでなく、経路検索やナビなどの機能を備えているタイプもあります。 この地図アプリの愛用者は、どこへ行くにも地図アプリと連携したいもの。 必要に応じて、地図アプリへ開けるように設定しておくと、ユーザーにも親切です。

⑤ 目的のページを探しづらいと、嫌われる

link_navi

ユーザーによって目的のページは様々。 例えば、一度PCサイトを見たユーザーがスマホからアクセスしている場合は、特定のコンテンツを求めているかもしれません。 また、HOMEに戻りたいユーザーがいるかもしれません。 ユーザーの目的に応えるために、適切なカテゴリ分けやパンくずリストを用意して、スムーズに目的のページに到達できるような設計が求められます。

⑥ サイトの表示に5秒以上かかると嫌われる

スマホサイトの表示が遅い場合

スマホでWEBサイトを開き始めてから表示が終わるまで、何秒かかりますか?この表示時間が長ければ長いほど、ユーザーの利便性は下がり、途中で閲覧を止めてしまう可能性が高くなります。

2015年現在、3G回線が主流の日本では待ち時間が5秒以下なら、比較的ストレスを感じずにインターネットを閲覧できると言われています。したがって、5秒以上かかっている場合は、本来サイトを閲覧したかったユーザーが閲覧を断念している可能性が高くなります。なるべく早急に、サイト管理者やWEBコンサルタントに相談することをお勧めいたします。

※この秒数はテクノロジーの進歩により変化する可能性があります。現に、日本よりもスマホのインターネット回線が速い欧米では、1秒以上かかるとストレスを生じると言われています。

⑦ FLASHがあると嫌われる

スマホでフラッシュが開けない場合

ご存知の方もいるかもしれませんが、iPhoneでFLASHを再生できません。FLASHとは、画像に動きや音を持たせる技術で、WEBサイトやアプリに使われます。 FLASHがあれば、写真を動かしたりアニメーションを作ったりすることができます。 しかし、スマホが使われるようになってから、FLASHを使用しているWEBサイトは激減しました。いくつか理由は考えられますが、一番大きいのは、iPhoneでフラッシュを再生できないことです。

FLASHに代わって台頭してきた技術があるので、紹介します。 一つは、画像に動きを出したいときに便利なのが、Java Scriptのプログラムです。スライドショーも作成できます。この技術であれば、iPhoneにも有効です。 二つ目は、動画をWEBサイトに埋め込むことも一般的になりました。You Tubeのプラグインは多くのOSに対応しており、またスマホに事前にインストールされているYou Tubeアプリとの連携もスムーズです。

⑧ スマホの画面幅とWEBサイトの全体幅が合っていないと嫌われる

 

1.WEBサイトの全体幅が小さすぎる場合 余白が大きくなり、一行の文字数が少なくなるため、読みづらく感じます。

2.WEBサイトの画面幅がちょうどいい場合 スマホ画面を有効的に活用できています。

3.WEBサイトの全体幅が大きすぎる場合 スクロールバーが横方向にもできるため、操作性が低下します。

スマホの画面幅は機種により異なります。iPhoneの解像度を見てみると、iPhone3Gは横幅480pxだったのが、iPhone4/4Sでは960px、iPhone5では1136px、iPhone6では1334px、iPhone6Plusでは1920pxです。機種により異なり、時代とともに大きくなる傾向があるのがわかります。 一方、Androidの解像度を見てみると、2014年に日本国内で発売された主要機種の解像度は横幅が480px~1440pxと機種により異なり、バラつきがあります。

したがって、スマホサイトを作成する際は、様々な横幅の機種に対応できるようにサイト制作を進めます。

⑨ 入力項目が多すぎると嫌われる

スマホでは入力が大変

お問い合わせフォームや会員登録フォームなど、フォームを設置する場合には、より細やかな配慮が必要です。PCでは比較的簡単に入力欄を選択して、テキストを入力できますが、スマホでは入力欄を選択するのに苦労し、テキストを入力するのに苦労するからです。

⑩ アクセスできるコンテンツが制限されると嫌われる

 

サイトを企画している現場では、「スマホでわざわざこんな情報を読まない」「外出先から見るページだけスマホ対応すればいい」という空気が流れる場合があります。

「スマホでわざわざこんな情報を読まない」=PCを主として使う人の言い分。実際、女性の約半数はPCを使わず、スマホを主に使っています。スマホでインターネットの閲覧行動を完結できることを望んでいます。

「外出先から見るページだけスマホ対応すればいい」=スマホ利用場所の90%が自宅という調査結果です。スマホは外出時でも在宅時でも身近にあるデバイスです。 気軽に検索できて、膨大な情報を読める便利な持ち物になっているのです。

このようなユーザーの使い方を考察すると見えてくることがあります。それは、「スマホ向けサイト」は、PC向けサイトの簡易版ではないということです。スマホ環境に最適化して、求めればPCと同程度の情報を手に入れられるという環境が、求められているのではないでしょうか。

まとめ

スマホユーザーが嫌う10のことをあげました。筆者がよく経験する「嫌われポイント」を中心にまとめましたが、スマホユーザーのことをよく知りイメージすれば、配慮すべきポイントはもっとあると思います。具体的な利用状況を意識して、サイトを見返すことができれば、スマホ最適化のヒントがさらに見つかることでしょう。

最後に、サイトのターゲットとする性別・年齢層の人物に依頼して、実際にスマホで自分の管理しているWEBサイトを操作する姿を観察させてもらうと良いでしょう。一番のスマホ対策になるはずです。

 

【保存版】会社ホームページに使いやすいボタン素材サイト(無料)

<質問>

お問い合わせリンクとは
ホームページを自分で更新して運営しています。
お問い合わせページへの誘導リンクが弱いことに気付き、テキストリンクから画像ボタンリンクに変更しようと思っています。
しかし、画像編集ソフトは無料の簡単なものしか持っていないので、画像ボタンをどのように手配しようか悩んでいます。何かいい方法はありませんか?

<回答>

お問い合わせボタンとは
ボタンはホームページのパーツの中で「クリック」を促す重要なパーツです。
インターネット上には、よくデザインされたボタンをダウンロードできるサイトがいくつかあります。
今回は、ビジネス向きに使いやすく無料で利用できるサイトを紹介しますので、こちらから使ってみてはいかがでしょうか。

【ご注意点】基本的には本記事を書く時点で、商用利用OK・クレジット表記不要のものを中心に挙げています。ご利用の際は、リンク先の利用規約をお読みの上、ダウンロードしてご利用ください。

完成形(に近い)ボタンをダウンロードできる素材サイト

ボタンメイカー

【特徴】
・画像編集ソフトがなくても、任意の言葉を入れることができます。
【URL】
http://box.aflat.com/buttonmaker/
【利用法】
ボタン内に入れる文字やボタンの色・効果・サイズを指定して作成し、ダウンロードして利用します。
【ボタン画像のファイル形式】
GIFボタンメーカー

ソザイング

【特徴】
・すでに完成しているボタンをダウンロードできます。
・自分で文字を入れてボタンを完成させる素材をダウンロードできます。
【URL】
http://sozaing.com/category/material/btn/
【利用法】
圧縮ファイル(ZIP)を解凍して利用します。
【ボタン画像のファイル形式】
PNG、JPG、AIなどソザイング

ボタンマルシェ

【特徴】
・自分で文字を入れてボタンを完成させる素材をダウンロードできます。
・無料会員登録が必要(同時にメルマガも無料購読)
【URL】
http://button-marche.net/
【ボタン画像のファイル形式】
PSD、PNGボタンマルシェ

超シンプル素材集

【特徴】
・自分で文字を入れてボタンを完成させる素材をダウンロードできます。
【URL】
http://sozai.akuseru-design.com/category/sozai/button/
【ボタン画像のファイル形式】
PNG超シンプル素材集

まとめ

弊社では、WEB制作の際だけでなく、提案資料にこのようなボタンを使用する場合があります。
よくデザインされたボタンがインターネット上で共有されていることは、大変ありがたいものです。

ボタンを使いこなすと便利ですが、デザインには注意が必要です。
よくデザインされたボタンであればあるほど、ボタンだけが周囲から浮いてしまったり、ボタンがサイトデザインをひっぱってしまったりするケースも。
ボタン選びをする際は、ボタン自体のカッコ良さよりも、ボタンを載せる場所のデザインとの相性を大切にして選んでくださいね。

知らないと手遅れ!?スマホ対応前に絶対知るべき5つのこと

<質問>

スマートフォンが流行っていますが、自社のWEBサイトではまだスマホ対応していません。
スマホ対応すべきでしょうか。またスマホ対応するとしたら、どのように考えるべきでしょうか。

<回答>

スマートフォン(以下スマホ)の普及やグーグルの動向を考えると、遅かれ早かれ対応したほうが良いでしょう。
ただし、スマホ対応と一言で書いても、いくつかの手段があります。
あなたのWEBサイトの目的や使用用途・運営状況などに応じて、あなたにとっての最適な手段は変わります。今日はそれを考えてみましょう。

スマホ利用の現状

年々増えるスマホ普及率

スマートフォンを持っていると回答した割合(2014)スマホ普及率は2014年末現在も伸び続け、この表のように約6割がスマホを所有しています。
若年層のスマホ利用率は7割を超えたと言われています。

また、スマホの普及率だけでなく、1日のうちにスマホを使用する時間も増加しました。スマホでWEBサイトを閲覧することも簡単にできるようになり、多くの人がスマホでWEBサイトを閲覧するようになりました。
別のデータでは、今までパソコンを使用してWEBサイトを閲覧していたユーザーが、スマホを使用して閲覧するようになったという傾向があります。

スマホが身近になったことにより、WEBサイト閲覧をする道具がPCからスマホに徐々に移行してきています。

あなたのWEBサイトに訪れるスマホユーザーの数を見る方法

では、実際にあなたのWEBサイトにスマホユーザーはどれだけ訪れているのでしょうか。
無料解析ツール「Google Analytics」を活用して、スマホユーザーの動向やセッションの推移を見ることができます。

GAで期間を指定する方法
①まず、レポートの期間を指定します。
GAの日別から月別に変更
②グラフの表示を日別から月別に変更します。
③新しいセグメントを追加する
③新しいセグメントを追加します。
④モバイルトラフィックを選び適用する。
④モバイルトラフィックを選択し、適用するボタンをクリックします。
モバイルユーザーの推移
⑤スマホを使用して閲覧したセッション数の推移がグラフで表示されます。

あなたのWEBサイトがスマホ対応できているか確認する方法

モバイルフレンドリーテストの画面Google提供の無料サービス「モバイルフレンドリーテスト」では、現状のWEBサイトのスマホ対応度合いを教えてくれます。
【モバイルフレンドリーテスト】
https://www.google.com/webmasters/tools/mobile-friendly/

「スマホ対応」に絶対必要な5つのこと

①PC用URLとスマホ用URLを統一して表示すること

もしもあなたのサイトのURLが「PC用URL」と「スマホ用URL」で別々の場合、こんな問題が起こります。
・URLのシェアをする時に困る
あなたはURLを友達に送ったりソーシャルで共有したりする際に、そのURLがスマホ用かPC用かを気にしますか?ユーザーは、今見ているURLをそのまま共有する方が楽なはずです。
・Google等の検索エンジンに対応
検索エンジン大手のGoogleはURLが1つであることを推奨しています。検索エンジンの結果をクリックした時に、PCユーザーもスマホユーザーも便利に閲覧できる環境が整います。

②スマホでもPCでも見やすいレイアウトに

スマホ用サイトでは、スマホ画面の大きさに合わせた幅・文字・画像が求められます。
また、フラッシュやジャバスクリプト等、一部のスマホでは表示できないメディアファイルは避けましょう。

③操作がしやすいこと

2つの点に気を着ける必要があります。
一つ目は、マウスがなくても使いやすいこと。「マウスオーバー」は、画像の上にマウスを載せただけで操作ができますが、スマホにはマウスがありません。従って、マウスオーバーは使えません。その他マウスがないと出来ない技術は避ける必要があります。また「ポップアップ」と良い、画像を新しいウィンドウで拡大して開く技術も、スマホでは好まれません。
二つ目は、スマホは指で操作をするということ。例えば小さなボタンが密集していると、誤って隣のボタンをタップしてしまうかもしれません。また、例えば、画面の大半をボタンで占めていると、画面スクロールする際に誤ってボタンをタップしてしまうかもしれません。

東京で電車に乗ると、車内で立ちながらスマホ画面を操作しているのを見かけます。そのような環境でも操作しやすいサイトデザインを意識すると良いでしょう。

④表示速度が充分に速いこと

ガラケーが流行っていた頃、インターネットを閲覧すれば閲覧するほど月額料金がかかる従量課金制の契約プランが主流でした。そのため、ガラケーを対象とした携帯サイトでは、画像をなるべく使わず、絵文字や文字を多く使用したサイト構成になっていました。
スマホでは、ダウンロードできる情報量が増え、スマホ用WEBサイトでも、画像や動画を埋め込むのが当然です。
しかし、ここでサイト管理者が気をつけるべき事は、WEBサイトを開いて最初の画面が表示されるまでの時間です。ユーザーの待ち時間が1秒を超えると「待機」しているとの印象を強くもちます。逆を言えば、最初の表示を1秒未満にすることができれば、快適なスマホサイトを提供できるわけです。
スマホサイトを設計する場合は、最初の画面の表示時間を短縮化することを考える必要があります。

サイトの表示速度を測定できるサイト【PageSpeed Insights】
https://developers.google.com/speed/pagespeed/insights/?hl=ja

⑤掲載コンテンツの注意点

一度PCから見たWEBサイトを、出先にスマホでも開こうとした経験はないですか?
この場合、ユーザーは、スマホで開く時も、PCで開いた時と同様の体験ができることを望んでいると推測できます。このように、ユーザーはWEBサイトを様々なデバイスで開き、それぞれで同じ体験ができることを望みます。従ってサイト管理者もそれを提供することが望ましいと言えるでしょう。
つまり、スマホサイトとPC用サイトの掲載する情報量を同等にし、また、特定のコンテンツを探しやすいようにカテゴリ分類をうまく設計することが求められます。

3つのスマホ用サイト制作方法とその比較

モバイルサイト制作方法3つ

従来型 スマホ用サイトの特徴とその問題点

ここで従来型と呼ぶのは、PC向けサイトとスマホ向けサイトがそれぞれ別個のURLで表示され、別個のページが表示されるものを指します。
ユーザーがWEBサイトにアクセスする際、使用するデバイスに合ったURLを選ぶことができれば、快適な閲覧が可能になり、各デバイスに合ったレイアウト・文字・デザインが表示されます。
しかし、URLを選ぶ事ができない場合もあります。Googleのような検索エンジンや、Facebook、Twitterのようなソーシャルネットワーキングサービスでは、URLが一つしか書かれていない事が多く、PC用・スマホ用との区別がありません。
すると、PCユーザーがスマホ用WEBサイトを見たり、その逆が起きたりする結果が起こりえます。この場合、もちろん各デバイスに合わないレイアウト・字体・デザインとなり、ユーザーは読みづらさを強いられることになります。
また、Googleが重複コンテンツと判断するリスクもあり、Googleが推奨していない制作方法でもあります。

従来型のスマホ対応

表示URLを1つにする「ダイナミックサービング」というスマホ対応の手法

PC向けサイトとスマホ向けサイトの全ページを1:1で同じURLにし、それぞれのヘッダーで「Vart:User-Agent」と記述すれば、動的配信が可能になります。
つまり、ユーザーがURLにアクセスしたら、ユーザーのデバイスがスマホならスマホ向けWEBサイトを表示し、ユーザーのデバイスがPCならPC向けWEBサイトを表示するというものです。
表示URLが一つでユーザーが混乱することも避けられる上に、Googleが重複コンテンツと判断されるリスクもなくなります。Google推奨の制作手法の一つです。

ダイナミックサービング

ダイナミックサービングのメリット:

・URLが統一されており、Google推奨の手法。
・PC用サイトとスマホ用サイトを別個に作り込むので、それぞれユーザーの使用環境に合わせた設計やデザインが可能。

ダイナミックサービングのデメリット:

・レスポンシブウェブデザインと比べ、運営の手間(コスト)がかかる(1.5~2倍程度)

コードが1つで、表示を変化させる「レスポンシブウェブデザイン」というスマホ対応の手法

前述のダイナミックサービングでは、PC用サイト・スマホ用サイトのそれぞれに設計・構築が必要になります。更新頻度が多いニュースサイトやブログでは、手間がかかりすぎ、運営の負荷が大きくなります。
そこで、PC用サイトもスマホ用サイトも本体となるコードを1つにまとめ、ユーザーのデバイスごとに表示の仕方を変えるという技術ができました。これをレスポンシブウェブデザイン(RWD:Responsive Web Design)と言います。

レスポンシブウェブデザインとは
もちろんURLが一つに統一されるのでユーザーが混乱することもありませんし、コードも一つに統一されるので更新や運営が過負荷になりづらいのが特徴です。Googleが推奨する制作手法で、重複コンテンツのリスクもありません。
ただし、サイトデザイン(見た目)においては注意が必要です。レスポンシブウェブデザインでは、デバイス事に作り込むわけではありません。どちらにも合ったデザインにしていく必要があるので、ある程度シンプルなデザインになりますし、最終的にスマホかPCのどちらを優先させていくかは制作に入る前に決めておく必要があると言えるでしょう。

世の中の流れとしてはモバイルファーストと言い、モバイルを最優先にして設計していくことが主流ですが、業界によっては、PCユーザーのコンバージョン(お問い合わせ申込みなど)が高い場合もあります。
いずれにしても、現状のアクセス解析に基づいて、モバイル対応を考えていくことが望ましいですね。

レスポンシブウェブデザイン

レスポンシブウェブデザインのメリット:

・運用が楽。(手間と費用を抑えられる)(1HTMLファイルの管理だけで済むため)
・URLが1つで、Google推奨の手法。

レスポンシブウェブデザインのデメリット

・複数の端末で読み込めるようにするため、デザインに制限がある。
・デバイス毎に作り込むよりも、訴求力が落ちる場合が結構ある。
・PC向けの古いブラウザには非対応

SEOの観点から考えるスマホ対応

スマホ対応している場合の検索結果画面

スマホ対応サイトが有利になっていく、検索エンジンへ

Googleで検索をすると、検索結果画面には「スマホ対応」ラベルが表示されるようになりました。従来の「スマホ対応」ラベルがない状態では、検索結果画面からスマホ対応しているWEBサイトか否かを確認するすべがありませんでした。しかし、このラベルが出来たことにより、スマホユーザーはスマホ対応しているページをより見つけやすくなります。
今後、世の中のWEBサイトのスマホ対応が進み、検索結果画面に「スマホ対応」ラベルが多く表示されるようになると、スマホ対応していないWEBサイトはクリック率が下がるかもしれません。

アメリカのスマホ検索事情

アメリカの検索エンジンをスマホで調べてみると、上位に表示されているサイトの多くがスマホ対応されていることに気付かされます。
例えば、「orthodontist nyc」(直訳すると、矯正歯科 ニューヨークシティ)で検索した時に1ページ目に表示されている10件中10件全てのページがスマホ対応しています。

一方で、「矯正歯科 東京」で検索した場合、1ページ目に表示されている10件中6件のページがスマホ対応していました。

スマホ検索結果の米国との比較

また、アメリカで起きた事が日本でも起きることを予想すると、早くからスマホ対応しておくに越したことはないでしょう。

[本記事中にあるGoogleの推奨については、下記のサイトを参考にしています]
Google Multi-Screen Resources(英語) http://www.google.com/think/multiscreen/start.html

 

サイトの配色を決める時に抑えておきたい色の特徴とWEBデザイン

WEBの使用色を逆算式で選んで、色を味方につける

私たちは、日頃から無意識的に色から多くの印象を受け取っています。
WEBの配色を適切に選ぶと、色を味方につけて、効果的に伝えることができます。
そのためには、WEB運営側は「どんなイメージを届けたいか」から逆算して、WEBの使用色を選ぶことが大切ですね。

色が私たちの身体に与える影響「ライト・トーナス」

私たちの筋肉が色を感じると、筋肉が緊張したり弛緩したりします。
リラックスした状態を23として、緊張の度合いを数値化したものを「ライト・トーナス値(Light Tonus)」と言います。
※トーナス(tonus)とは、英語で緊張という意味

ライトトーナス効果
このように、色は私たちの身体を変化させ、気持ちにも影響を与えます。
では、これらの効果をどのように活用すれば、マーケティングやホームページに役立てる事ができるのかを見ていきましょう。

赤は愛と情熱の色

配色の仕方によって、男性的にも女性的にも表現できる色です。
また、交通標識に使われているほど、注意喚起に適しています。
赤×男性的なデザイン⇒情熱的な力強さや安定感、前進する力
赤×女性的なデザイン⇒成熟した女性らしさや美しさ
赤×SALE⇒購買意欲を煽り、お得感を主張する色。

インターネットセキュリティーの企業サイト

赤が持つ力強さや安定感、注意を活用したウェブサイト
赤が持つ力強さや安定感を表現。業種柄、注意喚起の赤を効果的に使用していると思います。

女性向けヘアメイク製品

赤と女性が組み合わさると、大人の女性の美しさを演出
ピンクではなく赤を用いることで、成熟した大人の女性的魅力が演出されています。

生鮮食品のオンラインスーパー

注意喚起の赤を効果的に活用したウェブデザイン
注意喚起の赤を効果的に配色。赤い字の価格がお得感を主張しています。

ピンクは子宮の色

お母さんが子供を包み込むような優しさや愛情を表現できます。
赤色と比較すると、より優しい女性らしさや母性を表現するのに適しています。

幼児向け教育のホームページ

濃淡のピンクを全面に配色して、赤ちゃんワールド全開。
濃淡のピンクを全面に配色して、赤ちゃんワールド全開。

女性向けストッキングのキャンペーンサイト

コケティッシュにピンクを使用、黒を効果的なアクセントにした女性向けウェブデザイン
ピンクをコケティッシュに使い、黒をアクセントに取り入れた女性向けのウェブデザイン

女性向けヘアケア製品のキャンペーンサイト

ピンクは個性が強くなりがちですが、色面積を抑えることで、軽やかに女性らしさを演出。
ピンクは個性が強くなりがちですが、色面を抑えることで、軽やかに女性らしさを演出。

オレンジは太陽の色

太陽のように明るい雰囲気を演出できる色で、社交的・満足感・幸福感を表現。
飲食業界では食欲増進・シズル感を出すのに欠かせません。

テレビ局のホームページ

人々が集まる色、オレンジ。にぎわい感と幸福感を表現したWEBサイト
人々が集まる色、オレンジ。にぎわい感と幸福感を表現したWEBサイト

不動産の企業サイト

企業サイトもオレンジを使えば親近感が湧く印象のWEBデザインに。
企業サイトもオレンジを使えば親近感が湧く印象のWEBデザインに。

食品油のホームページ

食欲増進効果のあるオレンジ色で、シズル感を演出したウェブデザイン
食品が最も美味しく見えるオレンジ色を取り入れたウェブデザイン

黄色は中性的でエネルギッシュな色

さわやかで新鮮な演出に最適。
緑・オレンジ・赤など他の色と組み合わせて配色することで、温度感が変わってきます。

サプリドリンクの商品ホームページ

元気でエネルギッシュ、活動的な印象を全面に出たWEBデザイン
元気でエネルギッシュ、活動的な印象を全面に出たWEBデザイン

運送会社のホームページ

企業サイトのアクセントカラーに黄色を使えば、黄色の持つ活動的なエネルギーの演出も
企業サイトの挿し色に黄色を使えば、黄色の持つ活動的な印象に

緑は植物グリーンの色

植物の緑を連想させ、自然や癒し、協調性や調和を表現。
ナチュラルやエコを演出するのみも使われます。
運転の若葉マークに象徴される、若々しさやフレッシュなイメージも。

温泉旅館のホームページ

樹木の緑は、自然や癒しを人々の心に伝えてくれます。薄い緑で写真をなじませているのが特徴のWEBデザイン。
樹木は癒しの心伝えてくれます。薄い緑で写真をなじませているのが特徴的。

乳幼児~中学生向け学習塾のホームページ

子供向けのWEBデザインは、親しみと安心館を感じる緑をポイントカラーに。
子供向けのWEBデザインは、親しみと安心館を感じる緑をポイントカラーに。

ヒントを届ける小売店のホームページ

濃い緑と白のコントラストは、ナチュラル&エコだけではんく、信頼と調和の印象を鮮やかに残すデザイン
緑と白のコントラストは、ナチュラル&エコと、信頼&調和の印象を鮮やかに残す

青は海・空・宇宙を連想させる色

清潔感・信頼感・安定感を表す青は、ビジネスに必要な要素が全て揃っている色。
日本人が最も好む色でもあることから、企業サイトで最も多い色でもあります。
空や水の色と近く、穏やかさ・冷静さを表現するのにも便利な色です。

沖縄の観光情報ポータルサイト

大きな海や大きな空は、自由を連想させる青色。
大きな海や大きな空は、自由を連想させる青色。

IT大手の企業サイト

理知的で先進的、それでいて清潔感を感じる青は、企業サイトに最も使われる色の一つ。
理知的で先進的、それでいて清潔感を感じる青は、企業サイトに最も使われる色の一つ。

印刷大手の企業サイト

どんな時も冷静な印象を保つ青は、信頼と安定を感じさせる企業サイトに最適です
どんな時も冷静な青は、信頼と安定を感じさせる企業サイトに最適です

茶色は大地の色

ゆるがない大地を象徴するので、安定感やリラックスを演出。
薄いベージュと合わせれば、歴史やアンティークな雰囲気を演出するのに便利。

高級ホテルのホームページ

落ち着いた茶色は、歴史や重厚感を届けるWEBデザインに。
落ち着いた茶色は、老舗の歴史や重厚感を届けるWEBデザインに。

大手チェーン喫茶店のホームページ

落ち着いたカフェスペースには、大地のような揺るがない落ち着きを演出する茶色がトレンド。
ゆっくりできる飲食店は、揺るがない大地のような落ち着きを演出する茶色がトレンド。

まとめ:色相と色の特徴

色相を順に取り上げていきましたが、いかがでしょうか。
最後に、取り上げた色をまとめます。

赤:
【特徴】興奮させる色、注意喚起
【イメージ】情熱的・大人の美しさ・安定感

ピンク:
【特徴】母性を思い出させる色
【イメージ】母性・女性らしさ・若々しさ

オレンジ:
【特徴】太陽の色
【イメージ】にぎやか・陽気・ポジティブ・社交的

黄色:
【特徴】気分が明るくなる
【イメージ】希望・光・エネルギッシュ・知恵

緑:
【特徴】自然や植物の色
【イメージ】若さ・自然・癒し・調和・平和

青:
【特徴】海・空・宇宙の色
【イメージ】信頼・清潔・冷静・自由・誠実

茶色:
【特徴】大地の色
【イメージ】安定・リラックス・歴史・アンティーク

デザインで最も記憶に残り易いのが色だという説もあります。
今回の記事内では、知名度の高い大企業のホームページばかりを例に挙げましたが、
知名度の低い中小企業にこそ、色を味方につけてブランド戦略を考えるメリットがあるのではないでしょうか。

メイン画像はどうやって決めればよいの?

<質問内容>

TOPページのメイン画像をどうやって決めればよいか悩んでいます。
ホームページを発注した制作会社からメイン画像に使用する写真を出すよう言われました。
どのような写真を選ぶべきか尋ねたところ、好きな写真を入れるように言われたので、無難な風景写真を選ぼうか悩んでいます。

<回答>

メイン画像は究極のプレゼンです。
一目見て、「もっと知りたい」と思われるようなプレゼンをしましょう。

TOPページは正面玄関と考えて

人と人が初めて出会う時のように、人がホームページを初めて見る時に第一印象を抱きます。
一般的にTOPページは、ホームページの入口となる重要な正面玄関です。
第一印象は3秒で決まると言われています。
ホームページを開いて3秒間で見るところ、その大部分がメイン画像です。
自社の第一印象をどのように持ってもらいたいかを考え、メイン画像では最高のプレゼンをしましょう。

メイン画像の目的は、次へ進んでもらうこと

プレゼンといっても、購入を決めてもらうためのプレゼンではありません。
足をとめ、腰を落ち着けてホームページを見てもらうためのプレゼンです。

「お、ここは他とは違うな」
「自分が求めているものがあるかも」
等という第一印象をもってもらえるためのメイン画像を考えていきましょう。

扱っている商品がモノの場合

唐揚げさん、掃除機屋さん、工作機械屋さん・・・
商品を持っている企業の多くは、その企業が商品で覚えられています。
会社のブランディング=商品のブランディング
になるでしょう。
メイン画像には、商品そのものや、商品に関わるもの(利用シーンや提供風景など)をメイン画像に
もってくるとはまる場合が多いです。

扱っている商品がモノではない場合

目に見えないサービスを扱っている業種も多いと思います。
医療や士業、WEBサービスなどもそれに当たります。
提供サービスを写真に撮るのが難しいですが、その分知恵を絞りましょう。

ユーザーが企業に求めることは様々だと思います。
もしかしたら、最安値を求めているユーザーがいるかもしれません。
もしかしたら、お手軽さを求めているユーザーがいるかもしれません。
もしかしたら、信頼できるブレインを求めているかもしれません。
もしかしたら、何を求めているのか明確になっていないユーザーがいるかもしれません。

あなたが提供している内容(価値)の中で、
・より求められているもの
・より他社との違いが明確なもの
・より自社の資源が活用できるもの
を目立つようにしていくことができれば、ユーザーからみて、どんな企業なのかという印象が
残ることでしょう。

万人が良いと思うメイン画像を作るのではなく、
特定のユーザーがスゴク良いと思う内容にすることをお勧めいたします。

おまけ・こんなメイン画像はどうですか?

他にもありました、こんなメイン画像に関する質問・相談。
①制作会社の人間に進められて、自分の好きな風景写真を入れました。
②テンプレートから、綺麗な幾何学模様を選んで入れました。
③携帯で撮った写真を入れました。
④会社の強みを箇条書きにして10個書きました。
⑤会社外観の写真を採用しました。

①②⑤は、WEB上で非常によく見かけますね。無難な路線ですと、無難な第一印象=記憶に残らなくなってしまいますよー。
③は、素人っぽくなってしまいますね。提供している商品やサービスまで素人っぽく思われてしまう危険性も。
④は、頑張っていますが、10個は伝わりづらいですね。1個に絞りましょう。メイン画像はあくまで第一印象を残すための場所です。