2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
リンクをコピー
記事をブックマーク
池原健治氏:みなさん、こんばんは。池原です。「XDで体験する!深遠なるデザインシステムの一端」というテーマでお話しします。
本編に入る前に、佐藤さんのセッションを見てちょっと思い出したんですけれども、そういえば僕も、このステイホーム期間中に1つ教育コンテンツを作っていたなと思って……。
XDの自動アニメーション機能を使ってこういうものを作っていました。こういうおもちゃみたいな飾りというかオブジェを見たことないですかね。振り子みたいのがつながっているやつ。一番端の振り子を動かして離すと、端っこの振り子が動いて動き続けるという。
調べたら「連成振り子運動」というふうに言うということを今思い出しまして。1個の場合はこうなんですけど、例えば2個動かしたら、2個分の球の運動エネルギーが伝わって2個動き続けますよとか。
こういうのもXDで作って、「あっ、そういえば教育コンテンツだったなぁ」と今思い出しました。ちなみにこれ3個動かしたらどうなるかというのを、僕もこれ実際やってみないとどうなるかわからなかったので、誰か続きを作ってください。
ということで、では本編に進んでいこうと思います。近年では、プロダクトやサービスなどの規模がだんだん大きくなってきたときに、デザインシステムを導入する事例が増えてきているんじゃないかと思います。目的としては、チーム内でのデザインの一貫性を保ちつつ効率的に制作を行なうためだったりしますかね。
このセッションでは、XDを使ったアセット管理の手法や業種をまたいだ運用方法、それから便利な機能などを紹介しながら、その深遠なるデザインシステムの一端をちょっとだけ体験してみたいと思います。
まず簡単な自己紹介から。ソニー・インタラクティブエンタテインメントという会社でWebデザイナーとして活動している池原です。PlayStationを作っている会社でお馴染みですかね。ゲームを通じて皆様に夢と希望をお届けしています。
ちなみにAdobe XDはプレビュー版のときから触っています。僕の場合、過去にFlashというインタラクティブアニメーションツールを触っていた経験があって、その流れでついついXDのアニメーションの機能の限界に挑戦してみたくなることが多々あります。
例えばXDってタイムラインがないんですけれども、タイムラインがなくても、自動アニメーション機能を使うと、このようなスプラッシュムービーみたいなのも作れちゃいます。
これは初代PlayStationからPS2までのヒストリーをピクトグラムアニメーション風に作ってみたものです。最初はPS4まで作ろうと思ったんですけど、ちょっと面倒くさくなって断念しました。たまにこんなふうにXDでアニメーションを作って遊んだりしていますけれども、これをカンバスで実装してと言われたら、たぶんふざけんなと思います。
すでにいろいろなところで説明記事や事例紹介をご覧になっている方も多いと思いますが、なんとなく理解している方はおられても、実際にデザインシステムの構築に携わったことがあるという方は、実はそんなに多くないんじゃないのかなと思います。
デザインシステムはどんなイメージかなというと、タイトルのところにちょこっと映っていましたけれども、デザインと聞くとこんなイメージが浮かぶ方はいませんかね。「レゴみたいに、パーツを組み替えてWebページを作るための仕組みなんでしょ?」というイメージ。確かに間違ってはいないんですけれども、それがすべてではありませんというところ。
レゴはもちろん誰もが知っている、子どもから大人まで扱える、クリエイティブな作品を作れるすばらしい玩具なんですけれども、こんなふうに大量のレゴブロックだけあって自由に作ってくださいと言われても、普通の人は何をどうやって作ったらいいのか迷っちゃいますよね。
そんなときは、例えば「赤と黄色と黒のブロック100個くらいを使ってスポーツカーを作ってください」というように、このぐらい具体的に条件を書かれれば、だいたい似たようなものができるんじゃないかなと思います。作品の品質を平均化するとも言いますね。
こんな感じで、言語化されたルール・条件や色や形で表された材料など、そういうものを引っくるめたものがデザインシステムと呼ばれるものなんじゃないかなと思っています。
デザインシステムを構成する要素をもう少しまとめると、大きく3つの要素に分けられます。1つ目がデザイン概念・原則、2つ目がスタイルガイド、3つ目がコンポーネントライブラリです。これが俗に言う「デザインシステム三天王」ですね。もう1つぐらいどうにかならなかったのかなと思うんですけれども、まとめるとだいたいこの3つに集約されるんじゃないかなと思います。
では、順番に見ていきましょう。まず1番目、デザイン概念・原則。プロダクトやサービスが持つ重要なテーマ。それからユーザーに与えたいイメージ。そして、ブランドとしてのルール、アクセシビリティなど。
これは要するにどういうふうに見せたいか。例えばプロダクトやサービスに対して、そのコンテンツを作っている人が、自分自身がどうありたいか、それをどう見せたいかという、デザインの根幹部分に当たるものです。
それからブランドとしてのブランドカラーやブランドロゴについての定義など、いわゆるブランドガイドラインなんかも含まれているのではないかなと思います。あとは最近ですと、誰もが快適に情報を閲覧できるためのアクセシビリティ関する基本的な原則なんかもこの中に含まれるのではないかなと思います。
そして2つ目、スタイルガイド。これはもちろんWeb制作に携わっている方ならよく聞く言葉なんですけれども、タイポグラフィであったりカラーパレット、アイコンセット。そして余白の取り方やアニメーション。こういう諸々です。
スタイルガイドはデザイン全体と統一された見た目にするためにルール、お作法ですね。具体的なそのコンテンツらしさ。それから個性。そういうものを感じられる要素とも言えます。
3つ目がコンポーネントライブラリ。ボタンであったりアイコンであったり、UIパーツ。それから実装にあたってのコードなんかも含まれる場合がありますね。コンポーネントライブラリは、先ほどのスタイルガイドのようなルールに沿ってコンテンツ内に繰り返し登場する汎用的なパーツ群です。
こうした3つの要素で成り立っているわけですが、今ご説明したところでおわかりになったかと思うんですけれども、実はこのような階層構造を持っています。
まず「デザイン概念・原則」が最も重要な要素であり、ブランド戦略と結びついて、すべてのデザインの基になっています。その概念を見た目に落とし込んだときのルールがスタイルガイドであり、そのスタイルガイドに沿って組み立てる材料としてコンポーネントライブラリ、まあレゴみたいなものですね。これらが構築されます。
もしかして今までデザインシステムと聞いてなんとなくイメージしていたレゴのようなコンポーネントライブラリが、実は末端の存在でしかないことがわかりますね。
これ少年漫画で例えると、「コンポーネントライブラリがやられたようだな……」「ククク……奴らは我ら三天王の中でも最弱……」というふうな、これよく聞くパターンじゃないかなと思っています。
普通の人がWebページを見ていて、実際「この矢印アイコンの鋭角がたまらん!」とか「ハンバーガーメニューのアニメーションが絶妙!」とか、こんな感じに思う人は実はあんまりいないんじゃないかと思います。いるとしたらだいたい同業者ですね。
身も蓋もないことを言えば、末端のパーツが少々変わったところでユーザー認知度的には大差ないとも言えます。やはりどうしても記憶に残るのは、象徴的な色使いであったり、ロゴやタイポグラフィ、それからコンテンツとしてのビジュアルといったところが、ページ全体から感じられるトーンである場合が多いと思います。
しかしだからといって、じゃあコンポーネントライブラリにデザイン的な意味がないわけではなく、三天王の最強たるデザイン概念・原則、それと統一された世界観で汎用パーツを作り込むことで、デザイナーの違いによるブレをなくして、結果的にコンテンツ全体から隅々にわたってばっちり決まった違和感のないユーザー体験を提供できるというふうな重要な役割があると思っています。
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには