では、具体的にどのようなトップページなら好ましいのでしょうか。 もちろんブログの扱うトピックや想定読者によって最適解は異なるでしょう。 本項目では、当ブログのブログトップページを作ったときに想定した初期仮説として 1. The following two tabs change content below. タグが「シンプル」のWEBデザイン一覧｜WEB DESIGN GALLERY FOR WEB DESIGNERS, レスポンシブの基本をおさらい：画像の見せ方とレイアウトのパターンを把握しよう｜SINAP, 【2020年最新】LINE広告（旧：LINE Ads Platform）スタートガイド！費用や効果、CPA相場や設定方法と詳細資料. コンテンツ設計 3. © Copyright 2018 LISKULAll rights reserved. Webサイトを作成する際に、トップページの作り方で悩む人は多いです。トップページには、ホームページの概要を説明したり、サイトをブランディングしたりする役割があります。そのため、「トップページに何を書くのか？」は非常に重要・・・ ホームページの作り方の具体例、トップページの作り方。デザイナーの作り方はまず、手書きのラフデザインを用い、トップページに必要な要素・ボタン・リンクなどを配置していきます。 何のブログかわからない、目当ての記事が探しにくい、見栄えに特別感がないの3点です。, しかし雑記ブログは違います。「NaeNote」と書かれても初見の人は「は？」なんです。, 記事の一覧から読み解こうとしても、それら細々とした情報からブログのコンセプトを逆算できる人はほぼゼロでしょう。, 強い意志を持った読者なら我慢して目的記事を探してくれるかもしれません。Googleアナリティクスにときどき現れる「舐めるように見てくれる人」です。, 時系列に並んだ新着記事一覧 ＝とっ散らかった未整理のリスト ＝読むのすら面倒になる存在, もちろんブログのテーマによっては、記事一覧をカード型にしたり、最初の1記事だけ大きく表示したり、カスタマイズは可能です。, しかしそれにも限界がありますし、そもそも未整理の一覧であることに変わりはありません。, せっかくブログトップページにまで来ていただいたんです。記事の中身でなくブログそのものに興味をもっていただいたんです。, つまるところ、ブログの「顔」たるトップページがただの一覧でいいのかということです。, なお、本記事執筆時点の当ブログのトップページの見た目（PC版）は下記リンクからどうぞ。, ブログトップページを訪れた読者は、ブログ自体に興味を持ってくれた「大事なお客様」です。, またブログトップページの主なコンテンツはブログそのものであり、著者ではないと思っています。, 次にコンテンツ設計ですが、スクロールするにつれて読者がブログのことを理解してもらえる配置を心がけました。, 企業のランディングページではないので、特にCall To Action（ここをクリック！など）は意識していません。, 次に各コンテンツのデザインについては、よくあるかっこいいWebサイトのデザインをパクっインスパイアさせていただいて、次のようにしました。, ブログが主役とはいえ、うるさい装飾は読者の邪魔になると思うので、可能な限りシンプルにしました。, 自分のブランディングが目的なら大きなプロフィール画像をドンっと載せるほうがいいのかもしれませんが、当ブログは主役はあくまでコンテンツと考えているため、プロフィールへのリンクは一番最後に小さく表示するようにしました。, Page Builder by SiteOriginというプラグインを使ってサクッと作ります。, 参考 Page Builder by SiteOrigin — WordPress プラグイン, このプラグインはウィジェットのドラッグアンドドロップで簡単にWebページを作れる優れもの。, ウィジェットは既存のものも使えますが、プラグインに同梱されているSiteOrigin独自ウィジェット（記事カルーセルなど）も利用可能です。, また、パララックス等の「よくあるデザイン」も設定ひとつで適用可能です。便利ですね！, ここからはPage Builder by SiteOriginを使って、当ブログのトップページと同じ枠組みを作る手順を紹介していきます。, 今回はブログのロゴに白文字の透過PNGを使っています。テキストを使う場合はテキストウィジェットに差し替えてください。, また各ウィジェットのスタイル設定に「text-align:center;」を入れて中央表示させています。（子テーマのCSSでも可能）, この行では、見出し用のウィジェットと「アイコン＋説明」用のウィジェットを縦に並べています。, SiteOrigin Featuresウィジェットは、アイコン＋説明を簡単に作れるオリジナルウィジェットです。, ここも同じく、1つの行に見出し用ウィジェットとカルーセル用ウィジェットを縦に配置していきます。, 見出し用の「行」は1つ前と同じなので割愛します。記事一覧用の「行」の設定は以下の通りです。（カテゴリが多ければその分だけ「行」を追加します）, Newpost Catchウィジェットというのは、こちらのプラグインで使えるようになるウィジェットです。, などが指定可能で、当ブログの場合は各トップカテゴリ別に5件ずつ、80px四方のサムネイルを表示させるようにしました。, ただし注意点がありまして、「投稿日を表示」をオンにするとPHPのWarningメッセージが出てきてしまいます。（SiteOriginとの相性の問題です）, 最後に、作り込んだ固定ページの設定とCSSを少し変更したうえでトップページに設定すればすべて完了です。, これらはSimplicityやAFFINGER5のような著名なテーマならできる設定のはずです。, 子テーマのCSSにて、トップページとして不要な情報が表示されないようにCSSを調整します。（下記［ID］は固定ページの投稿IDに読み替えてください）, 最後にWordPressの機能を使って、作った固定ページがブログのトップページ（フロントページ）になるよう設定します。, トップページへのアクセスを対象に、Before（ただの新着記事一覧）とAfter（ランディングページ風）の変化を分析してみます。, 平均ページ滞在時間は「ほしいものがパッと探せなかった」という理由も考えられるため、必ずしも長ければ良いわけではありません。, しかし「ブログの顔たるトップページをそれだけまじまじと見てもらえたのだ」と考えると、長くなるのは喜ばしいものとも思えますね。, 直帰率と離脱率については、興味のある記事にジャンプしてくれた人が増えていることを表しすため、良い変化だと言えるでしょう。, ……と思ったんですが、小さなデザイン調整を継続的に行っていたこともあり、クリック・アテンションの場所と実際のページが大きくズレてしまいました。, ヒートマップをそのまま出すと誤解を与えかねないので、申し訳ないですが実物の掲載は控えさせていただきます。, この点は過去のクリック分析記事「意外すぎる！「同じカテゴリの記事」のクリック率が破壊的に高かった件」でも見られた傾向です。, もともと記事一覧ページにはクリック計測を仕込んでいなかったため、Beforeは測定不能でした。, 一方、Afterはほぼすべてが内部リンクのクリックで、その数は499。1100PVなので対PVのクリック率は約45%です。, 当ブログにおける記事ページでの対PVクリック率、約20％と比べるとはるかに高い数値です。, やはりトップページに来ていただいた読者はブログそのものへの興味が高い「大事なお客様」ということが伺えます。, 以上、当ブログのトップページリニューアルにおけるコンセプト、デザイン、実装から効果測定結果まで、すべてを共有させていただきました。, ちなみに、およそ月10万PVの当ブログにおけるトップページへのアクセス数はおよそ月2000PVです。, たった2%のためにトップページを作り込む必要があるか？ と言われるとぐうの音も出ません。, しかしその2%は、ブログそのものが主役であるトップページにまでわざわざ来ていただいた「大事なお客様」であることを忘れてはいけないと思うんです。, 本記事で紹介したプラグインや手順を流用すれば、そこまで手間をかけずにそこそこの見た目のトップページを作ることができます。, はじめまして。Newpost Catchプラグインを開発した今村と申します。記事を読みました。プラグインをこのような形でご紹介くださいまして光栄です。ありがとうございます。, 記事中にあったプラグインのWarningの件なのですが、私のほうで状況確認のため再現しようと試みたのですが、再現できませんでした。, もしかするとですが、WordPressやPHPのバージョン、使用されているテーマやプラグインの相性などによる影響も可能性としてはあるかもしれません。, プラグインを直接編集することなくご利用いただけることが最も理想の形だと思いますので、もし差し支えないようでしたら、現在どのような環境でウェブサイトを運営されているのかお聞かせいただくことは可能でしょうか。検証した結果、プラグインに修正の余地があるようでしたら、プラグインをバージョンアップすることで対応させて頂ければと思います。, もし、このようなコメント欄でのやりとりが憚られるようでしたら、コメントに紐づいておりますメールアドレス、またはウェブサイトのお問い合わせページよりご連絡くださいますと幸いです。, 今村さん コメントありがとうございます！ 作者さんにお読みいただけるなんてこちらこそ光栄です。 症状の詳細を別途まとめてメールにてご連絡差し上げます。 どうぞよろしくお願いします。, 今村です。NAEさん、お返事どうもありがとうございます。また、追記箇所につきましてもご対応いただきましてありがとうございます。, メールでのご連絡内容についても、詳細に状況をご説明いただきまして、こちらでも再現することができました。大変助かりました。, さきほど「Newpost Catch」プラグインをバージョンアップしましたので、お手数ですがWordPressの管理画面より「プラグイン」の画面に移動して更新処理をよろしくお願いいたします。, ※「Page Builder by SiteOrigin」はかなり多機能なので、他の方がプラグインの作者ということもありまして、現時点で全ての機能を把握できてはいません・・・もし操作中に何かお気付きの点がありましたら、ご連絡くださいますと嬉しいです。, 今村さん ご連絡ありがとうございます！ さっそく更新したところ、ぼくの環境ではWarningメッセージが出なくなりました。 プラグインの相性というマイナーバグにもかかわらずご対応いただき本当にありがとうございました！, NAEさん、ご連絡ありがとうございます。無事に解決できてよかったです。こちらこそ、この度はどうもありがとうございました！, こんにちは。私もこちらの記事と同じくPage Builder by SiteOriginを使って、そのウィジェット内でNewpost Catchプラグインを使うと、下記エラーがでました。, Warning: Illegal string offset ‘active’ in /home/****/ドメイン名/public_html/wp-content/plugins/newpost-catch/class.php on line 41, ※ただエラーが出るときと出ない時があるのですが、基本的にエラーになることが多いです。, この記事を読んで再度トライしたものの、ここで記載されている対処方法ではだめでしたので、Site Origineの使用をあきらめています（Newpost CatchはOrigineを非アクティブすれば動くので使用中）。 何か他の対処方法あればよいのですが。, umanokoさん コメントありがとうございます！ 本件Newpost Catchプラグインの作者様にもご認識いただいております。 次回のアップデートでご対応いただけるとのことです。 取り急ぎは、「投稿日を表示」をオフにするとWarningが出なくなります。お試しください！, 私の環境では、「投稿日を表示」をオフにしてもWarningがでています。 今日Newpost catchのアップデートがあったので試してみたのですが 同じエラーが出力されてだめでした。 Site OrigineとNewpost catchの組合せ早く試してみたいです。。。, umanokoさん そうですか…… ブラウザキャッシュが残っている等が原因ではない場合は、プラグイン作者の方にバグ報告（環境情報、再現手順、出力されるエラー等）をしたほうがよさそうです。, naeさん。はじめまして。 naeさんのサイトをトップページで確認すると、 「New Post Catch」ウィジェットで設定しているであろう、 カテゴリ別の投稿ページへのリンクが、コクーンデフォルトの、 「ブログカード方式」になってるかと思われます。, そちらの方の設定はどのようにやられているのでしょうか？ 差し支えなければ、ぜひ、教えて頂きたいです。, ご推察のとおり、2018-10-14現在、当ブログのトップページはほぼCocoonの機能オンリーで構築されています。, 「Widget Shortcode」については、こちらの記事で使い方を紹介しています。参考になさってくださいませ。, https://www.naenote.net/entry/widget-shortcode, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, 細かなCSSスタイルの説明は割愛しています（テーマによって必要なスタイルが違うと思うので……）。またトップページは固定ページで作成しています。, はてなブログ時代のはてブ人気記事も検索対象に含めるため、はてなブログドメインと現独自ドメインのor条件検索をさせています, WordPressの人も要確認！はてなブログSSL化に向けた記事修正チェックリスト, AFFINGER5に乗り換えたらコンバージョン率が大幅改善。ブログが「細マッチョ」になった, 「投稿日を表示」をオンにするとPHPのWarningメッセージが出てきてしまいます, Page Builder by SiteOrigin — WordPress プラグイン, 3カラムのタグ内に、「Widget Shortcode」プラグインでショートコード化したウィジェットを配置. コンセプト 2. トップページの作り方は2パターンある 1.固定ページをトップページにする。 ・固定ページでトップページを作ります。 何も設定とかいりません。パーマリンクもここでは適当で大丈夫です。公開で保存し … ホームページ、今やどんな企業でもお店でもあるのが当たり前になってきましたね。 最近ではhtmlというホームページ作りに必須の言語も必要なく、簡単に作れるようになってきました。 そんなhtmlを使ったホームページの作り方、気になりませんか？ 設定方法は簡単でも、トップページのページ作成に時間がかかりますよね？ 私はこれにすごく時間がかかりました。 今でも、自分のサイトのトップページは ちょっと気に入りません。(笑) デザイン の3点を参考として紹介します。 なお、本記事執筆時点の当ブログのトップページの見た目（PC版）は下記リンクからどうぞ。 参考 2017/09/27時点のNaeNoteトップページ ホームページ作成の最終段階はトップページを造る事です。運営者からのお知らせ欄やイメージ画像、重要コンテンツへの誘導リンクバナーなどをうまく配置しましょう！検索エンジンへの登録などホームページを作成した後の重要な作業についても解説します。 WordPress【ワードプレス】固定のトップページの作り方♪まとめ. ¢z[y[W, îñʪLxÅ è[U[ÌðɧÂz[y[W. 企業やお店のホームページで、最初に目にすることの多いトップページ。人との出会いにおいて第一印象が大切なように、ホームページも第一印象が重要です。トップページをひと目見て「見にくいな」と思われたり、「自分とは関係ない」と思われたりしては、せっかく訪れてくれた顧客を逃してしまいます。, ところが、「内容が薄い」「ごちゃごちゃしている」「おしゃれだけど何のホームページかわからない」といった印象を与えてしまっているWebサイトが多いのが実情です。そこで今回の記事では、機能的で成果の期待できるトップページを作るための極意を紹介します。, 弊社では、これまで8,772社（2019年２月時点）のホームページを制作してきました。今回は、これらの制作実績から導きだしたノウハウをふまえ、わかりやすくお伝えします。この記事を読めば、訪問者の心を掴んで離さないトップページを作ることができるでしょう。これからホームページを制作する方や、トップページしか見てもらえない（直帰率が高い）と悩んでいる方は、ぜひ参考にしてみてください。, ※本記事は株式会社WEBマーケティング総合研究所提供によるスポンサード・コンテンツです。, トップページとは、ホームページの階層構造のいちばん上に位置する、拠点となるページです。ホームページでは、この拠点から各ページへと移動することから「玄関」にたとえることができます。, たとえば、お店の玄関を見て、雰囲気が暗かったり何のお店かわからなかったりすると、中に入ってみようとは思いませんよね。あなたのホームページも、トップページ（玄関）がきちんと役割を果たしていなければ、訪問者が素通りするかもしれません。, トップページがまず果たす役割は、ターゲットであるユーザーに「このページには求めている情報がある」と思ってもらうことです。, ユーザーは「誰をターゲットにしているのか」「自分が読みたい内容があるか」「どんな利益（ベネフィット）があるか」を即座に判断しようとします。訪問したユーザーの約５割がファーストビューで離脱すると言われているため、ひと目で内容を伝えられないトップページは、今すぐ改善が必要です。「ちゃんと内容を読めば、わかってくれるはず！」という、作り手側の言い分は通用しません。, ユーザーが必要とする情報へスムーズに移動できるように、わかりやすく導線を示すこともトップページの大切な役割です。「キャンペーン情報はここ」、「問い合わせフォームはここ」など、ストレスなく遷移できるように示すことが大切です。, つまり、クリックしてみないとユーザーが必要としているページかどうかわからない、下層ページを探さないと見たい情報が見つけられないようでは、簡単に離脱を招いてしまうのです。, よくありがちな失敗として、「ユーザーが見たい情報」ではなく、「作り手側が見せたい情報」に誘導して離脱させてしまうケースがあります。ユーザーは、作り手が見せたい情報を見たいとは限りません。まずは、ユーザーが見たい情報へと誘導し、共感や信頼を獲得することが先決です。, 体験イベントやセミナーなど、ユーザーにとってお得な情報を周知させることも役割のひとつです。イベントやセミナーでは、見込み度の高いユーザーを獲得できるので、上部にスライドギャラリーを配置して、告知のバナー画像を目立たせるといった工夫もおすすめです。ただし、検索エンジンのクローラーは画像の内容までは読み取ってくれませんので、キーワードとなる文言はテキストでも掲載しましょう。, ここからは、これら３つの役割を担うトップページを作るためのコツを解説します。手っ取り早く、今いちばん知りたい極意を読みたい方は、下記を参考に読み進めてみてください。, まずはテキストや画像など、トップページに掲載するコンテンツについて、極意をお伝えします。ここでは、どんな画像やテキストを掲載すれば効果的なのかご説明します。, ファーストビュー（ホームページを訪れた時にスクロールせずに最初に目に入る部分）に載せる主要情報は、１つか２つくらいに絞りましょう。なぜなら、ユーザーはファーストビューの情報量が多過ぎると、読む気を失ってしまいがちだからです。そうするとスクロールすることも、他ページに遷移することもなく、ホームページから離脱してしまいます。, 上記のWebサイトの例では、シンプルなメニューと医院の優しさと実績が伝わるメインビジュアルで構成されています。情報量は限られていますが、信頼できそうな雰囲気がしっかりと伝わってきますね。, よくある失敗として、ファーストビューですべて伝えようとして、多数の写真や長文のテキストを載せてしまうケースが挙げられます。トップページの中でも、特に大事なのがファーストビューですが、欲張ってあれこれ詰め込み過ぎては逆効果です。, 写真は、いちばん載せたい写真１枚に絞るかスライドを使い、ファーストビューに入りきらないテキストは序文だけを掲載し、矢印で続きへの導線を目立たせるなど、工夫してみるのも良いでしょう。興味を持ったユーザーは、導線に従って読み進めてくれるはずです。, イギリス企業のCXパートナーズ社の調査では、「ファーストビューのコンテンツが少ないほうが、ユーザーはスクロールして他のコンテンツを見ようとする」、という結果が出ています。, ホームページ上で使用する画像の解像度は、72dpiがお勧めです。なぜなら必要以上に高画質な画像を大量に使うと、表示速度が遅くなり、離脱の要因となるからです。また、検索エンジンからの評価を下げてしまう可能性もあるので注意が必要です。粗すぎる画像は問題ですが、72dpi程度にしておけば、PC・スマホとも、いずれの表示でも十分です。, 使う画像についてですが、画像は文章よりもはるかに短時間で、多くの情報を伝えることができますので、訪問者の心を掴む画像をよく吟味して選びましょう。, ホームページに掲載する画像データの解像度については、下記のWebサイトに詳しく書かれているので、ぜひ参考にしてみてください。, ファーストビュー内に掲載するホームページの要約は、100〜200字程度に収めるようにしましょう。なぜならこれ以上長いと、ひと目では理解できず、また100文字以下では十分に伝えきれないからです。, 上記Webサイトの例では、キャッチコピーと事業内容が端的に記されており、さらに沿革や実績などが記載された「私たちの強み」へと赤い矢印を配置して、わかりやすく導線が示されていますね。, トップページの役割には、「どんな内容のホームページなのか」をひと目で示すことがありますが、この程度の文字数であれば、瞬時にホームページの内容を理解することができます。伝えたい内容を書ききれなくても、「続きはこちら」などリンクを設定すれば自然な流れで回遊してもらえます。, トップページには、ターゲットとなるユーザーが抱えている悩みや疑問などを刺激する内容を書きましょう。なぜなら、こうした文言を目にした訪問者に対し「ターゲットが自分である」ことを認識させ、「自分の悩みが解消できるかもしれない」と期待感を持ってもらえるからです。, 上記のWebサイトの例では「住み慣れた自宅で暮らせるか不安」な高齢者やその家族に安心感を与えるシンプルな文言が印象的です。ユーザーの悩みに寄り添うことで、ユーザーは安心して問い合わせることができるでしょう。, 同時に、「〇〇で第１位を獲得」「創業〇年」「満足度99％」「無料開催中」など、商品（サービス）の訴求力を強めるフレーズを加えると、説得力も増し、さらなる成果が期待できます。ただしその際は、誇大表現にならないように注意が必要です。, トップページのデザインの中でも、ホームページ全体を印象づけるファーストビューは特に重要です。ここからはデザイン・レイアウトの極意について解説していきます。, もし自社のトップページをひと目見て、「ごちゃごちゃしている」と感じるなら、無駄な部分をそぎ落とすことを考えてみましょう。なぜなら、余計なものを削れば、より洗練された印象を与えられ、ホームページの目的や企業のイメージもはっきりと伝えやすくなるからです。, 上記のWebサイトの例は、設計事務所ならではの最大限シンプルなデザインが特徴です。社名以外のすべての要素をそぎ落とすことで、社名がはっきりと目に入ります。下へスクロールすると、過去の建築写真がずらりと目に飛び込んでくる、というレイアウトで、たいへん洗練された印象を与えています。, よくある失敗としては、ファーストビューにいろんな要素を詰め込んでしまい、ひと目ではどんな会社なのか伝わってこないケース。バナーやボタン、写真、テキストなど多くの要素を詰め込み過ぎると、企業のイメージを掴みにくくなり、導線も複雑になりがちです。初めてホームページに訪れたユーザーが、ひと目見てホームページの内容を掴める、シンプルなデザインを心がけましょう。, 下記のWebサイトでは、シンプルなWebデザインが一覧で見られるので、参考にしやすいでしょう。ぜひご覧になってみてください。, 参考：タグが「シンプル」のWEBデザイン一覧｜WEB DESIGN GALLERY FOR WEB DESIGNERS, 最近では、モバイルファーストを意識して、「レスポンシブデザイン」を使うのが基本となってきました。ウィンドウの大きさによって自動的にデザインを切り替えてくれるレスポンシブデザインでは、パソコンだけでなく、スマホなどのレイアウトを必ず確認して、モバイル端末で最適な表示になるよう構築しましょう。なぜなら、パソコン表示と同じ比率でスマホに表示すると、デザインが崩れてしまう可能性があるからです。, 上記のWebサイトの例では、ウインドウサイズにあわせて画像の左右や上下を非表示になるように設定されているので、左のパソコン、右のスマホ、どちらで表示しても違和感はありません。, よくある失敗としては、パソコンでは適切だった横に長いメインビジュアルを、スマホ表示でも同じ比率にしてしまい、小さくなり過ぎてしまうというケース。こうなるとメインビジュアルとしての機能を失ってしまい、トップページの印象はがらりと変わってしまいます。, レスポンシブデザインでサイトを構築する場合は、スマホなど、ほかのデバイスでの表示も確認しながら作成するのが基本です。そして必要に応じて表示サイズを設定することが必要です。 下記のWebサイトでは、レスポンシブデザインでの画像比率について詳しく書かれていますので、ぜひ参考にしてみてください。, 参考：レスポンシブの基本をおさらい：画像の見せ方とレイアウトのパターンを把握しよう｜SINAP, トップページでは、ビジュアルデザインよりも、レイアウトを重視しましょう。なぜなら、知りたい情報がどこにあるか迷ってしまうレイアウトでは、ビジュアルデザインが優れていても、自ずと離脱率が高くなってしまうからです。, よくある失敗としては、ビジュアルデザインに凝り過ぎてしまい、ユーザーの混乱を招いてしまうケース。企業のイメージや目的にマッチした洗練されたデザインは大切ですが、離脱率の高いホームページでは成果が期待できません。, コンテンツの並び順（レイアウト）を改善するだけで、成果が大きく改善される例もありますので、各ページへの遷移に悩んでいるなら改善を検討してみましょう。SEO対策においても、デザインが直接評価の対象になることはありません。, また、ホームページの目的によってレイアウトの向き不向きが変わります。下記のWebサイトでは、目的別のデザインやレイアウトのコツが書かれているので参考にしてみるとよいでしょう。, トップページの背景色やメニューの色は、ホームページ全体の基調となる色です。他のページでも色調は統一させましょう。なぜなら、ページごとに違う色になっていると、ちぐはぐで落ち着かない印象を与えてしまうからです。, 上記のWebサイトの例では、背景色が白、基本色が黒、強調色として赤でアクセントをつけています。社名や見出しに目がいくように、どのページも統一された見やすい配色がされています。, 配色を決めるときは、お客様に感じて欲しい企業イメージを意識しましょう。たとえば治療院なのに不健康な印象を与える暗い色だったり、士業なのにカラフルな配色だったりすると、見ている人に不安感を与えてしまうかもしれません。, よくある失敗としては、鮮やかな色があちこち使われていて、どこに重要項目があるかわかりにくく混乱させてしまうケース、また文字が薄くて読みにくいケースなども挙げられます。, 明るく温かいイメージを与えたいのなら、背景色に薄めの暖色系の色、クールでカッコいいイメージを与えたいのなら、黒や紫を使ったりするのもおすすめです。ホームページの色選びについては、下記のWebサイトに詳しく書かれていますので、ぜひ参考にしてみてください。, ホームページを作ったからには、検索サイトの上位に表示されるようなサイトに成長させたいですよね。ところが、どんな施策を講じても、なかなかトップページが検索結果の上位に表示されない、と悩んでいる方も多いようです。ここからは、SEOに関連する極意をお伝えします。, ばかりに目を向けてしまいがちですが、実際には、トップページ以外からも多くの流入があります。魅力ある下層ページをコツコツと更新してサイト全体の評価を上げていくことが、トップページの順位を引き上げる秘訣なのです。, SEOの効果を最大化するためのトップページのタイトルは、「ビッグキーワード」を含ませ30字以内にしましょう。「ビッグキーワード」というのは、検索回数が多い人気キーワードを指します。ホームページの制作会社であれば、「ホームページ」や「Web制作」などが、それにあたります。, タイトルは訪問者にサイトの内容を知らせるだけでなく、検索エンジンにその内容を伝える役割があります。検索結果で表示されるタイトルの文字数は30字程度と決まっているので、その範囲内でもっとも効果的なタイトルを作成しましょう。, と表示されます。これで29文字です。社名が含まれていなくても、サービス内容やその特徴がひと目よくわかりますよね。, 企業やお店のホームページは、完成したら終わりではありません。トップページに限ったことではありませんが「商品（サービス）の問い合わせを増やしたい」「採用活動で応募者を増やしたい」といった目的を達成するには、自社を正しく分析したり、他社と比較したりしながら、常に改善していくことが大切です。, ホームページ公開後は、Googleアナリティクスなどのアクセス解析ツールを活用して、改善すべきポイントをみつけて「最適化」をはかりましょう。ホームページは公開してからが本当のスタートです。自社のホームページを解析して、どこを改善すべきなのか分析し、常に最適化していくことが成功への近道です。, 改善すべきポイントは、「集客数」「回遊率」「コンバージョン率」の３つです。もし「集客数」が少ないのなら、SEO対策を見直してみましょう。「回遊率」が低いのならトップページのデザインや導線（レイアウト）に問題がないか検討しましょう。また「集客」と「回遊率」が問題ないのに、「コンバージョン率」が低いのであれば、入力フォームに何らかの問題があるのかもしれません。, 失敗しがちな例としては、データに基づかない、見た目ばかり気にして改善してしまうケースです。 どんなに見た目が良くなっても、見る人が増えなければ意味がありません。, サイト内を回遊させる方法については、下記に詳しく書かれていますのでぜひ参考にしてみてください。, トップページによくある「新着情報」ですが、多くの企業のホームページにあるからといって、軽い気持ちでファーストビューに載せるのは危険です。なぜなら、初めて訪問したユーザーとって「新着情報」はあまり重要とは言えないからです。, はじめにお伝えした通り、トップページには、訪問者にひと目でどんなホームページであるかを伝える役割があります。それなのに「〇〇を更新しました」といった新着情報が、トップページのいちばん重要な場所を堂々と占拠していたら、その役割を邪魔することになります。「新着情報」は、ファーストビュー以外の場所に配置するようにしましょう。, 新着情報の更新は、活発な企業活動を印象付けることができますが、ユーザーにとっては必ずしも重要な情報とはいえません。もし、解析結果を見て、自社のユーザーには必要がないと判断するなら、「新着情報」を外すことを検討してもよいでしょう。, トップページは、ホームページ全体の拠点となる重要なページですが、検索結果から流入してくるユーザーの中には、下の階層のページからやってくる人もたくさんいます。そのため、トップページ以外のページを作成する時もこれら12の極意を意識すれば、より成果を発揮できるホームページになるでしょう。, 今回ご紹介したトップページの３つの役割と12の極意を、ぜひ今後のホームページ作りに役立ててください。, 企業経営者必読の「社長のホームページ入門」をプレゼント中（無料） ※本記事は株式会社WEBマーケティング総合研究所提供によるスポンサード・コンテンツです。.
コーヒー道具 こだわり, サムライ アクアマリン ルームフレグランス, 2009年新型インフル 最初の発表 はアメリカ と どこ の国, っポイ 電子コミック, JULIAN CIHI ジャニーズ, Twitter アップデートしてください, 金八 第6シリーズ,