4-8 トップページ

トップページはホームページの顔となる、もっとも重要なページです。時間を掛けてしっかりと作り上げていきましょう。

先程も少し触れましたが、トップページには様々なサイトコンテンツの要点を短くまとめて配置します。具体的には以下のコンテンツを並べていきます。

①ヘッダー(横長の写真)
②コンセプト
③サービス内容
④ビフォーアフター
⑤スタイリスト紹介
⑥お問合せフォーム

それぞれの要素について解説していきたいと思います。

①ヘッダー


ホームページを開いた時に一番最初に目に飛び込んでくるのが「ヘッダー」です。

ここに魅力的な写真、そして言葉が配置されていることで、お客さまはあなたのサービスに興味を持ちます。ここがイマイチだとサイトの印象としては最悪です。しっかりと作り上げていきましょう。

ヘッダーを構成するのは以下の2つの要素です。

・魅力的な写真
・心を掴むコンセプト


魅力的な写真

まず必要不可欠なのが魅力的な写真です。

あなたのサービスをイメージしやすい写真を配置しましょう。たとえばスタイリング中の写真やお客さまとショッピングをしている写真などが理想的です。

ちなみにヘッダーは横長です。そのため、ヘッダー用に使う写真はなるべく「引きの状態」で撮ってもらいましょう。

心を掴むコンセプト

ヘッダー内には短い文章を入れます。あなたのサービスの特徴やコンセプトなどを短い言葉で表現します。各社で表現の方法は異なりますが、なるべくコンパクトにお客さまの興味を引く言葉を並べることが大切です。

同業他社のヘッダーを徹底的に研究して、どのような言葉を並べるのかを決めてください。

同業他社のヘッダー事例


同業他社のヘッダーの事例をいくつか挙げてみたいと思います。


フォースタイルさんはお客さまに接客している最中の写真を使っています。代表の久野さんの表情は笑顔です。これはやはり基本ですね。サービスの特徴が一発で分かるような解説を写真の上に載せています。とても分かりやすいですね。


続いてソーニョスタイリングさん。ヘッダーの中にたくさんの情報を詰め込んでいます。写真はコーディネート風景。そして載せている言葉はとても参考になります。

■アラフォー女性専門
■ファッション誌やタレントのスタイリングを経験したスタイリストが
■あなたの専属スタイリストとしてファッションをコーディネート

このように、サービスの特徴や自社の強みをヘッダーの中に凝縮しています。とても参考になるので、よく研究してください。


続いてライフブランディングさん。こちらはお客さまに服の解説をしている写真を使っています。とても分かりやすいですね。写真の上には以下のような言葉を並べています。

■男性専門ファッションコーディネートサービス
■価値を高める男性の着こなし、私たちがサポートします

まずはターゲットが誰なのかを明確にしています。そしてどんなサービスを提供しているのかも明確です。とても分かりやすいヘッダーです。

ヘッダーの作り方


ヘッダーを作る際には以下の2つをしっかりとイメージしてください。

■どんな写真を使うのか
■どんな言葉を入れ込むのか

まずはこれらを徹底的に考えます。そしてデザインのラフ画を自分で書いてみてください。鉛筆でササッと書く程度で構いません。このラフ画を参考にしながらヘッダーデザインを作り込んでいきます。

もし自分でヘッダーをデザインする場合はこちらのツールを使ってください。センスの良いテンプレートがたくさん並んでいます。こちらを活かしながら、簡単にヘッダーデザインを作ることができます。


▼Canva
https://www.canva.com/

ヘッダーを自分でデザインするのも良いのですが、最初のうちはハードルが高く感じられるかもしれません。

そんな時こそ身近なプロを活用してください。フリーランスが集まる「ココナラ」や「ランサーズ」では、ヘッダーのデザインをお願いできるデザイナーがたくさんいます。

ヘッダーはホームページの顔となる場所ですので、できればプロに依頼するのがおすすめです。価格の相場は5,000円〜3万円程度になります。確かにお金は掛かりますが、プロの仕上がりはまったく違います。ここではケチらず、しっかりと投資をしてください。

▼ランサーズ
http://urx.space/TFuZ

▼ココナラ
https://coconala.com/categories/353?ref=top_categories

ヘッダー下のコンテンツ


ヘッダー下には②〜⑥の概要をまとめていきます。

②コンセプト
③サービス内容
④ビフォーアフター
⑤スタイリスト紹介
⑥お問合せフォーム

競合他社のサイトを研究すると、各社でこの並び順は様々です。ビフォーアフターを強調する会社もあれば、コンセプトをしっかりと見せる会社もあります。

どちらが正解というわけではなく、実際にテストを重ねながら、お客さまの反応を確かめてみてください。

②コンセプト


ヘッダーの真下に位置するのが「サービスのコンセプト」です。このサイトがどんなサイトなのかを端的に表現します。

3行くらいの文章量でコンセプトを表現してください。様々なパーソナルスタイリストのサイトを参考にしながら、自分なりの表現を見つけてください。

いくつかの具体例を見ていきましょう。

フォースタイル

自分の生き方や心持ちを変えたい、ビジネスでより良い印象を与えたい。

そんな方をフォースタイルは1万件以上の確かな実績と、服装心理学®でお手伝いしています。


チェンジングミー

Changeng Meにはファッションのスペシャリストが揃っています。

新しい洋服を一緒に買いにいくのはもちろん、 お手持ちの洋服を使ったコーディネイトやパーソナルカラー診断、ワードローブ診断、そして提携先ヘアサロンでのヘアメイクまで、ファッションに関することはすべてお任せください!


株式会社SO styling

ファッションに悩む毎日から
ファッションを楽しむ毎日へ

ファッションが苦手な男性を最短でおしゃれに導くのが私たちの役割です。


③サービス内容




サービス内容には、あなたの代表的なサービス(1〜3つ)を画像と短い文章で書き込みます。それぞれをクリックすると詳細ページに飛ぶようにしてください。

上のフォースタイルさんやソーニョスタイリングさんの例を参考にしながら作ると良いでしょう。ここでもクオリティの高いプロの写真が必要になります。

④ビフォーアフター



ホームページの中で、もっともインパクトの強いコンテンツがビフォーアフターです。サービスを受けることでどんな風に変われるのか。これはお客さまがもっとも興味のある部分になります。

トップページの目立つ位置にビフォーアフター写真を取り入れるようにしましょう。

特にソーニョスタイリングさんのホームページは印象的です。ヘッダー下のもっとも目立つ位置にビフォーアフター事例を配置しています。

上の画像を参考に、あなたも2〜4例ほどのビフォーアフター写真を配置してください。

写真をクリックすると、ビフォーアフターのページにジャンプするように設定します。

⑤スタイリスト紹介



「誰がコーディネートしてくれるのか」これもお客さまがとても気になる項目です。トップページではあなたの簡単なプロフィールをまとめてください。

プロに撮影してもらったクオリティの高い写真を配置して、短い文章であなたの自己紹介をまとめます。

詳細はプロフィールページで見せるので、トップページでは簡単な説明で構いません。

⑥お問い合わせボタン



最後にお問い合わせボタンを設置します。ライフブランディングさんの事例がとても分かりやすいです。電話番号とお問合せフォームへのリンクボタンを設置します。※起業初期は電話番号はなくても構いません。

ボタンのデザイン、色、並べる言葉次第で、お問い合わせ数にも大きな影響がありますので、しっかりと作り込んでください。

ちなみに、お問い合わせボタンはすべてのページの一番下に必ず設置するようにてください。

▼参考記事
https://webkikaku.co.jp/blog/improvement/contact-button/

常にブラッシュアップを欠かさない


トップページはホームページの顔です。常にブラッシュアップを重ねながら、お客さまの心に「響くサイト」に育ててください。

一度作ったら終わりではありません。あなたの成長、そして時代の変化に合わせて、ホームページを常に更新し続けることがとても大切です。

特にヘッダー画像は5年に一度は見直し、撮影し直すようにしましょう。活躍し続けているパーソナルスタイリストは、常にホームページを更新して「旬な雰囲気」を作り上げています。

あなたは今、ホームページの作り方について学んでいます。この講座を読み終えた後には、いつでも好きな時に、自分でホームページを修正することができるようになります。

あなたもぜひホームページを自分の子供のように考え、丁寧に育ててみてください。


→次のページへ