パソコン・ノートPC・タブレット・スマホでサイトを確認しよう

ほとんどの訪問者は、サイトを作っている大きな画面ではなく、スマートフォンで見ています。ShipPress のプレビューなら、ワンクリックで4つの幅のサイト表示を確認できます。このチュートリアルでは、Pier 7 Coffee を4つのサイズすべてで確認し、Phone のメニューにある小さな問題を見つけて、AI に直してもらいます。

執筆:Oberon Lai。私は ShipPress(Codotx, LLC)を作っています。そのため、これは自社の製品です。このページにアフィリエイトリンクはありません。

プレビューバーで4つのサイズを見つけよう
サイトを開きます。プレビューの右上に4つのボタンがあります:Computer、Laptop、Tablet、Phone。ボタンにカーソルを合わせると、その幅が表示されます。
- Computer:1920 px、大きなデスクトップ画面です。
- Laptop:1280 px です。
- Tablet:1024 px です。
- Phone:480 px です。
ページは実際のその幅で描画されます。ウィンドウに収まらない場合は、ShipPress が全体の幅が見えるように縮小して表示します。ShipPress は、サイトごとに選んだサイズを覚えています。
4つのサイズはプレビューの右上にあります。ここでは Computer が選ばれています。
Laptop:パソコンで見る訪問者に最も多いサイズ

Laptop をクリックします。13〜14インチのノートパソコンでサイトを見る人は多いので、日常的なチェックに最適です。上部のメニューと大きな見出しを見てみましょう。Pier 7 Coffee では、レイアウトは同じまま少し詰まった表示になり、メニューも1行に収まっています。

Laptop(1280 px):レイアウトは同じで、少し詰まっています。
Tablet:複数列の並びと幅の広い画像を確認しよう

Tablet をクリックします。このサイズでは、3列や4列の並び、長いメニュー、横に広い写真などが窮屈になり始めます。ページの上部だけでなく、全体をスクロールして確認しましょう。下の方のセクションで、文字が詰まったり、画像が切れたりすることが最初に起こりやすいからです。

Tablet(1024 px):メニューは収まっていますが、写真はより狭くトリミングされています。
Phone:メニューを開いて、各ページを見ていこう
Phone をクリックします。これで、ほとんどの訪問者が見るのと同じ表示になります。Pier 7 Coffee では、上部のメニューが MENU ボタンに変わり、写真とタイトルが縦に重なって表示されます。
ホームページだけで終わらせないでください。プレビューの左上にあるページメニュー(今開いているページが Home page のように表示されます)を使って他のページにも移動し、それぞれのページで次のことを確認しましょう。
- メニューを開いて、もう一度閉じる、
- 一番下までスクロールする、
- 価格、表、ボタンが読みやすく、タップしやすいか確認する。
Phone(480 px):メニューが MENU ボタンになり、コンテンツが縦に並びます。

スマートフォンで見た Bar Menu ページ:価格表も1列で問題なく読めます。
気になる部分を見つけよう

小さな問題は、大きな画面では見落としがちです。Phone サイズでメニューを開いたとき、右上の角に閉じるボタンが2つありました。大きな × と、小さな余分な × です。動作はしますが、未完成のように見えますし、これはスマートフォンでしか見えません。

左:閉じるボタンが2つある Phone メニュー。右:次のステップで修正した後。
見たままを、どのサイズで起きているかと一緒に AI に伝えよう

問題をチャットでふだんの言葉で説明し、どのサイズで起きているかも伝えましょう。そのまま残してほしい部分も一緒に伝えます。私はこう書きました。
「スマートフォンでメニューを開くと、右上の角に閉じる(×)ボタンが2つあります。1つだけにしてください。Computer のレイアウトはそのままにしてください。」
Worker が作業している間、プレビューには The AI is changing your site… と表示されます。そのまま入力を続けても大丈夫です。新しいメッセージは次に処理されます。1〜2分後、Worker は原因を説明してくれました(テーマが、メニュー自体のアイコンの上にもう1つ × を描画していました)。余分な方を取り除き、この変更は開いた状態の Phone メニューにだけ影響すると伝えてくれました。

チャットでのリクエスト。AI が作業している間も、プレビューは Phone のままです。

Worker の回答。次にやることの提案も添えられています。
Phone でもう一度確認してから、Computer も確認しよう

AI は、いつも画面を自分で見られるわけではありません。結果は自分で確認しましょう。Phone のままメニューをもう一度開きます。今度は閉じるボタンが1つになっているはずです(上の修正前と修正後の画像の右側です)。次に Computer をクリックして、大きな画面の表示が変わっていないことを確かめます。変更が気に入らないときは、上部の History を開いて、変更前のバージョンに戻せます。

Computer に戻した状態:デスクトップのレイアウトは変わっていません。
ヒント
- Go live の前に、すべてのページを Phone で確認しましょう。新しいデザインにするなど、大きな変更をした後にも、もう一度確認してください。
- メッセージにはサイズを書きましょう(「スマートフォンで」「タブレットで」など)。そうすると、AI はそのサイズだけを変更します。
- 実際のブラウザウィンドウでサイトを試すには、プレビューの右上にある Open in browser を使います。ご自分のスマートフォンで見るには、Share to phone を使います。
- Phone では問題ないのに Tablet では何かおかしいときは、そのことを伝えましょう。デザインが最も崩れやすいのは、その中間のサイズです。