ランディングページの最終的な品質を決めるブラウザ&デバイスチェック

 

 

以前、「コンバージョンを向上させるコーディングの役割について考える」のレポートで数多く存在しているブラウザやOSに合わせて正しくデザインを表示させることの重要性を書きました。

 

 

 

 

ランディングページは広告であり、多くの広告費を投じてアクセスを促しているため、できる限り多様な環境でも正しく表示させ、多くのコンバージョンを獲得したいものです。

 

 

 

 

そこで今回はランディングページ開発の最終工程であるブラウザ&デバイスチェックについて具体的なチェックポイントも含めレポートしていきたいと思います。

 

 

 

最後の詰め次第で変わる品質とコンバージョン

 

 

 

もし、初めて開いたランディングページのレイアウトが上の画像のように大きく崩れていた場合、そのランディングページで扱っている商品・サービスは大丈夫かな？と心配になると思います。

 

 

 

優れた商品・サービスであっても、そのランディングページのレイアウトが大幅に崩れていたり誤字などが多い状態であれば、マイナスの印象を与えかねません。

 

 

 

１アクセスに対して数百円と費用をかけていてもブラウザに対応していないという理由で台無しになってしまうことを考えるととてももったいないですね。

 

 

 

どの環境でも正しく表示できているかの確認は広告費を無駄にしないための大切な作業工程と言えます。

 

 

 

崩れがないかのチェックにとどまらず、文字が見やすいかどうか、誤った文法を使っていないか、小さいデバイスでもしっかりとした可読性が保たれているか、コンテンツの流れや順番が適切かどうかといった点も合わせてチェックしておきたいですね。

 

 

 

表示速度の対応と同様に、最後の詰めに時間と労力を割けるかどうかで最終的な結果にも影響してきます。

 

 

 

ですので、できあがったランディングページに対して最低限チェックしておきたい基準をあげてみたいと思います。

 

 

 

WindowsとMacの両方でチェックする

 

 

WindowsとMacの大きな違いはデバイスフォントの見え方です。どうしても、WebクリエイターはMacを基準として作業をするケースが多いですが、日本人の大半がWindowsを使っているという事実を忘れてはいけません。双方のOSでデバイスフォントがしっかりとした可読性を保っているかどうかを入念にチェックする必要があります。

 

 

 

Macでフォントを見やすく整えたはずが、Windowsで見てみると意図しないデザインになっていることも珍しくはありません。

 

 

 

また、OSもバージョンごとに留意点も変わりますので、複数のバージョンで確認しておく必要があります。

スマートフォンにおいても、たとえば、iPhoneといっても、iPhone5、iPhone6iPhone6plusなどバージョン違いがあります。

 

 

 

また、そうしたバージョンの違いによりディスプレイサイズも異なるため、印象や文字サイズの見え方なども変わります。

そういった点にも注意しながら、ユーザー目線でチェックすることがポイントです。

 

 

 

大きいディスプレイ/小さなディスプレイ両方でチェック

 

 

Webデザインの難しいところは同じWebサイトでも大きなディスプレイと小さなディスプレイでは見栄えが大幅に変わってきてしまうことです。

 

 

 

ランディングページはブラウザサイズいっぱいに画像を配置したり、自由に枠をとびこえて要素が配置されることが多いため、大きなサイズのディスプレイでも小さなサイズのディスプレイでもしっかりと表示されているかどうかのチェックが必要です。

 

 

 

特にCSSプロパティ「background-size」などで画像をウィンドウサイズに合わせて可変するように配置するとデバイスによってその見え方は全く違ってきます。

 

 

 

10インチ、13インチのディスプレイだけのチェックにとどまらずに、27インチのディスプレイまでも確認し、正しく表示されているかどうか気を配ります。

 

 

 

大きなディスプレイを使用しているユーザーは小さなディスプレイの保有数に比べれば数が減るもの、そうしたユーザーからもしっかりとコンバージョンを確保しておきたいところです。

 

 

 

そして、1600~1800pxでデザインされた画像を配置している場合、大きいディスプレイで見るとどうしても途切れてしまう場合があります。

 

 

 

途切れていてもデザインがしっかりと成立しているかどうかをチェックします。

ディスプレイの大きさによってデザインが激しく崩壊してしまうことは珍しくありません。これもコンバージョンを下げかねない要素になるので合わせてチェックが必要です。

 

 

 

誤字脱字、画像のチェック

 

 

ランディングページはとても多くの文字で構成されています。従って、どれだけ気をつけたとしてもミスをしてしまう確率は上がります。

 

 

 

正しい文章であることはとても基本的なことです。誤字がある履歴書を見ただけでその人の評価が下がってしまうように、ブランディングを目的としたランディングページにおける誤字も企業のマイナス評価へと繋がります。

 

 

 

デバイスフォント、画像フォント、画像内のテキスト、そして日本語として意味が正しく伝わるかも確認します。

基本的な部分ではあるものの、一番注意力と忍耐力が必要な確認作業になるでしょう。

 

 

 

Internet Explorerは古いバージョンでチェック

 

 

近年のPCには最新のブラウザがインストールされていますが、まだ比較的使われているレガシーブラウザとしてIE8（InternetExplorerのバージョン8）があります。

 

 

 

WindowsにインストールされているブラウザInternet Explorerは少し前のバージョンでもHTML５やCSS3に対応していないので注意が必要です。border-radiusなどのCSSプロパティに対応していないのでIE8だけ表示が異なるということも珍しくありません。

 

 

 

HTML5でのマークアップは現在は主流になっていますし、first-childを始めとするCSS3のセレクターはとても便利ですのでこれらを使わずしてコーディングを行うことは難しくなってきました。

 

 

 

しかし、IE8においてはHTML5にすら対応していないので何も対策を行わずしてチェックをすると全くWebページとして成立しなくなっています。

 

 

 

ですので、IE8のためだけにこれらの技術を使わないわけにはいきませんので「html5shiv.js」「selectivizr. js」などといったJavaScriptライブラリによって対応させることを徹底します。

 

 

 

最後に

 

 

実際に制作している時間と同じぐらいの時間を使っても構わないと言えるほど、チェックと修正は重要かつ大変な作業です。

 

 

 

制作に夢中になっていると客観性が失われ、気付けないミスも多く出てきます。ですので、日をおき、複数人で協力して正しい文章とレイアウトを保てているか確認します。

 

 

 

ランディングページは常に編集を繰り返します。大きな変更があるたびにブラウザチェックを行うため、一見非効率にも思えるかもしれません。

 

 

 

しかし、それを乗り越えた先に完成したランディングページはコンバージョンだけでなく、企業の信頼まで獲得してくれる頼もしいページになってくれます。