目次
フッターと CTR (クリックスルー率)
1. フッターを SEO ゴミ箱として扱わないでください
2. 階層を導入する
7.ソーシャル メディアのリンクを表示します
8.サブフッターの使用を検討してください
9.社会的証明、バッジ、安全シールを紹介します
10.最高のコンテンツへのリンク
11.フッターを「マスター ナビゲーション」に変えることには注意してください
あなたのフッターはどうしたのですか?
ホームページ ウェブフロントエンド htmlチュートリアル 優れた Web サイト フッターを作成する方法 (Web サイト フッター)_html/css_WEB-ITnose

優れた Web サイト フッターを作成する方法 (Web サイト フッター)_html/css_WEB-ITnose

Jun 24, 2016 pm 12:07 PM

多くの人にとって、フッターの作成はデザイナーが簡単に行うだけの作業です。それは簡単なようで、取るに足らないもののように思えます。多くの人は、Web サイトの下部を読む人はほとんどいないと考えており、フッター内のすべてのリンクのクリックスルー率 (CTR) が最も低いのに、なぜわざわざ読む必要があるのでしょうか。

本当にそうなんですか?以下でそれを分析してみましょう。

フッターと CTR (クリックスルー率)

CTR が低いという事実は真実かもしれませんが、それは全体像を示しているわけではありません。CTR が低いのは主に、フッターを見る人がほとんどいないという事実の結果です。そもそもフッターです。

それで、これについては私なりの理論があります。

どうやら、このテーマに関しては研究が行われていないようです(少なくとも私は見つけることができませんでした。もしあればお気軽に参加してください)いくつかのデータがあります)、ページを下までスクロールした人だけをカウントした場合、フッターの CTR は実際には非常に高いと思います。

これをさらに調べるために、CrazyEgg アカウントで簡単な数値計算を実行しました。 (スクロール マップ ツールを使用して) 私のフッターを見た人の推定数と、フッターが生成する合計クリック数を比較すると、14 パーセントから 20 パーセントの人が一度何かをクリックすることになることがわかります。フッターを参照してください (テストされるページによって異なります)。

もちろん、これはかなり小さなデータを使用した非常に単純なテストであるため、信頼できる結論を引き出すのは困難です。また、私のフッターは膨大です。画面の 55 ~ 60% なので、何かをクリックせずにはいられません。とにかく、欠点はあるものの、結果は依然として非常に興味深いものです。

レッスンは簡単です…

フッターは重要です。

フッターを適切に素晴らしいものにするためにできること

1. フッターを SEO ゴミ箱として扱わないでください

フッターにキーワード リンクを使用してランキングを上げようとする人がいます。そして、それが難しいことは私も知っています。抵抗するのは簡単すぎますし、リンクは場違いにさえ見えません。しかし、これは 2014 年には絶対に避けるべきです。主な理由は、Google がフッターを認識してリンクに名前を付けるのはそれほど難しいことではないからです。 SEO の価値が低いです。

全体のやり方は 2008 年並みか、それよりもひどいです。

実際、ランド フィッシュキンがこれが効果的ではないと話していたのは 2008 年のことでした。

2. 階層を導入する

常にいくつかの要素があります。は他のものよりも重要であり、フッター内の配置、スケール、配置を通じてこの考えを強化する必要があります。

たとえば、Smart Passive Income にアクセスすると、オプトインしてもらうことが最も重要であることがわかります。パットの目標。サイトの各ページのフッターは大きな購読ボックスで始まります。

その後、追加のリンクと開示が続きます。

重要なものから始めて、次に続けてください。その他すべて。

3. コンバージョンを獲得するために最後にもう一度試してください

オプトインといえば、最近では、誰かにオプトインしてもらうことが最も人気のある Web サイトの目標の 1 つであり、サイト所有者はそのためのほぼすべてのことを喜んで実行します。

正直に言って、それを責めるのは難しいです

それは、個々のケースでのコンバージョンが何を表すかに関係なく、それを活用してください。チャンスです。あなたのサイトの主な目標はあなたの責任です。

たとえば、これは Codeinwp.com のフッターです。私が所属している PSD から WordPress へのサービスを提供する会社です。フッターは巨大で、主な目標が 1 つあります。 ? 人々に自分のデザインを提出してもらい、それを実用的な WordPress テーマに変えてもらうためです。

4. ホワイトスペースを使用する

ホワイトスペースは現在、非常に過小評価されています。フッターにさらに強調を加えて、リンクをより目立つようにする他の簡単な方法はありません。

例については、ここで下にスクロールしてフッターを確認するだけです。

5. 試してみましょう。 「著者について」ブロック

単一著者のサイト/ブログをデザインしている場合、多くの場合、利用可能なスペースを使って素敵な「著者について」ブロックを表示することをお勧めします。

さて、ここでの目標はCTR が増加することはありません。ユーザーが作成者ブロックをクリックすることはめったにありません (少なくとも私のテストでは) が、現時点でどのページが表示されていても、作成者が誰であるかを明確にすることができます。仕事を残すから:

6. 必須のリンクを忘れないでください

次のリンクのいくつかがないフッターを想像するのは非常に困難です:

  • 概要
  • 連絡先
  • ホーム
  • ブログ(ある場合)
  • それらが不可欠である理由は簡単です。長年にわたり、人々はそれらのページをフッターに表示することに慣れてきました。それは慣習となっており、それを破ることが報われることはほとんどありません。

    フッターで言及する内容を選択するときに、次のことを自問するのが良い方法です。

    視聴者はフッターにこのリンクが表示されることを期待していますか? ?

    7.ソーシャル メディアのリンクを表示します

    ソーシャル メディアとフッターの最も一般的な 2 つのアプローチを次に示します:

  • デフォルトのボタンを使用します。たとえば、Facebook の「いいね!」ボタンを取得するには、開発者エリアのこのセクションに移動します。公式な性質のため、効果的になる傾向がありますか?人々はそれらに非常に慣れており、それを見たときに何をすべきかを正確に知っています。
  • いくつかのカスタム ボタンを使用します。同じ CTR を持たない場合もありますが、特に少数のボタンを表示しようとする場合は、これらのボタンのクリックを常に最適化する必要はありません。 TechCrunch を見てアイデアを得る:
  • 8.サブフッターの使用を検討してください

    サブフッターは、メインのフッター領域の後に来る部分です。これは、さまざまな法的リンクや、必ずしも人々にクリックしてほしくないその他のものを表示するために最も一般的に使用されますが、操作の一部を規制および開示します。

    私が話しているのは、プライバシー ポリシー、規約、収益などです。開示、著作権条項、DMCA など

    SugarSync.com からの例:

    9.社会的証明、バッジ、安全シールを紹介します

    作業しているサイトのビジネスの種類によっては、追加の社会的証明を表示すると、サイト全体の信頼性を高めることができます

    Pat をもう一度見てみましょう。 Flynn のサイトで例を取得します (今回はホームページです):

    これらの会社のロゴはクリックできず、さらにコントラストが非常に低いです。しかし、実際にはそれ以上は必要ありません。ロゴは社会的証明を提供するためにあり、あまり注目を集めるためではありません。

    10.最高のコンテンツへのリンク

    これは、ブログやオンライン出版サイト全般でうまく機能します。ビジネスサイトや製品サイトではそれほど多くはありません。

    主な考え方は、人気のあるコンテンツには通常、人気があるのに理由があるため、それをフッターに表示することで読者数をさらに向上させることができるということです。

    これは単純なルールですか?すでに人気のあるものの人気を高めることは、そうでないものの人気を高めるよりもはるかに簡単です。

    newInternetOrder.com による例:

    11.フッターを「マスター ナビゲーション」に変えることには注意してください

    これは、まさにこのリストの最初の項目に戻ります。フッターを SEO のゴミ箱として扱います。

    フッターは SEO のゴミ箱でも、マスター ナビゲーションでもありません。

    フッター内のすべてのリンクを詰め込むべきではありません。これは読者に良い影響を与えません。

    より良いアプローチは、カスタム アーカイブ ページを作成し、フッターからそのページにリンクすることです。そうすれば、読みやすく明確なフッターが残り、誰かが特定のリソースを見つけたい場合は、アーカイブから検索できます。

    あなたのフッターはどうしたのですか?

    正直に言うと、いつこの投稿のデータを収集して書いたところ、自分のサイトで使用しているフッターに少なくともいくつかの問題があることがわかりました。そこで私の質問は簡単です。フッターのどこが間違っているのでしょうか?そしてもっと重要なのは、それを修正するために何をしますか?

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

    公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

    HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

    この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

    WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

    この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

    HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

    記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

    < datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

    この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

    < Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

    この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

    HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

    この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

    < meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

    この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

    See all articles