文字や見出しが、不自然な位置で改行する
固定幅や文字サイズだけでなく、文章のまとまり、余白、表示領域を見直します。
What we hear
端末ごとの崩れだけでなく、使いにくさを確認します。
見た目が収まっていても、文字、ボタン、画像、メニュー、フォームの使い方に問題が残ることがあります。実際の幅と操作で確かめます。
ボタンやメニューが押しづらい
指で操作することを前提に、押せる範囲、間隔、開閉、次に進む導線を確認します。
タブレットや中間幅だけ表示が崩れる
PCとスマートフォンの二段階だけでなく、レイアウトが切り替わる途中の幅も確認します。
From information to decision
端末ではなく、見る人の行動から組み替えます。
同じ情報でも、外出先で急いで見るときと、社内で比較するときでは必要な見せ方が変わります。内容の順番と操作を幅ごとに整えます。
Before
小さく表示するだけ
- 文字が読みにくい
- 操作が詰まる
- 重要な情報が遠い
With MYAJO
使う場面を整理する
- 優先情報を決める
- 幅ごとの構成を設計する
- 操作と表示を確認する
Aim
どの幅でも進める
- 内容を追いやすい
- 押す場所がわかる
- 問い合わせまで迷わない
Four viewing contexts
同じサイトでも、見る場面は一つではありません。
端末名だけで分けず、どこで、何を知りたくて、どのように操作するかを想定します。
Desktop
じっくり比較する
- 複数情報を見比べる
- 資料を確認する
- 社内で検討する
Mobile
手元ですぐ調べる
- 要点を先に見る
- 電話・地図を使う
- その場で問い合わせる
Tablet
中間の幅で見る
- 縦横を切り替える
- タッチで操作する
- 写真と文章を読む
Operation
実際の条件で確かめる
- 主要な画面幅
- メニュー・フォーム
- 読み込みと表示
MYAJO 同じURLと情報を基に、画面幅と利用場面に合う読み順・操作・余白へ調整します。
Why MYAJO
マルチデバイス対応で、大切にしていること。
つくるものより先に、何を伝え、どう使い続けるかを決めます。
MYAJO method画面幅ごとの設計で行うこと
内容の優先順位から決める
狭い画面へ収める前に、最初に伝える情報、補足する情報、次の行動を整理します。
切り替わる途中の幅まで設計する
PC・スマートフォンの二つだけでなく、タブレットや小型PCを含む中間幅で、改行、余白、並び方を確認します。
見た目と操作を実際に確かめる
メニュー、ボタン、スライダー、フォームなどを操作し、主要なブラウザと画面幅で問題がないか確認します。
Scope & deliverables
必要な画面と機能から見直します。
サイト全体の作り直しだけでなく、崩れやすいページ、メニュー、フォームなど、影響の大きい場所から直す方法もあります。
現状を調べる
- 画面幅確認
- 崩れ・横スクロール
- 操作確認
- 優先ページ選定
組み替える
- 情報の優先順位
- レスポンシブ設計
- 文字・余白
- 画像・ナビゲーション
実装する
- HTML・CSS調整
- JavaScript確認
- 画像最適化
- フォーム・CTA
確かめる
- 主要ブラウザ
- スマートフォン
- タブレット・中間幅
- PC表示
※ 対応範囲は一例です。必要な工程、素材、社内でご担当いただく範囲を確認して決めます。
Good fit
このような表示・操作の悩みに向いています。
- スマートフォンでは文字や画像が見づらい
- 中間の画面幅でレイアウトが崩れる
- メニューやフォームを操作しづらい
- 古いサイトをレスポンシブ対応へ変えたい
Another option
部分調整より再設計が合う場合もあります。
- 固定幅を前提にした古い構造がサイト全体にある
- コンテンツ自体の整理や導線変更が必要
- 動作環境が古く、現在のブラウザへ対応できない
ご相談後に、別の方法が合うと判断した場合も率直にお伝えします。
How we work
崩れる場所と、使いにくい場面を確認します。
確認する内容と役割を一つずつ共有し、途中で認識がずれないように進めます。
- 01
困っている幅を聞く
端末、ページ、操作、いつから起きているかを伺います。
- 02
構造と表示を調べる
HTML、CSS、スクリプト、テーマの構成と影響範囲を確認します。
- 03
直し方を決める
部分修正と再設計を比較し、優先するページと幅を決めます。
- 04
実装して確認する
画面幅ごとに実装し、表示と操作を確認します。
- 05
公開後も確かめる
本番環境で再確認し、更新時に崩れにくい運用へつなげます。
Price & schedule
費用と期間は、対象ページと現在の構造で変わります。
対象ページ、レイアウト数、テーマ・プラグインの構成、必要なブラウザ・画面幅、既存コードの改修範囲を確認してご提示します。
条件を相談するFAQ
よくあるご質問
相談前に気になることをまとめました。ここにない内容も、そのままお問い合わせください。
Qスマートフォンだけ直すことはできますか？
A
可能です。ただし共通するHTMLやCSSがPC表示にも影響するため、構造と影響範囲を確認してから進めます。
Qタブレットも確認してもらえますか？
A
はい。主要な中間幅と縦横の表示を確認し、コンテンツや機能に必要な範囲を決めます。
Qすべての端末で同じ表示になりますか？
A
画面サイズやブラウザにより見え方は異なります。同じ内容と使いやすさを保てるように設計し、主要な環境で確認します。
Q横スクロールや改行崩れだけでも相談できますか？
A
はい。問題が起きる画面幅と原因を確認し、影響を抑えた修正方法をご提案します。
Qレスポンシブ対応と一緒にデザインも変えられますか？
A
はい。現在のデザインを活かす方法と、内容・導線から再設計する方法を比較できます。
Free consultation
何から始めるかは、お話を聞いて決めます。
まとまった依頼書は必要ありません。現在の状況を見ながら、優先することと進め方を一緒に整理します。