Design system — C
デザインの設計図｜公式サイト・LP C案
いちばん近くで、売り手を支える
社名の「Closer（より近く）」の響きを、売り手との距離として表した案です。M&Aの契約書の書式（条文・別表・欄外の注記）をデザインの文法にし、全面写真で始まり、全面写真で締めます。
社名の由来としては断定せず、コピーの響きとして使っています。
この案の考え方
見た目を決める前に、誰に・何を伝えるページかを決めています。
最初の画面と締めの問い合わせ欄を、対になる全面写真にします。間の本文は、明るい灰白の面で読ませます。
強みは「第1条〜第3条」、サービスは「別表」、根拠は欄外の「注」として書き、誠実さと専門性を書式で伝えます。
深緑を、相談ボタン、立ち位置の図、印だけに使います。
見せ場
この案ならではの仕掛けを1つに絞り、ほかの部分は静かに保っています。
立ち位置の図
スクロールすると、中央にいた助言者が売り手の隣へ移り、買い手との線が「交渉の相手」に変わります。PCでは画面を止めて図だけが動き、スマホでは図が画面の中央に来たところで動き終わります。
色
色ごとに役割を決め、使う場所を限っています。
#F3F4F1ページの地です。
#FBFBF9図や表の面です。
#14211C文字です。地との濃さの差は 15.0：1 です。
#1D4A3C相談ボタン、図、印です。白い文字との差は 10.0：1 です。
#E2E8E3「売ると決める前から」の印など、面の切り替えです。
#62706A欄外の注記と補足の文字です。地との差は 4.7：1 です。
色味は「深緑」1つだけです。写真以外の部分は灰白と墨緑で、深緑は押してほしい場所と、立ち位置の図に絞っています。
文字
書体は役割ごとに分け、使う場所を決めています。
和文の見出し
Noto Serif JP
いちばん近くで、
売り手を支える。
太めの明朝で、書類のような端正さを出します。
和文の本文
Noto Sans JP
Closerは売り手とだけ契約し、売り手の代理人として買い手と交渉します。
本文は読みやすい標準の太さで、行間を広めに取ります。
欄の見出し
IBM Plex Mono
POSITION TEAM OFFICE
書類の欄名のような等幅の英字で、事実を並べる欄に使います。
写真の扱い
写真は信頼に直結するため、使い方のルールを先に決めています。
- 全面写真3枚（最初の画面・横長の帯・締め）は、AIで作った仮の画像です。実在の場所ではありません。
- 公開時は、撮影した写真か、使用権のある素材に差し替えます。
- 人物の写真は、現在の公式サイトのものを仮で使っています。
- 写真の上に文字を載せる部分は、薄い下敷きを敷いて読みやすさを保ちます。
形とボタン
角の丸み、線、ボタンの強弱も、案の考え方に合わせて決めています。
角の丸み
角は丸めません。写真もボタンも四角く見せます。
区切り
区切りは罫線と、書類の欄のような細い線だけです。影は使いません。
ボタンの強弱（ご相談 ＞ セカンドオピニオン）
動き
動きは、伝えたいことを助ける場所に絞っています。
最初の画面で、写真がわずかに引いて落ち着き、見出しが行ごとに現れます。横長の帯の写真はスクロールで横に広がり、立ち位置の図が動き、PCではメンバーが横に流れます。動きを減らす設定の端末では、動きを止めて表示します。
3案に共通するルール
見た目は案ごとに変えていますが、言葉づかいと見やすさの基準は共通です。
言葉づかい
- です・ます調で、落ち着いた実務的な文章にします。各段落は結論から書きます。
- 仲介や他社を否定せず、「立場の違い」として書きます。
- 売却を急がせる言葉や、条件・結果を約束する言葉は使いません。
- 税務・法務の内容は断定せず、個別に確認する前提で書きます。
- 確認が取れていない数値や条件は、仮の内容であることを明記します。
使わない表現の例
見やすさ
- 文字と地の色の濃さの差を数値で確かめ、読みやすい基準（4.5：1以上）を満たしています。
- 状態や区別は、色だけでなく必ず文字でも示します。
- スマホ（幅360〜390px）とPC（幅1440px）の両方で、改行位置や表示を確認しています。
- 動きを減らす設定にしている端末では、動きを止めて表示します。
- 本文は最初から入った状態で配信し、検索エンジンやAIにも内容が読まれるようにします。