デザインシステム
登場人物MEMBER
- 本田雅人
- Amebaのデザインシステム「Spindle」デザインリード。 この記事を書いている。 Spindleを作った。
- 武本敏治
- Amebaのデザインシステム「Spindle」クリエイティブディレクター。 「J」と呼ばれている。 Spindleを作った。
- 原 一成
- Amebaのデザインシステム「Spindle」エンジニアリード。 Spindleの広報も担当している。 Spindleを作った。
- 安田 慎
- Amebaのデザインシステム「Spindle」アクセシビリティリード。 2日に1回野球の試合をしている。 Spindleを作った。
目次INDEX
こんにちは。Amebaデザインシステムデザインリードの本田です。
このたびAmebaデザインシステムSpindleは2023年度のグッドデザイン賞を受賞させていただきました。
関係者の皆様、日頃Spindleを認識してくださっている皆様方に置かれましては、ご支援ありがとうございました。
そもそもSpindleとは…
Amebaデザインシステム「Spindle」とは、サービス創りに関わる全ての人が、Amebaブランドを体現し一貫した体験をユーザーに提供するための仕組みで、「Ameba」が16周年を迎えた2020年に誕生いたしました。「Ameba」のデザイン思想、VI、デザインライブラリ、UIコンポーネントなどを包括したブランドエクスペリエンスのパッケージとなっています。
Spindleサイトへ
本記事ではそんなSpindleがどのような経緯でグッドデザイン賞を志したのか、
実際どのような展示を行ったかなどの様子をドキュメンタリーとして綴りたいと思います。
そして、この記事を通してSpindleチームの雰囲気が伝われば幸いです。
初めてグッドデザイン賞という単語が出た日
Spindlerの中で初めて「グッドデザイン賞」に出してみないか？という話題がでたのは、2022年のグッドデザイン賞の受賞ラインナップをSpindleのメンバーで眺めていた時のことでした。
Spindleの立ち上げは2019年。
およそ4年ほどの月日がたった今Spindleは大きく成長しており、Amebaサービスやその開発面への影響はもちろん社内社外でその認知を大きく伸ばしており、外部からも評価の声を頂けるまでに至っていました。
Spindle自体はAmebaサービスのために作られたものであり、対外的な評価を狙って作られたものではありませんでした。
よって「賞」というものに自薦するということも、全く思いもよらなかったわけですが、グッドデザイン賞に通ることでAmebaの開発チームやAmebaサービスにも焦点があたり、取り組みとしてより多くの方に価値が伝播することは、単純にとてもポジティブなことなのでは？という思考がSpindleメンバー内で一致し、応募するに至ったのです。
応募と一次審査
いざ応募するにあたって、やはり頭を悩ませるのは応募文です。
応募文は2種類で、デザインが生まれた理由/ 背景(400文字以内)と、デザインを実現した経緯とその成果(400字以内)が必要とされています。
デザインシステムのような概念としてのアウトプットの場合、特に応募文による説得力が重要です。
当然ながら文字数制限もあるので、情報量をタイトに収める必要もありこれがなかなか難しいところ。
Spindleの応募文は自分が筆を執らせていただいたのですが、過去のSpindleに関する登壇資料などを開きつつ、Amebaというサービスが当初持っていた課題や、相対的にSpindleがもたらした価値の大きさについて、できるだけファクトベースで、意義を明瞭簡潔に伝えることを意識して推敲を重ねました。
せっかくなので実際に応募した文章をこのままここに転載します。
背景
Amebaは誕生から17年のブログサービスで、累計ブログ数は25億を超え、日本の資産として国立図書館に「ブログ」が一部ウェブアーカイブされる実績を持つほどの、国内でも有数な、長い歴史と大きな社会的意義を持ったサービスです。 しかし、サービスが年月を経て拡大する程に、作り手の思惑やサービスの大義は分散し、Amebaがどこに向かって歩みを進めるべきかは不明瞭な状態になっていました。プロダクト自体も時代に伴い相対的に老朽化が目立ちはじめ、レガシーなサービスの印象を形成しかねない状態でした。 そんな中Amebaが必要としていたのは、それらを解決する一本の指針の形成と浸透、それを永劫に残し続けるための普遍的なシステムの構築です。 Amebaのデザインシステム「Spindle」は、その要求に応えるため、「Amebaらしさを体現する仕組み」として、Amebaが16周年を迎える2020年に誕生しました。
経緯とその成果
Spindleは、Amebaの価値を自覚し、「Amebaらしさ」を新設するのではなく、17年の歳月で醸成されてきた潜在的な価値を再発見する意識から作り始められました。Spindleは「Amebaらしさ」を誰もが納得、共感し、迷わず体現するための「仕組み」として構築されており、デザイン原則の作成、ボタン一つの存在意義から問い直し、徹底的な言語化によって構築されたUIガイドラインの作成などを行い、さらにそれを社外にも伝播するためのオープンソース化も行いました。結果的に、Amebaのプロダクト内でSpindleは急速な浸透を見せ、2年程でほとんどがSpindleで作られた一貫した世界に生まれ変わろうとしています。 また、その規模や成立過程が日本の代表的なデザインシステム事例として認知され、書籍の掲載などを経てリファレンスとして多くの現場で活用されるなど、国内のプロダクト開発の一助となっています。
応募さえしてしまえば、あとは一次審査通過までは天命を待つのみです。
結果が出るのは一ヶ月後なので座して待ちましょう。
二次審査にむけて展示物を作る
果たしてSpindleは見事一次審査通過しました。
一安心ですが、間髪いれずに二次審査へと続きます。
二次審査は、審査対象の「現物」を幕張メッセに展示し、展示物を直接審査委員に見て頂く必要があります。
参考 : 審査会場の風景
……さて、デザインシステム、何置く？
という話ですね。概念なので。
展示内容は具体的制約は少なくかなり自由で、
パネルを一枚作っておくだけでも良いのですが「ここは何か現物を置きたい」ということで展示を考えることにしました。
そして実際に作られたのがこちらです。
展示構成は、
・Spindleサイト
・Figmaで作成したSpindleのUIライブラリ
・Spindleの概要と実績を説明したドキュメントやパネル
・Spindleのグッズ
です。
SpindleのUIライブラリに関しては、このためにすべて新しく作り直し、Figma Communityに投稿して誰でも閲覧できるようにしました。
Spindleサイトも、TOPのメインビジュアルに大改修を加えました。
背景のパネルもこのためにAmebaのデザイナーメンバーに作ってもらいました。
グッズは実際にSpindle Summitで配布したものです。
「Amebaとはなんのか」「デザインシステムとはなんなのか」「実際に何を成し遂げたのか、何が難易度なのか」が伝わるように構成を組み、Spindleが「Amebaらしさを体現するしくみ」として認知してもらえるコミュニケーションを心がけて、展示を作りました。
最初は見栄えがどうなるか結構不安視してたのですが、なんとかまとまった見栄えに持っていけました。
いざ二次審査へ
では拵えた展示物を会場に持っていきましょう。
二次審査の会場は幕張メッセのホールです。
パネルなどの大物があるので4人で車に乗って搬入に行きました。
この日はとんでもなく暑く、更にとんでもないゲリラ豪雨に見舞われたとんでもない天候だったのを覚えています。
そんな空模様でしたが、Spindle制作期間は目下流行り病でオフィスでmtgするのも数回だった我々にとって、この経験は文化祭と小旅行の欲張りセットみたいなものでそこそこ楽しんでいました。
幕張メッセの会場内は撮影禁止でした。
ここで初めて我々は2023年度の他の応募作品を視認することになります。
リアルプロダクトや建築の、圧倒的規模感や展示のクオリティに若干気圧され、うちもこういう展示の方法すればよかったな〜などと言いつつ、最後は自分たちの作ったものを信じて会場を去りました。
いよいよ結果発表
審査が終了し、
受賞結果の報が舞い込んできました。
無事受賞してました。
ありがとうございます。
展示から審査結果の回答までおよそ一ヶ月の時間が空いていたので、受賞の報告を聞いた時のシンプルな気持ちは「安堵」でした。
単純に直近の苦労が報われた事を始め、自分達が3年の月日を投資して作ってきたものが客観的に見て評価されうるものだったということ、Spindleを信頼して利用してくれているAmeba開発メンバーを裏切らずに済んだことなど、様々な安堵が一気に押し寄せてきました。
審査委員の方の評価コメントも拝見して、しっかりデザインシステムというものの価値が伝達したところも喜ばしかったです。
以下はサイトにも掲載されている評価コメントです。
評価コメント
ウェブサイトやアプリで、一貫したデザインや操作性を担保する仕組みであるデザインシステムは、海外を中心に導入が進んでいるが、日本でもサイバーエージェントが実現した。デザインシステムは、概念と現実の不整合が起こり、矛盾とぶつかることも少なくない。統一感やルール遵守を求める全体最適と、コンバージョンに特化した部分最適。でもそれをデザイン原則は「約束事」であって強く縛るルールではないと明示し、わずか2年足らずで実装したのは見事であるといえる。デザインの範疇が、色形などの具象だけでなく、企業価値を問い、表現するものとして捉えられる今、Ameba Spindleが他事業への展開だけでなく、他業界をもリードする先駆けとして、デザイン業界全体を前進させてくれるものと強く期待している。
まとめ、感想
一言で言えば、「出してよかった」、それに尽きます。
当然社外でのSpindleの認知も広がりましたし、そもそもデザインシステムというものについてもより知ってもらう機会になったのかなと思います。
自分たちにとっても自信に繋がりました。そしてしっかり評価してもらった以上、これまでより更にデザインシステムの価値を確固たるものにし続けていかなければならないという、兜の緒を締める良い機会になりました。
何より個人的には、両親に対して自分がどんな仕事をしているのかの説明が今まで難しかった分、「グッドデザイン賞を獲ったよ」というはっきりとした良い報告ができたことが最も喜ばしいことでした。
デザインシステムは「完成」が存在しないものだと言われています。
グッドデザイン賞は次へ進むための一つのステップだと捉えています。
Spindleが目指す行き先は常に模索続きですが、
これからもSpindle自体の発展とAmebaの発展を目指して、いつまでも続けていく所存でいるので、是非見守って頂ければと思います。