HPのコンセプトの考え方とは|骨組みはこうやって作ろう

HPを制作するうえで重要なもののひとつにコンセプトがありますが、あまり正しい意味を理解していない人も多いのではないでしょうか。

コンセプトは「誰に何を伝えるのか」を表す判断軸のひとつだからこそ、HP制作で重視されているのです。

この記事では、コンセプトの重要性から決め方まで紹介しているので、HP制作がはじめてでも作業のイメージが掴めるようになっています。

コンセプトとテーマは何が違う?

チェックリストを確認する

コンセプトとテーマはよく似ているので、混同している人がたくさんいます。

「コンセプト」の意味と考え方

コンセプトには「概念」という意味があります。

しかし、概念という言葉を理解することは難しくて、分からない人も多いでしょう。HP制作の場合、コンセプトは「誰に何を伝えるのか」を表す判断軸のひとつで、HPを作る際の基本方針と考えてください。

「テーマ」の意味と考え方

テーマとは、制作物の全体を通して表現しようとした主題や考えといった意味です。

たとえば、映画などで「人工知能の進化と人類の将来性」をテーマにした作品があるとします。この場合、「人工知能の進化と人類の将来性」が作品のテーマです。

HP制作では、WordPressのテンプレートもテーマと呼んでいます。

コンセプトが重要な理由

方向性を決める

コンセプトは判断軸のひとつなので、HPにとっても重要な要素です。

HPの方向性が決まる

HPにコンセプトがあると、全体の方向性が決まっていきます。

コンセプトが決まっていない場合

HPにコンセプトがないと、どのような問題が発生するでしょうか。制作におけるプロジェクトの内部で共有できないので、ひとり一人が異なる方向に向かって進んでしまいます。

たとえば、進捗状況を3人の上司に報告しないといけないと考えてみます。HPのコンセプトが決まっていないと、3人の上司から方向性が異なる指示を受けるので、コンテンツの内容に整合性が図れなくなってしまうでしょう。

ひとり一人がバラバラの指示をした結果、コンテンツの内容がズレてしまい、ターゲットに刺さらなくなってしまいます。

コンセプトが決まっている場合

HPのコンセプトが決まっていると、プロジェクトのメンバー全員が内容を共有して、コンテンツの方向性が定まります。3人の上司が全員バラバラの指示をすることがないので、向かうべき方角にまっすぐ進んでいけます。コンテンツの方向性が定まることによって一貫性のある内容になるので、ターゲットに刺さるHP制作が可能です。

情報が伝わりやすくなる

HPのコンセプトが決まっていることによって、ターゲットに伝えたい情報が伝わりやすくなります。コンテンツの整合性が図れていると情報が整理されるので、ターゲットは頭を使わずに自社のHPを閲覧することが可能です。頭を使う必要がなくなった結果、情報の伝達がスムーズになります。

コンセプトを決める方法

計画を立てる

誰でも簡単にコンセプトを決められます。

5W1Hを使って目的を決める

5W1Hは、以下の頭文字を取ったもので、情報を整理する際に役立てられます。

  • When・・HPはいつ見られるのか
  • Where・・HPはどこで(どんな環境で)見られるのか
  • Who・・HPには誰が(どんな人)が来るのか
  • What・・HPに何を求めているのか
  • Why・・なぜHPを見るのか
  • How・・どのようにHPを使うのか

上記の内容に当てはめていくだけで、誰でも簡単にコンセプトの骨組みが制作できます。

5W1Hに当てはめた事例

リクルートHPの事例に当てはめてみましょう。

  • When・・仕事を探している人。おおよそ希望の職種が決まったタイミング
  • Where・・就職活動中の車内や自宅で
  • Who・・仕事を探している求職者
  • What・・福利厚生や働きやすさ、会社の将来性
  • Why・・就職するにあたって自社の情報を集めたいから
  • How・・職場を探す目的とマッチしているかどうかを確認する

発信する内容によってこの限りではありませんが、5W1Hに当てはめると詳細を決められます。

コンセプトシートに落とし込む

以下のコンセプトシートを埋めていくだけで、コンセプトがまとまっていきます。

  • 顧客となるターゲット
  • HP制作の目的
  • 競合となるHP
  • タイトルの付け方
  • コンセプト
  • 必要なコンテンツ
  • HP制作の際に使用するシステム
  • 実装する機能
  • HPの納期

ヨガ教室を想定して、必要な情報を埋めていくと以下のようになります。

顧客となるターゲット

30代前半で健康に対する意識が高い独身の女性。

HP制作の目的

HPから無料体験に申し込んでもらう。

競合となるHP

サイトA、サイトB(実際のサイト名)

タイトルの付け方

健康に対する意識が高い女性が気になるキーワードを入れる。

コンセプト

30代からでも綺麗になれるヨガ教室

必要なコンテンツ

無料体験の申込みフォーム、プログラム、料金表、HP限定クーポン

HP制作の際に使用するシステム

WordPress

実装する機能

無料体験申込みフォーム

HPの納期

10月29日(具体的な日付)

目的別にコンセプト設定を紹介

設計図を考える

コンセプトは、HPを制作した目的ごとに異なります。設定の仕方で悩んだら、HPの目的ごとにコンセプトを確認するといいでしょう。

自社サービスの知名度を上げたい場合

自社サービスの知名度を上げるには、HPに訪れたターゲットがコンテンツに集中できる環境作りが必要です。1枚で構成されるシングルページデザインにすると、コンテンツに集中できる環境になります。

商品を販売したい場合

特定のページから直接商品を販売したい場合は、LP(ランディングページ)と呼ばれる1枚物のHPが向いています。

メニューを省いた縦に長いページなので、物語を読むようにターゲットの視線が上から下へ流れることがLPの特徴です。購入や資料請求などのアクションを起こしてもらうには、LPの内部に埋め込むリンクをなるべく少なくします。

ブランドのイメージを向上させたい場合

ブランドのイメージを向上させたい場合、やってはいけないレイアウトは基本的にありません。

一目見てファーストビューにある情報の内容が分かるように構成されていると、ユーザーからのイメージが向上します。「何を扱っているHPなのか」「どこにリンクがあって移動先はどこか」を分かりやすくしましょう。

コンセプトをデザインに反映させる手順

デザインを制作する

コンセプトをデザインに反映させていくには、HPの骨組みを決めていき、入れたい情報を整理します。

骨組みを決めていく

HPの骨組みは「ワイヤーフレーム」と呼ばれるもので、情報の整理をする際に活用します。つまり、ワイヤーフレームの段階では、デザインまで決めないようにすることが制作のコツです。

HPに掲載するコンテンツのまとめ方や、表現方法を決めていくことがワイヤーフレームの役割です。

HPに入れたい情報を洗い出す

HPに入れたい情報を洗い出していきますが、リストアップしただけでは、整理されていないので確認を取ることが困難です。「情報をただ洗い出しただけの状態」を、ヨガ教室に必要なコンテンツを例として見ていきましょう。

【例:洗い出しただけの情報】

  • 無料体験の予約先
  • HPに来てくれた人限定のクーポン
  • プログラム
  • 料金
  • 全国のスタジオ一覧
  • 期間限定のキャンペーン
  • ヨガ自体がはじめての方へ
  • 手ぶらで参加できるサービス紹介
  • 通いやすさ
  • このスタジオが人気の理由
  • よくある質問
  • 運動や健康のお役立ちコラム

この状態では、デザインを決める時にどこに何を配置すればいいのか分かりません。そこで、HPの骨組みを意識して情報を整理していきます。

洗い出した情報を整理しよう

ユーザーがコンテンツを読む順番を整えて記事のカテゴリーを決めていくと、HPの全体像が見えてきます。HPの全体像が見えてくると、「メインメニューに加えるべきコンテンツは何か」が分かるでしょう。

洗い出した内容を整理すると、どこに何のコンテンツを配置すべきかが明確になります。

【例:ヨガ教室に必要なコンテンツを整理した場合】

ファーストビュー

  • 無料体験の予約先
  • HPに来てくれた人限定のクーポン
  • 期間限定のキャンペーン

メインメニュー

  • このスタジオが人気の理由
  • 料金
  • プログラム
  • 全国のスタジオ一覧(通いやすさ)
  • 手ぶらで参加できるサービス紹介
  • ヨガ自体がはじめての方へ

その他

  • 運動や健康のお役立ちコラム
  • よくある質問

ワイヤーフレームの制作で考えるべきことは、「いかにしてHPに訪れたユーザーが満足できる情報を提供するか」ということです。

今回活用したニーズは分かりやすくするための例です。もし今回の例が自社で制作するHPの内容と合致していたとしても、ニーズに合わせてワイヤーフレームを制作してください。

HPはコンセプトを明確にしよう

HPのコンセプトは、制作の基本方針となる重要なポイントだということを解説しました。

コンセプトには概念に似た要素があるので、「コンセプトを考えましょう」と言われても分からない場合が多いでしょう。ひとつの答えがあるわけではなく、机に向かって考えていても答えが出ない可能性があります。

HPのコンセプトが決められなかったら、HP制作の「ばりよか-BARIYOKA-」にご相談ください。

「ばりよか-BARIYOKA-」のライトプランでは、月額税込10,780円にてHPを制作しております。テンプレートを使ったスピード制作なので、この値段を実現できました。LINEでのお問い合わせにも対応しているので、お気軽にご利用ください。

関連記事

まずはお気軽にご相談ください!

どんなHPを作ればいいのですか?制作費⽤はいくら?まずは電話で相談にのって欲しいetc…
ホームページをまだ持っていない⽅もリニューアルをお考えの⽅も、お気軽にご相談ください。

フォームでのお問い合わせはこちら

お問い合わせ

お電話でのお問い合わせはこちら

TEL.092-725-5708

(平日9:30〜18:30)

PAGE TOP