About

Inhouseとは

Inhouseとは、GMOペパボ株式会社の共通基盤デザインシステムです。

各サービスごとのデザインシステムのうち、重複していて共有可能な部分を「Inhouse」という共通基盤デザインシステムにまとめていることを伝える図

デザインシステムとは、ブランドがタッチポイントを活用した体験設計を効率的におこなうために、あらかじめ原則やガイドラインを定めて、その実装としてカラーパレットやコンポーネントライブラリなどのアセットを用意したものです。その上で、各サービスが個別に考えていているような、原則やガイドライン、実装していたアセットのうち、重複しているものをすべてのサービスで使えるように一般化して、あらかじめ用意しておいたものが共通基盤デザインシステムです。ペパボでは、この共通基盤デザインシステムに、「Inhouse」という名前をつけて呼んでいます。

デザインシステムに沿っていないものは作ってはいけない、というルールを設けたいわけではありません。別のデザインへリソースを回せるように、「もっとデザインする」ために、デザインシステムを開発しています。

Inhouseの特徴

ペパボのデザイナーがデザインしているものを分類してみると、プロダクト(ツール的なもの)とコミュニケーション(コンテンツ的なもの)に大きく分けることができます。

Material Designのような公開されているデザインシステムは、ほとんどのものがプロダクトの機能に寄っています。しかし、ペパボのデザインはコミュニケーションにも及んでいるため、Inhouseとはカバーする領域が異なっています。

InhouseとMaterial Designがカバーしている領域が異なることを示した図。Material Designはプロダクトデザインのやりこみ度・カバレッジが広いが、Inhouseはその半分程度。いっぽうで、InhouseはMaterial Designがカバーしていないコミュニケーションデザインの領域も対象にしていることがわかる。

Flavorの仕組み

さらに、ペパボでは複数のサービスを運営していることから、Inhouseは複数のブランドで使用することを前提とする必要があります。そこで、わたしたちは「Flavor」という仕組みを採用しています。色や形など、ブランドによって上書き可能なデザイントークンをFlavorと呼んでいる変数にまとめておくことで、Flavorを差し替えることでブランドイメージを崩さないデザインができるようになります。

「Inhouse Foundation」と呼んでいる共通基盤デザインシステムを、Design Tokensを差し替えることでサービスごとのブランドに最適化した「Service Specific Design System」ができることを示した図。「Inhouse Foundation」は大きく分けてDefault Perceptional Patterns、Basic Functional Patterns、Design Principles・Style Guide・Paletteの3層に分かれていて、Style GuideにはTone and Manner、Layout System、Behaviourなどを含んでいる。また、Patetteには、Color、Typography、Sizingなどが含まれている。さらに、Inhouseは「Inhouse Foundation」のほかに「Inhouse Design Principle」によって作られていることがわかる。

デザイントークンには、Value TokenとSemantic Tokenの2種類があります。Value Tokenには直接的な値を代入し、Semantic TokenにはValue Tokenをアサインします。例えば、ボタンの色は、Sassでは以下のように実装することになります。

// Value Token
$blue-400: #afb3ba;
$blue-500: #9297a1;
$blue-600: #3e6f99;
$blue-700: #585c63;
$blue-800: #393c41;

// Semantic Token
$informative-color: $blue-600;
$success-color: $green-600;
$notice-color: $yellow-600;
$negative-color: $red-600;

.informative-button {
	background-color: $informative-color;
}

このように、Value TokenとSemantic Tokenに値をアサインしたDesign Tokenの集合を、Flavorと呼んでいます。

Flavorが上書きしやすいように、Inhouseそのものは個性がなく、あたりさわりのない「ふつう」のプロトタイプをつくることを原則に定めています。

Principles

Inhouseを開発するにあたって、Inhouse自身のデザイン原則を定めています。

もっとデザインしていくためのシステム

Inhouseは、厳しい制約を設けるものでも、統制を目的としたものでもありません。限られた時間で、よりクリエイティブな成果を生む土台としての、便利な制約を提供します。「デザインされたシステム」ではなく、「もっとデザインしていくためのシステム」です。

継続的なアップデート

Inhouse全体はデザインランゲージであり、コンポーネントはパターンランゲージです。デザインシステムを内製する理由のひとつは、Inhouseが利用者の自身の手によってアップデートしていくものだからです。ペパボの各サービスや利用者側で拡張されたユースケースがあれば、汎用化して適宜Inhouseに取り入れることで、他のサービスでも利用できるようにします。セキュリティやユーザビリティの要件の変更があれば、それに応じて適切にアップデートすることで、組織への浸透を支援します。

上書きしやすいプロトタイプ

Inhouseそのものには個性がなく、あたりさわりのない「ふつう」のプロトタイプです。多くの場面や用途でそのまま使えるものが、ほどよく揃っています。汎用的であるということは、ペパボで必要なすべての要件をカバーしている必要はなく、表面的なトレンドに左右されないことでもあります。そのように設計することで、ペパボの各サービスで上書きしやすくなります。

タイポグラフィファースト

ウェブデザインの95%はタイポグラフィともいわれます。テキストは、コンテンツを届けるのはもちろん、UIを通じてサービスとユーザーのコミュニケーションを担ったり、アクセシビリティにも影響を与えます。ウェブページはコンテンツやサイトのオーナーのものではなく、誰でもアクセスできる開かれた場所へリソースを提供するものです。だからこそ、タイポグラフィを基準にデザインします。