2024.10.10
将来は卵1パックの価格が2倍に? 多くの日本人が知らない世界の新潮流、「動物福祉」とは
リンクをコピー
記事をブックマーク
池原健治氏:みなさん、こんばんは。池原です。「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.11.13
週3日働いて年収2,000万稼ぐ元印刷屋のおじさん 好きなことだけして楽に稼ぐ3つのパターン
2024.11.11
自分の「本質的な才能」が見つかる一番簡単な質問 他者から「すごい」と思われても意外と気づかないのが才能
2024.11.13
“退職者が出た時の会社の対応”を従業員は見ている 離職防止策の前に見つめ直したい、部下との向き合い方
2024.11.12
自分の人生にプラスに働く「イライラ」は才能 自分の強みや才能につながる“良いイライラ”を見分けるポイント
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
2024.11.11
気づいたら借金、倒産して身ぐるみを剥がされる経営者 起業に「立派な動機」を求められる恐ろしさ
2024.11.11
「退職代行」を使われた管理職の本音と葛藤 メディアで話題、利用者が右肩上がり…企業が置かれている現状とは
2024.11.18
20名の会社でGoogleの採用を真似するのはもったいない 人手不足の時代における「脱能力主義」のヒント
2024.11.12
先週まで元気だったのに、突然辞める「びっくり退職」 退職代行サービスの影響も?上司と部下の“すれ違い”が起きる原因
2024.11.14
よってたかってハイリスクのビジネスモデルに仕立て上げるステークホルダー 「社会的理由」が求められる時代の起業戦略