なぜ最近ワンカラムが流行っているのか?
最近ワンカラムレイアウトをよく見かけませんか?なんで増えているのでしょうか?その理由を僕なりに考察してみました。
1.バイラルメディアで採用されていることが多い。
バイラルメディアは、1カラム化することでシェア数されやすくするということに趣旨を置いたサイトです。サイト閲覧数よりもFacebookやTwitterでのシェア数がKPIとなっています。そのため1セッション当たりの閲覧PV数よりもシェアされやすいワンカラムを採用しているところが多いです。
2.レスポンシブデザインの普及
レスポンシブデザインの普及によりスマホでは1カラム、PCでは2カラム(サイドバーあり)になっているサイトが増えてきました。繰り返し改善していく上でPCとスマホが同じようにワンカラムレイアウトならばサイトの改善がし易いです。
ワンカラムレイアウトのメリット・デメリット。
メリットについて
1カラム構成の最大のメリットは「メインコンテンツに集中できる」ということかと思います。ヒートマップ解析ツールPtengineを使って実際の視線が集まっているところを表示したものです。
テキストがある左側に視線が集中していることがわかります。画像にも視線が集中しています。文字が大きい部分、テキストリンクにも視線が集まりやすい傾向があります。
一般的にウェブページを見る目の動きは、Fパターン
下に行くにつれてどんどん閲覧数が減っていきます。サイドバーがあるとサイドバーにも視線が移動します。ワンカラム化することにより視線の移動が少なくなり最後まで読んでもらえる確率が増えます。
無駄を省いて訴求ポイントをアピールできる
サイドバーに目線が移動しないためコンテンツに集中することが出来る。また、訴求ポイントである問い合わせなどに視線を集中させることが可能です。
ワンカラム化することによってこんなデメリットは?
デメリットについて
こんな問題点があるかもしれないので、ワンカラム化が怖くてできないと思っていませんか?
離脱率があがる
閲覧ページビュー数が減る?
サイドバーを見ていた人が見る場所がなくなり閲覧数が減り離脱率が高まるのでは?と心配要素を含んでいますが、実験してみることにしました。
会社のサイトにおける重要なポイントは、何でしょうか?
弊社のサイトで重要視されていることは、問い合わせ数です。問い合わせにつながるサイト構築するためには、できるだけ無駄を省いて問い合わせボタンを押してもらいたい!と考えています。
次に、ファンの獲得です。現在、検索の次に流入が多いのは、Facebookです。Facebookページのいいね!も重要なポイントになっています。
Facebookページにいいね!をしてもらうことで継続的に見ていただけることが出来ます。
現状のサイトの流入経路で多い部分は、どこなのか?
(e-Agencyのコーポレートサイト2014年度のランディングページのデータより)
ランディングページのデータ
ランディングページがブログ 55%ブログ
ランディングページがトップページ(サービスページトップ含む) 26%ブログ
ランディングページが事例 12%
事例とブログに最初ランディングしているのが合計は、81%です。
仮説を立てました。
80%以上のランディングページとなっているブログや導入事例が問い合わせに直結しやすくなるかもしれない。ワンカラムにすることで問い合わせ数が増えるのではないか?
実際変更してみてどうなるのか?A/Bテストしてみました。
目的
(問い合わせ数とFacebookページへのいいね!)の増加。
結果
問い合わせ数の変化
ツーカラム時の問い合わせ数
PV 21514 お問い合せ誘導数137(0.63%) お問い合せ数件数9件
ワンカラム時の問い合わせ数
PV 28225 お問い合せ誘導数184(0.65%) お問い合せ数17件
※問い合わせ数約2倍アップ。問い合わせボタン誘導数(問い合わせボタンクリック数)3%UP
直帰率の変化
ツーカラム時の直帰率
77.37.%
ワンカラム時の直帰率
76.06%
一人あたりPV
ツーカラム時の一人あたりPV
1.63
ワンカラム時の一人あたりPV
1.57
結果まとめ
問い合わせへのクリックは、3%増加。
若干ですが改善が見られました。
直帰率は、変わらず。一人あたりPVは、若干下がりました。
直帰率は、あまり変化がありませんでしたが一人あたりPVは、若干下がりました。メニュー部分やフッター部分を改善することでまだパフォーマンスを上げることが可能だと思っております。
※こちらのデータは時期を分けて調査したため、問い合わせ件数が2倍近くなっていますが、信頼度は時期的要因もあるのでまだ低いです。(しかし、変更後問い合わせ数が増加しているのを感じます。)ただ、問い合わせ誘導数については、ある程度正確かと思います。引き続きデータをとる必要がありサイトデザインも変更の余地があります。
お問い合わせフォームへの誘導数3%増加
Facebookのいいね!数の変化
今までよりも1PV当たりの増加量が2倍近く上がりやすくなっていました。(PV数は、ほぼ同じ。)
※ただし、こちらのデータは記事の内容にも依存するので引き続き調査が必要。
結果考察
ワンカラム化により問い合わせが増えました。Facebookページのいいね!の増加率もあがり効果的なサイト改善かと思います。目的をしっかり作れば1カラムもいいですね。
e-Agencyでは、様々なA/Bテストを支援しております。よろしくお願い致します。
超カンタンA/Bテスト『Optimizelyサポートパック』 | e-Agency
PICK UP
-
タグ: Cloud Shell構築, GA4, GA分析自動化, Gemini CLI, Google アナリティクスMCP, LLM連携, コラム, データ対話型分析, モデルコンテキストプロトコル, 自然言語分析
2025年7月発表!自然言語でGA4を分析できる「Google アナリティクスMCPサーバー」を構築する方法 -
タグ: AIエージェント, GA360, Gemini in Looker, Google Cloud Next, Next Tokyo, Vertex AI Search, イベントレポート, コラム, データ分析高度化, データ利活用, 検索体験向上, 生成AI活用
【Next Tokyoレポート】主役は生成AI!GA360×生成AIの最新活用法を紹介 -
タグ: ASEAN展開, Direct Engine, インドネシア, オフショア開発, グローバル協業, コラム, ジャカルタ, スラバヤ, ビジネス熱気, ファンデザイン室, 出張レポート, 文化共存
【出張レポート】インドネシアで見た、熱気と未来への可能性|株式会社イー・エージェンシー公式note -
タグ: AI実証実験, AI高速処理, ECサイトパーソナライズ, Groq API, HTML自動生成, UX最適化, Web制作, コラム, リアルタイムAIパーソナライズ, 技術進化
【ウェブ制作】AIを使ってウェブサイトをリアルタイムにパーソナライズしてみたい!|株式会社イー・エージェンシー公式note -
タグ: GA4トレーニング, GA4初心者, Udemy講座, gmpプレミアムサロン, アクセス解析学習, コラム, スマホ学習, データ活用, 探索レポート, 解析スキルアップ
プロに学ぶ、夏のGA4スキルアップ。アクセス解析の基本講座が1,500円【8/31まで】 -
タグ: AIと人の協業, AI活用事例, Google Gemini, gemini, カスタム議事録, コラム, プロンプト設計, 会議効率化, 文字起こし, 業務効率化, 議事録効率化
【もう議事録は書かない】Geminiを使って、文字起こしからカスタム議事録を作成|株式会社イー・エージェンシー公式note