
Webデザイナー注目!Trelloが公開したデザインシステム「Nachos」を使ってみよう
インターネット関連、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!」だと言います。
また、タコをロゴの位置に登場させてはいけないという制約もあるので、注意が必要です。
また、コンピュータの「ピート」も含め、そのほかのキャラクターもアセットからダウンロードすることが可能です。
- インターネット
- インターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
- フレームワーク
- フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。 元々は枠組み、下部構想、構造、組織という意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ランディングページ
- ランディングページ(landing page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。ただしWebマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
おすすめ記事
関連ツール・サービス
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング
- CRM(顧客管理)