Design Direction — 4 Plans2026.07.29For:牧野さん/社長

余裕・余白・
その隙間の気持ちよさを、
どう画面にするか。

下の4案は、すべてカーキ/ベージュの同じ土台から出しています。違うのは「余白の使い方」と「動きの速度」。実物のページなので、スクロールして体で比べてください。各ページ下のバーで〈トップ〉と〈記事〉を切り替えられます。

01

先に、根幹の5原則

Principle 01余白は「空き」ではなく要素

空きを置いた場所に意図が見えると「余裕」になり、見えないと「手抜き」になる。端(余白の切り口)だけは1px単位で揃える。

Principle 02動きは遅く、少なく

フェードは1.1〜1.5秒。速い動きは焦りに、遅い動きは余裕に見える。1画面に動く要素は1つまで。

Principle 03色は3色+1

ベージュ(地)・墨(文字)・カーキ(構造)で組み、アクセントは1色だけ。彩度を上げるのは"買える場所"(購読・問い合わせ)に限定。

Principle 04本文は600〜640px、行送り2.0以上

40代の目に効くのは文字サイズより行間。1行の文字数は32〜38字。ここを削るとメディアの品が落ちる。

Principle 05本数を増やさない

更新頻度で勝負しない設計にする。トップに並ぶ記事は最大5本。空いた面は空けたまま見せる。

Principle 06写真は一段、彩度を落とす

撮った写真をそのまま載せず、彩度を約半分、黒を少し持ち上げ、ベージュを13%混ぜて地の色に寄せる。写真がバラバラでも媒体の色は揃う。掲載中の写真もこの処理済み。

02

共通のパレット(4案とも同じ土台)

生成り#F5F3ED — 地
ベージュ#EFE7DA — 地(温)
グレージュ#E9E6E0 — 地(涼)
カーキ#5F6152 — 構造
オリーブ#3D3E30 — 見出し
#26261F — 本文
テラコッタ#B4735A — 唯一の暖色

白(#FFF)は使わない。真っ白は緊張を生むので、地はすべて生成り〜ベージュ。黒(#000)も使わない。文字は墨(#26261F)まで。この2つを禁じるだけで、画面の呼吸がひとつ深くなります。

03

4案

Plan A — 間 / Ma

文字が主役。写真は1枚だけ。

明朝+一本罫だけで組む、いちばん静かな案。トップは日付とタイトルの行が並ぶだけ。写真の力に頼らず、文章の質がそのまま品に出ます。

向く
読ませる連載・インタビュー中心
強み
写真の点数が少なくても成立/制作が軽い
弱み
SNSでの見た目が地味。初速が出にくい
見る
Plan B — 陽だまり / Hidamari

温度のある余白。手に取りやすい。

丸ゴシック+角丸+紙の粒子。今の潮流のベントーグリッドを使いつつ、1マスをあえて空白にして「余白そのもの」を置いています。

向く
暮らし・道具・レシピ/読者との距離を近く
強み
親しみやすい。回遊率が上がる。広告・PRも馴染む
弱み
洒落感より優しさ寄り。既視感が出やすい
見る
STILL
Plan C — 静物 / Still

ギャラリー。洒落感がいちばん出る。

特大の明朝ロゴタイプ、重なる非対称グリッド、横に流れる写真ギャラリー。作品集の作り。写真の質が高ければ、これがいちばん強い。

向く
写真企画・ブランドとの共同企画・デザイン受注の看板
強み
「この会社に頼みたい」と思わせる。名刺になる
弱み
写真のレベルを落とせない。運用の手間が重い
見る
呼吸
Plan D — 呼吸 / Breath

1画面に1つのことしか言わない。

スクロールに合わせて言葉がゆっくり焦点を結ぶ。記事は3本だけ縦に。夜はダークに自動で切り替わります。読む体験そのものが商品。

向く
創刊号・特集・思想を伝えるページ
強み
体験が記憶に残る。テーマの説明が要らない
弱み
記事が増えると窮屈。一覧性が最も低い
見る
04

最先端は、こう採り入れました

採ったもの

  • 特大エディトリアル・タイポ/案C。見出しを画面幅いっぱいまで。ただし色はオリーブ1色で騒がせない
  • ベントーグリッド/案B。1マスを空白のまま置くのが、この媒体での使い方
  • スクロール駆動アニメーション/案D。CSSの animation-timeline を使用。JSに頼らないので軽い
  • キネティック・タイポ/案D。語がぼけ→焦点へ。速度は1.5秒="急かさない"
  • グレイン+有機的ぼかしグラデ/全案。平坦なフラットを卒業し、紙の温度を出す
  • 流体タイポ clamp()/全案。スマホと大画面で余白比率が崩れない
  • ライト/ダーク追従・動き軽減対応/案D。目と体への配慮=この媒体の主張と一致

捨てたもの

  • 派手なホバーの追従カーソル/目が休まらない。余裕の反対
  • 3D・パララックスの多用/読ませたい媒体では邪魔。重い
  • 高彩度のグラデーション/テック感が出て、40代の生活から浮く
  • 無限スクロール/自動再生動画/時間を奪う設計そのもの。載せない
  • ポップアップの購読誘導/体験を壊す。誘導はフッターと記事末だけ
  • AI画像そのままの多用/写真の質が媒体の信用。ここは手を抜かない
05

ディスカッションで決めたいこと

  1. 写真を、どれだけ用意できるか

    案Cは写真ありきの設計。撮影の体制(誰が撮るか・月に何点か)が決まると、A・B・Cのどれで行けるかが自動的に決まります。ここが最初の分岐。

  2. 更新は月に何本か

    月3本なら案D、月5〜8本なら案A・C、10本超なら案B。逆算して選ぶのが安全です。無理な本数に合わせた設計は必ず崩れます。

  3. この媒体は名刺か、事業か

    デザイン受注の看板(=名刺)なら案C。読者との関係づくり(=事業)なら案B。両方なら、案Cの骨格+案Aの本文で分けるのが現実的。

  4. ロゴと名前

    仮で「余白 / YOHAKU」を入れています。ここが決まると和文書体(明朝か丸ゴシックか)が決まり、案の絞り込みが一気に進みます。

06

おまけ:名前とコーナーの仮案

媒体名の方向
  • 余白(YOHAKU)— 直球。強い
  • 間(AIDA / MA)— 静かで洒落る
  • のりしろ — 遊びと余りの両義
  • Still — 静物と「まだ」の二重
  • 四分(よんぷん)— 湯が沸くまで
コーナー案
  • 余白のつくりかた(インタビュー)
  • 何もしない練習(エッセイ)
  • 隙間の道具(モノ)
  • 間の風景(写真とキャプションだけ)
  • 四十代の余裕(連載)
編集の作法(案)
  • 1記事に「真似できること」を必ず1つ
  • インタビューは問いを2つに絞る
  • 写真は引きを1枚、寄りを1枚だけ
  • タイトルは体言止めを避け、話しことばで
My Recommendation

私の推しは、案Cの骨格に案Aの本文を載せる形。

洒落感で人を連れてきて(案C=トップと特集)、読ませる場所は静けさに切り替える(案A=記事本文)。動きの速度だけは案Dから借りて、全ページ1.2秒に統一する。この三段構えなら「お洒落」と「読みやすい」を両取りできます。案Bは、暮らし・道具の連載が育ってきた第2段階で足すのが順番として自然。

トップ・特集案C — 特大タイポ/非対称グリッド/横スクロールの写真
記事本文案A — 明朝・本文幅620px・行送り2.1・一本罫
動きの速度案D — 1.2秒フェード/1画面に動く要素1つ/ダーク追従
第2段階案B — 連載が5本を超えたら、暮らし系の一覧に温度を足す