まずはテキストや画像など、トップページに掲載するコンテンツについて、極意をお伝えします。ここでは、どんな画像やテキストを掲載すれば効果的なのかご説明します。弊社では、これまで8,772社（2019年２月時点）のホームページを制作してきました。今回は、これらの制作実績から導きだしたノウハウをふまえ、わかりやすくお伝えします。この記事を読めば、訪問者の心を掴んで離さないトップページを作ることができるでしょう。これからホームページを制作する方や、トップページしか見てもらえない（直帰率が高い）と悩んでいる方は、ぜひ参考にしてみてください。体験イベントやセミナーなど、ユーザーにとってお得な情報を周知させることも役割のひとつです。イベントやセミナーでは、見込み度の高いユーザーを獲得できるので、上部にスライドギャラリーを配置して、告知のバナー画像を目立たせるといった工夫もおすすめです。ただし、検索エンジンのクローラーは画像の内容までは読み取ってくれませんので、キーワードとなる文言はテキストでも掲載しましょう。よくある失敗として、ファーストビューですべて伝えようとして、多数の写真や長文のテキストを載せてしまうケースが挙げられます。トップページの中でも、特に大事なのがファーストビューですが、欲張ってあれこれ詰め込み過ぎては逆効果です。上記のWebサイトの例は、設計事務所ならではの最大限シンプルなデザインが特徴です。社名以外のすべての要素をそぎ落とすことで、社名がはっきりと目に入ります。下へスクロールすると、過去の建築写真がずらりと目に飛び込んでくる、というレイアウトで、たいへん洗練された印象を与えています。よくある失敗としては、パソコンでは適切だった横に長いメインビジュアルを、スマホ表示でも同じ比率にしてしまい、小さくなり過ぎてしまうというケース。こうなるとメインビジュアルとしての機能を失ってしまい、トップページの印象はがらりと変わってしまいます。また、ホームページの目的によってレイアウトの向き不向きが変わります。下記のWebサイトでは、目的別のデザインやレイアウトのコツが書かれているので参考にしてみるとよいでしょう。イギリス企業のCXパートナーズ社の調査では、「ファーストビューのコンテンツが少ないほうが、ユーザーはスクロールして他のコンテンツを見ようとする」、という結果が出ています。と表示されます。これで29文字です。社名が含まれていなくても、サービス内容やその特徴がひと目よくわかりますよね。上記のWebサイトの例では、ウインドウサイズにあわせて画像の左右や上下を非表示になるように設定されているので、左のパソコン、右のスマホ、どちらで表示しても違和感はありません。タイトルをひと目見ただけで内容が理解できるので、クリックされやすくなるでしょう。トップページは、ホームページ全体の拠点となる重要なページですが、検索結果から流入してくるユーザーの中には、下の階層のページからやってくる人もたくさんいます。そのため、トップページ以外のページを作成する時もこれら12の極意を意識すれば、より成果を発揮できるホームページになるでしょう。ホームページに掲載する画像データの解像度については、下記のWebサイトに詳しく書かれているので、ぜひ参考にしてみてください。よくありがちな失敗として、「ユーザーが見たい情報」ではなく、「作り手側が見せたい情報」に誘導して離脱させてしまうケースがあります。ユーザーは、作り手が見せたい情報を見たいとは限りません。まずは、ユーザーが見たい情報へと誘導し、共感や信頼を獲得することが先決です。たとえば、お店の玄関を見て、雰囲気が暗かったり何のお店かわからなかったりすると、中に入ってみようとは思いませんよね。あなたのホームページも、トップページ（玄関）がきちんと役割を果たしていなければ、訪問者が素通りするかもしれません。上記Webサイトの例では、キャッチコピーと事業内容が端的に記されており、さらに沿革や実績などが記載された「私たちの強み」へと赤い矢印を配置して、わかりやすく導線が示されていますね。サイト内を回遊させる方法については、下記に詳しく書かれていますのでぜひ参考にしてみてください。トップページの役割には、「どんな内容のホームページなのか」をひと目で示すことがありますが、この程度の文字数であれば、瞬時にホームページの内容を理解することができます。伝えたい内容を書ききれなくても、「続きはこちら」などリンクを設定すれば自然な流れで回遊してもらえます。企業やお店のホームページで、最初に目にすることの多いトップページ。人との出会いにおいて第一印象が大切なように、ホームページも第一印象が重要です。トップページをひと目見て「見にくいな」と思われたり、「自分とは関係ない」と思われたりしては、せっかく訪れてくれた顧客を逃してしまいます。もし自社のトップページをひと目見て、「ごちゃごちゃしている」と感じるなら、無駄な部分をそぎ落とすことを考えてみましょう。なぜなら、余計なものを削れば、より洗練された印象を与えられ、ホームページの目的や企業のイメージもはっきりと伝えやすくなるからです。写真は、いちばん載せたい写真１枚に絞るかスライドを使い、ファーストビューに入りきらないテキストは序文だけを掲載し、矢印で続きへの導線を目立たせるなど、工夫してみるのも良いでしょう。興味を持ったユーザーは、導線に従って読み進めてくれるはずです。トップページには、ターゲットとなるユーザーが抱えている悩みや疑問などを刺激する内容を書きましょう。なぜなら、こうした文言を目にした訪問者に対し「ターゲットが自分である」ことを認識させ、「自分の悩みが解消できるかもしれない」と期待感を持ってもらえるからです。よくある失敗としては、鮮やかな色があちこち使われていて、どこに重要項目があるかわかりにくく混乱させてしまうケース、また文字が薄くて読みにくいケースなども挙げられます。ホームページを作ったからには、検索サイトの上位に表示されるようなサイトに成長させたいですよね。ところが、どんな施策を講じても、なかなかトップページが検索結果の上位に表示されない、と悩んでいる方も多いようです。ここからは、SEOに関連する極意をお伝えします。今回ご紹介したトップページの３つの役割と12の極意を、ぜひ今後のホームページ作りに役立ててください。ユーザーが必要とする情報へスムーズに移動できるように、わかりやすく導線を示すこともトップページの大切な役割です。「キャンペーン情報はここ」、「問い合わせフォームはここ」など、ストレスなく遷移できるように示すことが大切です。タイトルは訪問者にサイトの内容を知らせるだけでなく、検索エンジンにその内容を伝える役割があります。検索結果で表示されるタイトルの文字数は30字程度と決まっているので、その範囲内でもっとも効果的なタイトルを作成しましょう。はじめにお伝えした通り、トップページには、訪問者にひと目でどんなホームページであるかを伝える役割があります。それなのに「〇〇を更新しました」といった新着情報が、トップページのいちばん重要な場所を堂々と占拠していたら、その役割を邪魔することになります。「新着情報」は、ファーストビュー以外の場所に配置するようにしましょう。では、トップページが果たすべき３つの役割について考えていきましょう。明るく温かいイメージを与えたいのなら、背景色に薄めの暖色系の色、クールでカッコいいイメージを与えたいのなら、黒や紫を使ったりするのもおすすめです。ホームページの色選びについては、下記のWebサイトに詳しく書かれていますので、ぜひ参考にしてみてください。よくある失敗としては、ビジュアルデザインに凝り過ぎてしまい、ユーザーの混乱を招いてしまうケース。企業のイメージや目的にマッチした洗練されたデザインは大切ですが、離脱率の高いホームページでは成果が期待できません。上記のWebサイトの例では、背景色が白、基本色が黒、強調色として赤でアクセントをつけています。社名や見出しに目がいくように、どのページも統一された見やすい配色がされています。コンテンツの並び順（レイアウト）を改善するだけで、成果が大きく改善される例もありますので、各ページへの遷移に悩んでいるなら改善を検討してみましょう。SEO対策においても、デザインが直接評価の対象になることはありません。ところが、「内容が薄い」「ごちゃごちゃしている」「おしゃれだけど何のホームページかわからない」といった印象を与えてしまっているWebサイトが多いのが実情です。そこで今回の記事では、機能的で成果の期待できるトップページを作るための極意を紹介します。ファーストビュー（ホームページを訪れた時にスクロールせずに最初に目に入る部分）に載せる主要情報は、１つか２つくらいに絞りましょう。なぜなら、ユーザーはファーストビューの情報量が多過ぎると、読む気を失ってしまいがちだからです。そうするとスクロールすることも、他ページに遷移することもなく、ホームページから離脱してしまいます。同時に、「〇〇で第１位を獲得」「創業〇年」「満足度99％」「無料開催中」など、商品（サービス）の訴求力を強めるフレーズを加えると、説得力も増し、さらなる成果が期待できます。ただしその際は、誇大表現にならないように注意が必要です。よくある失敗としては、ファーストビューにいろんな要素を詰め込んでしまい、ひと目ではどんな会社なのか伝わってこないケース。バナーやボタン、写真、テキストなど多くの要素を詰め込み過ぎると、企業のイメージを掴みにくくなり、導線も複雑になりがちです。初めてホームページに訪れたユーザーが、ひと目見てホームページの内容を掴める、シンプルなデザインを心がけましょう。ユーザーは「誰をターゲットにしているのか」「自分が読みたい内容があるか」「どんな利益（ベネフィット）があるか」を即座に判断しようとします。訪問したユーザーの約５割がファーストビューで離脱すると言われているため、ひと目で内容を伝えられないトップページは、今すぐ改善が必要です。「ちゃんと内容を読めば、わかってくれるはず！」という、作り手側の言い分は通用しません。ファーストビュー内に掲載するホームページの要約は、100〜200字程度に収めるようにしましょう。なぜならこれ以上長いと、ひと目では理解できず、また100文字以下では十分に伝えきれないからです。配色を決めるときは、お客様に感じて欲しい企業イメージを意識しましょう。たとえば治療院なのに不健康な印象を与える暗い色だったり、士業なのにカラフルな配色だったりすると、見ている人に不安感を与えてしまうかもしれません。上記のWebサイトの例では「住み慣れた自宅で暮らせるか不安」な高齢者やその家族に安心感を与えるシンプルな文言が印象的です。ユーザーの悩みに寄り添うことで、ユーザーは安心して問い合わせることができるでしょう。トップページがまず果たす役割は、ターゲットであるユーザーに「このページには求めている情報がある」と思ってもらうことです。トップページによくある「新着情報」ですが、多くの企業のホームページにあるからといって、軽い気持ちでファーストビューに載せるのは危険です。なぜなら、初めて訪問したユーザーとって「新着情報」はあまり重要とは言えないからです。トップページの背景色やメニューの色は、ホームページ全体の基調となる色です。他のページでも色調は統一させましょう。なぜなら、ページごとに違う色になっていると、ちぐはぐで落ち着かない印象を与えてしまうからです。新着情報の更新は、活発な企業活動を印象付けることができますが、ユーザーにとっては必ずしも重要な情報とはいえません。もし、解析結果を見て、自社のユーザーには必要がないと判断するなら、「新着情報」を外すことを検討してもよいでしょう。使う画像についてですが、画像は文章よりもはるかに短時間で、多くの情報を伝えることができますので、訪問者の心を掴む画像をよく吟味して選びましょう。企業やお店のホームページは、完成したら終わりではありません。トップページに限ったことではありませんが「商品（サービス）の問い合わせを増やしたい」「採用活動で応募者を増やしたい」といった目的を達成するには、自社を正しく分析したり、他社と比較したりしながら、常に改善していくことが大切です。下記のWebサイトでは、シンプルなWebデザインが一覧で見られるので、参考にしやすいでしょう。ぜひご覧になってみてください。トップページのデザインの中でも、ホームページ全体を印象づけるファーストビューは特に重要です。ここからはデザイン・レイアウトの極意について解説していきます。つまり、クリックしてみないとユーザーが必要としているページかどうかわからない、下層ページを探さないと見たい情報が見つけられないようでは、簡単に離脱を招いてしまうのです。“ホームページ作成・制作なら自分で更新できる【あきばれHP】”改善すべきポイントは、「集客数」「回遊率」「コンバージョン率」の３つです。もし「集客数」が少ないのなら、SEO対策を見直してみましょう。「回遊率」が低いのならトップページのデザインや導線（レイアウト）に問題がないか検討しましょう。また「集客」と「回遊率」が問題ないのに、「コンバージョン率」が低いのであれば、入力フォームに何らかの問題があるのかもしれません。上記のWebサイトの例では、シンプルなメニューと医院の優しさと実績が伝わるメインビジュアルで構成されています。情報量は限られていますが、信頼できそうな雰囲気がしっかりと伝わってきますね。ここからは、これら３つの役割を担うトップページを作るためのコツを解説します。手っ取り早く、今いちばん知りたい極意を読みたい方は、下記を参考に読み進めてみてください。最近では、モバイルファーストを意識して、「レスポンシブデザイン」を使うのが基本となってきました。ウィンドウの大きさによって自動的にデザインを切り替えてくれるレスポンシブデザインでは、パソコンだけでなく、スマホなどのレイアウトを必ず確認して、モバイル端末で最適な表示になるよう構築しましょう。なぜなら、パソコン表示と同じ比率でスマホに表示すると、デザインが崩れてしまう可能性があるからです。
Webサイトのトップページは、このサイトは何のサイトなのかを示す「顔」とも言えます。御社のサービス・製品サイトは、訪問者にとって「わかりやすい顔」をしているでしょうか？この記事では、Webサイト制作の際に知っておきたい、トップページの作り方について解説します。 Webページでは三部構成を意識して設計するだけで、集客を的確にお問い合わせや売上げにつなげられるようになります。トップページだけでなく、下層ページ・ランディングページにも応用できる、Webページの作り方の基本を初心者向けに解説します。 トップページ > css ... こうしたウェブサイトの目的や将来のサイト運営計画などに応じてhtml・xhtmlのバージョンを決定します。 今回はxhtml1.0のstrict dtdに準拠して作成しています。 htmlタグで情報の構造付けをする.