実機がなくても、タブレットなどさまざまな画面サイズの見え方がわかる！

さまざまな端末サイズのプレビュー機能を搭載！

Webデザイナーではない場合、サイト公開前にさまざまな端末サイズでどう見えるかをチェックすることは少ないでしょう。しかしこだわらなくていいわけではありません。
Web制作サービスのBiNDupは、実機がなくても複数の端末のサイズでの見え方をチェックできるデバイスプレビュー機能がまもなく搭載されます。
来年の1月を目指して開発中ですが、先だってどんな機能かをご紹介します。

タブレットなど、5つのサイズの見え方を素早くチェックできます

主要な端末でどう見られているかを知っておく

普段、ノートPCでサイト更新の作業している方で、デスクトップPCやタブレットで自分のサイトを見た時に、その見え方の違いに驚いたことはありませんか？また、同じスマホでも画面サイズによって見え方が変わってきますね。
Webデザイナーが必ず行っている、サイト公開前のチェックには、このズレを未然に防ぐ役割があります。

実機がなくても主要端末でどう見えるかをチェック！

シェア１位の端末など主要サイズを5つ用意

BiNDupのデバイスプレビュー機能は、スマホ2種・タブレット・ノートPC・デスクトップPCの5つのサイズを用意しました。それぞれスマホ／タブレット／PC端末のシェア1位のサイズを採用しているので、これだけチェックすればひとまずOK。プルダウンメニューから選んですぐにチェックできます。別途違う端末のサイズで見たいときは数値を入力して確認もできます。

端末サイズは分析サイト「StatCounter」の2019年11月時点のスマホ／タブレット／PC端末のシェア1位などをセレクト

自動で縮小表示されるからとても便利

ちなみにBiNDupでは、最近の主流であるひとつのサイトが形を変えることでさまざまな端末に最適化されるレスポンシブWebを採用しています。なので基本的な部分は細かく修正する必要はありませんが、メニューなど表示サイズによってよりこだわったレイアウトにカスタマイズしたいときは、見え方をチェックしながら調整することができます。

レスポンシブWebの切り替えポイント

BiNDupでのレスポンシブWebの切り替えポイントをおさらいすると以下となります。
横幅が768ピクセル以下になると、タブレット表示になり、640ピクセル以下でスマホサイト表示に自動で切り替わります。

• 640ピクセル以下　　　　　　→スマホサイト表示
• 641ピクセル～768ピクセル　→タブレット表示※
• 769ピクセル以上　　　　　　→PCサイト表示

※タブレット表示は段組みなどのレイアウトはPCサイトと共有、メニューのみスマホと共有

サイト作りに大切なのは、さまざまな端末でどう見られているかを知っておくこと。
文字の大きさやボタンの大きさがサイトの目的に合っているかどうかは、端末ごとに見え方を把握していなければ始まらないからです。そこで重宝するのが端末ごとのプレビュー機能です。

縦／横の切り替えや、拡大／縮小表示もクリックひとつでOK。表示しているPCの画面が指定した解像度よりも大きい場合は自動的に縮小されて表示します。

目的達成のためのプレビュー機能の活用のポイント

プレビュー機能でどう見えるかをチェックできることがわかっても、具体的にWebデザイナーは、プレビューで何をチェックしてどのようにデザインを調整して、サイトの目的達成に繋げているのでしょうか？
Webデザイナーに確認してまとめてみました。

よく見られている端末をチェック

コンバージョンを狙うならまず、あなたのサイトはどの端末でよく見られているのかを把握しておきましょう。
おおまかに、PCが〇％でタブレットが〇％、スマホが〇％ということがわかっていればOKです。
先ほど伝えたように、レスポンシブWebは切り替えポイントなどのルールがあり、画像などは自動的に拡大／縮小される仕様です。細かく調整ができないので、スマホが多いならスマホよりに、タブレットならタブレットよりにグローバルメニューを調整。タブレットよりもデスクトップPCが多いなら、デスクトップPC寄りのデザインにするという方針を作るのです。
よく見られている端末は、Googleアナリティクスの「デバイス別分析」で確認できます。

プレビューでチェックしたい項目

次に、各端末サイズでサイト目的に沿ったデザインができているかをチェックします。どちらのデザインに寄せるかは、先ほど選んだ方針に従いましょう。

• 1画面に必要な情報が収まって表示されているか？
• 見出しの文字の大きさは適正か？
• グローバルメニューは選択しやすいか？
• 写真の解像度が足りているか？

1画面に必要な情報が収まっているか？

タブレットのレイアウトはPCと同じなので、タブレットで1画面に必要な情報を収めたい場合は、PC側の上下の余白などを調整することでコントロールできます。

見出しの文字の大きさは適正か？

PCで文字の級数を大きめに設定していると、タブレットの見出しも大きくなります。画面の大きなPCで見た場合のインパクトも考慮しつつ、見出しの大きさを調整しましょう。逆にデスクトップPCの利用者のほうが多いようなら、見出しのインパクトやボタンの大きさが十分かをチェック。

グローバルメニューは選択しやすいか？

タブレットのグローバルメニューはスマホのメニューと共用で出し分けることはできません。両方に使いやすい設定を心がけましょう。ハンバーガーメニューを使わない設定にした場合は、選択しやすいサイズかどうかを確認できます。

写真の解像度が足りているか？

普段ノートPCを使っているなら、デスクトップPCでの見え方もチェックポイント。パソコン（1920×1080）を選んで、100％でチェックしてみれば、大画面で閲覧した場合に写真の解像度が足りているかなども把握できます。

※デバイスプレビュー機能は現在開発中のため、仕様やデザインが変更となる可能性があります。

今回は、実機がなくても、さまざまな端末サイズでの見え方がわかるBiNDupのデバイスプレビュー機能について説明しました。さまざまな端末からのコンバージョンを逃さないためにも、ぜひ最新のBiNDupをご活用ください。
BiNDupでサイトを作る