実績

WORKS

徹底したリサーチから生まれるブレない戦略。 徹底したリサーチから生まれるブレない戦略。

名古屋でUXを探究する DESIGN αは、
UI/UXリサーチのプロフェッショナル。
データに基づく戦略とWebサイト制作で、
事業を着実に成功へ導きます。

ALPHA - OMEGA

Design from the beginning to the
end of the project.

  • UI/UX research
  • Website production
  • Strategy

Design from the beginning to the
end of the project.

  • UI/UX research
  • Website production
  • Strategy

ALPHA - OMEGA

Scroll

プロジェクト

株式会社スズキモダン様
WebサイトのUI/UX改善とSEO対策

  • UIリサーチ+Webサイト制作
  • UXリサーチ+戦略設計

データに基づく小さな改善を継続し、サイトの大幅なパフォーマンス改善を実現

DESIGN αでは、Webサイトの一部改修によるスピーディーなUI/UX改善やSEO改善を行っています。
その一例として、今回は名古屋のデザイン会社、スズキモダン様のWebサイト改善事例を紹介いたします。

リニューアル後の成果

・Page Speed Insightsでのページのパフォーマンスが最大40点アップ
・画像表示速度の高速化
・十分なコントラスト比の実現
・文言の視認性の向上
・ページの導線・記載内容の最適化
・すぐに理解できる名称にユーザビリティ改善

プロジェクト概要

背景

スズキモダン様は、デザインや企画によるクライアントの問題解決や、広告・販売促進を得意とするデザイン会社です。
現状のWebサイトのデザインや文章には満足されていましたが、Webサイトを通したPull型集客を増やしていくために、もっと改善できるところはないか検討されていました。
そこで、時間を掛けて大きなリニューアルを行うのではなく、小さな施策と検証を継続しながら、素早く着実に改善効果を出す方針になりました。
今回のプロジェクトは、WebサイトのUI/UX改善とSEO対策を中心に、優先度の高い課題から着手しました。

目的

・ユーザビリティ(操作のしやすさ)向上によるUI/UX改善
・パフォーマンス(表示速度)向上によるSEO改善

主な実施内容

・ヒューリスティック評価
・パフォーマンス分析
・課題の優先順位付け
・改善策の策定
・Webサイト改善

ヒューリスティック評価

■ヒューリスティック評価例

UI/UXの専門家であるUXリサーチャーが、ヒューリスティック(経験則)に基づき、Webサイトを評価しました。

例えば、スズキモダン様のWebサイトでは英語が多用されており、内容を把握するのに時間が掛かる状態が見受けられました。
また、お問い合わせページに「明確な成果を求めるお客様のみご依頼ください」という文章があることで、お問い合わせのハードルが高くなっている可能性もありました。

上記のように、情報の伝わりやすさやユーザーの行動を妨げ得る要素など、ユーザビリティの観点から問題点や改善点を洗い出し、課題として抽出しました。

パフォーマンス分析

■パフォーマンス分析例

改修前のWebサイトの状態を正確に把握するために、パフォーマンス分析を実施しました。

分析はWebサイトを数値的に評価する「Page Speed Insights」や「lighthouse」等のツールを用いました。
点数が低く、表示されるまでに時間が掛かるページは、途中で閲覧を辞めてしまう(離脱する)ユーザーが増えるといわれています。

サイト全体をページごとに計測し、特に点数が低いページを抽出しました。

課題の優先順位付け

ヒューリスティック評価とパフォーマンス分析により抽出した課題を、以下の2つの観点で優先順位付けしました。

ユーザビリティやパフォーマンスへの影響を高 / 中 / 低 / 影響なしの4段階に分類しました。
優先順位が高い課題の例として、
ユーザビリティ面では「似たようなページ名が並んでおり、どちらを見たらいいか分からない」
パフォーマンス面では「画像が重く、読み込みが遅い」等が挙げられます。

更に、それぞれの優先順位をマトリクスにして課題の大きさを数値化し、優先度の高い課題から改善することになりました。

■ユーザビリティとパフォーマンスへの影響の大きさを点数化
■課題一覧の抜粋

改善策の策定

優先順位の高い課題を解決するために、改善策を検討しました。
ユーザビリティを向上させる最適な情報設計や、適切なパフォーマンス改善の方法を策定しました。

Webサイトの記載内容が原因であると判明した箇所については、該当する部分の変更・削除等を行うことになりました。
その際に「他のページと異なる表現を使用していないか?」「分かりづらい言葉を使っていないか?」等の視点を持ち、Webサイト全体で一貫した情報設計となるよう配慮しました。

パフォーマンスに関しては、特に画像の読み込み速度が遅いという問題があり、画像フォーマットの変更や軽量化の方法を考えました。

Webサイト改善による成果

今回の改修は、ユーザビリティ向上によるUI/UX改善と、パフォーマンス向上によるSEO改善を目的に実施しました。
改修による成果の一例として、以下の画像をご覧ください。

■ページの読み込み速度が上がり、点数がアップ
■パフォーマンス改善により、点数が40点アップ
■視認性改善により、ユーザー補助の点数がアップ
■パフォーマンス以外の複数の項目の点数もアップ



上記の成果につながった具体的な施策をご紹介します。

画像表示高速化

より速く画像を表示するために、Googleが開発した「WebP(ウェッピー)」という画像の拡張子を取り入れました。

十分なコントラスト比の実現

背景色に対して文字色が薄く読みづらくなっていたため、文字色を濃くし、見やすくしました。

■WebP表示により、画像の表示速度が向上
■文字色変更により視認性が向上

文言の視認性の向上

フォントサイズが小さめの設定になっていたため、読みやすいサイズに変更しました。

すぐに理解できる名称に

似たような名称になっていたページ名を変更することで、それぞれのページの役割がはっきりしました。
また、ページへのリンクがすべて「View more」になっており、リンク先のページの内容が分かりづらかったため、個別のページの内容に変更しました。

■視認性の高いフォントサイズに変更
■個別のページの内容がイメージできる文言へ変更

ページの導線・記載内容の最適化

お問い合わせページを訪問したユーザーが気軽に連絡できるよう、表示内容を変更し、導線を整備しました。

■変更前:事前説明がやや長く、問い合わせのハードルがやや高い状態
■変更後:できるだけ早くお問い合わせができるよう、必要な情報のみ掲載した状態



大掛かりなリニューアルではなく、細かく検証を重ねながら改善を続けることで、一つひとつの改善成果を出すことができました。
今後も小さくスピーディーな改善を継続していきます。

お問い合わせ

CONTACT

は必須項目です。

※必須項目です。

※必須項目です。

※必須項目です。

※必須項目です。

当社の「プライバシーポリシー」 を必ずご確認の上、お申込みください。

 送信する 
お問い合わせ