SVGとCSSでつくる「ブラウザファースト」デザイン

Webサイトのデザインは、どこから始まるべきでしょうか。ワイヤーから？ Figmaのモックから？ あるいはプロトタイプ？

講談社IT戦略企画室テクノロジーラボはKODANSHAtechのメンバーが所属する講談社内に存在する部署です。そのテクノロジーラボのウェブサイト作成は従来の流れとは少し違うアプローチで立ち上がりました。

このサイトの出発点になったのは「ブラウザそのもの」。つまり、表現の最終環境＝開発の最初の場所という考え方です。

SVG、OKLCH、Relative Color Syntax。これらの技術は、デザインの答えをあらかじめ用意するのではなく、「触りながら考える」プロセスを支えてくれるものでした。

SVGでつくるキーグラフィック

テクノロジーラボのWebサイトには、「こう見せたい」という明確なブランディングの要件が最初からあったわけではありません。むしろ、組織自体が立ち上がったばかりで、カラーやトーンも定まっていなかったからこそ、余白のあるデザインプロセスが求められていました。

その中で選んだのが、「まずブラウザでSVGを動かしてみる」という方法です。Figmaではなく、HTMLとCSSでSVGのパラメーターをいじりながら、円を重ね、グラデーションを変え、ノイズをかけてみる。その場で動くものを見ることが、発想の起点になりました。

コードを書き換えてはリロードし、視覚的な反応を確かめながら「らしさ」を探っていく。この反復的な試行錯誤が、サイト全体のグラフィックトーンの核になっていきました。

サイトの背景にあるグラフィックはSVGを駆使して作っています。SVGは、静的なイラストだけでなく、ブラウザ上でインタラクティブに揺れる表現を作るのに適した形式です。特に今回は、ノイズフィルターとCSS変数を組み合わせることで、色の重なりやグラデーションに“ランダム性”を持たせました。

下のグラフィックはチェックボックスを操作することで、適用するフィルターを変更することができます。まずはぜひ試してみてください。

このSVGはフィルターを適用しない状態では、グラデーションを施した2つの円にすぎません。フィルターを適用することで、より複雑な表現へと変わります。

CSSをデザインツールとして使う

最近のウェブサイトでは、Tailwind のようにユーティリティクラスでスタイルを記述する手法がよく使われますが、本プロジェクトでは通常の CSS も併用しました。

また、OKLCH と相対色構文を使うことで、色の設計をより柔軟に行えるようにしています。

OKLCHと相対色構文

OKLCHは、色の“見え方”に着目した色空間で、明るさ（L）や彩度（C）、色相（H）を数値で制御できるだけでなく、それがより人間の目に自然な変化をする、という特徴があります。

そして相対色構文は、特定の色を元に、その色を変化させた別の色を生み出すことができるCSS構文です。

これらを活用すると、たとえば一色の基本カラーを起点に、以下のような様々な別の色を作ることができます。

:root {
  /* 基本カラー */
  --base-color: oklch(0.77 0.12 212.15);

  /* 基本カラーを元に、その彩度と色相を引き継いだ暗い色を生成 */
  --base-color-dark: oklch(
    from var(--base-color) 30% c h
  )
  /* 計算結果: oklch(0.3 0.12 212.15) */

  /* 基本カラーを元に、その彩度と色相を引き継いだ明るい色を生成 */
  --base-color-light: oklch(
    from var(--base-color) 80% c h
  )
  /* 計算結果: oklch(0.8 0.12 212.15) */

  /* calc() を使えば、元の色の数値から相対的な値も指定できる */
  --base-color-lighter: oklch(
    from var(--base-color) calc(l + 10%) c h
  )
  /* 計算結果: oklch(0.87 0.12 212.15) */
}

サイト上での活用方法

今回のサイトの特徴的な要素として、ランダムに変化するテーマカラーが挙げられます。

これも前述のOKLCHと相対色構文を使って、変数として設定したテーマカラーなどいくつかの基本色を起点に、ライト／ダークモード、グラデーション、ボーダー、テキストなどサイト全体の色を設計しています。

このようにパレットを設計することで統一感が出るだけでなく、動的な色の切り替えやテーマ展開も変数の操作だけで完結できるようになります。

次のCSSは実際のサイトに使われているものから一部抜粋したものです。

:root {
  --theme-color-1: var(--color-kodansha-sky);
  --theme-color-2: var(--color-kodansha-purple);

  /* 色変化の方向を設定する係数 */
  --color-direction: 1;

  /* 明るさの変化量の単位となる数字 */
  --lightness-adjustment: 0.1;

  /* theme-colorからグラデーションを生成 */
  --theme-gradient-steps:
    oklch(
      from var(--theme-color-1) calc(60% - 5% * var(--color-direction)) 0.25 h
    )
    0%,
    oklch(
      from var(--theme-color-2) calc(60% - 5% * var(--color-direction)) 0.25 h
    )
    100%;
  --theme-gradient: linear-gradient(to right, var(--theme-gradient-steps));

  /* テキストカラーの元となるグレー */
  --color-gray: oklch(var(--lightness-default) 0 250);

  /* テキストカラー */
  --color-text: oklch(
    from var(--color-gray)
      calc(
        var(--lightness-default) - var(--lightness-adjustment) * 5 *
          var(--color-direction)
      )
      0 0 / 0.75
  );

  /* 背景カラー */
  --color-background: oklch(
    calc(
        var(--lightness-default) + var(--lightness-adjustment) * 5 *
          var(--color-direction)
      )
      0 0
  );

  @media (prefers-color-scheme: dark) {
    /* 色変化の方向を反転 */
    --color-direction: -1;

    /* 基準色を少し明るくする */
    --lightness-default: 0.65;

    /* 明るさの変化量を減らす */
    --lightness-adjustment: 0.07;
  }
}

特に工夫したところがグラデーション生成部分です。--theme-color-* から色相だけを維持し、彩度は 0.25 に統一。明るさは --color-direction 変数で制御し、ライトモードとダークモードで反転させています。

下記の色付きの円を操作すると、テーマカラーが変わり、グラデーションが再生成されます。触ってみてください。

パッと見では分かりづらいですが、主に変数で管理している「明るさ（Lightness）」に着目して図式化すると、以下のような仕組みでテキストカラーと背景カラーが計算されるようになっています。

このように、カラーを基準色からの相対色指定で一度設計すると、各種変数を変更することで、テキストと背景のコントラストなどを実際のブラウザ表示を確認しながら調整するということが可能になります。

「ブラウザファースト」デザイン

このサイトの特徴の一つは、ビジュアルが先にあって、情報設計や構造が後からついてきたという点です。

多くのWeb制作では、ワイヤーフレーム→UIデザイン→開発という順番が王道です。しかし、このプロジェクトではまずビジュアルがありきでブラウザ上で動くものを先に作り、そこにコンテンツを流し込んでいくような順序でした。いわば「ブラウザファースト」のアプローチです。

「ブラウザファースト」というのは、単に“実装優先”という意味ではありません。むしろ、描画環境をそのまま表現のフィールドとして扱うということです。

エディタとブラウザを行き来しながら、色の数値をいじって、ノイズの具合を調整して、hover時の動きを確認する。その場で見て、その場で直す。これは“ビジュアルデザイン”と“実装”が分離されない、プリミティブなプロセスです。

そしてCSSは、そのプロセスを助ける言語になってきています。変数、Open Props、OKLCH……こうした技術は、CSSを記述する人をただの「装飾者」から「表現者」へと変えてくれる。今回の制作では、それを確かに実感しました。

ブラウザをそのまま制作・表現空間にするという発想。今のSVGやCSSにはそういった表現力があります。

---

この記事はGENKIとmottox2の対談を元に、mottox2が編集・記事中コンポーネントの実装を担当しました。