Help us understand the problem. What is going on with this article?

Webサイトを作る上で絶対に意識すること。

More than 3 years have passed since last update.

はじめに

Webサイト(ホームページ)を作るということは絶対に何かしら目的があるはずです。
それにも関わらず、「今流行ってるからこういうデザインにしてみた!」であったり、「とりあえず、bootstrap使っておこうよ!」では目的達成を叶えることは出来ません。
では、Webサイトを作る上でどういったことを気にしなければならないのか。
私がWebサイトを作る上で常に考えていることを記事にしてみました。
(私自身が常に振り返るための備忘録でもあります。)

まず、何のために作成するの?

  • もっとお店に集客したい?
  • もっと商品を売りたい?
  • もっと資料請求を増やしたい?
  • ブランド認知度を上げたい?
  • ブランド力向上のため?
  • 企業の信頼性向上のため?
  • 技術をアピールしたい?
  • 新メニューを告知するため?
  • 実施中のキャンペーンを知ってもらうため?

まだまだ色々な理由がありそうですよね。
とにかくこれを意識せずに「ホームページいるよなー」と言って作るようではダメです。
何のために作るのか。まずこの点を明確にしましょう。

どんな人に見てもらいたいの?

一般的にペルソナと言われますが、どんな人に見てもらいたいのかを明確にする必要があります。
もし、見て欲しい人がご高齢の方だとしたらどうでしょう。
文字のサイズや色合いなど若い人に向けた場合とは大きく違うデザインになるはずです。
そうしなければ、発信側が意図した思いを相手に伝えることはとても難しくなります。
だからこそ、誰に見て欲しいのか。この点も絶対に決めるようにしましょう。

どんなデバイスで見にくる?

先ほど、見て欲しいと考えたユーザー。
そのユーザーはどんなデバイスを利用してWebサイトに見にくるのか考えなくてはいけません。
必ずしも、スマートフォンばかりで見にくるとは限りません。
場合によってはパソコン、タブレット、テレビのブラウザなど他のデバイスで多く流入することも考えられます。
一般的に…という思い込みは捨てて、このユーザーさんはこんなシチュエーションでこういう風に見てくれるのではないかと想像してみるようにしましょう。

どんなコンテンツを提供するの?

  • Webサイトを作成する目的は決めました。
  • 誰に見て欲しいのか決めました。

では、次にその見て欲しい人にどんな情報を見てもらったらWebサイトを制作する目的を達成できるのか考えましょう。
いくつか例を挙げてみました。

1.20代の若い男性にお店に来てもらいたい(レストラン)

  • どんなお店なのか伝えたい(レストランの紹介)
  • どんな雰囲気のお店なのか伝えたい(レストランの紹介)
  • どんな料理を出しているのか伝えたい(メニュー)
  • こだわりをアピールしたい(ブログ/特集コーナー)
  • 期間限定メニューなどを知ってもらいたい(ブログ/新着情報/特集コーナー)
  • 一度お店に来て欲しい / もう一度お店に来て欲しい(クーポン)
  • 予約をして欲しい(お問い合わせ)

2.幼稚園の入園検討者に資料請求して欲しい(幼稚園)

  • どんな幼稚園なのか伝えたい(幼稚園の紹介)
  • この幼稚園ならではの魅力を伝えたい(幼稚園の魅力)
  • 教育内容を伝えたい(教育内容)
  • お知らせも掲載したい(お知らせ)
  • 幼稚園での1日を伝えたい(幼稚園の1日)
  • 園児の作品を公開したい(みんなの作品)
  • 幼稚園の様子を伝えたい(日記)
  • 資料請求して欲しい(資料請求)
  • わからないことは聞いて欲しい(お問い合わせ)

このように見て欲しい人、そしてサイトの目的などによってWebサイトのコンテンツも大きく変わります。
しっかりと必要なことを抽出してから設計に移るようにしましょう。

どのようにユーザーを誘導するか

人の目は自然と左上から右下に流れていくことや、Zを描くように流れていきます。
つまり、Webサイトで実現したいことの重要度などに応じて、適切な配置が必要となります。
ですので、きちんとラフカンプを作成して制作に移る必要があります。
このような流れで目的達成へ導くんだという導線設計がデバイスごとに必要不可欠です。

ここまで来たらあとは制作

制作についてはユーザー体験を大切にしながら、パフォーマンスや効果演出などに気をつけましょう。
バグについては大きくユーザー体験を損ねてしまうだけでなく、信頼性の低下にも陥りかねません。
スピーディーかつ確実な制作を心がけましょう。
また、本来の目的から外れた技術自慢不親切設計にならないように気をつけましょう。

Y_ASAMOTO
Aidemyのデザイナー、副業でUdemyの講師もやっています。 https://www.udemy.com/web-expert/?couponCode=QIITA2019
https://asamone.com
aidemy
「AIを始めとする先端技術と産業領域の融合に取り組む人と組織を支援する」をミッションに活動するスタートアップです。
https://aidemy.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした