WordPressサイトにスティッキーUI要素が必要な理由とその作成方法

WordPressのスティッキーUI要素に対するこの貢献は、Lexie Luによるものです。.


スティッキーUI要素に関しては、いくつかの複雑な感情があります。ソーシャルメディア共有オプションから会社情報まですべてを含む可能性があるため、ユーザーエクスペリエンスが低下するという人もいます。しかしながら, 批判者も これらが正しく行われると、非常に効果的な設計の選択肢になる可能性があることを認めます.

スティッキー要素(ボタン、コンテンツブロック、その他のいわゆるフォーム "スティッキーナビゲーション")は、ユーザーが下にスクロールしても所定の位置にとどまるページ上の固定要素です。スティッキUI要素が適切に設計され、明確な目的がある場合, 研究ショー 訪問者からウェブサイトに目的のアクションをもたらすための優れた方法です.

つまり、WordPressサイトはスティッキーUI要素を使用して、サイトへの各訪問の価値を最大化できます。これらの要素は、ニュースレターの登録、ソーシャルメディアのフォロー、その他の重要な行動を促すのに役立ちます.

おそらく最も重要なことは、ユーザーエクスペリエンスを改善できることです。これらすべてのメリットがあるため、スティッキーナビゲーションが ますます一般的になる 人気が高まるにつれて.

編集者のメモ。さまざまなスティッキサイト要素を楽しむように成長しました。 CodeinWPブログでは、このような要素自体を使用しており、スティッキーナビゲーションを最も人気のあるテーマであるZerifの主要な特徴の1つにしています(デモを見る)。どうして?それはユーザーのために働くだけです。しかし、Lexieにこれを詳しく説明してもらいましょう。

WordPressのスティッキーUI要素が機能する理由

WordPressでスティッキー要素を効果的に使用すると、重要な情報を伝え、訪問者がサイトを簡単に移動できるようになります。あるeコマースWebサイトで、スティッキーナビゲーションを組み込むことでコンバージョンが30%から33%に増加したことが発見されました.

研究目的で実施された別のA / Bテストでは、 訪問者の100% 粘着性のあるデザイン要素を好んだ—それらの多くは理由が正確にわからなかったが.

WordPressのスティッキーUI要素の力を活用するために、WordPressプラグインをダウンロードして、全体的に数値が向上するのを見ることはできません。サイトに最適な要素を慎重に計画する必要があります。また、これらの要素(コーディングの経験がないと扱いにくい場合がある)が意図したとおりに機能することを確認する必要もあります。.

幸い、WordPressサイトに組み込むのに役立つUI要素とプラグインには、さまざまなタイプがあります。

粘着性のあるソーシャルメディア共有ボタン

人々がウェブサイトに出くわす方法は変わりました。長い間、ほとんどの訪問者がURLを入力してコンテンツを探し回って到着していた時代です。それでも時々そうですが、ソーシャルメディアからのトラフィックが増えています.

平均して、ソーシャルメディアは 全トラフィックの31% ウェブサイトへ。この数字は間違いなく一部のWebサイトでは低く(他のWebサイトでは高く)、魅力的なコンテンツを作成することの重要性を強調しています.

(チャート別 WordPressチャートおよびグラフLite.)

ただし、優れたコンテンツは最初のステップにすぎません。また、ユーザーがコンテンツを途方もなく簡単に共有できるようにすることで、ユーザーを誘惑して紹介トラフィックを増やすこともできます。これを行うには、粘着性のあるソーシャルメディアボタンを使用してコンテンツに添付するのが良い方法です。.

WordPressには、スティッキー/フローティングソーシャルメディアボタンを追加するためのプラグインが不足していません。重要なことは、テーマのデザインと直感的に動作するものを選択することです。フローティングソーシャルメディアボタンの例はたくさんあります。 奇妙に振る舞う モバイル、またはデスクトップブラウザウィンドウのサイズが変更されたとき.

テキストや写真を不明瞭にする粘着性のあるソーシャルメディアボタンがソーシャルメディアの共有につながらないため、デザインが悪いと意図したとおりの効果が得られない可能性があります。ユーザーエクスペリエンスを正しく管理できるサイトを見てみましょう.

できるだけ多くのデバイスとオペレーティングシステムでWordPressの多数のプラグインを試して、ソーシャルメディアボタンが意図したとおりに動作することを確認します.

CodeinWPで公開されている30を超えるソーシャルメディアプラグインの2部構成のリストがあります。きっとあなたにぴったりのプラグインが見つかるはずです.

付箋情報ボックス

Webサイトによっては、サイドバーで追加情報を伝達するだけでスティッキ要素に必要な場合があります。連絡先情報をサイトに目立つように配置することは、シンプルですが効果的な行動を促すフレーズです。 12Keysは、一目でわかる連絡先情報を提供することにより、これを大きな効果をもたらします。これは、危機に瀕している可能性のある訪問者にとって特に重要です.

12keysrehab

これは、資格情報、賞、およびそれらに沿ったその他のものを強調表示することによって信頼を構築するのに役立つ場所にすることもできます。また、あなた自身やあなたのウェブサイトについてもう少し説明して、個人的なタッチを加えるのにも良い場所です。.

幸い、これはサイトに実装する最も簡単なタイプの要素です。テキストや、メールへのハイパーリンク以外は何も心配する必要はありません。このプラグインはあなたを助けることができるはずです:


スティッキーエレメ​​ント スティッキーエレメ​​ント

著者: シチューヘッケンバーグ

現在のバージョン:1.3.5

最終更新日:2019年1月26日

sticky-element.1.3.5.zip


74%評価


600以上のインストール


WP 3.0+が必要

目標は、サイドバーの要素が派手すぎたり気が散ったりしないようにすることです。訪問者がサイトにいる限り存在します。そのため、デザインの悪いものや過度に目障りなものでオフにしたくない場合があります。フローティングサイドバーは付随するコンテンツのケーキのアイシングであるため、単純さの面でエラー。.

付箋メニュー

スティッキーメニューは、WordPressで最も実用的なスティッキーUI要素の1つですが、最も便利なものの1つでもあります。.

アイデアは簡単です。ユーザーが下にスクロールしても、メニューはしっかりと固定されます.

ただし、これはさまざまな方法で実装できます。

a)一番上の標準配置に行くことができます.

これは、ThemeIsleチームが Zerifテーマ, たとえば(あなたは見ることができます ここでライブデモ):

ゼリフの粘着性要素

ここでのもう1つのボーナスは、メニューが単純な1行のメニューではなく、メガメニューであることです。各項目にカーソルを合わせると、より複雑な構造が表示されます。

メガメニュー

b)メニューを横に置く.

これは、一部のデザイン、特にビジュアルに賭けてストーリーを伝える写真を多用するサイトに適したオプションです。.

ここからの例です RichBrown.info

リッチブラウン

下にスクロールすると、メニューは右側に固定されます.

c)底に置く.

下部は、固定メニューのもう1つの興味深い配置です。特に、メニューを1行のテキストよりも少し高くしたい場合は、.

ここに例があります Bulletpr

Bulletpr

ご覧のとおり、メニューには画像とテキストが含まれているため、サイトのヘッダーの貴重なスペースを占めないように下部に配置されました。.

付箋メール登録

おそらくご存じのとおり、視聴者にリーチするための最良の方法の1つはメールです。購読者リストに送信されたメールは 5倍高い可能性 Facebookの投稿よりも見られる.

メールサブスクライバーの質の高いリストを作成することは、ビジネスを次のレベルに引き上げるために重要です。付箋フォームのおかげで、あなたが思うよりも簡単に加入者を取得できます.

サイトの訪問者がメーリングリストにサインアップするように促す方法はたくさんあります。サイドバーまたはページの上部にある固定フォームは、非常に役立ちます。これをうまく行うサイトの1つは TwelveSkip, デジタルメディア会社。ページの上部にある彼らの行動を促すフレーズは明確で、過度に顔を合わせたり気を散らしたりすることなく注目を集めています.

十二スキップ

サイドバーの上部は 別の良い場所 電子メール購読者を取得する。ユーザーが登録できる複数の場所があっても問題はありません。メールのサブスクライバーは非常に貴重なので、リストを作成するために追加の努力を払う価値があります。.

たとえば、CodeinWPは、​​この目的のために複数のフォームを使用し、多くのスティッキーを使用します。このように:

codeinwp

追尾広告

それに直面しましょう—広告は私たちのほとんどにとって必要悪です。私たちの読者はそれらを気に入らず、多くのウェブサイトクリエーターも好まない。しかし、それらは請求書を支払うために不可欠であり、それがデジタル広告が出てくるところです.

Time Magazineは広告を粘着ブロックとして使用しているため、下にスクロールすると あなたはどんな記事も読んでいます.

時間

巨大なスプラッシュ広告やポップアップよりも邪魔にならないので、あまり多くのリーダーをオフにせずに収益を生み出すのに悪い方法ではありません.

すべての広告と同様に、これは適度にのみ行う必要があります。記事の左側または右側の広告の壁は、すぐにオフになります。 1つまたは2つを、より多くの記事へのリンクと組み合わせて使用​​すると、広告に取り掛かることができます。.

WordPressのクリエイティブな固定UI要素

上記にリストされたものとは別に、WordPressでスティッキーUI要素を使用すると、はるかにクリエイティブになる可能性がありますが、これは、それらを実装するための潜在的により多くの作業を意味します。.

以下がその一例です Gavick.com

島

そのサイトにアクセスすると、下にスクロールしても島全体がほぼ中央に留まっていることがわかります。フォアグラウンドとバックグラウンドの間でシフトしますが、常に中央にあります。この種のことは本当にユーザーの注意を引く.

WordPressでのスティッキーUI要素のクリエイティブな使用には、実際には制限がないようです…誰かがアイランドをスティッキーにすることができたので.

適切なプラグインを見つける方法?

あります プラグインの不足なし WordPress.orgで、スティッキ要素をテーマに実装するのに役立ちます。テーマによってうまく機能するものもあれば、サイトに最適化されていないものもあります。最適に機能するものを見つけるには、試行錯誤が必要です.

ソーシャルメディアへのトラフィックを増やしたいと思っているか、読者に重要な情報を伝えたいと思っていても、最終結果はそれだけの価値があります。プラグインを徹底的にテストして、設計上の癖がないことを確認してください。.

レキシー・ルー 著者について: Lexie Luはフリーランスのデザイナー兼ブロガーです。彼女は最新のトレンドを研究することを楽しんでおり、いつも近くにコーヒーを飲みます。彼女が管理する ローストのデザイン Twitterでフォローできます あずきっく.

Karol Kによるすべての編集と機敏な書き換え.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map