WEBデザインデモ
WEBデザインの改善方針を、図解つきデモで確認するページ。
改善前後の比較図、改善ポイント注釈、スマホ改善例を使いながら、「どこを直すと伝わりやすくなるか」を公開デモとして確認できるページです。
- 改善前後
- 改善注釈
- スマホ改善例
最初に改善前後、その次に改善注釈、最後にスマホ改善を見ると、相談したい論点を絞りやすくなります。
WEBデザインデモ の公開用デモです
このデモでは、個別案件のデザイン提案ではなく、整理方針・注釈・改善の見方を分かりやすく見せることに絞っています。
見どころ
3つの視点で、WEBデザイン改善の考え方を見られます。
画面を整えるだけでなく、情報整理・注釈・モバイル改善まで一連で見えるようにしています。
見た目の差ではなく、伝わり方の差を比較する
改善前後の比較で、情報の順序や相談導線の位置が変わると何が読みやすくなるかを示しています。
- 主従の整理
- 導線の見つけやすさ
- 視線導線の改善
- 比較図
- 伝わり方
- 判断しやすさ
このデモで見えていること
改善前後の差分が、単なる印象論ではなく「理由つき」で理解できます。
どこを直すと良くなるかを注釈で示す
余白、見出し、カード構成、相談導線の位置など、改善ポイントを注釈として示しています。
- 余白の整理
- 見出し粒度
- カードの情報量
- 注釈表示
- 再現しやすい
- 共有しやすい
このデモで見えていること
「なんとなく違う」ではなく、何を変えるとよいかを言語化できます。
390px前後で崩れない見せ方を確認する
スマホ幅での相談導線の見え方、比較要素の積み方、横スクロール抑制をデモとして見せています。
- 導線の優先表示
- 図解の1カラム化
- 横スクロール回避
- スマホ改善
- 390px想定
- 崩れ予防
このデモで見えていること
モバイルで見たときに、どこが読みにくくなるかを先に確認できます。
改善前後
比較図で、伝わり方の変化を一目で見せています。
印象の違いではなく、どの要素がどう変わると判断しやすくなるかを比較しています。
改善前
改善前
主題が分かりにくく、相談導線が埋もれ、情報の粒度がばらついている状態。
- 主従が曖昧
- 導線が目立たない
- カードが読みにくい
改善後
改善後
主題、補足、相談導線、図解の順に視線が流れ、次の行動が選びやすい状態。
- 主題が明確
- 導線が見つかる
- 比較しやすい
改善注釈
改善ポイントを注釈付きで見せることで、相談しやすくしています。
どこを直すべきかが分かるので、問い合わせ時に課題を伝えやすくなります。
注釈 01
主題と補足の距離を整える
H1 とリード文の関係を整理し、最初の理解負荷を下げます。
- H1
- Lead
- 余白
注釈 02
相談導線の判断位置を合わせる
見終わった直後に押せる位置へ相談導線を移し、導線を自然にします。
- 導線位置
- 優先度
- 押しやすさ
注釈 03
比較要素をカードで分ける
同列で比べるべき情報をカードに分け、読み飛ばしにくくします。
- 比較しやすさ
- 読みやすさ
- 再利用性
スマホ改善
スマホ改善例で、390px前後でも崩れない画面をイメージできます。
比較表や図解がスマホで読みづらくならないように、1カラム化と相談導線の強調を前提にしています。
-
1
情報量を絞る
スマホでは一度に見せる情報量を抑え、主題を先に伝えます。
-
2
比較要素を縦積みにする
タブ、比較、カードを全幅にして、横スクロールを出しません。
-
3
相談導線を埋もれさせない
各セクションの終点で次の行動が取れるようにしています。
この内容で相談する
見た目と情報整理を、実案件に合わせて整えたい方へ。
改善したい画面や現在の課題を共有してもらえれば、どこから直すと効果が出やすいかを整理して案内します。
改善したい画面URLや、いま気になっている見せ方の違和感だけ共有してもらえれば入口を整理できます。