00:04
こんにちは、テック デザイン フォーラムのテクノです。本日もニューヨークからお送りします。
このチャンネルでは、新しいテクノロジーや3D、モーション、タイプデザインなどについてお話をしています。
デザインシステムの必要性
はい、ということでですね、本日は高まるデザインシステムの重要性ということについて、
先日ですね、発表されたスキーマバイフィグマという、フィグマはウェブサイトなんかをデザインするデジタルデザイン用のプラットフォームアプリケーションですね。
そこのカンファレンスと、あと9月に行われたですね、Webflowという、こちらはウェブサイトをディベロップメント、構築するためのプラットフォームのアニュアルのイベントですね。
2025年のイベントで発表された内容から、このことについて触れたいと思います。
どちらのカンファレンスもですね、やはりAIのことについては触れられていました。
例えばWebflowの方に関してはですね、Search Engine Optimizationといって検索したときに上の方に上がってくるというものが今まで主流だったんですけれども、
これからはですね、AEOといってAnswer Engine Optimization、もしくはAI Power SEOという形でAEOというものが紹介されていたりもしましたし、
そのときの実際のですね、調べられた、その答えが表示されたLLM、例えばChatGPTとかですね、クロードとか、どこで表示されたのかということが表示されたりとかですね、
SEOと対してどれぐらいAEOの評価が表示されたのかみたいな、そういったことがアナリティクスから見れるみたいな、そんな機能も紹介されたりしていました。
またFigmaの方もですね、FigmaのMakeというものを使ってウェブサイトを作れるんですけれども、
そのときにですね、やはりバイブコーディングに習ってデザインができるみたいな、そういったことなんかも出ていましたし、
今現在使っていてすごく便利だなと思っている機能の一つがですね、写真なんかの解像度を上げるものですね、あとバックグラウンドを切り抜くという機能があるんですけれども、
この2つは特に解像度を上げるものに関しては、フォトショップなんかでもできるのかな、ちょっとやったことないですけど、
バックグラウンドを切り抜くのはフォトショップでもできるんですが、そういった機能がもうFigmaの中に入っているというのがすごく便利でですね、
どちらもAIについてはそういったものを取り込んでいって、より作業が効率的で楽になるような、そんなことを発表されていました。
その中でもですね、今回取り上げるのはデザインシステムなんですけれども、これはスタイルガイドとも呼ばれているんですが、
例えばウェブサイトやアプリケーションを作るときに文字の大きさをですね、規定したりとかですね、このブランドの色はこれだとか、
この色はこの機能で使われているだとか、もしくはスペースですね、スペースのルールだとか、カラムといって横幅のスペースのルールだったりとか、
いろいろなそのルールブックをですね、文章ではなくてビジュアルでまとめるということがほぼ一般的には行われるんですよね。
ただ実際にこうデザインを僕なんかもしているとですね、一番最初の頃ってやっぱりそういったものを定義付けがすることが難しいですし、あまり現実的じゃないんですよね。
っていうのはデザインのし始めっていうのは、まだこの答えが分かってない状態でいろいろなものを試しながら作っていくので、
いろいろ文字の大きさとかですね、カラーの使い方だとかそういったものが不確定なまま進んでいくので、もしくはクリエイティビティを殺さないためにもですね、そういったことを規定せずに進めていくというのが一般的です。
そして何度かクライアントチェックなんかをして方向性が決まってくるとですね、そういったシステムデザイン、スタイルガイドなんかを作っていくんですけれども、
その段階になってくるとシステムはできるんですが、その実際のですね、レイアウトにそのシステムがアサインされてないということはよく起こるんですよね。
本当は起こっちゃダメなんですけれども、どうしても色が似ていたりだとか、そういったちょっとぬけもりがあったりして、
そういったものはこれまでであればそのルールブックに基づいてデベロッパーの方がこれかなということで直したりとか、ちょっと分かんないときはデザイナーに質問が来たりだとか、
そういった形で行われていました。
デザインチェック機能の導入
そこでですね、今回のデザインシステムの重要性ということなんですけれども、
一つがデザインチェックというものがFigmaのカンファレンスで紹介されてたんですけれども、
その実際に作ったデザインシステムと実際のレイアウトがですね、どこか一致してない部分があったりしないかということをチェックしてくれるという機能が紹介されていて、
これはすごく実際に使えるようになったら便利そうだなと思いました。
特にウェブサイトなんかだとですね、紙でするものよりもルールが厳しくてですね、
視認性が高くないといけないというルールがあるんですよね。
つまりそのバックグラウンドの背景の色と文字の色、そして文字の大きさがあるレギュレーションがあってですね、そこをパスしていないと、
僕の聞いた話では訴えられたりとかですね、そういったことも起こり得るということで、
実際にそのルールにですね、規則に則ったものを基準を満たしているのかということを調べないといけないんですけれども、
そのルールブックではだいたいそれが基準を満たすように設定していたとしてですね、
実際のレイアウトにそれが反映されていなかったりすると、それが抜け漏れに繋がるので、
実際に僕も今週あったんですよね、そういったことが。
それでもう一度改めて目視で確認して、ちょっと抜けている部分があったりもしたので直したりしたんですけれども、
そういったことがあるので、それをAIが確認してくれるというのはすごく助かりそうだなと思いました。
そしてもう一点はですね、こっちのほうがむしろ重要だと思うんですけれども、
Webflow のカンファレンスでも Figma のカンファレンスでもですね、
そういったデザインシステムを作っておいて、それがですね、実際のコードと一致するということが重要ということを言ってました。
繋がるということですね。
これがどういったことかというと、AI が読み取りやすいデータの形になるということですね。
この色がどういうルールにのっとって使われるっていうようなことが、
これまでだとビジュアルで、いわゆる紙に刷られているのと変わらないような形で表示されていたのがですね、
実際にそれを AI が読み取れるようになると、そのブランドの書体とかカラーとか、
そういったものすべて反映した形で、例えば新しいページを作りたいとなった時ですね、
それにのっとった形で作ってくれるので、より他のページとの相互が少なかったりとかですね、
実際に使えるページにより近づくということが現実味を帯びてくるのかなと思います。
今のフィグマメイクとかそういったものですと、1ページのランディングページを作るとかですね、
個人で使うようなページだったらいいのかもしれないんですけれども、
実際に仕事でですね、クライアントのために作るってなると、
まだまだ実際のブランドと一致しないとかですね、そういったことが起こり得てくるので、
ここがですね、より対人間のためにデザインシステムを作るというよりかはですね、
対AIと話す、スピークと言うんですけども、そのデザインシステムがAIと話し合うっていうかですね、
やり取りができるっていう、そういった形に近づくので、
これからさらにデザインシステムが需要性が高まっていくってことが言われていました。
パーソナライゼーションの重要性
またさらにですね、これからパーソナライゼーションがより大事になってくるっていうようなことが
話されてもいたんですけれども、そういったデザインシステムを作ってですね、
バリエーションが例えば必要になってきたときなんかも、バリアブルという機能があったりもするので、
それはですね、Figmaの方で話されていたんですが、
エクステンデッドコレクションというものが話されていたんですけれども、
なんかそのローカライズするサイトがですね、
特に個人というよりかはローカライズとかの方が現実的かなと思うんですけれども、
例えばインドと日本ではデザインの見え方が違うとかですね、
そういったものが必要になってきたときなんかにも、
バリアブルを含んだデザインのシステムがこれから重要になってくるのかなという印象も受けました。
はい、ということでですね、今回はそのUIデザインの観点からですね、
デザインシステムがさらに重要になってくるのではないかなってきているですね、
ということについてお話をさせていただきました。
もし今回の内容が面白い、興味深いと思っていただけたら、
ぜひ高評価やフォローお願いします。
またこの放送は日本時間の日曜午前をめどに配信していますので、
ぜひまたお聞きください。
最後におまけトークになります。
おまけトークなんですけれども、
前回前々回との日本の旅行したときの話をしていたんですが、
もう一個やっぱ日本の方が良かったなと思ったことが、
今日あってですね、地下鉄のWi-Fiなんですよね。
ニューヨークの地下鉄ってキャリアにもよるかもしれないんですが、
僕の使っているTモバイルだと電波が駅と駅の間は入らないんですよね。
これはもうこっちに引っ越してきてから10年前からそうで、
日本なんかも僕が引っ越してくる前から東京では使われていたりもしたので、
未だにそのWi-Fiが使えないというのがめちゃくちゃ不便ですね。
これは本当に日本の方が良かったなと思います。
なのでそういった時間はKindleで本を読んだりとかですね、
他のことをしているんですけれども、
もしくはこういった音声配信を聞いたりとかですね、
そういった過ごし方をしているんですけれども、
なんでこんなに遅れているのかなってよく思います。
ということで本日も最後まで聞いていただきありがとうございました。
また次のトークでお話しします。
ではまた。
