Design system — B
デザインの設計図｜公式サイト・LP B案
立場を言い切り、人を見せる
紹介で来た方が最初に知りたい「何の会社か」と「誰が担当するか」に、最初の画面で答える案です。白地に太いゴシックで立場を言い切り、その直下に7名全員の顔を並べます。
この案の考え方
見た目を決める前に、誰に・何を伝えるページかを決めています。
「売り手の側にだけ、立つ。」を太いゴシックで大きく置き、何の会社かで迷わせません。
最初の画面の直下に、担当する全員の写真を並べます。代表は大きく扱います。
オフィスの椅子の色から採ったプラムを、相談ボタンや小さな印だけに使います。広い面は墨にします。
見せ場
この案ならではの仕掛けを1つに絞り、ほかの部分は静かに保っています。
「仲介は、行いません。」の宣言の面
スクロールすると、画面いっぱいの墨の面に切り替わり、Closerの立場を一つの宣言として見せます。メンバーの写真に触れると、顔の上に経歴が重なって表示されます。
色
色ごとに役割を決め、使う場所を限っています。
#F5F4F1ページの地です。
#FFFFFFカードや入力欄の面です。
#101114文字と太い見出しです。地との濃さの差は 17.2：1 です。
#15161A宣言の面と、相談の入口の地です。白い文字との差は 18.1：1 です。
#4A1F33相談ボタン、番号、小さな印です。白い文字との差は 13.7：1 です。
#EFE6E8「売ると決める前から」などの札の地です。
#5D5F66補足の文字です。地との差は 5.8：1 です。
色味は「プラム」1つだけです。画面の大部分は白と墨で、プラムは押してほしい場所と小さな印に絞り、一番強く伝えたい宣言の面は墨一色にしています。
文字
書体は役割ごとに分け、使う場所を決めています。
和文の見出し
Zen Kaku Gothic New
売り手の側にだけ、
立つ。
太さ900の見出しで、言い切る強さを出します。
和文の本文
Noto Sans JP
担当するのは、大手アドバイザリーファームでM&Aの実務を経験してきた7名です。
本文は読みやすい標準の太さで、行間を広めに取ります。
英字・数字
Instrument Sans
SELL-SIDE 01 02 03
小さな見出しの英字と番号に使います。
写真の扱い
写真は信頼に直結するため、使い方のルールを先に決めています。
- 人物の写真は、現在の公式サイトのものを仮で使っています。
- 7名の写真は、背景・光・服装をそろえて撮影し直すのがおすすめです。
- 普段は白黒にし、触れるとカラーになります。
- 代表の写真は大きく扱い、メンバーは同じ大きさで並べます。
形とボタン
角の丸み、線、ボタンの強弱も、案の考え方に合わせて決めています。
角の丸み
角は丸めません。写真もボタンも四角く見せます。
区切り
区切りは罫線と、墨・白の面の切り替えだけです。影は使いません。
ボタンの強弱（ご相談 ＞ セカンドオピニオン）
動き
動きは、伝えたいことを助ける場所に絞っています。
最初の画面で見出しが行ごとに現れ、メンバーの写真が順に並びます。スクロールで墨の宣言の面に切り替わり、写真に触れると経歴が重なって表示されます。動きを減らす設定の端末では、動きを止めて表示します。
3案に共通するルール
見た目は案ごとに変えていますが、言葉づかいと見やすさの基準は共通です。
言葉づかい
- です・ます調で、落ち着いた実務的な文章にします。各段落は結論から書きます。
- 仲介や他社を否定せず、「立場の違い」として書きます。
- 売却を急がせる言葉や、条件・結果を約束する言葉は使いません。
- 税務・法務の内容は断定せず、個別に確認する前提で書きます。
- 確認が取れていない数値や条件は、仮の内容であることを明記します。
使わない表現の例
見やすさ
- 文字と地の色の濃さの差を数値で確かめ、読みやすい基準（4.5：1以上）を満たしています。
- 状態や区別は、色だけでなく必ず文字でも示します。
- スマホ（幅360〜390px）とPC（幅1440px）の両方で、改行位置や表示を確認しています。
- 動きを減らす設定にしている端末では、動きを止めて表示します。
- 本文は最初から入った状態で配信し、検索エンジンやAIにも内容が読まれるようにします。