ホームページやLPのPC版デザインは完成したものの、スマホ版まで作る時間がない。この状態でも、コーディングを外注できる場合があります。
ただし、PC版をそのまま縮小すればスマホ版になるわけではありません。横並びの要素をどの順番で縦に並べるか、画像をどこまで見せるか、ボタンを固定するかなど、スマホ表示では新たな判断が必要です。
スマホ版を外注先へ任せる場合は、全部を丸投げするのではなく、変更してよい部分と守ってほしい部分を先に伝えます。
スマホ版のデザインがなくても外注できる場合はある
PC版しかない状態でも、スマホ表示を考えながらレスポンシブコーディングできる外注先はあります。
レスポンシブ対応とは、単に画面全体を小さくする作業ではありません。画面幅に合わせて、文章、画像、メニュー、ボタンなどの配置を変え、パソコンとスマートフォンの両方で使いやすくする作り方です。
たとえば、PC版で次のような配置になっているとします。
- 左側に商品画像
- 右側に商品説明
- その下に申し込みボタン
スマートフォンでは横幅が足りないため、縦に並べ直します。
このとき、次のどちらにするかはPC版だけでは分かりません。
- 商品画像、商品説明、申し込みボタンの順
- 商品説明、商品画像、申し込みボタンの順
外注先に判断を任せることはできますが、完成後に順番を大きく変えると、追加の修正が必要になることがあります。
「おまかせでスマホ対応」と「スマホ版デザイン制作」は違う
混同しやすいのが、レスポンシブコーディングとスマホ版のデザイン制作です。
| 依頼内容 | 主な作業 |
|---|---|
| おまかせでレスポンシブ対応 | PC版を基に、一般的な並び方へ調整する |
| スマホ版デザインを制作 | スマホ専用の見た目や使い方を設計する |
| スマホ版カンプを支給して実装 | 用意されたスマホ版を基にコーディングする |
おまかせ対応では、横並びを縦にする、文字を小さくする、余白を狭くするといった調整が中心です。
一方、スマホ版だけに別の画像を使う、申し込みボタンを画面下へ固定する、一部の説明を折りたたむといった変更には、デザイン上の判断が入ります。
どこまで外注先が考えるのかを決めずに頼むと、「そこまで含まれていると思っていた」という食い違いが起きます。
PC版しかないときに決める7項目
1．横並びの要素をどの順番にするか
PC版では、画像と文章、料金プラン、特徴のカードなどを横に並べることがあります。
スマートフォンでは縦に並べるため、表示順を決めなければなりません。
特に伝えておきたいのは次の部分です。
- 画像と文章のどちらを先に見せるか
- 複数プランをどの順番で並べるか
- 左右にある人物紹介をどう並べるか
- 表の見出しと内容をどう見せるか
- 商品写真と購入ボタンのどちらを先に置くか
判断を任せる場合も、「基本的にPC版の左から順番にしてください」など、基準を一つ決めておくと進めやすくなります。
2．スマホでは非表示にしてよいもの
PC版には、背景の飾り、大きな写真、補足文章などが入っていることがあります。
すべてをスマートフォンへ載せると、ページが長くなり、読みたい情報へたどり着きにくくなります。
非表示を検討しやすいのは次の要素です。
- 背景だけに使っている装飾
- 内容が重複している画像
- 読まなくても申し込みに影響しない補足
- PC操作を前提にした説明
- 横幅がないと内容を読み取れない図
ただし、外注先が独断で内容を削ることは通常ありません。消してよい要素と、必ず残したい要素を伝えます。
3．画像をどのように切り取るか
横長の画像をスマートフォンでそのまま表示すると、人物や商品が小さく見えることがあります。
反対に、画面幅に合わせて画像を切り取ると、見せたい部分が欠ける場合があります。
画像ごとに、次のどれにするかを決めます。
- 横長のまま全体を表示する
- 左右を切り取って大きく表示する
- スマホ用の縦長画像へ差し替える
- 画像を非表示にする
- 背景画像の位置を変える
人物写真では、顔が切れない位置も伝えます。商品のパッケージや文字入り画像では、見切れてはいけない範囲を指定します。
4．メニューをどう開くか
PC版では、ページ上部にすべてのメニューを横並びで置けます。
スマートフォンでは幅が足りないため、三本線のボタンを押して開くメニューへ変更するのが一般的です。
ここで決めるのは、見た目だけではありません。
- 画面全体を覆う形で開く
- 右側から出てくる
- ヘッダーの下へ縦に開く
- 背景を暗くする
- メニューを押したら自動で閉じる
- 電話や申し込みボタンをメニュー内へ入れる
特別な希望がなければ、一般的な形に任せる方法もあります。その場合も、ロゴ、申し込みボタン、電話番号のうち、常に表示したいものを伝えます。
5．申し込みボタンを固定するか
LPでは、スマートフォンの画面下に申し込みボタンを固定することがあります。
ページをスクロールしてもボタンが見えるため、利用者は好きな場所から申し込みへ進めます。
ただし、固定ボタンを入れると、画面の一部が常に隠れます。ボタンが大きすぎると、文章やフォームが読みにくくなります。
決めておきたい内容は次の通りです。
- 画面下へ固定するか
- どの位置までスクロールしたら表示するか
- 電話と申し込みの二つを並べるか
- 閉じるボタンを付けるか
- フォーム入力中は非表示にするか
- 押したときの移動先
PC版に固定ボタンがなくても、スマートフォンだけ追加する場合は、見積もり前に伝えます。
6．表をどのように見せるか
料金表や比較表は、スマートフォンで崩れやすい部分です。
列が多い表をそのまま縮小すると、文字が小さくなって読めません。
主な見せ方には次の方法があります。
- 横へスクロールできる表にする
- 項目を縦に積み直す
- プランごとにカードへ分ける
- 一部の項目を省略する
- 詳細を押すと開く形にする
どの方法がよいかは、表の内容によって変わります。
二つか三つのプランを比べる表なら、カードへ分ける方法も使えます。列が多く、項目の比較が必要なら、横スクロールの方が内容を保ちやすくなります。
7．スマホだけで使う機能があるか
スマートフォンでは、電話番号を押して発信する、地図アプリを開くといった動きを付けられます。
PC版だけを見ても、こうした機能が必要かどうかは判断できません。
依頼前に整理したい機能は次の通りです。
- 電話番号を押したら発信する
- 住所を押したら地図を開く
- LINEやSNSを開く
- アプリのダウンロード画面へ進む
- 画面下に問い合わせボタンを固定する
- 長い説明を開閉できるようにする
電話番号は、画面に見える数字と実際の発信先を別々に設定できます。番号を変更したときは、表示だけでなくリンク先も見ます。
スマホ版デザインを別に作った方がよいケース
PC版を基にしたおまかせ対応で十分なサイトもありますが、次のような場合はスマホ版のカンプを用意した方が安全です。
LPの申し込み率を重視する
広告からスマートフォン利用者を集めるLPでは、情報を見せる順番が結果に影響します。
PC版の左から順番に縦へ並べるだけでは、商品の特徴、料金、口コミ、申し込みボタンの流れが不自然になることがあります。
どの情報を先に見せるかまで考えるなら、スマホ版を設計してからコーディングへ進めます。
PC版とスマホ版で内容を変える
デバイスによって、画像、文章、ボタン、メニューの内容を変える場合は、外注先へ文章だけで伝えるより、スマホ版カンプを作った方が分かりやすくなります。
たとえば次のようなサイトです。
- スマホだけ電話ボタンを表示する
- PCでは動画、スマホでは画像を使う
- スマホでは説明文を短くする
- PCとスマホで画像の並び順を変える
- スマホでは一部の項目を折りたたむ
特殊なレイアウトが多い
文字を画像へ重ねる、横へ動くコンテンツを使う、画面いっぱいの写真を何度も切り替えるなど、一般的な縦並びでは再現しにくいデザインもあります。
この場合、コーダーの判断だけでスマホ版を作ると、発注者が考えていた見た目と差が出やすくなります。
見積もり前に送るもの
スマホ版がない状態で見積もりを頼むときは、PC版デザインだけを送るのではなく、次の情報もまとめます。
- PC版デザインの共有URLまたはデータ
- ページ数
- ページのおおよその長さ
- スマホ版デザインがないこと
- スマホ表示を任せたい範囲
- 必ず守ってほしい表示順
- 非表示にしてよい要素
- スマホ専用画像の有無
- 固定ボタンの有無
- フォームの有無
- WordPressへ組み込むか
- 希望する納品方法
- 希望納期
「スマホ版はおまかせします」だけでは、どこまで自由に変えてよいのか分かりません。
最低限、「内容は削らない」「横並びは左から順にする」「申し込みボタンは画面下へ固定する」など、完成後に変えたくない部分を伝えます。
見積もりで確認したい範囲
見積もりを受け取ったら、スマホ対応という言葉だけで判断せず、何が含まれているかを見ます。
- スマホレイアウトを考える作業
- タブレット幅の調整
- メニューの開閉
- 固定ボタン
- 表の組み替え
- スマホ用画像への差し替え
- 実機での表示確認
- 完成後のレイアウト変更
- 対応するブラウザ
- 修正できる期間
スマホ版の設計を任せた場合、完成後に発注者の希望で配置を変える作業は、コーディングミスの修正ではなくデザイン変更として扱われることがあります。
どの段階までなら配置を相談できるのかも、着手前に聞いておきます。
完成後は画面幅を変えて見る
スマートフォン表示は、自分が使っている一台だけで確認して終わりではありません。
少なくとも、幅の狭いスマートフォン、標準的なスマートフォン、タブレットに近い幅で見ます。
確認する場所は次の通りです。
- 見出しが一文字だけ次の行へ落ちていないか
- 横スクロールが意図せず出ていないか
- 画像の人物や商品が切れていないか
- ボタンを指で押しやすいか
- 固定ボタンが文章を隠していないか
- 表の内容を最後まで読めるか
- メニューを開いて閉じられるか
- フォームへ文字を入力できるか
- エラー文が画面からはみ出さないか
- 電話や申し込みのリンク先が合っているか
ブラウザの確認画面だけでなく、実際のスマートフォンでも触ります。スクロール、固定ボタン、フォーム入力は、実機で初めて気づく違和感があります。
スマホ版の設計も含めて外注するときの伝え方
依頼前に、外注先が判断する部分と、自分で決める部分を分けます。
自分で決めるのは、情報の優先順位、消してはいけない内容、申し込みまでの流れです。
外注先へ任せやすいのは、画面幅に応じた余白、文字サイズ、一般的なメニューの形、細かな崩れの調整です。
依頼文には、次のように書けます。
「PC版のデザインは完成していますが、スマホ版カンプはありません。スマホ表示は一般的なレスポンシブ対応でお願いします。横並びの要素は原則として左から順に縦へ並べ、文章と画像は省略しないでください。申し込みボタンはスマホ画面下へ固定したいです。表の見せ方とメニューの開き方は、作業前にご提案ください。」
完成後に判断するのではなく、見積もり時点でスマホ版の進め方をそろえておくと、配置変更や追加費用を減らせます。
まとめ
スマホ版のデザインがなくても、PC版を基にコーディングを外注できる場合があります。
ただし、レスポンシブ対応はPC版を小さくするだけの作業ではありません。表示順、画像の切り取り、非表示にする要素、メニュー、固定ボタン、表の見せ方などを決める必要があります。
一般的な配置は外注先へ任せられますが、情報の優先順位や申し込みまでの流れは発注者が決めた方が、完成後のやり直しを減らせます。
PC版デザインを送る前に、スマホで守りたい部分を短くまとめ、どこまで見積もりに含まれるかを確認してから依頼を進めましょう。
