ホームページ制作でデザイン案を作るとき、PCとスマホのどちらを基準にすればいいのか迷う方は少なくありません。どちらを基準にするかは、ホームページを見るユーザーが多い端末や業種によって変わります。
この記事では、PC基準とスマホ基準のデザイン案の違いやスマホ基準でデザインしたほうがいい業種を解説し、当社のデザインの基準と進め方も紹介します。
PC基準とスマホ基準のデザイン案とは
現在のホームページ制作は、レスポンシブWebデザインで作るのが一般的です。
レスポンシブWebデザインは、1つのホームページを見る端末の画面幅に合わせてレイアウトを切り替える作り方で、PCとスマホで別々のホームページを用意する必要がありません。同じ内容がPCにもスマホにも表示されるので、更新も1か所で済み、GoogleもレスポンシブWebデザインを推奨しています。
レスポンシブWebデザインでも、デザイン案はPCかスマホのどちらかの画面で先に作ります。先に作る画面によってPC基準とスマホ基準に分かれ、基準にした画面のデザイン案をもとに、もう一方の画面での切り替わり方を決めていきます。
PC基準は、横に広いPCの画面でデザイン案を作り、スマホではそのレイアウトを縦に並べ替えて表示します。PCで横に3つ並んでいるサービス紹介がスマホでは縦に1列になる、写真と文章が左右に並んでいるものがスマホでは写真の下に文章が入る、といった形です。
PCの画面ではサイト全体のレイアウトを一度に見渡せるので、写真の大きさや情報の配置などのバランスを決めやすくなります。一方で、PCの広い画面を前提に情報を並べると、スマホでは縦に長くなりやすく、スマホでどう見えるかを別に確認する必要があります。
スマホ基準は、縦に長いスマホの画面でデザイン案を作り、PCでは余白を広げたり横に並べたりして表示します。スマホの小さな画面に収まるように載せる情報を絞り、ボタンの大きさや文字の読みやすさを先に決めるので、スマホで見るユーザーにとって使いやすいホームページになります。
ただし、PCで見たときに余白が多く間延びした印象にならないよう、PCでの見せ方も合わせて考える必要があります。
PCとスマホの両方のデザイン案を作ることもできますが、デザインの作業がほぼ2ページ分になるので、デザイン費は高くなります。修正が出たときもPCとスマホの両方のデザイン案を直すことになり、確認の手間とスケジュールも増えます。
そのため多くのホームページ制作では、どちらか一方を基準にデザイン案を作り、もう一方の画面はレスポンシブWebデザインの切り替わり方で合わせていきます。
スマホ基準でデザインしたほうがいい業種
PC基準とスマホ基準のどちらでデザインするかは、ホームページを見るユーザーが主にどの端末を使うかで決まります。ここでは、スマホから見られることが多く、スマホ基準でデザインしたほうがいい業種を紹介します。
ECサイト
ECサイトは、商品を探すところから購入するまでをスマホだけで済ませるユーザーが多いホームページです。通勤中や家でくつろいでいる時間に商品を眺め、気になった商品をそのままカートに入れて決済まで進むので、スマホの小さな画面で一連の操作がしやすいかどうかが売上に直結します。
スマホ基準でデザインすると、商品一覧の並べ方や商品写真の大きさ、価格やカートに入れるボタンの位置を、スマホの画面で見たときを前提に決められます。PC基準で商品を横に何列も並べたデザイン案を作ると、スマホでは一覧が縦に長くなり、カートのボタンや送料の案内がスクロールしないと見えない位置に下がることがあります。
購入手続きの入力フォームも、スマホで文字を打ちやすい項目の並びやボタンの大きさを先に考えておくと、途中で購入をやめるユーザーを減らせます。
ただし、法人向けに商品を販売するECサイトのように、取引先の担当者が会社のPCから注文することが多い場合は、PC基準でデザインしても問題ありません。同じECサイトでも、誰がどの端末で買うのかによって基準は変わります。
来店型ビジネス
来店型ビジネスは、飲食店や美容室、治療院、賃貸不動産会社など、ホームページを見たユーザーがお店や事務所に足を運ぶ業種です。来店する前に近くのお店をスマホで検索し、外出先や移動中にホームページを見て、行くかどうかを決めるユーザーが多くなります。
来店型ビジネスのホームページでユーザーが知りたいのは、場所や営業時間、メニューや料金、予約の方法、電話番号などです。スマホ基準でデザインすると、こうした情報をスマホの画面のどこに置くかを先に決められるので、地図や予約のボタン、タップするとそのまま電話がかけられる電話番号を見つけやすい位置に配置できます。
飲食店ならメニューと地図、美容室なら予約、治療院なら施術の内容と料金、賃貸不動産会社なら物件の検索といったように、業種ごとにスマホの画面で優先して見せる情報を決めてデザインできます。
PC基準で情報を横に広く並べたデザイン案を作ると、スマホでは縦に積み重なり、アクセスや予約の案内がページの下のほうに押し出されることがあります。来店を決める前のユーザーは、知りたい情報がすぐに見つからないとほかのお店のホームページに移ってしまうので、スマホで見たときの情報の順番を最初に決めておくことが大切です。
当社のデザインの基準と進め方
当社では、ホームページを見るユーザーに合わせてデザインの基準を決め、基準にしなかった画面での見え方もお客様にイメージしていただいたうえで制作を進めています。
当社のデザイン作成の基準
当社では、基本はPC基準でデザイン案を作成しています。PCとスマホの両方のデザイン案を作らず、PCのデザイン案1つで進めることで、デザイン費を抑えてホームページ制作を進められます。PCの画面でサイト全体のレイアウトを決めておけば、スマホでの並べ替え方もそのレイアウトをもとに決められます。
ただし、ECサイトや来店型ビジネスのように、スマホから見られることが多い業種では、打ち合わせの段階でお客様に確認したうえで、スマホ基準でデザイン案を作成します。商品の購入やお店への来店につながるユーザーの多くがスマホで見るのであれば、スマホの画面で見やすく操作しやすいことを優先したほうが、ホームページの成果につながります。
どちらの基準にするかは、業種だけでなく、お客様が想定しているユーザーや、ホームページで増やしたい問い合わせ・購入・予約の内容を聞いたうえで決めています。
スマホでの切り替わり方を説明する
PCのデザイン案だけを見ても、スマホでどのように表示されるのかはイメージしにくいものです。PC基準でデザインする場合、お客様にはPCのデザイン案を確認していただき、そのうえでスマホでどう切り替わるかを説明しています。
説明するのは、PCで横に並んでいるサービス紹介や写真がスマホでは縦に1列になること、写真と文章が左右に並んでいる部分は写真の下に文章が入ること、ヘッダーのメニューがスマホではボタンを押すと開く形になることなどです。
トップページのメインビジュアルのように横長の写真を使っている部分は、スマホでは見える範囲が変わるので、どこが切り取られて表示されるかも伝えています。デザイン案の段階でスマホでの切り替わり方を共有しておくと、ホームページが完成してからスマホで見て想像と違うと感じることを防げます。
当社のホームページで見え方を確認してもらう
スマホでの切り替わり方を説明してもイメージがつかない場合は、当社のホームページをPCとスマホで見比べていただいています。当社のホームページもレスポンシブWebデザインで作っているので、PCで横に並んでいる部分がスマホでどう並べ替わるのか、メニューがどのように表示されるのかを、実際の画面で確かめられます。
言葉や資料で説明を受けるより、手元のスマホで実際のホームページを触ってみたほうが、文字の大きさやスクロールの長さ、ボタンの押しやすさまで分かります。PCのデザイン案と当社のホームページを見比べることで、お客様のホームページがスマホでどのように表示されるのかを具体的に想像したうえで、デザイン案の確認を進められます。
まとめ
ホームページ制作のデザインは、PC基準とスマホ基準のどちらか一方でデザイン案を作るのが一般的で、どちらを基準にするかはホームページを見るユーザーが主に使う端末で決まります。ECサイトや来店型ビジネスのようにスマホから見られることが多い業種は、スマホ基準でデザインしたほうがユーザーにとって使いやすいホームページになります。
当社では、業種や想定するユーザーをお聞きしたうえで、PC基準とスマホ基準のどちらでデザインするかをご提案しています。PC基準で進める場合も、スマホでの切り替わり方を説明し、当社のホームページで見え方を確かめていただきます。スマホでの仕上がりを想像しながら、納得してデザイン案を確認できます。
スマホで見やすいホームページを制作したい、今のホームページがスマホで使いにくいといったお悩みがあれば、お気軽にご相談ください。
