PCとモバイルの表示を整える

ページのレイアウト方式を確認する

すべてのページが同じ方法で画面幅に対応するわけではありません。ワイヤーHTMLはレスポンシブな文書で、Figma取り込みではPCまたはMobileの指定とデザイン幅が表示に関わります。まずページの種類とデバイス設定を確認します。

大きな画面を小さく表示するだけでは、モバイル向けに設計されたことにはなりません。小さな文字、押しにくいボタン、不自然な順番は調整が必要です。

デザインはデバイス別に準備する

FigmaではPCとモバイルそれぞれのルートフレームと内容を用意し、取り込み時に対応デバイスを選びます。幅だけで自動判別されたと考えず、追加セクションとページ本体のデザイン幅もそろえてください。

狭いデザインしかない場合、大画面への拡大で見え方が変わります。実際の閲覧デバイスに合わせて方法を選び、モバイル稿を無理に横へ引き伸ばさないようにします。

読みやすさから内容を確認する

モバイルでは長い見出し、ボタン、表、価格条件、FAQを確認します。重要な説明が切れたり、文字と画像が重なったりしないかを見ます。段落や階層は調整できますが、高さを減らすために条件を削らないでください。

最初の画面だけでなく、中盤の比較、フォーム、フッターも確認します。説明と行動の関係が、狭い表示領域でも理解できることが重要です。

画像の切り抜きと長い背景を見る

主役が切れていないか、背景と文字のコントラストが足りるか、大きな画像が縮放でぼやけないかを確認します。複数セクションをまたぐFigmaの背景は、分割や画像品質に影響するため、セクションごとに整理します。

画像内の細かい文字は、読めるテキストにするか説明を添えます。高解像度のPCで読めても、モバイルで同じように理解できるとは限りません。

コンポーネントとフォームを操作する

モバイルでカルーセル、FAQ、タブ、ボタンを順に操作します。展開時に次の内容を覆わないか、全画像へ進めるか、キーボードが入力や送信を妨げないかを確認します。複数ステップは利用者と同じ順番で試します。

重要情報をホバーだけで表示しないでください。記録が必要なフォームは、正しい種類を使い、公開後も確認します。プレビューの操作はデータ収集の完了ではありません。

実際のURLで最終確認する

プレビューまたは公開URLを実機で開き、フォント、画像、遷移、戻る操作を確認します。端末にフォントが入っていると不足に気づきにくいため、未インストール端末も使います。画像、原稿、共有部品を更新したら影響箇所を再確認してください。一度の確認が以降のすべての変更を保証するわけではありません。