• 0k
  • 0
ウェブデザイン \ 2016年3月15日

初心者はまずここを押さえよう。ユーザーエクスペリエンスUXの基本のキ!

リンクが壊れている。連絡先が見つからない。テキストが読みにくい……こんなホームページは使いにくいですよね。スタイリッシュで、とびきり美しいサイトを作っても、訪問者にとって使いやすくなければ意味がありません。

ユーザーエクスペリエンス(UX)とは、訪問者があなたのホームページを訪れて得られる経験や満足度のことを指します。色の選択、ナビゲーションメニューなど、ホームページのデザインを構成するさまざまな要素が、ユーザーエクスペリエンスを左右します。これからご紹介する項目に注力すれば、ユーザーがリピート訪問したくなるユーザビリティの優れたサイトになること間違いなしです。

ユーザーエクスペリエンスUXの基本のキ!

事前に構想を練る

実際にホームページを作る前に、内容やデザインの構想をしっかり練ってみましょう。デザインや色の選択をするには、いろいろな色の付箋を使って、ページのイメージを固めていくことをオススメします。

ホームページのテンプレートを選ぶ際は、ついついキレイな画像やデザインに目がいってしまいますが、まずは機能面を重視して選ぶようにしましょう。色やデザインは後でカスタマイズすることが可能です。

事前に構想を練る

読みやすさをチェック

コンテンツを書き始めた段階で気をつけることは、内容のクオリティーはもちろんのこと、読みやすさも念頭に置くことです。テストユーザーとして協力してくれる友達に「自分が作成したコンテンツのドラフト」を読んでもらいましょう。 違う目線でチェックしてもらうことで新しい発見があったり、間違いが見つかることもあります。

基本ルール:

  • 一般的に読みやすいと言われるフォントサイズは14px (10.5pt)~16px (12pt)です。実際の文字サイズサンプルを見たい方はこちらをクリックしてください。タブレットの場合、16px (12pt)が一番見やすいと言われています。
  • 一行は、長くても60文字程度にとどめること
  • 行間を適度にあけること
  • フォントを統一すること
  • テキストと背景を同系色にせず、コントラストを作ること
  • リンクが壊れていないこと(クリックして飛ぶリンク。下線で表示されるいわゆるハイパーリンク)

大切な情報はファーストビューに収めるように

ホームページに詳しい人が ” フォールド (fold) ” について話しているのを聞いたことがあるかもしれません。これは、初期ページから先の、サイト訪問者がスクロールして閲覧しなければならないところを指します。ほとんどのサイト訪問者はスクロールして読んでくれるか、少なくともざっと目を通す傾向があります。

ですが、やはり訪問者に読んで欲しい重要な情報は、スクロールしなくても読める ” アバブ・ザ・フォールド (above the fold) “、つまり、サイト訪問者が最初に見る「ファーストビュー」に収めるようにしましょう。

ファーストビューに収めるべき情報:

  • 連絡先
  • SNSアイコン
  • ロゴ
  • 画像

初期ページで収まるように

統一感が大切

ホームページは統一したテーマ、デザイン、内容で、まとまりがある作りになっているべきです。色彩を統一することで、まとまりがあるデザインやブランディングを実現できます。全体的なイメージを左右し、プロフェッショナルな印象を与えることができるからです。ヘッダー、タイトル、またメニューバーも同様に統一感が大切。

あなたのビジネスのブランドイメージに合っていますか?サイト訪問者にとって使いやすく読みやすいサイトに仕上がっていますか?このチェックリストにYESと答えられないようなら、サイトのデザインを見直してみましょう。

統一感が大切

訪問者のサイト離れを防ぐこと

お気づきの方もいらっしゃるでしょうが、訪問者が閲覧に行き詰まってしまうような構成のサイトが、意外と多いのが現状です。たとえば次のようなことが起こるのは、ユーザーエクスペリエンスにとって大きなマイナスです!

  • リンクをクリックすると、元のホームページからページが移動してしまう
  • 登録フォームやポップアップを使った後、元のページに戻れない(「元のページへ戻る」または「後で登録」するなどのボタンを見やすい場所に設定すること)

モバイル表示について考慮する

モバイル機器の使用が爆発的に増えている今、手のひらに収まるサイズのモバイル機器でサイトを閲覧する人が増えています。この現状に対応したサイトを作る必然性が高まっています。たとえば連絡先をページの上部に置いたり、テキストを短めにするなどして調整しましょう。

モバイル対応を考慮

サイトに付加価値を追加

あなたのオンラインプレゼンスはホームページに限りません。SNS、メルマガやEmailなど、すべての媒体が含まれています。これらも顧客満足度を大きく左右することを覚えておきましょう。Wixで作成したホームページなら、SNSアイコンを追加する機能がありますので、簡単にセットアップが完了。リンク先はご自分のFacebook、Twitterや Instagram などに設定してください。設定方法はこちらのヘルプページを参考に。

Wix ShoutOutを始めとしたEメールマーケティングを行う際は、色合いやスタイルが、あなたのホームページと統一感があるデザインになっていることを確認してください。

Wixアプリマーケットからアプリを追加すれば、使いやすさは抜群に!イベントカレンダー、イベント参加回答フォーム、お客様の声、購読フォームなどのアプリを使い、ユーザーエクスペリエンスをアップさせましょう。

■これらのポイントを活かして、素敵なホームページを作ってみませんか?■
Wixのテンプレートを使えば、短時間でプロ並みのホームページが完成します♪

ホームページ作成ならWix

ライター: Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email