
更新日:
2024.10.4
HPを制作するうえで重要なもののひとつにコンセプトがありますが、あまり正しい意味を理解していない人も多いのではないでしょうか。コンセプトは「誰に何を伝えるのか」を表す判断軸のひとつだからこそ、HP制作で重視されているのです。
この記事では、コンセプトの重要性から決め方まで紹介しているので、HP制作がはじめてでも作業のイメージが掴めるようになっています。

コンセプトとテーマはよく似ているので、混同している人がたくさんいます。
コンセプトには「概念」という意味があります。しかし、概念という言葉を理解することは難しくて、分からない人も多いでしょう。
HP制作の場合、コンセプトは「誰に何を伝えるのか」を表す判断軸のひとつで、HPを作る際の基本方針と考えてください。
テーマとは、制作物の全体を通して表現しようとした主題や考えといった意味です。
たとえば、映画などで「人工知能の進化と人類の将来性」をテーマにした作品があるとします。この場合、「人工知能の進化と人類の将来性」が作品のテーマです。

コンセプトは判断軸のひとつなので、HPにとっても重要な要素です。
HPにコンセプトがあると、全体の方向性が決まっていきます。
HPにコンセプトがないと、どのような問題が発生するでしょうか。制作におけるプロジェクトの内部で共有できないので、ひとり一人が異なる方向に向かって進んでしまいます。
たとえば、進捗状況を3人の上司に報告しないといけないと考えてみます。HPのコンセプトが決まっていないと、3人の上司から方向性が異なる指示を受けるので、コンテンツの内容に整合性が図れなくなってしまうでしょう。
ひとり一人がバラバラの指示をした結果、コンテンツの内容がズレてしまい、ターゲットに刺さらなくなってしまいます。
HPのコンセプトが決まっていると、プロジェクトのメンバー全員が内容を共有して、コンテンツの方向性が定まります。3人の上司が全員バラバラの指示をすることがないので、向かうべき方角にまっすぐ進んでいけます。コンテンツの方向性が定まることによって一貫性のある内容になるので、ターゲットに刺さるHP制作が可能です。
HPのコンセプトが決まっていることによって、ターゲットに伝えたい情報が伝わりやすくなります。コンテンツの整合性が図れていると情報が整理されるので、ターゲットは頭を使わずに自社のHPを閲覧することが可能です。頭を使う必要がなくなった結果、情報の伝達がスムーズになります。

誰でも簡単にコンセプトを決められます。
5W1Hは、以下の頭文字を取ったもので、情報を整理する際に役立てられます。
When:HPはいつ見られるのか
Where:HPはどこで(どんな環境で)見られるのか
Who:HPには誰が(どんな人)が来るのか
What:HPに何を求めているのか
Why:なぜHPを見るのか
How:どのようにHPを使うのか
上記の内容に当てはめていくだけで、誰でも簡単にコンセプトの骨組みが制作できます。
リクルートHPの事例に当てはめてみましょう。
When:仕事を探している人。おおよそ希望の職種が決まったタイミング
Where:就職活動中の車内や自宅で
Who:仕事を探している求職者
What:福利厚生や働きやすさ、会社の将来性
Why:就職するにあたって自社の情報を集めたいから
How:職場を探す目的とマッチしているかどうかを確認する
発信する内容によってこの限りではありませんが、5W1Hに当てはめると詳細を決められます。

以下のコンセプトシートを埋めていくだけで、コンセプトがまとまっていきます。
顧客となるターゲット
HP制作の目的
競合となるHP
タイトルの付け方
コンセプト
必要なコンテンツ
HP制作の際に使用するシステム
実装する機能
HPの納期
ヨガ教室を想定して、必要な情報を埋めていくと以下のようになります。
顧客となるターゲット
30代前半で健康に対する意識が高い独身の女性。
HP制作の目的
HPから無料体験に申し込んでもらう。
競合となるHP
サイトA、サイトB(実際のサイト名)
タイトルの付け方
健康に対する意識が高い女性が気になるキーワードを入れる。
コンセプト
30代からでも綺麗になれるヨガ教室
必要なコンテンツ
無料体験の申込みフォーム、プログラム、料金表、HP限定クーポン
実装する機能
無料体験申込みフォーム
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制作の「ベリウェブ」にご相談ください。
当サイトを運営している「ベリウェブ」はサブスク型のホームページ作成・更新サービスを提供しています。ベリウェブでは保守管理費用の5,280円(税込)/月のみでホームページの作成から更新までをお任せいただけます。初期費用をかけずにハイクオリティーなホームページを持てるとお喜びの声をいただいております。
ホームページの新規制作、リニューアルを検討されている方の中には個人事業主、経営者の方もいらっしゃるのではないでしょうか。ホームページの作成、集客などを全て丸投げすることで、やらなければいけない業務に集中して取り組むことが可能です。皆様からのお問い合わせをお待ちしております。
お好きな方法で
まずはお気軽にご相談ください!
どんなホームページを作ればいいのですか?まずは電話で相談にのって欲しいetc…
ホームページをまだ持っていない方もリニューアルをお考えの方も、お気軽にご相談ください。
Copyright © 2022 RASHIN All Rights Reserved.