Design system — A
デザインの設計図｜公式サイト・LP A案
闇に差す、一筋の光
現在のサイトの「扉と光」を引き継ぎ、参考サイトの落ち着いたトーンを取り入れた案です。暗い面は最初の画面と締めだけにし、本文は明るい石の色の面で読ませます。
この案の考え方
見た目を決める前に、誰に・何を伝えるページかを決めています。
最初の画面で格と静けさを伝え、2画面目以降は明るい面で、立場・人・サービスを読ませます。
アクセントは真鍮色だけにし、押してほしいボタンと、小さな見出しの印に絞ります。
写真の主張を抑え、文章を先に読ませます。メンバーの写真は普段は白黒で、触れるとカラーになります。
見せ場
この案ならではの仕掛けを1つに絞り、ほかの部分は静かに保っています。
扉から漏れる光
最初の画面で、扉が少し開いて縦の光が差し込みます。PCでは、カーソルの位置に淡い光がついてきて、手で光を探すような体験にしています（マウス操作の端末だけ）。
色
色ごとに役割を決め、使う場所を限っています。
#131211最初の画面と締めの地です。
#E7E5E0本文を読ませる面の地です。
#171615明るい面の文字です。地との濃さの差は 14.4：1 です。
#B59A63小さな見出しの印と、細い線に使います。夜の黒との差は 6.9：1 です。
#D4BF8F相談ボタンの地です。文字は夜の黒で載せ、差は 10.4：1 です。
#5D5953補足の文字です。石の白との差は 5.5：1 です。
色味は「真鍮」1つだけです。画面の大部分は夜の黒と石の白で、真鍮は押してほしい場所と印に絞っています。
文字
書体は役割ごとに分け、使う場所を決めています。
和文の見出し
Shippori Mincho B1
売り手の側にだけ立つ、
M&Aアドバイザリー。
線の細い明朝で、静けさと格を出します。
和文の本文
Noto Sans JP
FA・公認会計士・税理士がひとつのチームとなり、ご依頼者の希望を最後まで追求します。
本文は読みやすいゴシックにし、行間を広めに取ります。
欧文
Cormorant Garamond
Where there is Closer, there is a way.
現在のサイトの英文コピーを、添える程度に使います。
写真の扱い
写真は信頼に直結するため、使い方のルールを先に決めています。
- 人物・オフィスの写真は、現在の公式サイトのものを仮で使っています。
- メンバーの写真は普段は白黒にし、触れるとカラーになります。
- 写真の高さを固定し、端末によって伸び縮みしないようにしています。
- 同じ写真を1ページの中で繰り返し使いません。
動き
動きは、伝えたいことを助ける場所に絞っています。
最初の画面で扉の光が差し込み、見出しが下から静かに現れます。PCでは、カーソルの位置に淡い光がついてきます（マウス操作の端末だけ）。動きを減らす設定の端末では、光の演出を止めて表示します。
3案に共通するルール
見た目は案ごとに変えていますが、言葉づかいと見やすさの基準は共通です。
言葉づかい
- です・ます調で、落ち着いた実務的な文章にします。各段落は結論から書きます。
- 仲介や他社を否定せず、「立場の違い」として書きます。
- 売却を急がせる言葉や、条件・結果を約束する言葉は使いません。
- 税務・法務の内容は断定せず、個別に確認する前提で書きます。
- 確認が取れていない数値や条件は、仮の内容であることを明記します。
使わない表現の例
見やすさ
- 文字と地の色の濃さの差を数値で確かめ、読みやすい基準（4.5：1以上）を満たしています。
- 状態や区別は、色だけでなく必ず文字でも示します。
- スマホ（幅360〜390px）とPC（幅1440px）の両方で、改行位置や表示を確認しています。
- 動きを減らす設定にしている端末では、動きを止めて表示します。
- 本文は最初から入った状態で配信し、検索エンジンやAIにも内容が読まれるようにします。