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！」だと言います。
また、タコをロゴの位置に登場させてはいけないという制約もあるので、注意が必要です。

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