Webサイトのデザインを改善する10の方法

訪問者がWebサイトに留まるかどうかを決めるのは、最初の「5秒」と言われています。その5秒のあいだにWebサイトの魅力をアピールできなければ、せっかくアクセスしてくれた訪問者が離脱してしまうかもしれません。

かといって、Webサイトのデザインを1から作りなおすのは時間も労力もかかります。では、どのようにしてWebサイトのデザインを改善するべきなのでしょうか。

今回は、Webサイトを手軽に改善する方法について解説します。配色の改善からレスポンシブデザインへの移行まで、幅広い改善方法をご紹介するので、ぜひ参考にしてみてください。

方法1. レスポンシブ対応にする

▲出典：KOLOSEK

Webサイトを閲覧するデバイスは、PCからモバイル端末に移行しています。2018年3月より、Googleはモバイル対応しているWebサイトを優遇するようになりました（モバイルファーストインデックス）。

まだWebサイトをレスポンシブ対応にしていないなら、すぐに改善しましょう。検索結果ページでも上位に表示されやすくなり、SEO改善にも役立ちます。

方法2. ナビゲーションを簡潔にする

▲出典：KOLOSEK

Webサイトのナビゲーションが複雑だと、訪問者は混乱してしまいます。ナビゲーションはできるだけ簡潔にしましょう。シンプルにするコツは以下のとおりです。

• メニューの項目は7つ以下にする
• 説明的なラベルにする
• ナビゲーションバーを画面固定表示にする

方法3. ページの表示速度を改善する

▲出典：KOLOSEK

Webサイトの表示速度の遅さも、離脱の原因のひとつです。読み込みが2秒遅れると、87％の訪問者が離脱してしまうという調査もあります。

表示速度に問題がある場合はすぐに改善しましょう。

方法4. 効果的なCTAで訪問者を誘導する

▲出典：KOLOSEK

ある調査によると、オレンジ色のCTAボタンは32.5%、赤いCTAボタンは21%もクリック率を向上させることがわかりました。色の力を借りつつ、行動を促す分かりやすいラベルを使って、訪問者を効果的に誘導しましょう。

方法5. SNSを最大限に活用する

▲出典：KOLOSEK

SNSの影響力は強大です。Instagramの月間アクティブユーザーは世界8億人、Twitterのデイリーアクティブユーザーは世界1億人と言われています。

訪問者が気に入ったコンテンツを共有できるように、SNSを最大限に活用しましょう。

方法6. ビジュアルヒエラルキーを意識する

▲出典：KOLOSEK

Webサイトの左右や段落間に余白を設けると、訪問者の理解度が20%近く向上するというデータがあります。余白を設けることでWebサイトの見栄えがよくなり、CTAを強調できるのです。

このように、ビジュアル（＝視覚）の力でWebサイト内の情報に優劣（＝ヒエラルキー）をつける方法は「ビジュアルヒエラルキー」と呼ばれます。

方法7. 写真を活用する

▲出典：KOLOSEK

写真、動画、イラスト、GIFなどを積極的に取り入れましょう。こうしたビジュアルコンテンツは、文章よりも目をひきます。

会社概要のページに人物の写真がある場合、文章よりも写真を見る時間のほうが10%長いという調査結果もあります。こうした調査からも、ビジュアルコンテンツを取り入れる大切さがわかります。

以下のような無料のストックフォトサービスを活用するのもおすすめです。

• Pexels
• Unsplash
• Little Visuals
• Pixabay
• Stocksnap
• Canva

方法8. 色彩理論を活用する

▲出典：KOLOSEK

Webサイト全体の色選びと同じく、CTAボタンのような小さな要素の色選びも重要です。Webサイトやブランド全体で主体となる色やトーンを決め、それに補色を加えてある程度のスキーム（＝枠組み）を作っておきましょう。

このようなカラースキームを作るときは、Pantoneを活用するのがおすすめです。

方法9. オリジナルイラストを作る

▲出典：KOLOSEK

訪問者を飽きさせないための重要なコンテンツのひとつが、イラストです。もしインハウスのデザイナーやイラストレーターがいるなら、ストックフォトを活用するだけでなく、オリジナルイラストの制作を依頼してみましょう。

方法10. モーションやアニメーションを使う

▲出典：KOLOSEK

Webサイトにおけるアニメーションは大きく分けて8種類あります。

• ローディングアニメーション
• ナビゲーションとメニュー
• ホバー
• ギャラリーとスライドショー
• 注意をひくためのアニメーション
• スクロール
• ページモーション
• 背景

ハイクオリティなアニメーションを作るためにはそれなりの労力が必要ですが、明確なビジョンをもってアニメーションを導入すれば、努力に見合う結果が得られるはずです。

Webサイトのデザインは、ちょっとした工夫で改善できる

Webサイトのデザイン改善というと大がかりなものをイメージしがちです。しかしナビゲーションバーのラベルをすこしだけ変えたり、余白を設けるだけでもデザインは改善できます。

まずはちょっとしたポイントを改善しつつ、まとまった時間ができたら大がかりな改善にチャレンジしてみましょう。

（執筆：UX BLOG　翻訳：Nakajima Asuka　編集：北村有　提供元：UX BLOG）