ロカラボは日本のモノづくりを全力で応援する会社です

メイドインジャパンを盛り上げる!

・AI/IoT/RPAの導入支援
・地に足のついたムダのない適切な技術活用
・大手にはできない柔軟性と親身な対応

御社の価値を最大限に引き出し一緒に成果を出していく一歩を踏み出しませんか?

詳細はこちら

ウェブサイトのUXをレベルアップさせる5つの方法

ウェブサイトのUXをレベルアップさせる5つの方法 ウェブマーケティング
ウェブサイトのUXをレベルアップさせる5つの方法

いまのウェブの世界では好感が持てるUXを作ることが大切なポイントになっています。

誰もがウェブサイトに訪れ、隅々まで見ることができ、ネガティブなコメントも簡単に残すことができます。これはシンプルなことですが、快適で好感がもたれるウェブサイトにするためには、様々な要因があります。

ユーザー体験(UX)は壊れやすいものです。

機能やデザインのちょっとしたことがユーザーを遠ざけることになってしまいます。難しいことのように感じますが、簡単にUXをレベルアップさせることができる5つの方法があります。

これらの5つの方法は、Webデザインやパフォーマンスの主な側面をほぼ全てカバーしてるUXの柱とも言えるものです。もし顧客誘導を活発化されたいなら、好感を持たれるUXを提供しなくてはなりません。ではさっそくUXを向上させる方法を見てみましょう。

(特記)
この記事で、ウェブサイト訪問者のことを「ユーザー」と記載しています。
記事内で「ユーザー」と記載している場合、「ウェブサイト訪問者」「読者」など、ウェブサイトに訪れた人のことを指します。

1. ページのレイアウトに気を配る

ウェブサイトのレイアウトはサイトの訪問客とコミュニケートするための手段のひとつです。これは3つの要素で構成されています。

  • サイズ
  • 文字間隔
  • テキストの色

これらの3つの要素が合わさり、ウェブページを構成することになります。初めてウェブサイトを作るときは読みやすいようにこれらの要素を特に意識すると良いでしょう。

では、これらを詳しくみていくことでどのようにUXをあげればいいのかみてみましょう。

サイズ

ある調査によると、ユーザーの最も大きな不満はフォントが小さすぎたり読みにくかったりすることだそうです。もしワードプレスを選んでいる場合は、フォントサイズは最小でも12か13ピクセルでないと読みづらいということです。

ディスプレイにとってのデフォルトのフォントサイズは16ピクセルですが、プリントフォームの場合、12ピクセルで同程度のサイズになります。しかしこれはモニターに顔を近づけてようやく見える程度の小さいサイズです。

ユーザーの年齢が上がるにつれて、小さなフォントの存在はより大きな問題となります。現在どのサイズでフォントが表示されているか確認し、最小でも16ピクセルで表示するようにしましょう。

文字間隔

文字間隔についてはテキストラインの広さとそれぞれの行の大きさが基準になります。ユーザーが自然に文章を読むためにはこの二つのバランスは完璧でなければなりません。

初心者の方は一つの行を75文字以下にすると良いでしょう。状況によって微調整する必要はありますが、これ以上にすべきではありません。もし行がこれ以上広くなると、人間の目では初めから終わりまで文字を追うことが困難になります。ちょっとしたことですが、これを意識して行うことでUXにとっては莫大なメリットとなります。

ほとんどの行が完璧な配置であっても、行間隔が150%周辺で設定されていると台無しになります。それぞれも行間隔がハーフピクセルサイズで設定されていることを確認しておきましょう。

テキストの色

テキストの色が明るい背景をバックにしたダークシェードになっていることを確認しておきましょう。明るい色をテキストに使うと、ユーザーからすると大変読みづらくなります。白を背景に黒やダークグレイなどの暗い色を活用するようにしましょう。

2. 色を意識する

色に関連したUX改善についてみて行きましょう。正しく色を使うことでサイトを魅力的にするだけでなく、あなたの意見をユーザーにとって印象的、影響的にすることができます。

色というのは強烈な力を持っており、理論を理解しそれを背景に正しい色を選ぶことが重要です。ここでは心理学や色を背景にした様々な理論を見て行きます。

色彩の組み合わせ

ウェブサイトのための色を選ぶ際には色の組み合わせを考えなくてはいけません。以下のポイントを意識するようにしましょう。

  • 補完性 — 色の輪において対照となっている色
  • 相似性 – 色の輪において隣り合っている色
  • 三色性 – 色の輪から正三角形の位置にある色を三つ選ぶ

色彩心理学

これは正式な学問ではないですが、色彩心理学は色が人間の心理にもたらす影響についてのヒントを与えてくれます。性別や文化によって異なりますが、以下で共通した例をあげます。

赤 — 情熱、愛、危険
緑 — 金、癒し、成長
青 – 忠誠、信頼、安全
黒 – 高級感、複雑さ
白 — 純潔さ、単純さ

色の適切さ

8%の男性と0.5%の女性が何かしらの色彩異常を持っていることをご存知でしょうか。

このことから、あなたの色のチョイスでユーザーの誰かしらに影響を与え得ることを考える必要があります。適切な色を選ぶことはUX改善においても重要です。

コントラストの強い色を選び全てのユーザーにとって読みやすいページ作りを心がけましょう。特にCTAボタン周辺の目立たせたい箇所で適切な色を使うことで、ユーザーはどこをクリックすれば良いかわかりやすくなるでしょう。

以上の通り、色はUXに大きな影響を与えます。ユーザーの肯定的な感情を呼び起こせるような読みやすいウェブページをこれによって作ることができます。さらに、様々な種類のユーザーを想定してウェブページを作ることで、誰に対しても一定以上のUXを提供することが可能となります。

3. 画像のチョイスと配置

ウェブサイトにおいて画像が重要なことは言うまでもありませんが、どの画像を選べば良いのかはご存知でしょうか。文章と同じに、画像選びもUXにおいて大きな影響を持ちます。例えば、ウェブサイトを作る手順について書く場合に浜辺の画像を使った場合、低いUXを提供することとなります。

画像を使う場合の許可

著作権問題は突然現れ、あなたに噛み付きます。画像を探すときは誰が著作権を持っているか気をつけるようにしましょう。著作権のセオリーに則り、安全に画像を使うようにしましょう。

画像との関連性があるか

上記の例のように、画像が文章のトピックときちんと関連していることは重要です。ぴったり一緒の必要はありませんが、文章の見出しや中身と容易に連想できるようなものでなくてはなりません。必要だったら画像と関連性を持たせられるように見出しを調整してもよいでしょう。

際立たせるような画像を使えているか

関連性のある画像を選べたら、それをウェブページに貼り付けましょう。次に気をつけないといけないのは、それがページの中でも目を引くようなものであるかです。SNS上で使っているような、目を引く、カラフルでユニークな画像を選んで使いましょう。

画像のクオリティ

画像が粗かったり、見辛かったりすると一気にUXは下がります。ピクセルも考え、あなたの投稿する画像がモニター上でどのように移るか意識するようにしましょう。必要な場合は大きなサイズの画像を圧縮して使うことも重要です。

画像がスマホ、ケータイに対応しているか

ウェブサイトがスマホ、ケータイ対応しているかは最も重要なことですが、同時に画像に関しても気を使う必要があります。スマホユーザーがあなたのページを読むとき、掲載している画像が拡大、縮小しなくては見れないようなものではないようにしましょう。

4.ウェブサイトのスピード

インターネットがダイアルアップの時代には私たちは忍耐力を持つことを強制されましたが、スマホとブロードバンドが私たちからそうした忍耐力を奪ってしまいました。ウェブサイトには素早い動作が要求されています。実際47%のユーザーがウェブサイトのローディングには2秒かそれ以下で完了するものだと考えています。

さらに、ローディングに1秒かかるごとに7%のコンバージョン率が犠牲になると考えられています。

しかし、ありがたいことにワードプレスのユーザーにはウェブサイトのスピードをあげるための様々な選択肢が用意されています。

まずは、ツールを使ってウェブサイトの表示スピードを確認して見ましょう。その後に、ページ表示スピードをあげるための以下の手順に取り掛かってみてください。

キャッシュプラグインをインストールする

キャッシュプラグインは大した手間をかける必要もなくユーザーにあなたのページへのアクセスを容易にします。W3 Total Cacheが僕のお気に入りですが、ウェブサイトのスピードアップのための選択肢は他にも様々なものがあります。

画像を圧縮する

大きなサイズの画像はロードに時間がかかるため、ウェブサイト全体のスピードを下げることとなります。画像のクオリティを損なうことなくこれらの画像を圧縮するためにWPスマッシュイットなどを利用するようにしましょう。オプティミズラなどを利用することでオンライン上で同様の作業が可能です。

信頼できるサーバーを利用する

サーバーホストがそうした遅延の原因となっている場合もあります。そうした場合必ずしもサーバーホストが悪いと言うことではありませんが、サーバーを乗り換える良い機会かもしれません。ローディングの遅延が複数ある場合はサーバー会社に連絡し、速度を上げる方法を聞いて見ましょう。

必要のない機能を削除する

ワードプレスに膨大な量の追加機能を備えている場合はこれらのダウンロードやインストールに時間がかかるため、ウェブサイトの機能に障害をきたす恐れがあります。これらがこれらの機能に原因がある場合は、きちんとこれらが機能しているか情報やレビューなどで確認するようにしましょう。

Pingバックやトラックバックの機能を停止する

デフォルトの設定では、ワードプレスは他のウェブサイトのあなたのページに関するあらゆる記事を追跡するように設定されています。自動的に投稿の日付を更新してくれるのですが、これが多くの作業をサイトに要求します。これらの機能をオフにすることで作成したリンク先を失うこともなく、ローディングの早さを向上することができます。

5. わかりやすいサイト案内

サイト案内はおそらくUX改善においてはもっとも重要な部分です。サイトは数クリックですべてを観れるようにしておく必要があります。サイト案内のUX向上については様々な方法があるので、実行して間違いを減らすようにしましょう。

異なるレイアウトを用いる

様々なタイプのレイアウトを使ってみたくなるものですが、この場合は一つの基本タイプにこだわるべきです。例えば、基本的にユーザーはウェブサイトのトップで案内のためのバーがあると考えるものなので、ページの真ん中やわかりづらい場所にバーをおくのはやめるようにしましょう。

わかりやすくラベリングする

案内バーにどのような項目を置くか考えるのも重要です。これらは一目で理解できるわかりやすいものでなくてはなりません。曖昧で、どこのページに飛ぶかわかりづらいものは避けるべきです。

ドロップダウンメニューを多用しない

ユーザーが何かしらクリックするときは新しいものを求めているのに、ドロップダウンメニューが出てくるとそのリズムが崩れてしまいます。彼らがウェブページを見ているときに同じメニューが現れたり消えたりすることはよくあることですが、そういった場合ユーザーはフラストレーションを感じてしまいます。

ボタンではなく、リンクを活用する

画像を用いたサイト案内1はとんでもなく流行遅れで、以下の理由からおすすめできません。

  • テキスト内にあるとインデックスを探す際にわかりづらい
  • 更新が難しい
  • リンクよりもロードに時間がかかる
  • ボタンの設置がサイトの景観を損なうことがある

 

まとめ

ウェブサイトにとってUXは、あらゆるものの中心的な存在になります。これはウェブサイトのパフォーマンスや利益性にも関係してきます。

より良いUXを追求することで、ウェブサイトがより良いものになっていくはずです。


  1. ボタンを含む