ウェブサイトを構築する際、「見た目の美しさ」は確かに重要な要素です。しかし、ビジュアルデザインに注力するあまり、本来の目的である「成果」から遠ざかってしまうケースも少なくありません。 本ウェビナーでは、Sun*のデザイナーとエンジニアが登壇し、成果につながる「選ばれるウェブサイト」を実現するための具体的な方法論を解説しました。
齋藤 美里 / Designer
2023年6月Sun*にデザイナーとして入社。制作会社にてプロデューサーとして従事し、プロジェクトの企画提案から予算/工数/進行管理等の全体ディレクションまで幅広く担当。UXデザイナーも並行して担当し、情報設計やリサーチ、モック制作、プロトタイプ開発を主に行う。
岡藤 裕太 / Engineer & Unit Manager
法人営業を経験後、受託開発企業にてエンジニアとしてのキャリアをスタート。バックエンドからフロントエンド、モバイル、インフラ構築、CMS構築などを担当、コーポレートサイトやECサイト、モバイルアプリケーションの構築を経験する。お客様と直接やりとりをしつつ、見積や設計、実装、レビュー、テストを担当。Sun*に入社後、フロントエンド領域のテックリードとして案件に参画し、Frontendチームのマネージャーに就任。その後バックエンドチームのマネージャーに就任。2024年のベストマネージャー賞を受賞。
目次
見た目がキレイな“だけ”のサイトに潜む落とし穴3選
前提として、Webサイトが綺麗なこと自体は決してネガティブなことではありません。第一印象で安心感や好印象を与えられるかどうかは、ユーザーがサイトにとどまってもらえるかどうかを大きく左右します。 ただし、見た目を整えることはあくまでスタート地点に過ぎません。本当に成果につなげるためには、情報が伝わりやすく、安心感や一体感を持った設計が必要になってくるということです。 まずは、見た目が綺麗な”だけ”なサイトが陥りがちな3つの落とし穴について紹介します。
落とし穴1: ゴールが曖昧
落とし穴の1つ目は、「Webサイトを構築する上でのゴールが曖昧」です。 これは、定性情報や定量情報のどちらか、あるいは両方が不十分な状態を指します。「かっこいいサイトにしたい」という抽象的なイメージや、「問い合わせを増やしたい」としながらも具体的な数値目標がない状態では、チーム全体で共通認識が持てず、成果につながるサイト作りが困難になります。 採用サイトを例にとって、ゴールを具体化する2つのアプローチをみていきます。
- イメージの深堀り 「最新トレンドを取り入れておしゃれにしたい」というふわっとしたイメージから、「誰に対してなのか」「なぜなのか」「どんな数字で確認したいのか」と深掘りしてくことで、「大学3、4年生の就活生に対して親近感を持ってもらい、採用エントリー数を前年比1.5倍にする」といった具体的なゴールに落とし込むことができます。
- ビジネス目標からの逆算 定量目標がある場合、そこからユーザーがWebサイトでどのような行動を取る必要があるのかを逆算することで、Webサイト構築のゴールが見えてきます。例えば「採用エントリー数を前年比1.5倍にする」という目標の場合は、就活生にエントリーフォームから応募してもらうという行動が必要であり、そのためには「この会社でなら成長できそうだ」という印象を持ってもらうことが重要で、その印象を裏付けるために、若手社員のキャリアストーリーや研修制度の紹介といった情報が効果的だと考えられます。このように、ビジネス目標を行動、印象、情報へと分解していくことで、成果につながる具体的なゴールに落とし込むことができます。
落とし穴2: ユーザー視点の欠如
落とし穴2つ目は「ユーザー視点の欠如」です。 ユーザー視点が欠如している状態とは、企業が伝えたいことばかりを前面に出し、ユーザーが本当に知りたい情報にたどり着けない状態を指します。 例えば、情報が隠れていたり、メニューが複雑すぎたり、専門用語が多用されていたりすると、ユーザーを迷子にさせてしまい、離脱につながるリスクが高まります。 単に見た目を整えることだけではなく、ユーザーにどんな体験をしてもらいたいかをしっかり設定し、必要な情報に迷わずたどり着けるナビゲーションやスムーズな動線など、体験を支える仕組みを整えることが大切です。
落とし穴3: 見えない土台の軽視
3つ目の落とし穴は「見えない土台の軽視」です。 ここでいう「見えない土台」は、「ユーザー体験」と「サイト構造」の大きく2つに分けて考えることができます。 ユーザー体験とは、ページ表示速度、インタラクションの応答速度、スクリーンリーダー対応などを指します。 サイト構造とは、OGPタグ（SNSでリンクが画像付きで表示されるための設定）、ディスクリプション等のメタタグ対応（検索に関わる情報）、HTML要素の意味付け対応（セマンティックHTML）などが該当します。 これらの土台を軽視すると、せっかく訪問してくれたユーザーを逃す恐れがあります。 とはいえ「何から始めればいいかわからない」という方も多い領域ではないでしょうか？そのような方には、サイトの計測から始めることがお勧めです。 Googleアナリティクスでアクセス解析や回遊率を、Lighthouse、PageSpeed Insights、Google Search Consoleでパフォーマンスを計測することで、継続的な改善を図ることが可能になります。
成果を出す「選ばれるWebサイト」3つの鉄則
Webサイト構築で見逃しがちなポイントをご紹介したところで、成果につながるWebサイト構築のための3つの鉄則をご紹介します。
鉄則1: 戦略から始める「一貫した設計」
何のためにWebサイトを作るのか、Webサイトを通じて何を達成したいのかなど、”戦略”や”ブランドイメージ”を一貫してデザインに落とし込むことが、Webサイト構築の第一歩です。 この一貫した設計のためのポイントを3つご紹介します。
ポイント1: 改善点を特定する
まずは既存のWebサイトのどこを改善すべきかを特定します。「ここが使いづらそう」「もっとこういう情報を入れるべき」など、仮説を持つことに加えて、定性・定量的な情報を集めて分析し、仮説を検証することが、より明確な改善点の特定につながります。 そのために、ユーザーへのインタビューやアンケート、アクセス解析での離脱ページの特定、競合サイトとの比較などを行います。
ポイント2: ゴールを明確にする
1部でも言及されましたが、ゴールを明確にするとは、「ターゲットは誰か」、「その人にどんな行動をとってもらいたいか」を定めて、それを数字で測れるような形にしていくという作業です。 例えば「就活をしている大学3,4年生の応募フォームからのエントリー数を前年比1.5倍にする」「コーポレートサイトから月20件のお問い合わせを獲得する」といった具体的なKPIを設定することで、Webサイトが適切に機能しているかどうかを客観的に判断することできます。
ポイント3: ブランド体験を一貫させる
ブランド体験とは、Webサイト上でのフォントやカラー、写真の雰囲気、文章のトーンに統一感を持たせることを指します。 どのページに行っても同じブランドの世界観が感じられる状態を作ることで、ユーザーは安心感や信頼感を抱き、離脱を防ぐことにつながります。
鉄則2: ユーザーを主役にする「体験（UI / UXデザイン）」
Webサイトはあくまでターゲットであるユーザーのために作るもの。そのため、主役はユーザーでなければなりません。 ユーザーを主役にするための体験デザインにおいても、3つのポイントが挙げられます。
ポイント1: 欲しい情報に迷わずたどり着ける
企業が伝えたい情報を優先してナビゲーションが複雑になったり、情報が階層の奥に埋もれてしまうと、ユーザーは探すこと自体にストレスを感じます。 情報の優先順位を整理し、ナビゲーションをシンプルに設計することが重要です。
ポイント2: 行動を自然に後押しする動線を設計する
ユーザーの行動を後押しするためには、エントリーボタンの配置やボタンの文言が重要です。 例えば、単に「送信」ではなく「エントリーする」「資料をダウンロードする」と明確に書くことで、ユーザーは次に取るべき行動をイメージしやすくなり、コンバージョン率が高まります。
ポイント3: 不安を与えない信頼感を作る
エラー表示を「入力内容に誤りがあります」ではなく「メールアドレスにアットマークが不足しています」のように具体的に示す、郵便番号から住所を自動入力できるようにするなど、小さな工夫の積み重ねが、ユーザーのストレスや不安を取り除くことにつながります。 また、色使いや文字サイズへの配慮、個人情報の取り扱いの明示なども信頼感の醸成につながります。
鉄則3: 目的に導くための「適切な構築」
Webサイトを訪問したユーザーにストレスのない体験をしてもらうためにも、目に見えない部分も数値化して計測することが大切です。 このウェビナーでは「コアウェブバイタルズ」と「ウェブアクセシビリティ」の2つの観点を紹介します。
UXを可視化するCore Web Vitals（コアウェブバイタルズ）
コアウェブバイタルズは、Googleが設けたUX（ユーザーエクスペリエンス）を測定する指標で、SEOにも影響します。主要な3つの指標をご紹介します。
- LCP (Largest Contentful Paint): ページの読み込み速度を計測。目標は2.5秒以下。人間同士の会話のテンポと同じくらいの時間が快適とされています。
- INP (Interaction to Next Paint): インタラクションの応答速度を測定。ボタンを押してからレスポンスが返るまでの時間で、目標は200ミリ秒以下。
- CLS (Cumulative Layout Shift): 予期しないレイアウトシフトを測定。広告が後から表示されてボタンの位置が下がるといった、ユーザービリティに支障が出る動きを抑制するための指標です。
これらはPageSpeed Insights、GoogleChromeの検証ツール、Search Consoleなどで確認できます。
誰も排除しないWebアクセシビリティ
ウェブアクセシビリティは、目が見えない方や視力が低い方、高齢者、障害を持つ方など、広範囲なターゲットにリーチするために重要で、ビジネス上でも多くの利益をもたらします。 例えば、スクリーンリーダー対応では、「日時」という言葉にスペースを入れると「ひ、じ」と別々に読まれてしまうため、正しく読み上げられる設計が必要です。 また、画像タグにalt属性をつける、HTML要素にWAI-ARIAで意味付けをするといった対応により、支援技術が正しくコンテンツを解釈できるようになります。 ウェブアクセシビリティが確保できている状態とは、目が見えなくても情報が伝わる、キーボードだけで操作できる、一部の色が区別できなくても情報が欠けない、音声が聞こえなくても何を話しているかがわかる、といった条件を満たす状態を指します。
まとめ
サイトの構成は、手段ありきではなく、目的や要件に合わせて選ぶことが大切です。複数の接点を通じて一貫したデザインや体験を提供することが、選ばれる理由につながります。 Sun*では、認知からサービス・プロダクト利用まで一貫した体験設計を行い、アクセシビリティ、パフォーマンス最適化、セキュリティ対策、最適な構築方法の提案、リリース後の運用サポートまで、立ち上げからグロースまで一貫してチーム一体でご支援いたします。