ブログのトップページの作り方|必要なコンテンツや作成ポイントも紹介|BLOGUS当サイトはプロモーションを含みます。CLOSE検索unifyナビゲーション販売開始!プラグインの詳細はこちら。各リンクの配置方法ブログのトップページに入れるべきコンテンツ1ブログのコンセプト画像2新着記事一覧3人気記事のアイキャッチ4カテゴリ別の記事一覧5CVを狙いたい記事ブログのトップページを作る5つのポイントレスポンシブデザインにするCVを過度に狙いすぎない記事をカテゴリで分けるブログカラーで統一感を出す解析・改善を欠かさないブログのトップページ作成をお手伝いします!まとめ続きを見るブログのトップページを作る際、以下のような悩みはありませんか?この記事のまとめトップページにはどんな内容を掲載すればいいの?どんなデザインがいいの?画像やリンクの設定方法が分からない...この記事では、ブログのトップページの作り方から掲載すべきコンテンツまで、画像付きで徹底解説していきます。記事を読めば、トップページ作成に関する上記のような悩みが一気に解決しますよ。ドムwebサイト制作会社代表の私ドムが解説します。この記事を書いた人ドム(工藤逸世)SEOコンサル&WPテーマ開発(株)Woo代表。WordPressを魔改造してSEO戦争する人です。WordPressプラグイン・テーマ「unify」開発者。元WEB系エンジニアでCMSやECサイト開発等をしてました。2018年10月頃にブログ運営を開始。2020年独立し、2021年法人化。SEO検定1級ITパスポート基本情報技術者PHPJavaJavaScriptTypeScriptReactDockerSCSSWordPressスクレイピング(GAS/python)業務効率化ツール開発全般SEOコンサルタント稼げるブログのトップページって?ブログのトップページは第一印象を決める部分です。稼げるブログを見ると、次のような特徴があります。サイト内容が一目で分かるペルソナを絞っているベネフィットを感じられる検索意図の答えを探しやすいファーストビューの画像に興味が湧くドム上記の特徴を、以下のwebサイトを例に解説していきます。マッチングアプリ・結婚相談所の比較メディアM2Wサイト内容が一目で分かる稼げるブログのトップページは、以下がわかりやすい設計になっています。自分(読者)が求める内容があるか例えば、最初に表示される画像やキャッチコピー。テーマにあった画像、シンプルなキャッチフレーズだけで、「提供している情報」「自分(読者)に当てはまるか」を予想できる設計です。アクセスしてすぐにサイトの全体像がわかるようにすることで、トップページ以外も覗いてくれる可能性が高くなります。ペルソナを絞っているペルソナとは、サービスを利用する人物像のことです。ブログで言うと、読者の人物像のことを差します。ドムM2Wでは、以下のような項目をペルソナに設定しています。架空の人物である読者に情報を伝え、悩みを解決していくイメージです。ペルソナを絞ってデザイン設計することで、読者に刺さるコンテンツを提供できます。参考ブログのペルソナの作り方│具体例で分かる読者ニーズを掴むコツベネフィットを感じられるブログで稼ぐには、トップページで「ベネフィット」を読者に感じてもらうことが重要です。ベネフィットとは?ユーザー(読者)が感じるメリットのこと例えば、トップページ上部に表示されているキャッチフレーズ。「あなたは何で出会いたい?」と短いキャッチフレーズでも、「ここを利用すれば出会いのキッカケがあるかも」と思ってもらえるようにしています。読者が得られるベネフィットをしっかり伝えることができれば、満足度も上がり、リピーターとなってくれる人もいるんです。検索意図の答えを探しやすいトップページは、読者が欲しい情報(=検索意図の答え)を見つけやすい設計にしましょう。上記のような要素があることで、読者にストレスを与えず欲しい情報を提供できます。情報を見つけやすいことで「自分にぴったりな情報がある」と、ブログに価値を感じてもらいやすくなるでしょう。検索意図の答えを見つける手がかりとして、ナビゲーションが重要な役割を果たします。ドム当ブログBLOGUSでも使っているナビゲーションを試したい方は、以下のページをご覧ください!unifyナビゲーション|固定ヘッダー挿入WordPressプラグインプラグインの名前はunifyナビゲーション。ページ上に配置するナビゲーションメニューが作成できるWordPress用プラグインです。単純な...unifyナビゲーションを使ってみるunifyストアへ超高機能ナビゲーションプラグイン。ファーストビューの画像に興味が湧くファーストビューとは、ブログにアクセスしたとき、最初に目にする部分のことです。以下の2つを意識して、ファーストビューを作成しましょう。ファーストビューで意識する部分ブログのテーマペルソナに合った画像M2Wのファーストビューは、パートナーと結ばれた未来の自分を想像してもらえるようなデザインを意識して制作しました。男女が楽しそうに会話をしている画像を使用することで、将来待っている幸せな時間をイメージしてもらう狙いがあります。簡単!ブログのトップページの作り方【画像付き】ブログのトップページを効果的に作るには、レイアウトをもとに各パーツの配置が重要です。ここでは、ブログのトップページの作り方を、画像と共に5つのポイントに分けて解説していきます。各リンクの配置方法ドムWordPressの実際の操作画面で解説するので、一緒にやってみましょう。ファーストビュー部分の作り方ファーストビューは、第一印象を決定づけるため、とても重要な要素になります。ファーストビューで、可能な限り「何を提供しているのか」「どんなサイトなのか」を伝えるようにしましょう。具体的なポイントは次の3つです。画像の雰囲気(赤枠)男女が楽しそうに会話をしているキャッチフレーズから予想できること(青枠)出会いのキッカケを提案することがわかるユーザーの次の行動を促すCTA(緑枠)相談所やアプリなど、ユーザーの目的に応じたCTAボタン弊社が運営するM2Wでは「恋」「結婚」がテーマなので、男女が楽しそうに会話している画像を使用して「どんなブログなのか」を伝えています。「あなたは何で出会いたい?」のキャッチフレーズで出会いのキッカケを提案し、CTAに誘導。ファーストビュー直下に、アプリや相談所といったCTAボタンを設置して、ユーザーに行動してもらえるように意識して設計しました。テーマに合った画像やキャッチフレーズを使用することで、ユーザーに興味を持ってもらえる可能性が高くなります。ドムファーストビューは「欲しい情報が見つかるかも」と期待感を持ってもらうことが大切です。ブログのテーマや雰囲気、そしてペルソナを意識して、ファーストビューを作成しましょう。レイアウトの作り方レイアウトは、各コンテンツを見やすく、アクセスできるように整理して並べたものです。代表的なレイアウトは3つあります。シングルカラムそれぞれのパーツを縦並びに配置しているマルチカラム2カラム、3カラムなど複数のカラム(列)で構成されているグリッドレイアウト複数のコンテンツをカード状に並べたレイアウトブログで扱うテーマやコンテンツ量でレイアウトは変わりますが、おすすめはシングルカラムレイアウト。シンプルなレイアウトかつ、モバイルでもレイアウトが変わらないため、訪れたユーザーも情報を探しやすいでしょう。ドムメンテンナンスや更新作業も行ないやすいというメリットもあります。ヘッダー部分の作り方ヘッダーとは、簡単に言えばページ上部のことを差します。ドム以下の赤枠から画像までがヘッダーです。ヘッダーの役割や目的は次の3つ。誘導したいページを掲載するどんな情報があるか伝えるユーザーが欲しい情報にたどり着きやすくするポイントは、クリックした先に「どんな情報があるのか」を予想しやすいことです。ドムまずはブログの顔となるヘッダー画像を設定しましょう。「新規画像を追加」をクリック「ファイルを選択」ボタンをクリックし、ヘッダーに使用する画像ファイルをアップロード使用する画像ファイルを選択し、「選択して切り抜く」をクリック「画面切り抜き」画面でトリミングを実行ヘッダー画像の設定が完了するとこのように表示されます。ドムおしゃれな画像の作り方は以下に載せています。参考ブログのヘッダー画像のサイズと作り方を解説|簡単におしゃれなトップページができる!ヘッダーメニューの設定つづいて、画像上部にヘッダーメニューを設定しましょう。読者の検索意図から、目的のページへと誘導します。ドム以下の記事で、ヘッダーメニューの設定方法について画像付きで書いています。参考WordPressはヘッダーが重要!画像・ロゴ・メニューの設定方法と注意点ただ、自分で難しい設定をするよりも、プラグインを入れちゃったほうが正直ラクです。ドムこのヘッダーメニューを、初心者でも簡単・オシャレに作れるプラグインを開発しました!機能や使い心地が気になる方は、以下の記事で詳細をご覧ください!unifyナビゲーション|固定ヘッダー挿入WordPressプラグインプラグインの名前はunifyナビゲーション。ページ上に配置するナビゲーションメニューが作成できるWordPress用プラグインです。単純な...unifyナビゲーションを使ってみるunifyストアへ超高機能ナビゲーションプラグイン。フッター部分の作り方フッターは、サイト全体の最後に表示される部分です。フッターの主な役割は次の2つになります。「次の行動」の選択肢を提案するヘッダーに掲載できなかった情報を追加するドムM2Wのフッターはこんな感じです。フッターは一番下にある部分なので、読者がブログに興味を持ってくれている可能性が高いんです。M2Wでは、サイト全体のリンクをカテゴリに分けて記載したサイトマップを配置しています。他にも、SNSのリンクを掲載するのもおすすめです。ドムでは、一緒に設定していきましょう。編集画面で「新しいメニューを作成しましょう」をクリックメニュー名を入力して「メニューを作成」をクリック固定ページ・投稿・カスタムリンク・カテゴリーの中から、フッターで表示したい項目を選択メニュー名の欄に名前を入力し、青色の「メニューを保存」をクリック設定が完了すると、メニュー構造の下にメニュー項目が追加されます。読者が求めている情報にスムーズにアクセスできるよう、関連記事や外部サイトへのリンクを配置します。リンクは大きく分けて以下の3種類。内部リンク関連記事や人気記事などブログ内のページ同士を繋げるリンクのこと外部リンク外部のサイトに向けたリンクのことページ内リンクページ内の指定部分(見出しなど)に向けたリンクのこと関連する記事同士を内部リンクで繋げたり、関連する外部サイトを外部リンクで繋げたりすることは、SEO効果も期待できます。ドム各リンクの設置方法を見ていきましょう。画面上のメニューにあるリンクのアイコンをクリックURLの入力欄が表示されたら、リンク先のURLを入力URLの入力が完了したら、エンターマークをクリック画像のように、文字が青くなりクリックできる状態になれば、リンク設置完了です。表示された候補ページから任意のページを選択エンターマークをクリックし、リンク設置完了ページ内リンクの設置方法ドムこちらはブロックエディタで解説します。入力が完了したら、エンターマークをクリックするとリンク設置完了です。ブログのトップページに入れるべきコンテンツブログのトップページに配置するコンテンツは、読者に興味を持ってもらうために大切な要素です。トップページに欠かせないコンテンツは以下の5つ。アイキャッチカテゴリ別の記事一覧CVを狙いたい記事ドム分かりやすいようにイメージ画像も載せて解説していきます。1ブログのコンセプト画像コンセプト画像は、テーマや目的を伝えるための大切な要素です。コンセプトに合った画像を使用することで、ブログのテーマや雰囲気を視覚的に伝えられます。M2Wでは、「1人よりも2人の方が楽しい」をコンセプトに上の画像を作成しました。キャッチフレーズで出会いのキッカケを提案し、サイトの目的を伝えられるように意識しています。目から入ってくる情報は、記憶に残りやすいものです。ドム読者の記憶に残るような、ブログのコンセプトに合った画像を選びましょう。読者に「新しい情報を載せました」と伝えることができるエリアです。定期的にブログが更新されていることを伝えられる部分でもあります。ファーストビューの近くやメインコンテンツなど目立つエリアに新着記事を表示しましょう。「このブログだと新しい情報が手に入る」とベネフィットも伝えられるので、スクロールになる前に新着記事を掲載するのがおすすめです。3人気記事のアイキャッチ人気記事や読んでもらいたい記事は、アイキャッチ画像とタイトルを一緒に表示しましょう。記事に合ったアイキャッチ画像を使用することで、次のようなメリットがあります。記事の内容を簡潔に伝えられるユーザーの興味を引くユーザーの記憶に残りやすいアイキャッチ画像を使用することで、視覚から関心を持つ読者が増え、記事のPV率アップが期待できます。参考ブログのアイキャッチ画像は重要!作り方のポイントとSEO効果を解説ドムアイキャッチ画像はCanva等のツールを使うと簡単に作成できます。公式サイトはこちら4カテゴリ別の記事一覧カテゴリ別の記事一覧は、読者が求めている情報や関連記事を探しやすくするためのものです。カテゴリ別に記事一覧を設置することで、次のようなメリットがあります。情報を見つけやすく回遊率が向上カテゴリ別に分けることでSEOにも有利カテゴリ別に整理することで、他の記事にも関心を持ち、読んでくれるようになります。滞在時間や回遊率も向上するので、SEOから見ても効果的です。5CVを狙いたい記事メール登録や商品の購入など、CVを狙いたい記事は目立つ場所に配置しましょう。以下のような場所です。「フッターに設置すると一番下でCVが狙えないのでは?」と思われる方もいるかもしれません。CV狙いの記事をフッターの上部に置く理由は、トップページを一番下まで見ている人は、次の行動(購入・クリック等)も起こしやすいからです。一通りコンテンツを見て興味を持っている状態の読者に、取ってほしい行動をアピールできる位置と言えます。ブログのトップページを作る5つのポイントブログのトップページを効果的に作るためには、以下のポイントが重要です。レスポンシブデザインにするCVを過度に狙いすぎない記事をカテゴリで分けるブログカラーで統一感を出す解析・改善を欠かさないドム読者にとって訪問しやすいトップページのためのポイントを解説していきます。レスポンシブデザインにするレスポンシブデザインとはデバイスごとに自動で最適なサイズを表示してくれるデザインのこと近年では、スマートフォンやタブレットといったモバイルデバイスでWebサイトにアクセスするユーザーが多くなりました。レスポンシブに対応していない場合、モバイルデバイスだと「文字が小さい」「画面が見切れている」など非常に見にくいブログになってしまいます。2015年にGoogleがモバイルフレンドリーアップデートを行いました。このアップデートは、レスポンシブに対応したページの検索順位を引き上げるというものです。参考モバイルファーストインデックスとは|いつから?確認方法は?レスポンシブデザインでブログを作ることは、読者の満足度を高めるだけではなく、SEOにも有利になります。ドム稼ぐブログを作るには、レスポンシブデザインは必須の要素です。CVを過度に狙いすぎないCVを促すことは大切なことですが、過度にCVを狙いすぎるのは逆効果です。””1ページに10個や20個も広告があったら、そのページを見たくなくなりますよね。ブラウザバックして、他のサイトを探すはずです。Web広告と同じで、CVを過度に促すことは不信感やストレスを与え、離脱率を高めてしまいます。読者が求めている情報の提供を優先しましょう。記事をカテゴリで分ける記事をカテゴリごとに分けることで、読者が興味のある情報を探しやすく、簡単にアクセスできるようになります。それだけではなく、同じカテゴリ内に同ジャンルの記事が配置してあれば、別の記事を読んでもらえる可能性も。カテゴリごとに分けることで、GoogleやYahooなどの検索エンジンに評価されやすくなりSEO効果も期待できます。カテゴリを細かくしすぎるのはユーザーが探しにくくなるので注意しましょう。ドム長くても3クリック以内で目的のページにたどり着くようなカテゴリ分けを意識するのが大切です。ブログカラーで統一感を出すトップページだけに限らず、ブログのデザインに色の統一感は非常に重要です。統一感がないと、読者は視覚的な違和感を持ち、ブログから離脱する可能性が高まります。逆に、統一感があるとサイト全体が見やすくなり、コンテンツを読んでもらいやすくなります。ドムちなみにこのブログ「BLOGUS」は、薄い緑をブログカラーとして統一しております。使用するカラーはテーマやコンセプトで変わってきますが、目に優しいシンプルなカラーが扱いやすいでしょう。カラーを統一しても使用している色が派手だと、目に入ってほしい情報が読者に伝わりません。解析・改善を欠かさないブログは作って、コンテンツを提供して終わりではありません。アクセス数の増加やCV率の向上には、解析と改善が不可欠です。Consoleなどから得たデータをもとに、改善を続ける必要があります。トップページだけではなく各コンテンツの分析も忘れずに行ないましょう。異なるデザインやコンテンツを用意して、どちらがアクセス・CV率が高いかを検証する「A/Bテスト」の実施なども効果的です。ドムWordPressを使っている方は、キーワードごとに順位やCV率などの動向を追える「unifyキーワード」が便利です!【作業時間30%削減】キーワード管理xGoogle連携プラグインをリリースしました!キーワード管理や順位計測などを、WordPress上で一元管理できるようにするプラグインです。弊...キーワード周りの作業時間を30%削減する。unifyキーワードを無料で試すunifyキーワードは、ブログ運営の無駄を無くすために作られたWordPressプラグインです。「いろいろ試してみたけど、成果がでない」ドムそんな方は弊社がトップページの作成をお手伝いします。WordPressカスタマイズ弊社はSEOコンサルやオウンドメディア運用を専門としている会社です。これまでも数多くのWebサイトを制作した実績があります。ドムトップページのみのご依頼やカスタマイズなど、ご希望に合わせてお見積りも可能です!ぜひご相談ください。まとめファーストビューで「どんなブログなのか」を伝えるレスポンシブデザインで設計するコンテンツはカテゴリごとに整理して配置するブログのトップページは、ユーザーにとって第一印象を決める重要な要素です。各コンテンツをバランスよく配置して、読者にとって分かりやすいレイアウトやデザインを意識しましょう。読者の満足度が向上すればリピータが増え、結果的に稼げるブログへと成長するはずです。ドムトップページ作りに迷ったら、ぜひ一度弊社にご相談ください。WordPressカスタマイズキーワード周りの作業時間を30%削減する。unifyキーワードを無料で試すunifyキーワードは、ブログ運営の無駄を無くすために作られたWordPressプラグインです。