GENSEN：最高峰TCDポータルサイトの秘訣！スポンサー広告、絞り込み機能他丁寧に解説

はじめに：GENSEN 概要

- YouTube

YouTube でお気に入りの動画や音楽を楽しみ、オリジナルのコンテンツをアップロードして友だちや家族、世界中の人たちと共有しましょう。

youtu.be

広告収益ビジネスモデルを構築する
"国内初"の情報ポータルサイト専用WordPressテーマ

専門性の高い情報を発信して膨大なアクセスを集める人気ポータルサイトは、
アドセンスやアフィリエイトなどの広告収入に留まらず
優良なスポンサーを獲得し、強靭な広告収益ビジネスモデルを構築することができます。

宿・ホテル・観光地などを紹介するポータルサイト、不動産の物件情報検索サイト
美容院や脱毛サロンを紹介する大規模なアフィリエイトサイト
ファッションやグルメ情報を提供する情報サイトなどに活用できる
国内初の高性能な検索機能を搭載したポータルサイト専用WordPressテーマ「GENSEN」が誕生しました！

引用元：GENSEN公式サイト

自由度の高い検索機能

「キーワード（and・or）」＆「カテゴリー」の組み合わせが可能な自由度の高い検索機能

人気のポータルサイトは、サイトコンセプトが明確で、情報量があり、ユーザーが知りたい情報にたどり着けるように「検索機能が備わっている」という特徴があります。

ポータルサイトを構築するために開発された「GENSEN」には、キーワード＆カテゴリーの組み合わせができる自由度の高い検索機能を搭載することで、どれだけ膨大な情報を格納していても、適切な情報を”瞬時”にユーザーに届けることが可能になりました。

キーワード検索は「熱海　露天風呂」といった複合ワードで検索した場合、双方の語句を含むページを表示することができ【and検索】と、どちらか一方の語句を含むページを表示することができる【or検索】をユーザー側で選択することができます。

また、宿・ホテル、ショップの紹介や地域情報を掲載するポータルサイトの場合、メインカテゴリーを「東北」。サブカテゴリーを「青森県」「岩手県」「宮城県」「秋田県」「山形県」「福島県」と設定することで【エリア検索】として活用することができます。

「キーワード検索」＋「エリア検索」＋「カテゴリー検索」＋「カテゴリー検索」といった最大4つまでの組み合わせ（キーワード検索1つだけでもOK）が可能なため、あらゆるジャンルのポータルサイトでも活用いただける検索機能に完成させました。

高度な検索機能を搭載した国内初のポータルサイト構築用WordPressテーマ

「GENSEN」のデモサイトでは、おすすめの温泉宿を紹介するポータルサイトをイメージして作成していますが、掲載画像やサイト全体のカラーを変更するだけでそのイメージは一新します。

サイトカラー（メインカラーの設定・第２カラーの設定・記事本文内のリンク文字色）も、TCDテーマオプションからカラーピッカーを使った直感的な操作で設定が可能です。

また、キーワードやカテゴリの自由な組み合わせが可能な検索機能と、任意のタグから絞り込み検索が可能な機能を搭載しているため、不動産の物件情報検索サイト、美容院や脱毛サロンを紹介する大規模なアフィリエイトサイト、ファッションやグルメ情報を提供するポータルサイトなどにも最適なテーマになっています。

通常、このような高度な検索機能付きのポータルサイトを作るためには、HTML+CSSやJavaScript、jQuery、PHPやRubyなどの総合的な知識や技術を必要とするため、ホームページ制作会社に依頼しようとすると、100万円単位の見積もり価格が上がってきます。

しかし、国内初のポータルサイトWordPressテーマ「GENSEN」を活用することで、驚くほど低コストで高度な検索機能を搭載したポータルサイトを構築することが可能です。

引用元：GENSEN公式サイト

見込み客を顧客に転換し、ウェブサイトの使い勝手に満足してもらうためには、優れたナビゲーションさえあればいいと考えている人もいるかもしれません。しかし、それは間違いです。内部検索が必要なのです。

しかし、それだけではありません。内部検索は、あなたのビジネス、ウェブサイトのコンテンツ、顧客自身のニーズ、欲求、習慣を反映するように変更する必要があります。

統計では、少なくとも50％の買い物客が、オンラインビジネスの内部検索機能を使って商品を探すことを好みます。

検索機能を使わない場合に比べて、見込み客のコンバージョンが少なくとも4倍以上向上するとの報告があります。

検索回数が増えるほど、注文の平均額は増加します。

このことから、ビジネス・オーナーが自社ウェブサイトの内部サイト検索を最適化することを見過ごすことは、事実上、許されないことです。

他の最適化施策と同様に、検索機能のパフォーマンスを向上させることは、コンバージョン率の向上につながります。結局のところ、サイト内検索を微調整することで、より多くの見込み客が必要なものを見つけて購入できるよう、より良い結果を表示する必要があるのです。

しかし、そうなる前に、見込み客の行動を理解する必要があります。

見込み客がサイト内検索を利用する理由は、次のとおりです。

サイト内検索が期待通りに動作しないことに直面したときの彼らの驚きは想像に難くないでしょう。Googleは、彼らや私たちを甘やかしました。私たちは、必要なものを素早く、一回で手に入れることに慣れています。もし、その時に手に入らなかったら、手に入りそうな提案を利用します。

しかし、サイト内検索がうまくいかないことがあまりにも多いのです。そして、そのためにビジネス・オーナーが損失を被っているのです。

最適化するには、変更を加える必要があります。ここでいくつかヒントをご紹介します。

見込み客の習慣を学ぶ

見込み客が何を探しているのかを知ることは、当然の第一歩です。

ログを調査し、Google Analyticsのサイト検索を参照してください。よくある誤字脱字や文法的な間違いが、見込み客の検索や購入を妨げていないか？業界向けの辞書や類語辞典を参照します。

検索エンジンを修正し、彼らの（正しいまたは間違った）クエリに基づいて関連する結果を得るために、あなたのコンバージョン率が上昇するのを見ます。

見込み客が検索エンジンに何を入力して、あなたのウェブサイトにたどり着いたかを見てみましょう。

彼らはおそらくあなたのサイトの検索機能にも同じ言葉を入力するでしょうから、それに備えましょう。

ヘルプを提供しましょう

見込み客はグーグル検索に慣れているかもしれませんが、貴社の内部検索に慣れているとは限りません。オートコンプリート、ラジオボタン、検索結果の絞り込み、プルダウンメニューなどを用意し、使い勝手をよくしてあげましょう。また、前回の検索結果や今後の検索候補を表示することで、見込み客をコンバージョンに導くことができます。

カタログを洗練させましょう

実際の在庫から何かを足したり引いたりする必要はありません。その代わりに「抽出、正規化、分類」する必要があります。各アイテムの属性を抽出し、全商品に共通する標準的な記述語を決め、それを使って有機的にグループ化するのです。

キーワードだけでなく、数字やフレーズも検索対象にすること。SEOは単一単語だけでなく、商品番号も対応する単位を見つけるために活用されることが多いようです。

在庫以外の情報も含めましょう

見込み客が検索するのは、商品だけではありません。新規顧客は、配送、プライバシー、返品ポリシー、その他の消費者関連情報に関心を持つかもしれません。もし、それが見つからなければ、貴社からの購入を断念するかもしれません。マーケティング活動を最大化し、広告ツールとして活用するのであれば、他の種類の「雑多な」しかし有用なファイルを成果として含めることは損にはならないでしょう。

結果の表示の仕方を考えましょう

検索結果をどのように表示するかは、検索結果そのものと同じくらい重要です。

見せ方を決める必要があります。

結果の数

1ページに表示される検索結果の数は？1ページに何十件もの検索結果が表示されるような無制限のページは、見込み客の興味をそぐ傾向があります。見込み客は、果てしなく続く結果を見て、なぜ検索機能を使ったのか...サイト全体が "関連する "と分類されて返されるのなら...と疑問を持つことになりかねません。

・絞り込み機能

GENSENでは下の引用のように「絞り込み機能」が搭載されており、これは結果の見せ方にポジティブに働くでしょう。

任意で設定した「タグ」から詳細な抽出ができる、高性能な「絞り込み検索機能」を搭載

「GENSEN」には、キーワード・カテゴリーの組み合わせによって一覧で表示される検索結果ページから、さらに詳細な抽出ができる「絞り込み検索機能」を搭載しました。

例えば、温泉検索サイトであれば「単純温泉」「天然ラジウム泉」「硫黄泉」など成分や特徴を、不動産の物件ポータルサイトであれば「1K」「1DK」「1LDK」といった間取りを「タグ」で設定しておきましょう。

これにより、ユーザーのこだわりに応えるための詳細な情報を抽出することができます。

また、ファッション系のECサイトであれば「ピンクベージュ」「ローズレッド」「ガーネット」などのカラーに対応した情報を抽出させたり、グルメ情報サイトであれば「個室あり」「子供連れ」「前面禁煙」などの条件に合った「高性能な絞り込み検索」ができるため活用範囲を限定しません。

「GENSEN」には、通常のブログ記事ページの他に、紹介ページを作ることができるカスタム投稿ページを用意しており、どちらのページにも「タグ」を設定することができます。「記事ページ」と「紹介ページ」の「どちらを絞り込み検索の対象するか？」の選択も、テーマオプションからチェックするだけで設定は完了します。

引用元：GENSEN公式サイト

関連性

消費者がどの検索結果が最も正確かを識別できるよう、ランキングシステムを導入していますか？検索結果は、検索頻度やコンバージョン率を反映していますか？顧客行動から得られる情報に応じて、検索結果のランキングを再構築することを検討してください。

顧客が探しているものを見つけるためのフィルターがあるか？関連性、価格、アルファベット順、人気順などのソートオプションは、一般的にビジネスで使用されています。

お客様のビジネスを考慮し、お客様の検索習慣を予測した上で、適切なフィルターを決定しましょう。例えば、洋服を販売している場合、サイズ、色、価格を追加するとよいでしょう。自動車部品の販売業者であれば、メーカー、モデル、年式で検索結果をフィルタリングすることもできます。

視覚的な表現

テキストだけの検索結果は、あまり想像力をかき立てません。また、注目を集めることもできません。そこで、商品画像と説明文を一緒に掲載することで、検索結果を魅力的なものにしましょう。また、商品の近くに価格が表示されることで、顧客は時間の節約にもなり、「今すぐ購入」ボタンを押すことで報われるかもしれません。

トップページの作り方

表示順も自由自在、多様なコンテンツでトップページを構成することができるコンテンツビルダー

ポータルサイトのトップページは、アクセスしてきたユーザーが「自分の興味のあることが掲載されているか？」を判断する重要なポイントになります。

そのため、ユーザーが最初に目に付く「GENSEN」のトップページは、ブラウザ幅いっぱいに広がる画像や動画を設定することが可能なアイキャッチを実現することで「どんな情報を提供しているサイトなのか」を一目で伝えることができます。

また、おすすめの紹介ページにリンクさせることでポータルサイト内を回遊させたり、スポンサー広告枠やおすすめ商材のアフィリエイトリンクを貼ることが可能な「CTAボタン」を設置することができます。

トップページを構成する「紹介コンテンツ」「カルーセルスライダー」「お知らせ一覧」「カテゴリーリスト」「最新ブログ記事一覧」「フリースペース」は、必要に応じて表示・非表示を選択することができます。

ポータルサイトを活用するユーザーの興味を引き込む【5つのコンテンツ】は、ドラッグ＆ドロップの直感的な操作で、表示する順番も自由に移動することができるため、世界1つしかないオリジナルのポータルサイトを構築することができます。

引用元：GENSEN公式サイト

ここでは、コンバージョン率を高めるための重要なデザイン原則をご紹介します。

Fレイアウトの適用を検討する

Fレイアウトとは、オンラインコンテンツを読むときのユーザーの視線の動き方のことです。Fパターンとは、ユーザーがオンラインコンテンツを読む際の視線の動き方のことで、ほんの数秒のうちに、ウェブサイトのコピーやその他のビジュアル面、すべてをスキャンします。

その順序は次のとおりです。

Fパターンは、必ずしもF字型に沿ったものではないことに注意してください。Fパターンは必ずしもF型に沿ったものではありません。これがランディングページにどう適用されるのか、不思議に思われるかもしれません。通常、視聴者の視線はページの左上から始まって、コンテンツ全体を見渡します。

ですから、忙しいランディングページで、特定の要素（たとえば、カウントダウンタイマーなど）を目立たせたい場合は、それを左上に配置する必要があります。

そして、ユーザーをCTAに直接誘導する正確な流れと視覚的な階層を持つページをデザインします。

ネガティブスペースを活用する

ネガティブ・スペースとは、ウェブページの中で特定のコンテンツで占められていない領域のことです。ウェブページの美しさと同様に、各要素によって満たされている物理的なスペースも意識する必要があります。コンバージョンを向上させるためには、ミニマルなデザインが鍵となります。

ネガティブスペースを適切に実装することで、シームレスなユーザーエクスペリエンスを実現します。視覚的な階層を構築する際に欠かせないツールであり、ウェブデザインに欠かせないものである理由は以下の通りです。

3分の1の法則を適用する

3分の1の法則をウェブデザインに応用することで、優れたプロポーションと美学を生み出すことができます。驚くほど美しいレイアウトを実現し、コンバージョン率を高め、Webサイトへの訪問者を増やすことができます。

3分の1レイアウトの基本的な考え方は、理想的には9つのセクション（縦2行、横2行）に分割することです。

通常、3分の1の法則に基づいたグリッドをウェブサイトのレイアウトに適用すると、どの要素を配置する必要があるのか、（グリッド上に配置する必要がある要素は何か）を見つけるのに役立ちます。

ウェブサイトの速度を最適化する

最近では、多くの人がネットサーフィンをするときにせっかちになっています。調査によると、ページのロード時間が1秒でも遅れると、コンバージョン数が7％減少するそうです。つまり、ページの読み込み速度に関しては、1秒1秒が重要なのです。

正しい方法で使用する場合、ランディングページはあなたのビジネスのための多くのキャッシュフローを生成することができるトラフィックの大きな塊を与えることができます。

しかし、何よりもまず、非常に効果的なランディングページを作ることを学ぶ必要があります。ここでは、その重要な特徴をいくつか紹介します。

ランディングページは、

コール・トゥ・アクションボタンを強調する

コールトゥアクションボタン（CTA）とは、読者に何かをしてもらいたい状況のことです。読者がどれだけ情報を持っていても、少し背中を押してあげる必要があります。そのため、あなたの戦略に沿ったCTAを作成する必要があります。

便利なCTAボタンは、簡単にクリックでき、目立つように、背景とテキストのコントラストが優れている必要があります。また、大胆でパンチの効いた見出しと、的確でポイントを押さえたボタンテキストが必要です。

CTAに関して下記記事でまとめています。

【最新版】CTA（行動喚起）機能の使い方！ABテスト・広告機能が豊富なWPテーマとは？

はじめに ブログにお越しいただいてありがとうございます。 本記事では、 といった方におすすめの記事となっています。 当サイトの管理人は Adminそれでは早速CTAについて解説していきましょう Cal ...

続きを見る

取り入れる画像を最適化する

より多く売るためには、高品質の製品画像を作成する必要があります。ここでの考え方は、できるだけ個人的な感覚にすることです。ですから、あまりに「堅苦しい」当たり障りのない画像にすると、潜在顧客が離れていってしまうのでやめましょう。その代わり、魅力的な画像を作ることに集中しましょう。

信頼を築くために社会的証明を提供する

人々は、最終的な購入を決定する前に、お客様の声やレビューなどの社会的証明を考慮します。これらは、Webサイトのコンバージョン率を向上させます。これらの提案は、通常、潜在顧客が初めて購入するときに閲覧されることに留意し、これらは、あなたのウェブサイト上で目に見えるように強調されるべきです。

あなたのソーシャルメディアのアカウントと活動も、社会的証明と考えることができます。あなたがまだ持っていない場合は、潜在的な顧客はあなたが他の人々と係合するのを見ることができるので、これはあなたの信頼性を与えるため、そこに別のソーシャルメディアチャンネルであなたのソーシャルメディアの存在を作成する必要があります。

潜在顧客は、あなたが他の人と関わっているのを見ることができるので、あなたの信頼性を高めることができます。おそらく、彼らの友人や同僚があなたのことを知っていて、あなたのことを話しているかもしれませんし、あなたが信頼でき、信用できるというサインとして考えるかもしれません。

トップページで優れている他TCDテーマの記事も併せてご覧ください。

映えるテーマ「TENJIKU」人気店を作るWordPressテーマの購入手順まで徹底解説

  今回は、TCDテーマの「TENJIKU」を実際に使ってみた感想をレビューとしてご紹介したいと思います。   結論としては、レストラン・料理店に必要な魅力的な画像を引き立てるデザイン、料理を思わず食 ...

続きを見る

スポンサー広告スペース

スポンサー広告スペースとして活用できるトップヘッダーで広告収益ビジネスモデルの構築を！

大手ポータルサイトでは、インプレッション（広告の表示回数）に対して、0.5×2.0程度の掲載費用が相場になっています。

サイトのジャンルやユーザー属性によって変わってきますが、例えば、1ヶ月に10万インプレッションで5万円～20万円、100万インプレッションで50万円～200万円の広告収益が見込めるということです。

つまり、月に数十万、数百万、もしくは数千万といった膨大なアクセスが集まり、ユーザーとスポンサーにとって有益なメディアを所有することで、毎月安定的なキャッシュフローが得られる”広告収益ビジネスモデル”を構築することが可能になります。

ポータルサイトにおいて、ユーザーが最初に目にするトップページヘッダーは”一等地”にあたりますが、「GENSEN」のトップページヘッダーは、最大5枚までの画像スライダーを設定したり、背景に動画を表示させることができます。

また、キャッチフレーズや説明文、URL設定ボタンを設定することが可能なため、スポンサーのお店・商品・サービスを魅力的に紹介するための”広告スペース”として活用することができ、広告主の利益に貢献することで広告掲載単価を高めていくことができます。

引用元：GENSEN公式サイト

ほぼすべてがオンラインに移行して以来、仮想イベント業界は、パンデミックの間に繁栄してきました。このため、スポンサーにとっては新たな機会が数多く生まれ、バーチャル・イベントに投資することにメリットを感じています。

よく練られたスポンサーシップ・パッケージがあれば、腰を据えて、案件がスポンサーを呼び込むのを待つことができます。しかし、どのようにすれば、より効果的なパッケージを作成できるのでしょうか？

スポンサーが本当に必要としているものは何でしょうか？そして、なぜ彼らはそのイベントに投資するのでしょうか？

答えはとても簡単です。スポンサーは、自らの存在感を高め、リードを生成し、業界のオピニオンリーダーとしての地位を確立することができます。

あなたのスポンサーシップ・パッケージを際立たせるのは、競争力のある価格設定と、いかにクリエイティブにテクノロジーの境界を押し広げるかということです。何を提供すべきかを知っていれば、スポンサー、バーチャル・イベント、観客の三者にとってWin-Winの取引を簡単に作ることができます。

これは、スポンサーを獲得するための比較的新しい方法であるため、最初からすべてをうまくやるのは困難な戦いのように思えるかもしれません。そこで、バーチャル・イベント・パッケージを魅力的な取引にするための素晴らしい材料をすべて揃えました。

ここでは、企業がなぜバーチャルイベントのスポンサーになるのか、どのようにイベントに付加価値を与えることができるのか、そして強力なスポンサーシップ・パッケージを作成する際に何を考慮すべきなのかを探ります。

なぜ企業はバーチャルイベントのスポンサーになるのでしょうか？

企業がイベントのスポンサーになる理由を聞かれたとき、私たちの頭に最初に浮かぶ言葉は「リード」です。そしてそれは理にかなっています。

企業がデジタル・イベント・パッケージのスポンサーになる2つ目の理由は、ブランドの認知度です。電子メールや通知、広告などのツールは、スポンサーがその存在をコントロールするのに役立つのです。

スポンサーシップ・パッケージによって、貴社のバーチャル・イベントはどのような恩恵を受けることができるでしょうか？

スポンサーシップ・パッケージは、新しい扉を開き、デジタル・イベントの質を向上させることができます。決定的なメリットのいくつかをご紹介します。

信頼性の向上

イベントの信頼性を高めたいのであれば、スポンサーを獲得することが有効です。スポンサーもそれを信じて、あなたのイベントを支援するために大金を出していることが検証されます。これは、あなたのバーチャルイベントの信頼性を一段と高め、あなたが結果を出すイベントを主催していることを示すものです。バーチャルイベントの参加者の信頼が高まり、イベントへの申し込みが増えることになります。

参加者を増やす

スポンサーシップ契約により、聴衆の数を飛躍的に増やすことができます。あなたのイベントには多くのスポンサーがつき、その人たちが参加することになります。より良い技術と企画で、より多くの人々を収容することができます。これは、スポンサーシップ契約によるサポートと金銭的な恩恵のおかげです。

予算が増える

スポンサーを得ることで、予算が増え、イベントをより大きく、より良いものにすることができます。そして、スポンサーを得るための最良の方法は、ご想像のとおり、スポンサーシップ・パッケージです。予算が増えれば、観客に体験してもらいたいことをすべて企画することができます。より優れたテクノロジーから最高のイベントエンターテインメントまで、参加者はすべてを手に入れることができるのです。

スポンサーシップパッケージを成功させるための7つのヒント

スポンサーの目標との共通点を見出す

まず最初に、スポンサーの目的があなたのイベントの目的と合致しているかどうかを確認します。あなたのイベントに関連し、あなたと同じような、または補完的な聴衆を持つスポンサーを得ることができます。観客は、イベントとスポンサーの間に自然なつながりがあると感じられるはずです。そうすれば、関係者全員にとってまとまりのある体験になるはずです。

ここで、簡単な経験則を紹介します。イベントの規模が大きくなればなるほど、他業界のスポンサーに手を広げることができます。小規模なバーチャル・イベントの場合は、自分の業界に基づいたスポンサーを探します。

スポンサーシップの目的を設定する

なぜそのようなことをするのか、その目的を理解することが大切です。そうすることで、戦略的な計画が立てやすくなり、さまざまなタイプのスポンサーシップ契約を結ぶための明確な見識を得ることができます。この情報は、スポンサーが選択できるように、段階的なパッケージとしてまとめることができます。

イベントを収益化することが最大の目標である場合、スポンサーは観客を惹きつける役割も担います。このようなスポンサーとは、長期的なパートナーシップを検討するのがよいでしょう。このような契約のパッケージは、よりオープンエンドで、スポンサーを維持することに重点を置いています。

ブランディングのチャンスに目を配る

多くのスポンサーは、ブランド露出のみを目的としているかもしれません。このようなスポンサーには、このようなニーズに基づいたパッケージを構築することが理にかなっています。

モバイルイベントアプリのスポンサーシップをアップグレードする

モバイルイベントアプリに追加のスポンサーシップパッケージを作成することで、スポンサーのリーチを広げることができます。ロゴ、モバイル通知、コマーシャルビデオなどは、スポンサーが喜ぶ素晴らしいオプションです。スポンサーコンテンツを適切に配置することで、適切な視聴者を簡単に呼び込むことができます。

バーチャル展示会専用パッケージのデザイン

バーチャル展示会は、スポンサーシップコンテンツを試すのに最適な場です。リードの生成と販売の促進は、この形式の最も強力な特徴の一つです。

コラボレーションとコントリビューションのためのオプションを提供する

スポンサーがイベントに直接貢献する機会を逃さないようにしましょう。ゲストスピーカーと一緒に価値あるセッションを提供することができます。また、独占インタビュー、ゲーム、投票など、聴衆の興味を引くような企画を提供することも可能です。このような要素をパッケージ化することで、収益化が可能になります。

柔軟な価格設定

1つのパッケージがすべてにフィットするわけではありません。スポンサーが自分の目標に合ったパッケージを選べるように、選択肢を用意しましょう。そのためには、さまざまなブランディング機能を備えた価格帯のパッケージを提供することが有効です。競合他社の価格も考慮に入れて、パッケージの金額的な価値を見極めましょう。

スポンサーに予算とニーズについて話すことで、オーダーメイドのフィット感を生み出すことができます。スポンサーごとに個別に検討し、ケースバイケースで価格を設定するとよいでしょう。

モバイルフレンドリー（レスポンシブデザイン）

スマホ表示に最適化されたフルードグリッド仕様の美しいレスポンシブデザイン

スマートフォンの普及率が70%を超える現在では、PCユーザーだけではなく、スマホユーザーに対しても美しいレイアウトで引き付けるデザイン性とUI（使いやすさ）が求められます。

また、Googleはスマホでの表示やコンテンツの評価に基づいてランキングを決定する「モバイルファーストインデックス」を発表しているため、もはや【スマホ最適化】は絶対に外せない要素になっています。

そのため「GENSEN」では、ただ横幅のサイズが伸縮するだけのレスポンシブではなく、自動的にレイアウトを組むフルードグリッド仕様を採用し、パソコン、タブレット、スマホなどの各デバイスの幅に柔軟に対応し、美しいレイアウトと使いやすさを実現しております。ぜひお手元のスマートフォンでデモサイトをご覧ください。

引用元：GENSEN公式サイト

マルチデバイス文化の高まりにより、あらゆるウェブサイトのデザインにおいて、レスポンシブ・ウェブデザインは標準的な手法となりました。レスポンシブWebサイトのデザインは、もはや「あったらいいな」ではなく、「なくてはならない」機能なのです。

レスポンシブWebデザインの具体的な方法について説明する前に、まずはレスポンシブデザインやモバイルフレンドリーデザインの本当の意味について、基本的なところから説明します。

Webサイトのレスポンシブデザインとは？

モバイル対応Webサイトとは、簡単に言うと、ユーザーが閲覧しているデバイスを自動的に検知し、デバイスの仕様に合わせてレイアウトを調整し、ユーザー体験を向上させるWebサイトのことです。

レスポンシブWebデザイン（RWD）の目的は、使用するデバイスに関係なく、一貫したユーザー体験を提供することです。ユーザーがモバイルやタブレットのブラウザーからウェブサイトにアクセスする際に、ズーム、パン、スクロールを最小限に抑えることを目的としています。これにより、混乱が減り、スムーズなナビゲーションが実現し、最も重要なことは、楽しいユーザー体験を提供することです。

なぜレスポンシブWebサイトの設計が重要なビジネス要件なのですか？

モバイル対応のWebサイトは、ユーザーエクスペリエンスの重要な要素です。この超競争時代において、あなたのビジネスはレスポンシブでないWebサイトを持つ余裕がないだけです。

モバイルデバイスとそのユーザーは、現在、あなたのWebサイトにやってくるトラフィックの巨大なセグメントを構成しています。このような訪問者に、あらゆるデバイスで満足のいく一貫したユーザー体験を提供することが、ビジネスの長続きには欠かせません。

モバイルに最適化されていない従来のウェブサイトは、携帯電話やタブレット端末のような小さな画面で開くと、雑然とした印象になってしまいます。レスポンシブ・サイトでは、レイアウトを再構築することで、ユーザーがさまざまな画面サイズのデバイスで、モバイル画面上で簡単にコンテンツを表示し、サイト内を移動できるようにします。

Webページへのトラフィックを確保するための努力を考えると、携帯電話からWebサイトを閲覧する潜在顧客を、バグの多いユーザー体験で遠ざけたいとは思わないはずです。

レスポンシブデザインを採用するもう一つの重要な点は、モバイルフレンドリーネスがSEOランキングに与える影響です。Googleのモバイルファーストインデックス導入以降、モバイル端末でウェブサイトがどのように機能するかによって、Googleの検索ランキングでの順位も決まるようになりました。

レスポンシブWebサイトを設計するためのヒント

固定サイズのピクセルでウェブサイトをデザインするのではなく、流体グリッドを採用することで、ウェブページとともに拡張するリキッドレイアウトを実現します。ピクセルのように特定のサイズに制限されるのではなく、グリッドによってWebサイトの要素が均整のとれたサイズになります。

フレキシブルグリッドは、さまざまな画面サイズに合わせて動的にサイズを変更することが可能です。グリッドは、ピクセルやパーセンテージに基づくものではなく、比率の観点から設計されています。レイアウト内のすべての要素は、表示されるスクリーンのサイズに応じて、互いの幅をリサイズします。

グリッド表示では、ウェブページを列で分割して、ページ上の要素を配置しやすくします。フレキシブルグリッドはレスポンシブデザインの半分の役割を果たしますが、スクリーンが小さい場合、ブラウザのウィンドウ幅が小さくなると、2列や3列のデザインではうまくいきません。そのような場合は、メディアクエリの使用が必須となります。

メディアクエリとブレイクポイントを活用する

メディアクエリを使用すると、さまざまな画面幅に合わせてWebサイトのレイアウトを最適化することができます。メディアクエリは、使用するデバイスの幅、解像度、向きをチェックし、適切なCSSルールを表示して、コンテンツは異なるデバイスの異なる条件に対応します。

メディアクエリは、@mediaルールを用いて、指定された条件が真であればCSSのブロックをインクルードする。メディアクエリを使うと、画面サイズが指定した幅より小さい場合に特定の要素を除外することができ、異なる画面での表示に適したレイアウトにすることができます。

また、メディアクエリを使用することで、デザインの様々な部分にブレークポイントを導入し、よりモバイルに最適化されたデザインにすることができます。

常にビューポートを使用する

ユーザーから見えるウェブページの領域が、ビューポートです。Webサイトが閲覧されるデバイスによって変化します。metaタグでビューポートを指定することで、ブラウザはページの拡大縮小やサイズに関する指示を得ることができます。

metaタグを使用することで、小さな画面で閲覧しているユーザーが、コンテンツを見るために横スクロールや過度な拡大縮小をする必要がなくなり、スマートフォンでのユーザーエクスペリエンスを向上させることができます。また、メディアクエリを利用してビューポートの幅を指定することで、さまざまなブラウザやデバイスの方向性を考慮した設計が可能になります。

また、モバイルファーストデザインを取り入れることも、レスポンシブWebサイトを設計する際に採用すべき戦略です。これは、小さいビューポートをターゲットにしたスタイルを、ウェブサイトのデフォルトとして使用することを含みます。ビューポートの拡大に合わせてメディアクエリを使用してスタイルを追加することで、貴重な帯域幅を節約することができます。

タッチ操作のレスポンシブ化

ウェブデザインに使用するアイコンのサイズは、携帯端末でアクセスしたときに快適なタッチターゲットになるよう、十分に大きくする必要があります。レスポンシブWebサイトでは、マウスクリックと指によるタップの両方を考慮してデザインする必要があります。

モバイル向けデザインを行う場合、より多くの要素を配置し、ボタンのサイズを縮小することで、利用可能なスクリーンスペースをより有効に活用したくなりますが、人間の指を考慮したデザイン、レスポンシブデザインを維持することが不可欠です。マテリアルデザインガイドラインによると、アクセシビリティを確保するために、ボタンの高さは最低でも36dpにすることが望ましいとされています。

モバイルサイトに入力欄を設ける場合は、ユーザーがタップして最終的にコンバージョンできるよう、タッチターゲットを十分に大きくしてください。ボタンが目立つようなデザインと配色にすること。eコマースサイトの場合は、チェックアウトプロセスに摩擦が生じないようにして、ビジネスのコンバージョンを最大化するようにします。

メディアをモバイル向けに最適化する

レスポンシブWebサイトのデザインにおいて、モバイル版の画像や動画などのメディアを管理することは、最も難しいことの一つです。画像や動画の場合は、max-widthプロパティを使用することが推奨されています。

画像や動画のサイズをモバイル用に最適化する場合、max-widthを100%に、heightをautoに設定します。表示する画面に応じて、画像が縮小されます。

背景画像の場合は、サイズを「contain」に設定すると、拡大縮小してコンテンツ領域に収まるようになる。SEOの観点からも重要な、ウェブサイトの読み込みを速くするために、画像サイズは小さくし、画像を圧縮する必要があります。

TCDを利用する意義

レスポンシブWebデザインは、決して楽な作業ではありません。技術的なノウハウに加え、デザインに対する深い洞察力が必要です。さらに、デザインからコーディングに至るまで、さまざまなデバイス上で厳密なテストを行い、すべての要素が適切な場所に配置され、正しく機能していることを確認しなければなりません。

優れたデジタル体験の創造を専門とするレスポンシブWebデザイン・開発会社に依頼することが、モバイルフレンドリーなWebサイトをデザインするための最善の方法となりますが、TCDのテーマを利用することでコスト的にも負担少なく最高峰のレスポンシブWEBデザインを使用することが可能となります。

モバイルフレンドリーについては他記事でもまとめています。併せてご覧ください。

清潔なTCDテーマ CURE で人が集うサイト作り！初期設定から医療系サイトの基礎まで

✅　医療系サイトはどんなデザインにすれば良い？ ✅    CUREの評判はどうかな？ ✅    TCDテーマの使い心地 ...

続きを見る

スマホ専用フッターバー

マーケティング効果を発揮する高機能かつ実用性の高いスマホ専用フッターバー

スマホでは、サイトのアクセス数やコンバージョン率を高めるための施策として、スマホ専用のフッターバーを搭載しています。アイコンは全部で6種類用意されており、シェアや電話、問い合わせなどのアイコンを表示（非表示も可）できます。

いくつアイコンを表示させてもいいですし、任意のURLを設定することも可能です。

あなたもスマホをお使いであれば心当たりがあるかもしれませんが、フッターバーがあるサイトではついついお気に入りやシェアしているといったことがあるでしょう。これはスマホにフッターバーを表示させることがマーケティング上、効果的である証です。

「GENSEN」には、ユーザーの使いやすさを徹底的に追及して作り上げた「フッターバー」が実装されています。

引用元：GENSEN公式サイト

フッターメニューの重要な目的のひとつは、離脱しようとする訪問者を引き留めることです。訪問者が離れていく理由はさまざまですが、そのうちのひとつは、探しているものが見つからなかったということです。そのため、ナビゲーションバーのドロップダウンメニューの要素を含めることは良い方法です。

ウェブサイトフッターのデザイン

フッターにCTAボタンを設置する

リードを獲得するために、名前とメールフォームを含むCall To Actionを配置しましょう。

ウェブデザイナーは通常、訪問者がサイトの一番下までスクロールしてくれることを良い兆候と考えています。ウェブサイトの一番下まで読んでくれる人は、あなたの話に興味を持ってくれているので、リードになる可能性が高いのです。

お客様の声や受賞歴などを掲載する

Webサイトのオーナーとして、コンバージョンにフォーカスした要素は、優先順位の高いリストの上位にあるべきです。

その1つが、お客様の声や受賞歴の紹介です。

お客様の声は、製品やサービスの特徴のすぐ下に掲載されることが多いですが、Webサイトのフッターにも掲載するとよいでしょう。

Webサイトにお客様の声や賞を掲載することは、コンバージョンに非常に効果的なソーシャルプルーフの一部です。

フッターに検索フィールドを設置する

デジタル社会における人々の注意力は日々低下しており、多くの訪問者が自分に最も関係のある要素を見逃してしまう可能性があります。

フッターに到達するまでに、あなたのビジネスについて様々な疑問を抱くかもしれません。フッターに検索フィールドがあれば、わざわざスクロールしてトップに戻る手間が省けます。

また、ユーザーのセッション時間を延長し、オーガニック検索でウェブサイトを上位に表示させることもできます。

フッターにスライドショーのミニギャラリーを設置する

ウェブサイトに関して言えば、すべてのサイトオーナーが望むことが3つあります。

フッターにスライドショーのミニギャラリーを設置することで、3つの目的すべてに対応することができます。 ミニギャラリーは、訪問者が立ち止まってギャラリーを探索したくなるようにし、サイトでの滞在時間を長くすることができます。

スライドショーが魅力的であれば、訪問者はさらにウェブサイトを探索したり、メーリングリストを購読する可能性が高くなります。

まとめ：GENSENで広告収益ビジネスの構築を

如何でしたでしょうか？GENSENが有する機能を深掘りし解説してきました。解説してきた内容は、広告収益ビジネスをおこなって行く上で非常に重要なこととなってきます。その重要な機能をGENSENを使用すれば低価格で手にすることが可能です。GENSENの機能はここで全てを紹介しきれておらず、もっと豊富な機能を持っています。まずは、是非デモサイトを覗いていただきたいと思います。

GENSEN公式サイトへ

項目	内容
テーマ名	GENSEN（ TCD050）
価格	39,800円（税込）
ジャンル	ポータルサイト
おすすめ度	⭐️⭐️⭐️⭐️⭐️（4.7/5段階）
コメント	低価格で専門的な知識・技術も不要で高度な検索機能が搭載されたポータルサイトが利用可能

膨大なアクセスを集め、優良なスポンサーを獲得する人気ポータルサイトを構築するためには、専門性の高い情報を配信すること、一定以上の情報量を格納していること、そして膨大な情報の中からユーザーが知りたい情報を適切に抽出して提示することが条件となります。

しかし、ホームページに高度な検索機能を搭載するためには、デザイン的なセンスだけではなく、HTMLやCSS、JavaScript、jQuery、PHPやRubyなどの総合的な知識と技術が必要になり、ホームページ制作会社に依頼した場合には、安いくても100万円から200万円、場合によっては1000万円単位の見積もりが上がってきます。

つまり、ポータルサイト運営によるキャッシュフローを生み出すための”広告収益ビジネスモデルを構築する”ためには、相応の初期投資が必須の条件でしたが、驚くほど低コストで導入可能なポータルサイト専用WordPressテーマ「GENSEN」をインストールすれば、専門的な知識も技術も不要で、高度な検索機能が搭載されたポータルサイトの土台が瞬時に完成します。

引用元：GENSEN公式サイト