COOSY BLOG
  • HOMEホーム

  • SERVICEサービス

    • サービスTOP
    • Web制作
    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
  • WORK制作実績

    • 制作実績TOP
    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーション
    • サービスサイト・SaaS
    • システム開発
  • ABOUTクーシーについて

    • クーシーについて
    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ岩手
    • ロンドン支社
    • ミャンマー支店
  • BLOGブログ

  • RECRUITリクルート

  • Contactお問い合わせ

BLOG MENU

  • BLOGトップ
  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加

Webサイトのレベルが上がる!ゾーニング設計の方法

  • Web制作ハウツー
  • UIUX・サイト設計
  • PM/ディレクション
Webサイトのレベルが上がる!ゾーニング設計の方法

プロジェクトによって、Webサイトの目的やターゲットが明確な場合は、ワイヤーフレーム設計から行う場合もありますが、明確でない場合はWebサイトの目的やゾーニングの設計を行います。

UI/UXでワイヤーフレームはUIに当たりますが、ゾーニング設計はUXに当たります。UXを定める場合はカスタマージャーニーやペルソナを使う場合もあります。カスタマージャーニーはサービス全体のユーザー心理になることが多いため、Webサイトで完結するUXではゾーニング設計を行っています。

1.Webサイトの目的を明確にする

目的と施策を明確に

始めに、そのサイトがどのような役割を果たして欲しいのかを明文化します。
「流入を増やす」、「コンバージョンを増やす」というのは、どのサイトでも同じことなので、Webサイトの目的としては汎用的過ぎるので使わないようにしています。
企業認知を向上させたいのか、サービスを理解して欲しいのか、投資家にリアルタイムに情報を伝えたいのか、求職者に企業イメージを向上させたいのかなどです。

もちろん目的は1つではなく複数になりますが、目的として1番大切なものは何か、ドキュメント化した方が良いと思います。

ここで決めきれないという方もいますが、ここで決められないと後工程で目的が変わり、やりなおしの作業が発生してしまいます。この時点でWebサイトの目的は決めておきましょう。

2.ターゲットユーザーを決める

ターゲットの情報を列挙

例えば、小学生に高校生の授業をしても全く理解できません。高校生に小学生の授業をしても簡単過ぎてしまいます。

このように、ターゲットとするユーザーを間違えてコミュニケーションを取ると、不要な情報を提供してしまいます。もちろんターゲットとするユーザーが複数存在することがほとんどです。

メインとなるターゲット、サブとなるターゲットは明確にしておきましょう。

3.メイン導線の設計を行う

目的に沿った導線を設計

ターゲットとしたユーザーに、どのような導線でWebサイトを巡回させたいかをあらかじめ定義します。

このメイン導線もWebサイトの目的に沿って行います。
例えば、企業認知を向上させたいのであれば、企業をPRするコンテンツを作成してメインビジュアルをその導線とする等です。

サイト全体の導線設計では、各ページを閲覧したユーザーに対して、どのページに遷移させたいか、またはどのような情報を必要としているか定義します。

ちょっと話が逸れてしまうため、詳細はまた別のブログ記事で紹介したいと思います。

4.ユーザーインサイトを考える

インサイトを具体的に考える

ユーザーインサイトとは、ユーザーの心理を考えることです。

人間のほとんどは、潜在意識の中で情報を処理して行動していると言われているため、ユーザーの心理を考えて必要な情報を導き出していきます。

今となっては誰もが利用するサービスとなったInstagramですが、Instagramはサービスが始まった当初は「写真がカッコ良く撮影できるアプリ」でした。

アプリをダウンロードする時には会員登録が必要です。
ダウンロードする際に、当時のユーザーが「写真をメインにユーザー同士がコミュニケーションするアプリ」とか、「盛った写真をアップロードして“いいね”をもらうことで承認欲求を満たすアプリ」と言っても、ピンとこないでしょう。

このようにユーザーがどのような知識を持ち、どのような経験を持っているか考えて、必要なコミュニケーションを導きだします。

5.コミュニケーション設計を行う

意思決定のプロセス

人は、Webサイトで情報の収集や、何かを購入する時に意思決定をします。
意思決定をさせるために、必要な情報と順序が必要です。一例ですが以下のようなプロセスです。

  1. サービス理解
  2. 興味喚起
  3. 具体的検討
  4. 予備情報

それぞれの段階でユーザーがどのような心理状態であることを考えて、その状態に適しているコンテンツを導きだします。

また、Webサイトがどのようなサービスか理解する必要があります。インターネットでは認知と価格が意思決定に大きく影響します。

認知度が高く、価格が安いものは、ユーザーへの心理ハードルがほぼ無くなります。先ほど例に挙げたInstagramも認知度が高く、アプリをダウンロードするのは無料なため、誰でもすぐアプリをダウンロードするでしょう。

例えば、ユニクロのTシャツを購入するのに迷うユーザーは少ないと思います。
一方で認知度が低く、価格が高いものはユーザーへの心理ハードルが高くなります。

心理ハードルが高いとき、ユーザーはより多くの情報を仕入れたいと思います。

ユーザーレビューなどもその一つで、
Amazonで書籍を購入する時もちろん内容は分かりません。目次を見たりユーザーレビューを見たりして情報を集めます。
また、価格が高いものほど失敗したくないという心理状態になり、より多くの情報を収集します。

Webサイトがどのような特性を持っているかを考えて、提供する情報の量をコントロールしましょう。


Webサイトを立ち上げやリニューアルの際に必要な、Webサイトの目的とゾーニング設計の手法を紹介させていただきました。この他にも掲載してほしい内容などあれば、問い合わせからご要望いただけると大変嬉しいです。

クーシーブログ編集部

この記事を書いた人

クーシーブログ編集部

1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。

お問い合わせはこちらから

Web制作デザイン、丸ごとお任せ

お問い合わせする

2020/08/04

執筆者:牧野秀哲

Share on

  • Xでシェアする
  • Facebookでシェアする
  • このエントリーをはてなブックマークに追加
お問い合わせはこちら

UIUX・サイト設計・PM/ディレクションの関連記事はこちら

  • 【徹底解説】チャットボットとは?機能・導入メリット・作り方まで詳しく解説

    チャットボットの基本機能から、導入メリット、開発方法までをWeb制作会社クーシーが詳しく解説。Webサイトでの問い合わせ対応を自動化し、業務の効率化を実現するポイントとは?Web担当者向けに、成功するチャットボットの運用方法も紹介します。

    • UIUX・サイト設計
    • PM/ディレクション
  • 【AI活用で提案書作成が楽になる!】今すぐ使える5つのテクニック

    ビジネスの成否を左右する提案書。重要ではあるものの、あまりにも時間をかけすぎていませんか? 生成AIを使えば短時間で良質な提案書が作れます! Web制作会社クーシーが“今すぐ使える“生成AI活用テクをご紹介!

    • PM/ディレクション
  • RFP作成の全工程と書き方のポイントをわかりやすく解説!——Web制作で成果を出す秘訣とは?

    システム開発やWeb制作の制作会社を選定する際、依頼検討中の制作会社に発注者が作成するのがRFP(Request for Proposal;提案依頼書)です。依頼会社から良質な提案をもらうために作成されます。

    • PM/ディレクション
  • Webデザインとは?依頼する時にも役立つ基礎から徹底解説!

    Webデザインとは、サイトの見た目や使いやすさなどを設計し、制作を行うことを指します。これには、デザインの構築、レイアウト設計、色彩選定、グラフィックの作成、UIUX設計などが含まれます。Webデザイナーが基礎からわかりやすく解説します。

    • UIUX・サイト設計
    • WebデザインTips
  • UI/UXとは?Webデザインに取り入れるための5つのポイント

    UIはUser Interfaceの略。ユーザーがなんらかの対象と接触するとき、その接点となるものです。そしてUXはUser Experienceの略。サービスなどの利用を通じて、ユーザーが得る体験です。UIとUXは比較的似ており、詳しく解説していきます。

    • UIUX・サイト設計
    • WebデザインTips
  • Webアクセシビリティ入門:誰もが使いやすいWebサイトを作るための第一歩

    本記事では、Webアクセシビリティの基本概念、なぜそれが必要なのか、Webアクセシビリティのポイントついて詳しく解説していきます。

    • UIUX・サイト設計
  • 【アクセシビリティ法規制】世界各国の動向とあなたのサイトへの影響

    今後必ず必要となってくるWebアクセシビリティへの対応の準備として、Webアクセシビリティに関する世界各国の法規制とその動向を探って行きます。

    • UIUX・サイト設計
  • 真似したい!404ページ秀逸デザイン11選【海外サイトもあり】

    ユーザーにユーモアを提示できる、404ページの秀逸デザインを国内・国外から厳選して10個紹介します!

    • 採用サイト
    • UIUX・サイト設計

COOSYの
制作実績

UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。

制作実績を見る

Web制作の課題はクーシーが解決します

  • UIUX設計

    人間中心設計で価値ある体験を創造。SEO・AIOにも貢献し、LTV向上につながる直感的な画面デザインを実現します。

  • 情報設計

    SEOの土台となる、ユーザーが迷わないサイトを設計。高いユーザビリティで、Webサイトのビジネス価値を最大化します。

  • Web制作

    コーポレートサイト、採用サイト、ECサイトまで。最新AI技術を掛け合わせ、各サイトの特性に合わせたUIUX設計を実現します。

CATEGORY LIST

  • すべての記事一覧

  • 目的別

    • 目的別TOP
    • コーポレートサイト
    • ECサイト
    • オウンドメディア
    • 採用サイト
    • プロモーション
    • Webサービス
    • LP
    • ブランディング・CI
  • Web制作ハウツー

    • Web制作ハウツーTOP
    • UIUX・サイト設計
    • WebデザインTips
    • PM/ディレクション
    • フロントエンド(HTML/CSS)
    • 撮影・動画編集
    • ライティング
    • CMS
    • Web制作ツール
    • イラスト
  • システム開発

    • システム開発TOP
    • プログラミング
    • EC構築
    • CMS開発・構築
    • サーバ構築
    • データベース構築
    • セキュリティー
  • Webサイト運用のコツ

    • Webサイト運用のコツTOP
    • サイト運用・管理・保守
    • コンテンツ運用
    • CRM(顧客管理)
  • Webマーケティング

    • WebマーケティングTOP
    • SEO対策・トレンド
    • コンテンツ制作・SEOライティング
    • アクセス解析
    • Web広告
    • Web集客ハウツー
  • 特集

    • 特集TOP
    • Web最新トレンド
    • カルチャー
    • ガジェット
  • WORKS

    Webサイト・アプリなどの
    様々な実例・制作実績のご紹介

    WORKS
  • CONTACT CONTACT

    Webサイトのご相談、お見積もりはこちらから

    Webサイトのご相談、お見積もりなど
    お気軽にお問い合わせください

ホーム

  • TOP
  • COOSY BLOG
  • Webサイトのレベルが上がる!ゾーニング設計の方法
ページトップへ
  • TOP
  • SERVICE

    • ブランディング
    • デジタルマーケティング
    • 戦略企画
    • DX推進・システム開発
    • グローバル展開
    • Web制作
  • WORKS

    • コーポレートサイト
    • 採用サイト
    • ECサイト
    • プロモーションサイト
    • サービスサイト
    • システム開発
  • ABOUT

    • 会社情報
    • 私たちが大切にしていくこと
    • お知らせ
    • クーシーラボ 岩手
    • ロンドン支社
    • ミャンマー支店
  • RECRUIT

    • ディレクション部
    • デザイン部
    • システム開発部
    • アカウント・プランニング部
    • Webマーケティング事業部
    • 人事・総務部
    • オフショア
    • グローバル事業部
  • BLOG

    • 目的別
    • Web制作ハウツー
    • システム開発
    • Webサイト運用のコツ
    • Webマーケティング
    • 特集

COOSY SNS

  • facebook
  • X
  • お問い合わせ
  • Privacy policy
  • Site Policy
  • Security Policy
© COOSY All Rights Reserved.