ホームページのマルチデバイス対応

1. 01

   文字や見出しが不自然な位置で改行する

   固定幅や文字サイズだけでなく、文章のまとまり、余白、表示領域を見直します。

2. 02

   ボタンやメニューが押しづらい

   指で操作することを前提に、押せる範囲、間隔、開閉、次に進む導線を確認します。

3. 03

   タブレットや中間幅だけ表示が崩れる

   PCとスマートフォンの二段階だけでなく、レイアウトが切り替わる途中の幅も確認します。

1. Before

   小さく表示するだけ

   • 文字が読みにくい
   • 操作が詰まる
   • 重要な情報が遠い

3. With MYAJO

   使う場面を整理する

   • 優先情報を決める
   • 幅ごとの構成を設計する
   • 操作と表示を確認する

5. Aim

   画面幅が変わっても操作しやすい

   • 内容を追いやすい
   • 押す場所がわかる
   • 問い合わせまで迷わない

同じURLと情報を基に、画面幅と利用場面に合う読み順・操作・余白へ調整します。

1. 01

   現状を調べる

   • 画面幅確認
   • 崩れ・横スクロール
   • 操作確認
   • 優先ページ選定
2. 02

   組み替える

   • 情報の優先順位
   • レスポンシブ設計
   • 文字・余白
   • 画像・ナビゲーション
3. 03

   実装する

   • HTML・CSS調整
   • JavaScript確認
   • 画像最適化
   • フォーム・CTA
4. 04

   確かめる

   • 主要ブラウザ
   • スマートフォン
   • タブレット・中間幅
   • PC表示

※ 対応範囲は一例です。必要な工程、素材、社内でご担当いただく範囲を確認して決めます。

1. 01

   表示や操作の困りごとを伺う

   どの端末のどのページで、何が見づらいか、どの操作に困るかを伺います。問題が起き始めた時期も確認します。

2. 02

   構造と表示を調べる

   HTML、CSS、スクリプト、テーマの構成と影響範囲を確認します。

3. 03

   直し方を決める

   部分修正と再設計を比較し、優先するページと幅を決めます。

4. 04

   実装して確認する

   画面幅ごとに実装し、表示と操作を確認します。

5. 05

   公開後も確かめる

   本番環境で再確認し、更新時に崩れにくい運用へつなげます。