Inhouseはプロダクトデザインだけでなく、コミュニケーション（より具体的にはコンテンツを指す）のデザインまで見据えています。

コンテンツをデザインする上で最も基礎的な本文と見出しのサイズ感や余白といったスタイルは、審美性や可読性などWebデザインの品質を大きく左右する要素ですが、その調整に時間を割けなかったり、レスポンシブな最適化においてもクオリティがまちまちになりがちだったりで、ベストプラクティス的な参照点・補助線として機能するガイドラインが必要だと判断しました。

そこでタイポグラフィファーストな美しいWebデザインをサポートするため、Webページの性質に応じた4種類のトーンごとの「Contents Style Set」を用意しました。

Elements

Contents Style Setではまず最小限の

• h1（Neutral Toneのみ）
• h2
• h3
• p

といったWebデザインでよく使われる基本的な要素を定義し、ほぼfont-sizeとline-heightとmarginだけで、4種類それぞれのトーンらしさを表現しています。そして他のhtml要素のスタイルにも展開させていく方針で開発・運用しています。

また、デスクトップサイズだけでなくタブレットやモバイルなど画面の小さい閲覧環境でも本文と見出しの余白やサイズ感の関係性を適切に維持できるよう、それぞれの閲覧環境の性質を鑑みてレスポンシブに最適化した上で展開しています。各要素のfont-sizeとline-heightはHarmonic Typographic Scale Calculatorで算出した値を基準に設定しました。

Contents Style Setは本文と見出しのレイアウト的な関係性におけるベストプラクティスを提示することに主眼を置いたガイドラインであり、見出し要素のスタイルなどはデザイン対象のトーン&マナーに応じて適切にカスタマイズを施した上でデザインに活用できます。もちろんContents Style Setのデフォルトでそれぞれのトーンらしさを表現できる最低限のスタイルを定義しているので、そのまま流用したデザインも検討できるでしょう。

Tones

Neutral

基礎となるトーンです。どんな場面でも馴染むように定義しているので、「LPだし基本的にはEnergeticだけど、機能紹介セクションで3カラムのカードの中だけはNeutralの方が馴染みそう」みたいな使い方も有効です。

また、Neutralのみh1を用意しています。基本的にh1はページタイトルなどグローバルなレイアウト側で用意される場合が多いため、Contents Style Setの中で用意しても有効ではない場合が多いと判断しました。その上で、いろんなところで汎用的に使えるNeutralだけは基準となるh1があると便利ではないか、とも判断しています。

@use '@inhouse/inhouse-components-web' as inhouse;

.Neutral {
  h1 {
    font-weight: bold;
    @include inhouse.text(
      font-size: 3xl, // 32
      line-height: dense // 40
    );
    @include inhouse.mq-boundary(down, s) {
      font-size: 2xl, // 26
      line-height: dense // 36
    }
  }

  h2 {
    margin-top: 60px; // 40 * 1.5 = 60
    margin-bottom: 28px;
    font-weight: bold;
    @include inhouse.text(
      font-size: 2xl, // 26
      line-height: normal // 40
    );
    @include inhouse.mq-boundary(down, s) {
      margin-top: 56px;
      margin-bottom: 20px;
      font-size: xl, // 21
      line-height: dense // 28
    }
  }

  h3 {
    margin-top: 56px; // 32 * 1.75 = 56
    margin-bottom: 28px;
    font-weight: bold;
    @include inhouse.text(
      font-size: xl, // 21
      line-height: normal // 32
    );
    @include inhouse.mq-boundary(down, s) {
      margin-top: 36px;
      margin-bottom: 20px;
      font-size: l, // 18
      line-height: dense // 24
    }
  }

  p {
    margin: 20px 0; // line-heightより狭く調整
    @include inhouse.text(
      font-size: m, // 16
      line-height: comfort // 28
    );
  }
}

Article

可読性が大切なブログ記事など読みものコンテンツ向けトーンです。

@use '@inhouse/inhouse-components-web' as inhouse;

.Article {
  h2 {
    margin-top: 60px; // 40 * 1.5 = 60
    margin-bottom: 36px;
    font-weight: bold;
    @include inhouse.text(
      font-size: 2xl, // 26
      line-height: normal // 40
    );
    @include inhouse.mq-boundary(down, s) {
      margin-top: 56px;
      margin-bottom: 32px;
      font-size: xl, // 21
      line-height: normal // 32
    }
  }

  h3 {
    margin-top: 56px; // 32 * 1.75 = 56
    margin-bottom: 36px;
    font-weight: bold;
    @include inhouse.text(
      font-size: xl, // 21
      line-height: normal // 32
    );
    @include inhouse.mq-boundary(down, s) {
      margin-top: 48px;
      margin-bottom: 32px;
      font-size: l, // 18
      line-height: comfort // 32
    }
  }

  p {
    margin: 36px 0; // line-height
    @include inhouse.text(
      font-size: l, // 18
      line-height: super-comfort // 36
    );
    @include inhouse.mq-boundary(down, s) {
      margin: 32px 0; // line-height
      font-size: m, // 16
      line-height: super-comfort // 32
    };
  }
}

Energetic

ジャンプ率高めでエモーショナルな表現や訴求に適した、LPなどにぴったりなトーンです。

h2要素はジャンプ率と文字色で十分に強調できていると判断し、デフォルトでのfont-weightはboldではなくnormalにしています。

@use '@inhouse/inhouse-components-web' as inhouse;

.Energetic {
  h2 {
    color: inhouse.get-semantic-color(informative, 600);
    margin-top: 84px; // 56 * 1.5 = 84
    margin-bottom: 32px;
    @include inhouse.text(
      font-size: 4xl, // 43
      line-height: dense // 56
    );
    @include inhouse.mq-boundary(down, s) {
      margin-top: 64px;
      margin-bottom: 32px;
      font-size: xxl, // 26
      line-height: dense // 36
    };
  }

  h3 {
    margin-top: 70px; // 40 * 1.75 = 70
    margin-bottom: 32px;
    @include inhouse.text(
      font-size: 3xl, // 32
      line-height: 48px // normalとcomfortの間に視覚調整
    );
    @include inhouse.mq-boundary(down, s) {
      font-weight: bold; // モバイルでh3だとp要素とのジャンプ率が低いのでboldに
      margin-top: 48px;
      margin-bottom: 32px;
      font-size: xl, // 21
      line-height: dense // 28
    };
  }

  p {
    margin: 32px 0; // line-height
    @include inhouse.text(
      font-size: l, // 18
      line-height: comfort // 32
    );
  }
}

Calm

規約や技術ドキュメントなど、落ち着いた文体のコンテンツに向いたトーンです。

h2要素には塗りつぶしの背景色スタイルを定義しています。コンテンツの性質上、「概要」「参考事例」など本文をメタ的に説明する見出しが多く、文字数の多いリード的な見出しや本文の一部を引用した見出しと比べて文字数が少なくなりがちです。そのため見出し要素の視覚上のボリュームの少なさによってブロックの区切り感・チャンク感を強調しにくいので背景色で補っています。

@use '@inhouse/inhouse-components-web' as inhouse;

.Calm {
  h2 {
    margin-top: 60px; // 40 * 1.5
    margin-bottom: 28px;
    padding: 2px 8px;
    font-weight: bold;
    background-color: inhouse.get-primitive-color(gray, 50);
    @include inhouse.text(
      font-size: 2xl, // 32
      line-height: dense // 36
    );
  }

  h3 {
    margin-top: 48px;
    margin-bottom: 24px;
    font-weight: bold;
    @include inhouse.text(
      font-size: xl, // 21
      line-height: dense // 28
    );
  }

  p {
    margin: 20px 0; // line-heightより狭く調整
    @include inhouse.text(
      font-size: m, // 16
      line-height: comfort // 28
    );
  }
}

Usage

InhouseではContents Style SetのアセットとしてFigmaライブラリを用意しています。

また、Sass mixinについても今後提供できるよう計画しています。