siori-master

見出しに使えるfit-contentを解説してみる

by
見出しに使えるfit-contentを解説してみる

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます

  • 中央位置に配置した見出しに背景色をつけるスタイルで便利。
  • 使わない場合、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまう。
  • 見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけられる。しかし、中央配置ができないため、見出しタグの中にを追加してテキストを括り、見出しタグにtext-align: centerを指定。
  • もし、テキストの周りに余白（padding）を指定し、背景色のボックスを広げたい場合にはタグにdisplay: inline-blockを追加。

使用した場合

  • 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせて背景色を配置
  • width: fit-contentを使用することで、コンテンツ（テキスト）に合わせてボックス要素の横幅を指定でき、背景色を配置可。margin-right: autoとmargin-left: autoで中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可。
h2 {
  margin-right: auto;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #e3bf00;
}

見出しが２行の場合

  • 2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまう。
  • テキストだけに背景色を配置したい場合には、テキストをで括る。

fit-contentでマーカー

  • 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせてマーカーを配置できる。

見出しが２行の場合

  • テキストだけにマーカーを配置したい場合には、テキストをで括る。

ブラウザ対応

  • IE以外のモダンブラウザで対応。Firefoxのみベンダープレフィックス（-moz-fit-content）が必要。

参考

WordPressでコンバージョンにつながるセールスページを作成する方法(英文)

by

https://www.wpbeginner.com/wp-tutorials/how-to-create-a-sales-page-in-wordpress-that-converts/

“How to Create a Sales Page in WordPress (That Converts)” in wpbeginner on 2022-04-20

良い販売ページは、より多くのウェブサイト訪問者を有料顧客に変換するための鍵であり、したがって、あなたの利益を高めることができます。

方法

  1. SeedProdを使ってWordPressで販売ページを作成する（推奨）
  2. ブロックエディタを使用してWordPressのセールスページを作成する

1. SeedProdを使ってWordPressで販売ページを作成する

  • 販売促進のための多くの一般的なサードパーティツールと連携可。
  • リードスクイーズや近日発売のキャンペーンなど、様々なタイプのキャンペーン用にプロフェッショナルにデザインされた150のテンプレートを用意。
  • ブロックは、すべてのSeedProdレイアウトの中核となるコンポーネント。見出し、ボタン、画像などの既成のブロックをレイアウトに追加するだけで、販売ページ全体を構築可。
  • スペーサー、コラム、ディバイダーなどのSeedProdブロックを使用して、販売ページの整理と構成を実現。
  • SeedProdブロックのカスタマイズは容易。ブロックをクリックするだけで、ツールバーにそのブロックのすべての設定を表示。
  • 例えば、お客様の声、価格表、星の評価、カウントダウンブロックなど、コンバージョン率の高い販売ページを構築するのに最適なブロックを多数用意。
  • ブロックをドラッグ＆ドロップすることで、レイアウトの中でブロックを移動可。
  • Hero、Call To Action、Features、FAQなどのセクションは、行とブロックのテンプレート。販売ページを素早く作成するのに役立つ。
  • 便利なAdd To Cartブロックや、トップレート商品やベストセラー商品を紹介できるブロックなど、WooCommerceのブロックも多数提供。WooCommerceの商品、サービス、イベントなどを宣伝する販売ページを簡単に作成可。また、SeedProdを選択することで、WooCommerceのテーマに制限されることなく、販売ページをデザイン可。

2. ブロックエディタを使用してWordPressのセールスページを作成する

  • 予算が限られていて、これから始めようと思っているのであれば、WordPressのブロックエディタだけで販売ページを作成することは可能。
  • 柔軟で使いやすいWordPressテーマが必須。多目的の無料テーマ「Astra」が最適。
  • カバーブロックは、販売ページのトップページに最適なブロック。
  • テキストと画像の両方をきれいにレイアウトして表示できるMedia & Textブロックは、片側に画像、もう片側にテキストを配置した2カラムのレイアウトを作成。
  • 販売ページでは、通常、支払いを受け入れる方法が必要。WP Simple Payを使って支払いボタンを作成可。あるいは、WPFormsを使用して注文フォームを作成し、販売ページにそれを埋め込む。

セールスページのレベルアップ

さらに売上を伸ばすのに役立つWordPressプラグインをご紹介：

  • All in One SEO (AIOSEO)：この初心者に優しい検索エンジン最適化ツールキットは、検索エンジンからあなたの販売ページに多くの人を誘導するのに役立つ。
  • MonsterInsights：ページの統計情報を監視する最も簡単な方法は、この最高のWordPress解析プラグインを使用すること。
  • OptinMonster（有料）：あなたの販売ページを閲覧している訪問者のマウスの動きを追跡し、訪問者が離脱しようとする正確な瞬間をプラグインが検知し、パーソナライズされたキャンペーンで訪問者をプロンプトする。
  • TrustPulse（有料）：市場で最高のWordPressソーシャルプルーフプラグイン。ユーザーがあなたの販売ページで行っている活動をリアルタイムで通知表示することで、FOMO効果を利用。また、ページのコンバージョン率を監視し、改善することができるビルトイン分析が付属。

【WordPress Plugin】シンプルで使いやすい！Insert Headers and Footersのインストールと使い方

by
【WordPress Plugin】シンプルで使いやすい！Insert Headers and Footersのインストールと使い方

テーマファイルを修正せずにタグやフッターに指定コードを記述したいという時があるかと思います。
そんな時便利なプラグインが無料で利用できるInsert Headers and Footersプラグインです。

特長

  • <head>タグ内に記述が可能：<?php wp_head(); ?>が記述されている部分に、CSSやスクリプト、METAタグ、Google アドセンスの広告コードなど差し込む。
  • </body>タグの直前に記述が可能：<?php get_footer(); ?>が記述されている部分に、後読み込み推薦されているJavaScriptや解析タグを差し込む。

メリットとデメリット

メリット

  • 無料で利用できる
  • クレジット表記が無い
  • テーマのソースコードを修正せずに独自のCSSやJavaScriptを追加したい
  • アクセス解析を入れたい
  • タグ内に追加できるシンプルなプラグインを探している
  • タグ内（最下部）に追加できるシンプルなプラグインを探している

デメリット

  • PHPタグが使えない
  • 閉じタグ漏れなどのエラーチェックがない

ランディングページとは〜LPOで成果の上がるページを作る方法と使えるテンプレート集まとめ

by

https://ferret-plus.com/2499

in ferret on 2018-01-31

今回は、ランディングページを最初にやるべき理由と、そのランディングページの作り方など、ランディングページで売上や問い合わせ数を上げるために必要なことをまとめて解説します。

ランディングページとは

  • Googleなどの検索エンジンや広告からユーザーがアクセスした最初のページ。
  • 広義の意味としては、「広告バナーやテキストリンク、検索結果などからアクセスしてきた人が最初に訪問したページ」、つまりリンク先ページのこと。
  • 狭義の意味としては、「インターネット広告などに設定する縦長の1ページで、そのページ内でコンバージョン（問い合わせ・申し込み・資料請求）を促すためのページ」。

ランディングページの最適化が重要な理由

  • 購入率を改善するだけで売上が跳ね上がるので重要。広告からの流入数が変わらず広告費が変わらなくても、売上は2倍になれば売り上げが倍になる。
  • 広告出稿ページを変更すればいいので重要。上位表示できればアクセス数が増え、倍々で売上が伸びていくので非常に効率的。

効果的なランディングページの作り方

いくつもランディングページの構成フレームワークはあるが、オススメなのはBEAFの法則：

  • Benefit：読み手に取ってのメリット。ユーザーは3秒でそのページが自分にとって有益かそうでないかを見極める。「自分にとってこのページを見ることでメリットがある」と思わせるため、3秒でそう思わせるために短く端的にキャッチコピーのような形でメリットを伝えたり、写真などを使って伝える。
  • Evidence：メリットの根拠。Benefit（ベネフィット）で伝えたメリットを、ユーザーはそのまま受け取らず脳の中で疑いにかかるので、その疑いを解消するために、Evidence（エビデンス）として根拠を載せる。根拠としては、表彰歴などもよく使われる。
  • Advantage：競合と比べた優位性。「ここにしかない商品である」ということを伝えるための競合優位性を掲載。
  • Feature：特徴。「今買わなければいけない理由」を提示し、背中を押す。

ランディングページで使える心理学

よく使われるものを挙げてみます。

  1. アンカリング効果：何かしらの意思決定を行う際、最初に見たデータを重要視する傾向。「数量限定」「期間限定」というふうにプレミア感をアピールする等、ユーザーに対し「この商品はお得だ」「良い買い物ができた」と思わせるようにするための仕掛けを作る。
  2. ハロー効果：ある1つの目立つ特徴を最初に認識すると、その他の構成要素まで一番目立つ特徴に引っ張られて歪んで認識してしまうこと。例えば異性を見るとき、容姿がさわやかな雰囲気であれば中身までもがさわやかで良い人だと思うのも「ハロー効果」。
  3. 単純接触効果：何かしらで接触する機会が増えると、その接触した相手に対して好意を持ちやすくなること。ランディングページに一度訪問して離脱してしまったユーザーに対し、リターゲティング広告を行うことで接触回数を増やし、サービスを記憶して頂くと同時に好感度も上がる。
  4. バンドワゴン効果：「これが流行っている」と聞くと、人はその流行している物事を好意的に捉える傾向。「大流行」「大人気」という言葉を含むキャッチコピーを付けられた商品やサービスは不思議とよいものに見えてしまう。
  5. 同調現象：周囲の人間と同じ行動をしていると安心し、逆に自分1人だけが違う行動をしていると不安を覚えること。例えば「30代男性の8割が使用」「◯◯地区の主婦は皆使っている」というように、商品のマジョリティ性がある場合はそこを最大限アピールすると効果的。
  6. 損失回避の法則：人は利益を獲得することよりも、損失を出さない方を重要視する。自社サービスを利用しないと損をしてしまうイメージを沸かせることで対処。
  7. マッチングリスク意識：商品やサービスを購入する前、ユーザーは「効果が出なかったら…」と不安を持つこと。お客様の声や口コミコーナーを設置する等の手段で解消できる。
  8. 決定回避の法則：人は、選択肢が増えるとその中から選択・決定することが困難になる。ユーザー側で選択する項目を減らし、まっすぐゴールまで案内できるような構成にする。
  9. カリギュラ効果：禁止されると、人はかえって禁止された行為をしたくなってしまう。たとえば、冒頭にいきなりインパクトのある否定的な文章を入れ、ユーザーの関心をひきやすくする。
  10. フレーミング効果：見方や基準を変えることで、同じ物事でも全く違う印象を持ってしまう。普段と少し違った見方をすれば新たな切り口が見えてくるかも。
  11. 文脈効果：隣り合う情報の意味がお互いに影響しあい、意味が形成されること。同じ基礎化粧品でも、ターゲットが女性であれば、ピンクやオレンジなどを基調とした柔らかく女性的な印象に、男性向けの場合は黒やグレーなどシャープなデザインにする場合が多い。
  12. シャルパンティエ効果：大きさや重さの単位を変換することで錯覚が起こること。例えば、10kgの鉄と10kgの羽毛布団を比べた時、重さは同じなのに羽毛布団の方が軽そうだと感じてしまう。
  13. 権威への服従原理：人は権威のある者の言動には無意識に従ってしまう。専門家として紹介された人物のアドバイスであれば、ほとんどの人は無条件にその内容を信頼し、受け入れる。
  14. 一貫性の原理：一度決めたことは無意識のうちにやり通そうとする人の性質。ページを観ているであろうユーザーの欲求を刺激し、少しずつイエスを取ったうえで、「この商品を購入すれば欲求が充たされる」と訴求することで、ユーザーは欲求を満たす為にその商品を購入する。
  15. 認知的不協和：自身の中で、矛盾する2つの感情を抱え、不快感を感じること。その認知的不協和が起きている状態を解消するための手段を提示してコンバージョンに至らせる。

ランディングページを作る前に！参考にしたいLPデザインまとめサイト10選

by

https://ferret-plus.com/399

in ferret on 2019-03-06

今回は、ランディングページのデザインや構成の参考になるまとめサイトを紹介します。

国内のランディングページのデザインまとめサイト

  1. Web Design Clip [L]：業界問わず、参考になるランディングページのデザインがまとめられたWebサイト。各デザインにカーソルを合わせると、「category（美容・健康・化粧品、家電・PC・玩具など）」「main color」「sub color」の確認ができる。さらに各項目をクリックするとその項目ごとのランディングページのデザイン一覧を表示。自社と同じ業界ではどのようなランディングページを作っているのかやカラーごとにランディングページのデザインを参考にしたい場合に便利。
  2. MUUUUU.ORG（ムーオルグ）：縦長のWebサイトのみをまとめたギャラリーサイト。「カテゴリ」「デザイン」「Webサイトのタイプ」「カラー」ごと一覧表示可能。
  3. ランディングページ集めました。：トップ画面に並ぶサムネイルをクリックするだけで該当ページに遷移するため、気になるデザインを手軽にチェック可。更新年月や取り扱っている商材のカテゴリごとの検索も可能。
  4. LANDINGPAGE BOOKMARK：コンバージョンとなる商品ごとのカテゴリで分けられている。美容商品や健康商品、サプリメントなどを扱うランディングページが多くまとめられている。自社で取り扱っている商品と競合になるランディングページに絞って検索できる。
  5. LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE：スマートフォンに特化。(※リンクが切れている。)
  6. 縦長ページのデザイン 集めました：「セールスレターのデザインリンク集」として、主に美容・ハウツー・情報商材のランディングページをまとめて紹介。商材のメリットをいかに伝えるのか、そのデザイン手法を参考にできる。
  7. LPアーカイブ：デザイナー観点で、多くの分類からランディングページを検索可。商品だけでなく、ランディングページの「カラー」「イメージ」といったカテゴリから絞り込める。ランディングページの商品名や店舗名、掲載先など、より具体的な情報も掲載。
  8. LP advance：「業界・業態」「カラー」「タイプ（かわいい系・クール系など）」「メインビジュアル」の複数のカテゴリをかけ合わせてアンド検索で絞り込める。まとめているランディングページのキャッチコピーを一覧で確認できるため、ライティング担当者の情報収集にもオススメ。
  9. イケてるランディングページデザインまとめ：「にぎやか系」「ネタ系」「神秘系」など、直感的なイメージからも検索できる。ジャンルやカラーでも検索可。
  10. ランディングページ（LP）データベース（Landing Page Database）：日本企業のランディングページを中心にまとめている。(※リンクが切れている。)

海外のランディングページのデザインまとめサイト

  1. Land-book：海外サイトを集めた参考サイト。ランディングページだけでなく、ポートフォリオやブログもまとめられている。キーワード検索や、新着順、人気順の並べ替えも可。アカウント登録をすると気に入ったサイトを「My Favs」というリストに保存できる。
  2. One Page Love：カテゴリー分けや検索機能が充実。ランディングページだけでなく、1ページで完結する様々なサイトを紹介。サイトのテンプレートも配布。
  3. OnePageMania：1ページで完結するWebページを紹介。ランキングから海外で人気なデザインを探せる。カテゴリー機能を使い、同じテーマのデザインを見てまわることも可能。

Google検索で「上手にググる」ための5つのポイントをソフトウェア工学の専門家が解説

by

https://gigazine.net/news/20220329-fact-wrong-google-search-tips/

in Gigazine on 2022-03-29

Google検索は、その利便性や精度の高さから検索市場で圧倒的なシェアを占めている一方で、近年はSEO対策に特化した低質なサイトが検索結果の上位に出てしまう問題から「Google検索は死んでいる」と指摘されるなど、検索のやり方や検索ワード選びにも知識とリテラシーが要求されるサービスとなりつつあります。そんなGoogle検索がかかえる問題点や、Google検索を使う上でおさえておくべきポイントについて専門家がまとめました。

  1. 検索ワード選びに注意すること：Google検索の結果は検索ワードとの関連性が最も高いウェブページを表示する。検索をする際は常に検索ワードが検索結果にどんな影響を与えるかを考慮する必要。
  2. シンプルな検索ワードから徐々に検索結果を絞っていくこと：複数の検索ワードを使った検索をする場合は、最初に知りたいことを最も端的に表した単語で簡潔に検索をしてから、徐々に言葉を増やして検索結果を絞っていく方がいい。
  3. 検索結果のURLにも注目すること：質の高いコンテンツは、検証済みか、または検証が可能な情報源から得られる。そのため、検索結果のページタイトルだけでなくURLにも注目し、例えば政府機関の公式ウェブサイトかどうかなど、発信者が信頼できるかどうかをチェックする必要。
  4. 検索結果がパーソナライズされていることを知っておくこと：Google検索では過去の検索履歴や自分の現在地、YouTubeの視聴履歴などから推測された興味などによって検索結果が変わる。そのため、例えばブラウザのシークレットモードを使うなどして、検索結果が余計な要素の影響を受けないようにした方がいい場合もある。
  5. 他の選択肢もあることを覚えておくこと：Bing・Yahoo・Baidu・DuckDuckGo・Ecosiaなど他の検索エンジンを使うことも可能。複数の検索エンジンで同じ事柄を調べてみて、その結果を比較してみるのもいい。
カテゴリー SEO タグ