TOBIRA DESIGN NOTES
Webデザインの参考事例
参考サイトを集めるときは、見た目の好みだけでなく「誰に、何を伝えるページか」を揃えると比較しやすくなります。ここでは保存済みの画面をもとに、文字を主役にする構成、実績を見せる構成、サービスや場所を伝える構成を読み解きます。
事例から読み解く
10件の解説
Cloudstudio黄色と大きな文字で、伝える順番を絞る
黄色の面と黒い大きな文字、右側の立体的なビジュアル。要素の強弱がはっきりしたファーストビューから、短いメッセージを主役にする構成を考えます。
解説を読む →
TSG白い余白と立体表現で、素材の印象を伝える
白い背景の中に異なる質感の立体物を並べ、縦方向の文字を添えた画面です。製品を説明する前に、素材への関心を引く構成を読み解きます。
解説を読む →
Relate実績のコラージュで、表現の幅を見せる
白い背景に大小の作品を散りばめた構成。整った一覧とは違うリズムで、制作実績の幅を伝えるポートフォリオの見せ方を考えます。
解説を読む →
Novra暗い背景と制作物で、説明と実績をつなぐ
黒い背景に明るい見出し、周囲の制作物、暖色のボタンを配置した画面。主張だけでなく作品を近くに置く、制作サービスの紹介方法を考えます。
解説を読む →
Legora製品の手がかりと短い言葉で、専門サービスを紹介する
落ち着いた背景の中に黄色いビジュアルとタスク表示、短い見出しを組み合わせた画面。専門的なサービスを紹介する際の情報量を考えます。
解説を読む →
Cofounder一枚のイラストで、サービスの世界観をつくる
空と緑の風景を広く使い、その中にコピーとコンピューターを配置した画面。無形のサービスを、親しみのある場面に置き換える表現を読み解きます。
解説を読む →
Aave製品画面を並べて、利用後の状態を見せる
白い背景と淡い紫、中央の見出し、その下の複数のスマートフォン画面。サービスの説明と製品イメージの距離を近づける構成を考えます。
解説を読む →
Feather余白と小さなモチーフで、軽やかさを伝える
白い空間の中央に短い問いかけを置き、周囲にメモやアイコンのようなモチーフを散らした画面。情報を詰め込まず印象をつくる方法を考えます。
解説を読む →
五木のアウトドア部写真とイラストを組み合わせ、体験の幅を伝える
淡い緑の背景に自然や人物の写真、遊び心のあるイラストを組み合わせた画面。地域のアウトドア体験を一つの風景にまとめる構成を読み解きます。
解説を読む →
蒸 – 五箇サウナ建物の写真を大きく見せ、場所の印象を伝える
森に囲まれた建物の写真と余白のある白いヘッダー。主役となる一枚を大きく使い、施設の雰囲気を伝えるデザインを考えます。
解説を読む →
最初に決めたい三つの条件
制作するページの目的、主な閲覧端末、用意できる素材を先に書き出します。問い合わせが目的なら行動への導線、作品紹介なら実績の見せ方を重視。写真の少ない案件で、写真中心のサイトをそのまま手本にすると構成が成立しにくくなります。
比較するときの見方
まずファーストビューを同じ画面幅で見比べ、最初に読める文、目を引く色、次に押したくなるリンクを記録します。その後に本文へ進み、冒頭の印象と内容がつながっているかを確認します。色やフォントを一つずつ借りる前に、情報の優先順位を読み取ることが大切です。
参考と実装を分ける
ここでの解説はデザインを考えるためのものです。掲載画像からはスクロール演出の挙動や使用ライブラリまでは断定できません。動きやスマートフォン表示はリンク先で確かめ、実装時には自分の内容と操作条件に合わせて作り直します。