TOBIRA DESIGN NOTES
サービスサイト・LPのデザイン参考
目に見えないサービスを紹介するLPでは、何を使えるのかが短時間で伝わることが重要です。製品画面を見せる方法と、比喩やイラストで使う場面を伝える方法を比較します。
事例から読み解く
4件の解説
Legora製品の手がかりと短い言葉で、専門サービスを紹介する
落ち着いた背景の中に黄色いビジュアルとタスク表示、短い見出しを組み合わせた画面。専門的なサービスを紹介する際の情報量を考えます。
解説を読む →
Cofounder一枚のイラストで、サービスの世界観をつくる
空と緑の風景を広く使い、その中にコピーとコンピューターを配置した画面。無形のサービスを、親しみのある場面に置き換える表現を読み解きます。
解説を読む →
Aave製品画面を並べて、利用後の状態を見せる
白い背景と淡い紫、中央の見出し、その下の複数のスマートフォン画面。サービスの説明と製品イメージの距離を近づける構成を考えます。
解説を読む →
Feather余白と小さなモチーフで、軽やかさを伝える
白い空間の中央に短い問いかけを置き、周囲にメモやアイコンのようなモチーフを散らした画面。情報を詰め込まず印象をつくる方法を考えます。
解説を読む →
製品画面を見せるか、利用場面を見せるか
Aaveのように画面を大きく置く構成は、操作後の状態を想像する手がかりになります。CofounderやFeatherのようなイラスト中心の構成は、仕組みよりも世界観や身近さを伝える選択肢です。訪問者が製品を知っているかで、必要な説明量は変わります。
説明と行動をつなぐ
大きなコピーのすぐ近くに補足と主要な行動を置くと、何を理解してから押すのかを整理できます。「無料ではじめる」「デモを見る」「相談する」は同じ意味ではありません。実際に提供している次のステップを明確な言葉で示します。
公開前に読む順序を確認する
画像や動きがなくても、サービス名、対象者、できること、次の行動が文章で読めるかを確認します。スマートフォンでは製品画面内の小さな文字に説明を任せず、見出しと本文でも要点を伝えます。