サイト改善

レスポンシブwebデザインで参考にしたい事例10選

レスポンシブのweb制作で参考になる秀逸なレスポンシブwebデザインのサイトをまとめました。

単にレスポンシブに対応しただけでなく、随所にwebデザインのトレンドが取り込まれたり、ユーザビリティに配慮されたUIなど、特にクオリティの高い10サイトを紹介します。

メーカー・ECサイトの事例

サーモマグ

サーモマグ
http://thermomug.com/

シンプルなデザインながら、パララックス効果を使ってストーリー性をもたせ製品の魅力を表現しています。表の見せ方や動きのある背景など、細部にわたって決め細やかに作りこまれ、洗練されたイメージが伝わってきます。

パックスナチュロン

パックスナチュロン
http://www.paxnaturon.com/

白と緑を基調としたナチュラルな色使いと丸みを帯びたデザインで、やさしく安心感のある印象が残ります。
アニメーションを用いた演出も心地よく、天然由来の安心・安全な製品の魅力が伝わるデザインです。

Ringly

Ringly
https://ringly.com/

リング型のウェアラブルデバイスの製品サイト。
女性向けのファッショナブルなガジェットが、簡潔な情報と洗練されたデザインにまとめられ、アクセサリーのおしゃれなイメージと便利なガジェット機能が自然に伝わってきます。

コーポレートサイト・採用サイトの事例

みずほFG:新卒採用情報

みずほFG:新卒採用情報
http://www.mizuho-fg.co.jp/saiyou/index.html

整然としたグリッドデザインで、情報がシンプルでわかりやすくまとまっています。
スマホの画面では、メニューの中からプレエントリーとマイページのボタンが優先的に配置されるなど、各デバイスに向けた配慮も見てとれます。

Yahoo!JAPAN 採用情報

Yahoo!JAPAN 採用情報
http://hr.yahoo.co.jp/

トップでは背景動画を用いたりカーソルをあてると回転する人物写真などの演出があり、WHAT IS THIS NYMBERのページではピクトグラムを使ったフラットデザイン、社長メッセージではメリハリの利いた個性的なグリッドデザインなど、各ページに凝らした演出も目を引きます。

観光・旅行サイトの事例

福岡市公式シティガイド よかなび

福岡市公式シティガイド よかなびhttps://yokanavi.com/

ユーザが訪問した時間帯に応じてトップページ画像やオススメガイドが変化したり、スマートフォンを利用する旅行者に向けて現在地を起点とした検索機能を設けるなど、利用シーンを想定した情報提供で満足度を高める工夫が各所に見られます。

箱根湯本温泉 あうら橘

箱根湯本温泉 あうら橘http://www.aura-tachibana.com/

動画や写真をふんだんに使用しビジュアルを中心とすることで、リゾート旅館のイメージを直感的に表現しています。
白・黒のなかにコーポレートカラーの紫をアクセントで取り入れ、無駄を省いた和風な日本らしさも感じられるデザインになっています。

制作・開発サービスサイトの事例

アクセス解析の人工知能「AIアナリスト」

アクセス解析の人工知能「AIアナリスト」
https://wacul-ai.com/

アクセス解析の人工知能という一見難しく感じるサービスを、ポップなカラーと大胆なグリッド使いでわかりやすくすっきりとまとめています。
ユーザの知りたい情報が簡潔にまとまり、利用登録までの流れも非常にスムーズです。

Case 3D

Case 3D
http://www.case-3d.com/

斜めのラインがうまく取り入れられ、パララックス効果を利用した奥行きのある表現が楽しめます。広い余白にシンプルにまとめられたコンテンツ、コーポレートカラーのエメラルドグリーンの使い方など、優雅で清涼感のあるデザインにまとまっています。

デザイン事務所 SAGA INC.

デザイン事務所 SAGA INC.
http://www.sagainc.co.jp/

直線的で男性的な印象になりがちなグリッドを利用したタイルデザインをパステル調でまとめ、明るく軽やかな印象が残ります。
すっきりと余裕のある余白の使い方や、ブラウザのサイズを変えたときのタイルの動きも軽快で目にも楽しいサイトです。

モバイルフレンドリーテストでwebサイトをチェック!【レスポンシブ】

2016年5月、Googleから新しい「モバイルフレンドリーテスト ツール」が発表されました。
(参考:新しいモバイル フレンドリー テスト ツール

モバイルフレンドリーとは、Googleがモバイルでの検索結果を評価する際に用いている評価基準です。Googleでモバイルフレンドリーなwebサイトと評価されることは、SEOランキングにも影響がでてきます。
レスポンシブでwebサイトをモバイル対応した際は、ぜひこのツールでモバイルフレンドリーかチェックしてみましょう!

新しいモバイルフレンドリーテストの使い方

チェックはいたって簡単な3ステップです。

Step1 テストツールにアクセス

まずはテストツールにアクセスします。
テストツールは https://search.google.com/search-console/mobile-friendly から利用することができます。

Step2 分析

URLを入力してエンターを押します。ロボットではないことの確認ダイアログが出るので、チェックして分析を開始します。分析はそれほど時間もかからずに終わります。
mft-01

Step3 分析結果と修正方法の確認

モバイルフレンドリーなページと評価されると緑色で表示されます。
mft-02

モバイルフレンドリーが未対応の場合は赤で表示され、エラー内容と修正方法の確認も行うことができます。
mft-03

「エラーの修正方法を確認」のページへ飛ぶと、エラー内容についての詳細と修正方法が掲載されているので、モバイルフレンドリーなサイトとなるよう対応してみるとよいでしょう。

今後さらに新機能が追加される予定との発表もあり、ますます便利になりそうです。「モバイルフレンドリーテスト」を活用して、モバイルユーザビリティ向上の参考になれば幸いです。

レスポンシブwebデザインとは?特徴と注意点をまとめてみた

picjumbo.com_HNCK7801

タブレットやスマートフォンの普及によってマルチデバイスの重要性が高まり、webサイト制作にレスポンシブwebデザインの対応を求められることが多くなってきました。

とはいえ、「最近よく見るから」「とりあえずレスポンシブで」といった安易な理由での実装は、後々大きなトラブルを抱えることになりかねません。
そんな危険を回避するためにも、レスポンシブwebデザインの特徴を理解し、適切に実装するために必要な注意点をまとめました。

そもそもレスポンシブwebデザインとは?

レスポンシブwebデザインとは、「PC」「スマートフォン」「タブレット」といった各デバイスに応じて、柔軟にデザインを切り替える手法のひとつです。

それぞれの端末によって解像度やディスプレイサイズは多岐にわたり、同じページを表示しても見え方が異なってしまうという不都合が生じてしまい、制作サイドでは各デバイスへの対応が必須となっています。
そこで、以前はそれぞれのデバイスに対応するwebサイトを個別に制作していましたが、レスポンシブwebデザインという手法がでてきたことで、同じページを各デバイス毎に最適化して見た目を調整できるようになり、瞬く間にこの手法が浸透していったのです。

レスポンシブwebデザインの特徴

レスポンシブデザインの3つのメリット

【メリット1】 ワンソース化で更新管理運営が楽

ひとつのhtmlファイル(ワンソース)で各デバイスに対応できるため、今まで各デバイス向けにそれぞれページを用意していた場合と比べ更新管理作業が非常に楽になります。
1ファイルに手を入れるだけで済むため更新がスムーズになり、各デバイス向けにそれぞれ作成することで起こっていたミスも防ぐことができ、効率的に管理を行えるというのは非常に大きなメリットです。
更新が多いwebサイトで、モバイル/デスクトップ用とそれぞれ専用のwebサイトを用意していた場合と比べると、レスポンシブを実装することで運営にかかるコスト(費用・時間)が大きく削減されるのを実感できると思います。

【メリット2】 リダイレクトの必要がない共通URLでシェアやリンクが容易

次に、URLが1つになるというのもメリットとして上げられる大きな特徴になります。

各デバイスに向けて専用のサイトを設けていたり、ユーザエージェント毎にリダイレクトで別々のページへ振り分け表示させていた場合、同じ内容のURLが複数存在することになります。
このような状態でFacebookやTwitterといったSNSへのシェアを行うと、シェアをした人と見る人でデバイスが異なった場合、期待と異なる表示になり混乱や離脱を招く可能性があります。

その点レスポンシブwebデザインでは、同一のURLで各デバイスに向け表示を最適化するため、どの端末から閲覧しても見やすく、SNSへのシェアやリンクを容易に行うことができます

【メリット3】 モバイルフレンドリーなレスポンシブwebデザインはSEOでも有利

最後に、SEOの効果に直結するGoogleのモバイルガイドでも、レスポンシブデザインを推奨していることが上げられます。
(参考:モバイル設定を選択する

2015年2月には、Googleがモバイルフレンドリー・アルゴリズムを発表し、2015年4月21日から適用が実施されました。
そして2016年3月には、5月からさらにこのアルゴリズムの効果を高めるアップデートを段階的におこなっていく事を発表しています。
(参考:ウェブをさらにモバイル フレンドリーにするための取り組み

モバイルフレンドリーなwebサイトは、GoogleのモバイルSEOでのランキング評価に影響を及ぼし、レスポンシブデザインの実装はますます必須の流れになってきていると言えます。


レスポンシブwebデザインの3つのデメリット

【デメリット1】 設計・構築が複雑になり制作コスト(時間・費用)がかかる

ひとつのファイルでできるのだから制作も簡単になるだろうと思ったら大間違いです。
逆にひとつのファイルでマルチデバイスに対応させるため、サイト設計・構築はより複雑で大変なものになってきます。
また、設計・構築が複雑になるということは、サイト制作にかかる時間も費用も膨らみます。

【デメリット2】 表示速度が遅くなる傾向にある(容量が大きくなる)

ワンソース化することで、それぞれ専用に作成されたページよりどうしても容量が大きくなっていきます。
PC用では必要な表示もスマホでは非表示にしたり、またはその逆といったように、別のデバイスにとっては必要のないソースも同htmlファイルに記述することになります。
このため、表示する内容によっては表示速度が遅くなり、専用に作られたページと比較して読み込みに時間がかかってしまうケースがでてきます。

【デメリット3】 各デバイス毎に最適化されたUI/UXには劣る

ワンソースで一括管理がしやすくなる反面、それぞれのデバイスに特化したきめ細かなデザインへの対応が難しくなります。マルチデバイスで閲覧しやすく整合性のとれたデザインをクリアするため、どうしても細かな要望やデザインの妥協を求められる場面がでてきます。
レスポンシブwebデザインは汎用性はあるけれど最良というわけではありません。
各デバイス毎に最適化されたUI/UXには劣ることも把握しておくべき点になります。

レスポンシブWebデザインの向き不向きサイト

以上のような特徴から、レスポンシブwebデザインが効果的に働くのは、UIの変更が少なく情報メインのニュースサイト・ブログ・ECサイト、また会社案内やコーポレートサイトなどがあげられます。
情報が頻繁に更新され、SNSへのシェアも多いwebサイトでは、長期的な視野でみるとランニングコストの軽減と更新管理の手軽さから、満足のいく費用対効果が得られると言えるでしょう。

一方、レスポンシブwebデザインに不向きなのは、IE8以下の古いブラウザに対応が必要なサイトや1ページに情報量の多いサイト、UI/UXにこだわりがあるようなサイトになります。利用目的がはっきりとしていて専用の決め細やかなUI/UXの方が効果が得られるような場合は、レスポンシブに固執せず専用サイトやアプリを検討した方がよいでしょう。

レスポンシブwebデザインの実装で気をつけたい5つのポイント

レスポンシブwebデザインを実装すると決まったら、後になって大きなトラブルを抱えないため、目を通しておきたい注意点をまとめました。

【ポイント1】 ターゲットとするディスプレイサイズを決める(設計時)

PC、タブレット、スマホと端末は大きく分けて3つありますが、さらにそれぞれ解像度やディスプレイサイズが異なり、スマホでは縦置き画面と横置き画面もあります。
また、端末によるブラウザの種類やバージョンなども含めると、すべてのパターンに対応させるには非常に膨大な開発コストがかかってきます。
設計の段階でアクセス解析などをうまく利用し、ターゲットとするディスプレイサイズを適切に線引きすることで、無駄な開発工数とコストを抑えることがポイントになります。

【ポイント2】古いブラウザへの対応確認(設計時)

上記の注意点とも重複する部分がありますが、IE8以下への対応の有無は開発工数の大きな分岐点となります。
現在はIE8以下でレスポンシブを実現させるテクニックや方法など多く出回ってきましたが、いまだに予期せぬ不具合や表示の崩れなどが発生しやすく、問題解決に時間を要する場合があります。
アクセス解析でIE8以下の下位バージョンが切り捨てられないようなシェアを持っているか確認し、もし対応が必要と判断されれば、開発工数を考慮すべきでしょう。

【ポイント3】 PCとスマホの違いを理解したコンテンツの表示切り替え(設計時)

コンテンツの表示を単に見やすく調整したデザインにすることだけがレスポンシブではありません。
同じwebサイトでも、PCとスマートフォンでは使い方や利用シーンなど目的が異なります。
画面に掲載される情報を整理し、ファーストビューでユーザのニーズを優先的に提供するコンテンツの表示切り替え等、設計の段階から各デバイス向けにUI/UXを配慮することで、ユーザの満足度が大きく変わってきます。

【ポイント4】スマホやタブレットで「PCサイト」を見られるように配慮(設計時)

ユーザの中には、上記のコンテンツ切り替えを行うことで逆にストレスを感じ、PCサイトと同じ情報を得たいという欲求を抱えるケースがあります。
また、PCサイトを見慣れているユーザが、デバイスが変わったことで切り替わったデザインに馴染めず戸惑ってしまう場合もあります。
スマホやタブレットでも、ユーザに選択できる「PCサイト」の表示切り替えを用意しておくことで、このようなストレスを軽減することができます。

【注意点5】読み込み時間を考慮した施策(開発時)

デメリット3で上げたように、表示速度が遅くなると離脱率があがり、CVR(購入率)が大きく左右されます。
設計段階で不必要な情報の精査をおこない、さらにコーディングでも高速化に向けた施策を取り入れることで、このようなデメリットを極力減らすことできます。
高速化のテクニックやTipsは日々新しくなっています。
読み込み速度アップを実現し、より優れたユーザビリティへの配慮が成功の鍵となるでしょう。

最後に

多くのレスポンシブwebデザインのサイトが普及し、Googleもレスポンシブデザインを推奨している現在、レスポンシブwebデザインはもはやweb制作での常識となってきています。
ですが、なんでもレスポンシブを実装するのが正解とはいえません。
メリット/デメリットを理解したうえで、必ずしもレスポンシブに固執せず、専用サイトを設けたり別途アプリの検討が必要なケースも出てくるでしょう。
いざレスポンシブwebデザインを実装すると決定した場合でも、開発中に想定していなかった内容がでてきて制作コストが増加したりと、トラブルもよく目にします。
レスポンシブで失敗しないためにも、実装前に発生しそうなトラブルを想定し、回避の一助になれば幸いです。

ランディングページとは ~CV(成果)を上げるための基本情報~

●ランディングページの最適化(LPO)

WEBサイトでは、「いかに、訪問者の行動(商品の購入など)を促せるか」が最も重要なポイントです。
リスティング広告等を出している場合、せっかく多額のお金を投じて多数の見込み客を集客することができても、ランディングページが上手く機能していなければ、全く成果がを上げることにつながりません。

ランディングページは常に最適化を図り、訪問者に、商品の購入やお問い合わせ、資料請求など何らかの行動を促せるように工夫する必要があります。
このことを「ランディングページの最適化(LPO)」と言います。

 

●LPOのためにGoogleアナリティクスは毎日チェックしましょう

ランディングページの最適化(LPO)のためには、Googleアナリティクスのデータの変化を毎日チェックしておきたいものです。
データは日々変化します。チェックを怠っていると、知らない間にCV率が下がり、対策を打つのが遅れてしまうこともあります。

ランディングページの最適化~よくある7つのミス~

多くのウェブサイトはランディングページの最適化というものを誤解しています。ランディングページの目的を達成できないどころか、時にはウェブサイトやブランドの信用すら失ってしまうこともあります。

以下、避けるべき、よくあるミスを挙げていきましょう。

1.一度にたくさんの事を言おうとしすぎている

ランディングページでは1つの成果(商品の購入、メルマガ登録、資料送付など)にしぼるべきです。ユーザーに行動してもらいたいことを1つにすることで、混乱を防ぎます。

ランディングページの目的が「メルマガ購読」なら、それだけにしましょう。
メールマガジン購読の他に、関連する商品の宣伝などを入れたりと、あれもこれを含めるのは、コンバージョン(成果)獲得率を低下の原因になります。

ユーザーに一番やってほしいこと以外の情報は排除しましょう。そうすれば、きっとランディングページのコンバージョン獲得率は上昇します。

2. タイトルが魅力的ではない

タイトルは、ユーザーがページに訪れて一番最初に目にするものです。ユーザーがページに訪れた目的にマッチしているかが大切です。

広告からの流入の場合、広告の文章と、タイトルの内容がマッチしていることが最低条件です。
ユーザーは広告で訴求している内容に惹かれて、広告をクリックしているはずです。ずれたタイトルだと、ユーザーはページを離脱してしまいます。

3.目の動きを意識したデザインになっていない

人々はざっとページを見るとき、「Z」型にページを見ることが色々な実験結果によりわかっています。
ユーザーの目の動きは、ページの左上部から右下部へ向かって動くと言われているのです。

その目の動きを意識して、ページ内の要素を配置し、画像やフォントのサイズを調整する必要があります。
ボタンををユーザーの目の動きの先に配置することで、コンバージョン獲得率が上昇します。

4.フォームを多用している

多くのウェブサイトでポップアップボックス、サイドバー、そしてフッターなどの場所に考えもなくフォームが設置されています。
こうした乱用は訪問者にストレスを与え、おそらく直帰率を高めるだけの結果に終わってしまうでしょう。

ランディングページ中のオプトインフォームは一つにとどめておきましょう。テキストは必要な情報以外は書かないこと。

5.ボタンが目立たない

ボタンの色は目立っているでしょうか?ボタンが小さすぎて見つけづらかったり、逆に大きすぎたりしていないでしょうか?ボタンの文言は適切でしょうか?

単に目立てば良いというだけではなく、色、大きさ、文言によってクリック率は変わります。パソコンでの閲覧かスマートフォンでの閲覧かによっても変わってきます。
色々試し、効果があるかテストをして検証しましょう。

6.内容と無関係な画像

ランディングページに表示している画像は、ユーザーの目的とマッチしているでしょうか?また、注目を集めるものでしょうか?

見た目は大切ですが、オシャレ感を出すのにこだわりすぎて、無関係な画像を表示するのは返って逆効果です。ユーザーに享受できるメリットが表現されている画像であれば最適です。
場合によっては、画像が無いほうがコンバージョン率が上がるケースもあります。

7. ソーシャルシェアボタンを設置している。

「いいねボタン」「ツイートボタン」などのソーシャルシェアボタンをランディングページに設置していませんか?

ランディングページの目的は、ユーザーに特定の1つのアクション(メルマガ登録や、資料請求、商品購入など)を完了してもらうことです。その目的のアクション以外の選択肢はできるだけ排除しましょう

Optimizely徹底解剖!

ABテストを行う際に必要なのが、ABテストツール。どんなツールを選ぶかでABテストの質は全く違ってくるため、よりよいツールを選ぶのは必須です。様々なツールの機能や特徴を理解し、自分に合ったツールを見つけましょう。 今回はその中でも、世界で最も使用されている「Optimizely」について解説します。   61  

そもそも、ABテストとは?

ABテストとは、ウェブマーケティングにおいて、AとBの2パターンの施策を用意し、どちらのほうがより高い効果を得られるかを実験する方法です。実験することによって、より効果のあるほうを取り入れることができるため、2種類の施策で悩んでいるときに最適な方法です。スプリットテストとも呼ばれています。  

「Optimizely」の機能とその特徴

 

簡単に使える

Optimizelyはなにより、導入からテスト実施、分析までの流れが簡単に行えるというのが特徴です。 60 導入は、タグを入れるだけででき、テストの作成・変更も管理画面から直感的に行うことができます。また、テスト結果はリアルタイムに計測され確認できますし、Googleアナリティクスとの連携もできるため、より見やすく分析結果を確認することができます。  

機能が多い

65 Optimizelyの特徴として、ネイティブアプリでのABテストや、多変量テスト(テスト内で複数の変量を掛け合わせる)、マルチチャンネルテスト(ウェブとアプリ両方に同じテストを行う)に対応するなど、他のツールでは対応できない機能に対応しているのが特徴です。  

「Optimizely」の導入実績

世界最大のABテストツールであり、世界8000社以上で導入されています。 また、実績も確実に出ており、例えばSONYでは、コンバージョン達成率の20パーセントアップといった実績があります。  

「Optimizely」の料金体系

フリートライアルプラン:一部機能のみですが、30日間無料で使用することができます。 エンタープライズプラン:有料プランです。日本で使用する際は、代理店を通して行うことが一般的です。代理店により料金は変動しますので問い合わせが必要です。(主な代理店は、イー・エージェンシー、スプリットエンジン、アイスリーデザイン、オプトなど)  

まとめ

Optimizelyは老舗で世界最大のABテストツールで、機能も豊富であるのが特徴です。安心して導入できますね。 そしてさらに、30日間無料で試すことができるのも魅力的ですね。迷っている方は一度問い合わせ、無料トライアルをしてみてから導入を検討するのもよいのではないでしょうか。 気になった方は一度公式サイトを見てみてください。Optimizelyの公式サイトはコチラ

GoogleアナリティクスでABテストをする方法【初心者必見】

ABテストを行う際に必要なのが、ABテストツールです。「Optimizely」や「KAIZEN PLATFORM」などのABテストツールを使用するのが主流ですよね。 しかし、GoogleアナリティクスでもABテストができるのをご存知ですか?ツールをわざわざ導入しなくても簡単に行える方法があるんです。今回はその方法を紹介します。   denchi9v9a2328_tp_v  

そもそも、ABテストとは?

ABテストとは、ウェブマーケティングにおいて、AとBの2パターンの施策を用意し、どちらのほうがより高い効果を得られるかを実験する方法です。実験することによって、より効果のあるほうを取り入れることができるため、2種類の施策で悩んでいるときに最適な方法です。スプリットテストとも呼ばれています。  

GoogleアナリティクスのABテストとは?

Googleアナリティクスでは、ABテストのことを「ウェブテスト」と呼びます。ウェブテストは、Googleアナリティクスについている機能であり、特に追加料金などなく利用することができます。 他のABテストツールとの違いは、要素の一部ではなく全く異なるページを比較すること。そのため、事前に自分で、要素の一部分のみを変えた検証用ページを作成しておく必要があります。それは少し面倒ですが、無料で簡単にABテストを試せる画期的なツールです。  

「ウェブテスト」の始め方

今回は、Googleアナリティクスで「ウェブテスト」を行う方法を説明します。  

0.検証用ページ作成

まず事前に、検証用のページを作成します。検証用ページとは、オリジナルのページと一か所だけを変えたページです。今回は「オリジナルページ」と「検証ページ」と呼ぶことにします。 ※この際に、オリジナルページ、検証ページともに、トラッキングコードが埋め込んであるかを確認してください。  

1.ウェブテスト作成

Googleアナリティクスにログインし、「レポート」ページの左側のタブから「行動」をクリック。下から「ウェブテスト」を選択します。 67 表示された画面の左上、「テスト作成」をクリック。 68  

2.ウェブテストの内容を入力

「新しいテストを作成」というページが出てくるので、「テストの名前」および「テストの目的」を入力します。 テストの名前は、自分の好きな名前を適当につけましょう。目的は、「セッション数」「ページビュー数」「直帰率」から選択するか、新しいものを作成します。 69   テストするウェブページの設定をします。 オリジナルページと検証用ページのURLをそれぞれ入力します。ページ名は基本的に変えなくてよいでしょう。 666  

3.テストコードの埋め込み

テストコードを取得したら、オリジナルページに埋め込みます。貼り付ける場所は、<head>タグの直後なので注意してください。  

4.テスト開始

「テストを開始」をクリック。これでテストが始まります。 656  

最後に

いかがでしたか?ABテストをしたいと思っていても、わざわざツールを導入するのは面倒、という人も、Googleアナリティクスのウェブテスト機能を使えば簡単にABテストを行うことができます。また、Googleアナリティクス内の機能なので追加料金はかからず無料で利用できます。 ABテストに挑戦してみたい方は、一度Googleアナリティクスで試してみるのもよいかもしれませんね。

【ABテスト】オススメツール3選

ABテストを行う際に必須となるのは、ABテストツール。どのツールを使うかで、かなり進めやすさが異なってきます。そこで今回は、オススメのABテストツール3選をご紹介します。  

そもそも、ABテストとは?

ABテストとは、ウェブマーケティングにおいて、AとBの2パターンの施策を用意し、どちらのほうがより高い効果を得られるかを実験する方法です。実験することによって、より効果のあるほうを取り入れることができるため、2種類の施策で悩んでいるときに最適な方法です。スプリットテストとも呼ばれています。  

オススメABテストツール

1.Optimizely

61 Optimizelyは、最も昔からある老舗のABテストツールで、アメリカのOptimizely社が運営しています。 世界でもかなり多く使われており、ウォルトディズニー社やニューヨークタイムズ社などでも利用されています。 ツールの導入からテストの実施、分析に至るまでの過程を簡単に進めていくことができます。テストの作成をウェブ上の管理画面から直感的に行うことができるのも特徴です。  

2.KAIZEN PLATFORM

62 KAIZEN PLATFORMは、日本人が立ち上げたKAIZEN PLATFORM社が運営しているツールです。Yahoo!JAPANやJALなど、日本企業を中心に多数導入されています。 文字通り、ABテストのプラットフォームとなっているのが特徴で、グロースハッカーとしてプラットフォームに参加している人たちがデザイン案を複数提供してくれ、その中から選び取ってABテストを実施することができます。そのため、自社にデザイナーがいなくても、よりよい改善を行っていくことができます。 また、日本を中心に展開しているツールなので、グロースハッカーにも日本人が多く、安心して導入することができます。 63  

3.Visual Website Optimizer

64   Visual Website Optimizerは、Wingfy社が提供しているABテストツールであり、海外ではOptimizelyと比較して語られるツールです。 月額5000円と低価格で始められるほか、ヒートマップ機能がついているのも特徴です。 世界ではOptimizelyに次いで、二位の導入数を誇ります。  

まとめ

一口にABテストツールといっても、それぞれ特徴があります。ツールを選ぶ際は、機能や値段、使いやすさなどに注目し、自分に一番合ったツールを選択できるといいですね。

ABテストとは?徹底解説【初心者必見】

サイト改善の際やウェブマーケティングの際に、頻繁に行われるABテスト。もちろん名前は聞いたことがあると思いますが、ABテストを行う理由を知っていますか?今回は初心者向けにABテストについて解説します。   iphonereview10_tp_v

そもそも、ABテストとは?

ABテストとは、ウェブマーケティングにおいて、AとBの2パターンの施策を用意し、どちらのほうがより高い効果を得られるかを実験する方法です。実験することによって、より効果のあるほうを取り入れることができるため、2種類の施策で悩んでいるときに最適な方法です。スプリットテストとも呼ばれています。 基本的にはAバージョンとBバージョンが半分の確率で表示されますが、設定によって割合を変更することもできます。

具体的にどんな場面で使うの?

では、ABテストを行う際の具体的なシチュエーションについて確認しておきましょう。2種類の施策を比較する際にはどのような場合でも使えますが、主によく使われるのはこの二種類です。

・ウェブサイト内のパーツを変更

ウェブサイト内の1パーツを変更し、効果を比較することです。たとえば、フォームの「送信ボタン」を赤と緑の二色のパターンを用意し、どちらが効果が大きいかを検証します。サイト改善の際によく使われる方法です。

・ウェブ広告を変更

ウェブ広告を出稿する際に2パターンの広告を出し、効果を比較する方法です。広告を出稿するのには莫大な費用が掛かりますが、事前に小規模でより有効な広告を見つける実験をしておけば、CPAを高めることができます。  

ABテストの始め方

ABテスト用のツールがいくつかあるので、それを使うのが一番簡単です。オススメなのは、「Optimizely」と、「KAIZEN PLATFORM」。どちらも有名なツールで利用者も多く使いやすいと評判です。具体的なツールの解説はコチラにあるので、確認してみてください。 まとめ ABテストは、サイト改善などに使われる比較実験テストで、より効果のあるバージョンを知ることができるものです。ウェブサイトを改善したい際やより効果のある広告を出したい際は、一度試してみるのもいいかもしれません。

スマホ用サイトのEFOの際に気を付けるべきポイント4選

今回は、スマホ用サイトで使うエントリーフォームを最適化する際に気を付けるべきポイント4選をお送りします。  

そもそもEFOとは?

EFOとは、「エントリーフォーム最適化」のことです。エントリーフォームとは商品を注文する際などに名前や住所などを打ち込むフォームのこと。サイト管理者のSEO対策やサイト改善といった涙ぐましい努力にもかかわらず、エントリーフォームまでたどり着いても入力を完了せずに離脱してしまう人が70%ほどいると言われています。これでは元も子もありません。 そこで、エントリーフォーム入力のストレスを軽減することによって、コンバージョン達成率を向上させようとするのが、EFOです。    

スマホに特有のEFOがある?

そして、EFOを行う際に絶対に忘れないでほしいのが、スマホでエントリーフォームを打ち込む際には、パソコンからとは異なる離脱の原因が複数存在するということ。ここではそのポイントを解説します。 そして大前提として、パソコン用のサイトはスマホからはとても見づらいということを思い出してください。サイト改善を行いたいのであれば、スマホ用サイトを用意しないのはもってのほか!スマホ用サイトおよびスマホ用エントリーフォームを作ってから、EFOに取り組んでくださいね。  

スマホのEFOで気を付けるべきポイント

1.スクロールは最小限に

スマホ画面は小さく、一度に画面に多くの情報を映し出すことができません。そこで、エントリーフォームを入力する際には、スクロールして入力し、スクロールして入力し…といった作業を繰り返すことになります。 しかし、この「スクロール」という作業は曲者です。まずスクロールするのが面倒ですし、勢いよくスクロールしすぎて必須入力項目を飛ばすなんてことも多々あります。 そこでオススメなのが、一つの画面に情報を表示できるようページを短くすること。そうすればスクロールの手間が省け、エントリーフォームでの離脱を減らすことができます。 s__7028819   またここで注意してほしいのが、画面に情報を押し込もうとして字が小さくなってしまわないこと。後述しますが、字が小さくて見づらいのも離脱のきっかけとなってしまうからです。入力してほしい情報が多い場合は、「次へ」を使いページ数を多く用意しましょう。

2.画面の拡大縮小も最小限に

パソコンサイトをスマホで見る際によくあることですが、字が細かすぎて拡大しなければ見ることができないことがあります。このような画面拡大や縮小操作は、絶対に避けなければなりません。なぜなら、画面の拡大縮小は、両手を使う作業であるからです。 そのため、字は絶対に読みやすい大きさにしましょう。 ちなみに、一般的に入力部分のフォントサイズを16px未満にすると、入力しようとする際に自動的に拡大が行われてしまいます。これもユーザーのストレスとなりうるので気を付けましょう。

3.キーボードや半角全角の自動化

スマホは、パソコンと違って、英字を打ち込む際と日本語を打ち込む際ではキーボードを切り替える必要があります。また、数字にも全角と半角があり、これらもキーボードを切り替えなければ打ち分けることはできません。 そこで、キーボードの指定設定をします。具体的には、「全角半角の自動切換え」「電話番号入力時の数字キーボード」「メールアドレス入力時の英字キーボード」の3つの設定は必須です。 キーボードを設定することで、ユーザーの手間を一つ減らしてあげましょう。  

s__7028821 s__7028822 4.とにかく大きめに

ここまで様々なポイントを見てきましたが、最後に強調したいのは、「とにかく要素を大きくすること」 スマホの画面はとても小さいので、それだけで大きなストレスです。それなのにエントリーフォームも小さくて読みづらかったら…。離脱するユーザーはたくさんいるはずです。それを防ぐためにも、とにかく大きく表示することにしましょう。  

まとめ

以上に気を付けるだけで、スマホ用エントリーフォームのコンバージョン率は改善すること間違いなし!しっかり対策してコンバージョンを上げていきましょう。 EFOの基本はこちらの記事を読んでみてください。