参考にしたい10のデザインシステム(アメリカ政府からFrancfrancまで)

国内外で知られるデザインシステムの例を集めました。デザインやフレームワークを作成するときの参考、込み入った情報をまとめる際の思考整理、フォローすべき箇所に見落としがないかどうかの再確認などに役立ちます。

 

 

アメリカ政府

Design System アメリカ政府

アメリカ合衆国連邦政府によるデザインシステムの紹介ページ。コンポーネント、ユーティリティー、ページテンプレートの配布など。何よりもアクセシブルであること・モバイルフレンドリーであることを真っ先に強調しているのが印象的。
ちょっと読むのは骨ですが、アクセシブルな色設計に関する指南などは非常に参考になります。

 

 

イギリス政府

上記で紹介したアメリカ政府のページは「U.S. Web Design System」としてWebサイトの制作に関するものでしたが、こちらは「サービスマニュアル」。行政の運用などを含む広義の『デザイン』となるため、「よい行政サービスのデザイン」などといった参考資料を『デザイン』カテゴリから読むことができます。

 

 

BBC

もうちょっと範囲を狭めましょう。こちらはBBCのUXチームによる情報サイトです。メニューの『Guidelines』から「スペーシング(余白)」「グリッド」「タイポグラフィ」などWebサイトを構築する上で基盤となる知識、あるいはアコーディオンカードなどといった要素に関するBBCのルールを学ぶことが可能。

関連記事:【BBC GEL】BBCのUX/Dサイトが知名度なさすぎるので代わりに推す

 

 

Google

高品質なデジタル体験を提供するためにGoogleが提唱するデザインシステム「Material Design」。現実世界の物理法則(光の反射や影の落とし方など)や素材(紙やインクなど)から強く影響を受けているとのこと。このシステムを採用はしなくとも、「リソース」ページから提供されている「カラーツール」をはじめとした便利なツール郡はチェックしておきたいところ。

 

 

Microsoft

紹介されているのはMicrosoftがオープンソースで展開するデザインシステム「Fluent」、そしてこれからの社会では必須となる「Inclusive Design(多様性ある社会のためのデザイン)」の主にふたつ。特にインクルーシブデザインの分野では、特定の状況を想定しながらどのようなコミュニケーションを取るべきかのアクティビティも用意されています。

 

 

GitHub

このデザインシステム自体もGitHubからユーザー自ら編集できるのが実にらしいところ。デスクトップやモバイルにおけるガイドライン、またサイト上で使用されているアイコン『Octicons』などについても紹介されています。そういえばコマンドラインのガイドラインが置いてあるサイトってずいぶん珍しいかもしれません。

 

 

Apple

Design System AppleMac OSやSiriといったApple製品のガイドラインを読むことができる『Human Interface Guidelines』。タッチバーのビジュアルデザインのようなテーマで語られているので、普段からApple製品に親しんでいる人であればなおさら楽しいでしょう。デベロッパー向けの指針としてはユーザーインタフェースのデザインのヒントという日本語版ページもあります(詳細ページは英語)。

 

 

アトラシアン

分野が違いますからAppleほどの社会的知名度を誇るわけでは勿論ありませんが、アトラシアンのデザインシステムページはかなり好きで、用もないのに時々ふらっと読みに来てしまいます。大胆に余白がとられたテキストベースの緻密なページは見ているだけで勉強になりますし、探したい情報もすぐ見つかる正にお手本のような美しい設計。

 

 

スターバックス

スターバックスの看板やロゴこそ見慣れていても、改めてそれをシステム側から見るのは刺激的で楽しいものです。色指定ひとつ取ってさえ、緑のイメージばかりが強かったけどこんな指定がされていたんだと意外な発見があるかもしれません。LoadingCoffeeCupという項目を保有しているのはおそらく世界中のデザインシステムの中でもここだけでしょう。

 

 

Francfranc

北青山に本社を持つインテリア・雑貨販売ショップのFrancfranc(フランフラン)は美しいブランドアイデンティティページも持っています。デザインガイドラインはスクロールしきった先のリンクから。もしあなたがデザインやブランドに関わる何らかの策定を検討しているなら、このページも大いに参考になるでしょう。ガイドラインを読んでからブランドアイデンティティページを再度読むのもよい教材です。

 

 


 

(Webサイト用のデザインシステムとはちょっと違いますが、おまけ)

 

NASA

NASAことアメリカ航空宇宙局のグラフィックスタンダードマニュアル。「NASAを知ってもらうための視覚的コミュニケーションシステムとして」1976年1月にスタイルガイドとして発行されたものですが、今はWebサイト上で無料公開されるようになりました。『ミートボール』の愛称があるNASAのロゴについてはこちらのページでも紹介があります。

 

 


 

 

まだまだ時間はかかるでしょうが、いつか日本の官公庁からも、こんなデザインシステムが公開されるといいなと思っています。

コメントを残す

CAPTCHA