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

2017年9月26日

インターネット関連、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流のデザインを採用することができます。

まとめ

世界中で使われているプロダクトのデザインがどうなっているかを覗いてみると、普段の仕事に対してのインスピレーションが湧き出ることがあります。
とりわけ、 UI の役割が非常に重要なTrelloだからこその UI に対するデザインへのこだわりは、参考になるものがあるでしょう。

Nachosを理解して、日頃のデザインに役立ててみてください。