Webデザイナー注目！Trelloが公開したデザインシステム「Nachos」を使ってみよう

更新日: 2018年01月31日

インターネット関連、Tech関連の仕事をしているのであれば、それぞれのサービスがどんなデザインガイドラインを持っていて、どんな方法で運営されているのかは、きっと気になるのではないでしょうか。

そうした背景やデザイナーの思いを汲み取って、有名なWebサービスの中にはデザインに関するリソースを公開するものもあります。
TwitterのBootstrapのようなフレームワークで登場する場合もあれば、Facebook Designのようにさまざまなスケッチのリソースを公開しているケースもあります。

そして今回、カンバン方式のタスク管理サービスのTrelloがデザインシステムを公開しました。
それが、シンプルで拡張性の高いNachosと呼ばれるデザインシステムです。

そこで本稿では、*Trelloが公開したデザインシステム「Nachos」*に関して、特徴や概要を解説していきます。
非常にシンプルなのに生産性の高いTrelloのデザインを学ぶよい機会となるのは間違いありませんので、ぜひチェックしてみてください。

Trelloが公開したデザインシステム「Nachos」とは？

スクリーンショット：2017年9月

Trelloは世界で数百万人が利用していると言われる、プロジェクト型のタスク管理ツールです。
ボードやリスト、カードといったそれぞれの要素をフレキシブルに使い分けることで、単にToDoリストを使うよりもうんと生産性が向上します。

*GTD(Getting Things Done＝仕事をすべて成し遂げる仕事術)*を実現するために最適なUX・UIを持っているTrelloですが、今日やるべきことや明日以降の達成すべきゴールにフォーカスをするためのデザインシステムとして、この度Nachosを公開しました。
このデザインシステムを100％採用しないとしても、デザインのヒントがたくさん散りばめられているので、一通り目を通す価値は十分にあるのではないでしょうか。

Trello流スタイル

アプリであっても、名刺でも、ランディングページでも、Tシャツでも、Nachosに従ってデザインを行うことで、*「Trello流スタイル」*になります。
ここでは、Nachosのスタイルガイドを確認してみましょう。

色

スクリーンショット：2017年9月

Trelloには*「Trelloカラーパレット」と呼ばれる色の選択肢があらかじめ定められており、それぞれの色に最も明るい50から最も暗い900までのカラーウェイトがあります。
通常は600をメインカラー、400をサイドカラー*として使います。

アイコン

スクリーンショット：2017年9月

Trelloで使われている100種類以上のアイコンを使うことができます。
すべてのアイコンをダウンロードできるほか、自作のアイコンを作る場合には、12 x 12 pxの小アイコンは1.5px、16 x 16 pxの中アイコンは2pxの線の太さを守ってデザインを行う必要があります。

モーション

画像引用元：Nachos

アニメーションを加える場合には、UXを考慮して追加します。
あらゆる場面でアニメーションを加えればいいというわけではなく、ユーザー操作に役立ちうるかどうかを考え、場合によってはアニメーションの追加をあえてしないことも考えるべきだとしています。

タイポグラフィ

スクリーンショット：2017年9月

TrelloではHelvetica NeueをWeb版で採用しており、iOSやAndroidではシステムフォントを利用しています。

行の高さ(Line Height)はそれぞれの文字の大きさに8pxを加えます。
例えば、フォントの大きさが48pxであれば、行の高さは56pxを指定します。

レイアウト

スクリーンショット：2017年9月

Trelloでは、8pxグリッドシステムを採用しています。
あらゆるパーツを8pxの倍数でデザインするので、柔軟にレイアウトを行うことができるというメリットがあります。

ただし、ボードページのように、8pxグリッドを採用しない例外ケースも存在します。
あくまでもUX優先であり、UXを阻害する可能性がある場合には8pxグリッドは無視されることがあります。

マスコットやイラスト

スクリーンショット：2017年9月

Trelloでおなじみのハスキー犬のキャラクター*「タコ」や、赤い猫の「チョリソー」*に関しても、実は細かいデザインガイドラインが定められています。
タコに関しては、1画面に1回だけ登場し、その叫び声は「Woof！」ではなく「Roo！」だと言います。
また、タコをロゴの位置に登場させてはいけないという制約もあるので、注意が必要です。

また、コンピュータの*「ピート」*も含め、そのほかのキャラクターもアセットからダウンロードすることが可能です。

コンポーネント

Trelloのような*「UIこそがプロダクトの要かなめ」*となるようなWebサービスの場合、*UIコンポーネント(部品)*は最も重要なデザインパーツだと言えます。

ここでは、Nachosの各コンポーネントの中から、特に主要なものをご紹介していきます。

ボード

スクリーンショット：2017年9月

先述したとおり、Trelloでは8pxグリッドデザインを採用しているので、ボード全体のデザインは基本的に8pxの倍数でデザインするという方針があります。
実際、一番上部のグローバルヘッダーや、ボードとグローバルヘッダーの間のボードタイトル部分は、それぞれ40pxと48pxになっています。
また、一番下のスクロールバーの高さは16pxになっており、マージンとして縦横8pxが確保されています。

スクリーンショット：2017年9月

縦長のリストが横に並列される場合、リストとリストの間は、やはり8pxの隙間を作ります。

スクリーンショット：2017年9月

ボードメニューのようなコンポーネントも原則として8pxの倍数で作成していますが、画像で確認できるように、8pxでは狭く感じて16pxでは逆に広く感じる部分は、間をとって12pxを採用する場合もあります。

カード

スクリーンショット：2017年9月

カードはTrelloの中でも重要な役割を果たすコンポーネントです。
タスク自体が1枚のカードとなり、そこにはさまざまな情報が詰め込まれます。

スクリーンショット：2017年9月

カードには、リストに表示される*「表」と、クリックしたあとに表示される「裏」*がありますが、カード裏にもさまざまな情報が格納されます。

アバター

スクリーンショット：2017年9月

メンバーのアバター(プロフィール画像)に関しても詳細に取り決められています。
小・中・大の順に32px・48px・88pxで作成するほか、大きい272px四方で作成していきます。

ダウンロード可能なリソース

スクリーンショット：2017年9月

Nachosではダウンロード可能なリソースが用意されており、Trelloのデザインカンプやアイコン、ロゴやキャラクターのデザインデータなどをダウンロードできます。
BootstrapのようなCSSフレームワークは用意されていませんが、カラーコードなども用意されているので、Trello流のデザインを採用することができます。