FLOW ANATOMY #14 — 1サイトを縦に解剖する
MERIDIANは、
なぜデータで信頼を得られるのか。
技法は『点』、サイトは『線』。架空のプライベートバンク『MERIDIAN／子午線資産経営』は、言葉で「信頼してください」と言う代わりに、数字そのものに語らせます。暗くて豪奢な高級路線ではなく、明るいアイボリーに紺のインクと一本の真鍮線だけ——年次報告書やデータ・ジャーナリズムの視覚言語です。四半世紀の複利がスクロールで自己描画し、実績の数字は画面に入った瞬間に実測のように積み上がり、資産配分はドーナツになって開く。"誠実さ・上品さ・知的さ"を、装飾ではなく情報設計で立ち上げる流れを章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
ヒーロー→実績→複利の航跡→資産配分→沿革→哲学→面談。派手な演出ではなく、「見せる数字を、正しい順番で、静かに動かす」ことで信頼を積み上げる設計です。動きはすべて穏やかに、色はアイボリー・紺・真鍮の三色だけに絞られています。
- 00HERO主張 — 時を味方に、資産に子午線を動
- 01FIGURES信 — 静かな数字が実測のように積み上がる動
- 02GROWTH核 — 複利が一本の線を自己描画する動
- 03ALLOCATION設計 — 資産配分がドーナツになって開く動
- 04TRACK歴史 — 四半世紀の節目を基準線に刻む動
- 05PRINCIPLES規律 — 動かさない四つの原則常
- 06CONTACT誘い — 非公開の面談へ、静かに動
時を味方に、資産に子午線を
狙い暗い全画面ビジュアルの代わりに、ヒーローの背景では四半世紀の複利カーブが真鍮色でゆっくり自己描画される。前面には Newsreader のセリフ体で「時を、味方に。」「資産に、子午線を。」の2行が時間差で立ち上がり、右の細い罫線の内側には受託資産・運用年数・継続率の要約指標が並ぶ。画面に入った瞬間から、これは"データで語る家"だと体に伝える開幕。
つなぎ金融の第一印象は「派手さ」ではなく「端正さ」。明るい紙色・細い真鍮・積み上がる数字という素材を最初に提示し、以降すべての章の視覚言語をここで宣言している。
静かな数字が、実測のように積み上がる
狙い受託資産1.24兆円・ご契約3,200世帯・年平均6.8%・専任42名。4つの実績を、上端に一本の紺の罫を引いた新聞の指標欄のように横並びで見せる。数値は画面に入った瞬間に0から目標値へカウントアップし、桁区切り・小数・単位まで整えて着地する。止まった数字より、"いま数え上げている"という運動のほうが、実測されている感触を与える。
つなぎヒーローの主張を、検証可能な数字で裏づける章。カウントアップは高揚のためではなく「この数字は集計の結果です」という誠実さの演出として使う。等幅グロテスクの数字が信頼の質感を担う。
複利が、一本の線を自己描画する
狙いこのサイトの核。2001年を100とした指数で、モデル運用の航跡を真鍮の実線で、市場平均を灰の破線で重ねる。線は stroke-dashoffset のアニメーションで左から右へ引かれ、下の面グラデーションが遅れて滲み、'08危機の注記と終点の値ラベルが最後に灯る。カタルーム曲線でなめらかに補間し、CDNのチャートライブラリを使わず手描きしている。
つなぎ「下振れを浅く、回復を早く」という文章の主張と、線の形が完全に一致する。読者は説明を読む前に、線が市場平均より上で終わることを目で理解する。データ・ジャーナリズムの中心原理——"図が主役、文は補注"——をそのまま体現した章。
資産配分が、ドーナツになって開く
狙い「配分が9割を決める」という運用哲学を、一枚のドーナツで見せる。5つのセグメントが stroke-dasharray を伸ばしながら時計回りに順に開き、中央の数字は0から100%へ数え上がる。右の凡例では各資産クラスの比率が同期してカウントアップする。多色で飾らず、紺の濃淡＋真鍮一点だけで階層をつける。
つなぎ折れ線が「時間軸の物語」なら、ドーナツは「ある瞬間の設計図」。時系列と構成比という2種類のグラフを続けて置くことで、"過程"と"設計"の両面から運用を語り、単なる実績自慢に落ちない知性を担保する。
四半世紀の節目を、基準線に刻む
狙い2001→2008→2015→2020→2026。上端に引いた一本の紺の線に真鍮の丸ノードを打ち、創業・金融危機・承継・急落・現在の5つの節目を横並びのタイムラインにする。各項目はスクロールで下から静かに立ち上がり、見出しはセリフ体、本文は控えめな灰で添える。相場が荒れた年ほど「線を守った」ことを物語る構成。
つなぎチャートが示した"結果"に、歴史という"文脈"を与える章。ブランド名の子午線＝基準線のメタファーを、そのままタイムラインの罫として視覚化し、社名と体験を一本の線で結んでいる。
非公開の面談へ、静かに
狙い「あなたの資産にも、子午線を。」の見出しの下に、本店・受付・最低運用額の定義リストと、名前・メール・相談内容だけの短いフォームを並べる。フォーカスすると入力欄の縁が真鍮に灯り、送信すると「2営業日以内にご連絡します（デモ）」と静かに応える。急かすバナーもカウントダウンもなく、完全予約制という希少性だけで背中を押す。最後は誠実な免責で締める。
つなぎ全篇で積み上げた"検証可能な信頼"を、最小の摩擦でコンバージョンへ変換する着地。フォームの静けさと免責の正直さが、最後まで金融の品位を崩さない。
TAKEAWAY"データ"で信頼をつくる流れの5原則
MERIDIANから取り出せる、金融・士業・BtoBなど"信頼が商品"の領域全般に持ち帰れる設計則。#10 静けさ が余白で格を出したのに対し、こちらは同じ穏やかさを情報設計に振り向けています。
言わずに、見せる
「信頼してください」と書く代わりに、検証できる数字と図を置く。主張はコピーではなくグラフの形で提示する。読者が自分の目で結論に辿り着ける設計が、最も強い信頼を生む。
明るさは、誠実さになりうる
金融=暗く高級、という定石を外し、アイボリーの紙色に紺のインクで組む。隠すもののない明るさ・可読性の高さそのものが、"包み隠さない"という態度の視覚的な証明になる。
動きは、実測の演出に使う
カウントアップも線の自己描画も、高揚のためではない。「これは集計・計算の結果です」という過程を見せる装置として動かす。だから速度は穏やかで、必ず正しい値に着地する。
図を主役、文を補注に
データ・ジャーナリズムの原理。チャートで結論を示し、文章はその読み方を添えるだけ。時系列（折れ線）と構成比（ドーナツ）を並べ、"過程"と"設計"の両面から語ると知性が立つ。
三色に絞り、一本の線で貫く
アイボリー・紺・真鍮だけ。ブランド名の"子午線＝基準線"を、罫・タイムライン・チャートの基準軸として全篇で反復する。色数とモチーフを絞るほど、上品さと一貫性が両立する。