見出し画像

コーポレートサイトのデザインとデザインシステム

この記事は「コーポレートサイトに適したデザインシステムとは?」または「FigmaやXdでデザインシステムを適用するには?」という内容では全くありません。ちなみに後者の話だと下記のnoteが参考になるのでお薦めです。
https://note.mu/sixa_nao/n/n7603a9bc7580
これはどちらかというと、もっとすぐ役に立たない話、思いつきメモです。

今日、ある会社のコーポレートサイトのサイト設計、構成コンセプトを考えていたら、「デザインシステムのガイドライン」が参考(メタファー?)として良いのではないかと思った。

デザインシステムのガイドラインには、最初にだいたい PhilosophyGoal と題して「このデザインシステムの存在意義や目指すこと」が書かれている。これはコーポレートサイトに置き換えれば、その会社の企業理念やビジョン、目指す世界だ。

つぎに、Principle として原則のルールや基本となる考え方、場合によってコンポジションのルールなどが示される。これはその会社の組織体制や働き方指針、大枠としての「アプローチ」や「しくみ」の部分。

そして、TypographyColor がメンバーやチームの紹介(それぞれの個性とハーモニーで構成されている)、ComponentTemplate が、その会社の製品や事業紹介、あるいは独自メソッドや導入ツール。最後にそれらを組み合わせたデザインの適用例 Application example は、会社で言えばサービスの導入事例や今後の事業展開など。

そしてなにより、デザインシステムのガイドラインは、製本されているにせよウェブサイトにせよ、原則的にデザインが良い。今考えているのもデザインやクリエイティブに関わる会社のホームページなので、同じく原則的にデザインは良いほうが良い。

なので「デザインシステムのガイドライン」になぞらえてコーポレートサイトを構成すると、会社の理念や強みやアプローチがすっきりと具体的に、構造的に伝わりやすく(かつ見た目も美しいものが)出来るのではないか、と考えた。

じゃあ社員はフォントのような「パーツ」なのか? 人の集合体である会社を「システム」として捉えるのは、冷たくないか? ということもできるのだけど、結局のところ会社をつくるというのは、何らかの形で社会に対して価値を提供できる「しくみ」を提案していることに他ならない。

目指す社会貢献のテーマがあって、そこに対するアプローチやシステム(このメンバーとこの方法ならイケる、という勝算のようなもの)があるから、会社で集まって働くわけですよね。だからコーポレートサイトでは、理念のような「想い」の部分も必要だけど、それに加えて「自分たちはこのやり方で世の中を良くできるし、自分たちも幸せになるのだ」という、具体的なシステムを提示していくことが大切だと考えている。(逆にそこに何らかの意図やしくみがなければ、ただ労働力を集めただけになってしまい、そのほうがむしろ「人=パーツ」的な考え方かもしれない。パーツを原価おさえて安売りしてます、みたいな。)

ということで、いくつか参考のために「デザインシステム」の例を集めてみました。

NASA Graphics Standards Manual

デザインシステム、ガイドラインのクラシック。いつか本で欲しい。
https://standardsmanual.com/products/nasa-graphics-standards-manual

NASAのサイトでPDFが公開されています。
https://www.nasa.gov/sites/default/files/atoms/files/nasa_graphics_manual_nhb_1430-2_jan_1976.pdf

UBER (Rebrand 2018)

ここにはガイドラインの詳細は載っていないが、デザインシステムのコンセプトと概要を、かっこよく紹介している。
https://www.uber.design/case-studies/rebrand-2018

Google - Material Design

GoogleのUIデザインを大きく底上げしたマテリアルデザイン。発表されたときは個人的にけっこう衝撃で、急いで初めてのAndroid端末を買いました。
https://material.io/design/introduction/

その他にも

Atlassian Design
https://www.atlassian.design/

Salesforce - Lightning Design System
https://www.lightningdesignsystem.com/

Australian Government Design System
https://designsystem.gov.au/

IBM Design Language
https://www.ibm.com/design/language/

Microsoft - Fluent Design System
https://www.microsoft.com/design/fluent/#/

終わりに

コーポレートサイトのデザイン設計・ディレクションをするのは少し久しぶりなのだが、会社の考えやコア技術、その目指すところをじっくり聞いてディスカッションして、それをウェブサイトという「形」にしていく作業は、本当に奥深くて面白い。

「デザインシステムを参考にする」はただのメタファー、アイデアを考えるためのアイデアのひとつだから、それが形に現れるかは別として。面白いことを考えている会社のコーポレートサイトなので、いわゆる「会社のホームページ」とはちょっと違うものができそうです。

この記事が気に入ったらサポートをしてみませんか?