AI時代のデザインの作り方をプロが解説 | デザインシステムとプロトタイプ transcript

AI時代のプロのデザインワークフロー実際に見せます AIで色々作れるようになった昨今 おそらく多くの人がアプリやウェブサイトを自分で作ってると思います その中でいいデザイン出すのって結構難しくない? って思った方結構いるんじゃないかと思います どうしてもですねAIにデザインを任せてるとなんか違うものが出てくることがやっぱり多いんですよね しかも細かいところを指摘していちいち直させるのがこれがまたかなり難しいしかなり面倒くさいというところがあると思います というわけで今回は実際にGoogleで製品をデザインしていた立場として AI時代にプロがどういうワークフローで働いているのか少し見せたいと思います 前回の動画ではどういうものを作るのかというデザイン戦略的な話をしました 今回はその基盤を作った上でじゃあどうやってそれを見た目に落とし込むのか そういう話になります まだ見てない方はですねあのデザイン戦略の方の動画も参考にしてください 非常に大事な話になります まずですねここ近年プロの現場で何が起きたかという話からします 昔のですねプロの作り方って割とはっきりしていたんですよ まず戦略を決めて次にワイヤーフレームっていうですね画面の当たりを書く ローファイのですね粗いスケッチのようなものを作ると そういったものをフィグマで作っていたんですけども それを揉んでコンセプトを固める で固まってからようやく詳細のデザインそして実装に移ると そういう一本道だったんですね 前から順番に進んでいくみたいな感じで これがですね今全然逆になってるんですよ 戦略が固まったらもうですね プロのデザイナーって最近はもうワイヤーフレームを描きません いきなりプロトタイプを作っちゃうんですよ 実際に動く画面をパッと出す でそれを見ながら直していく そしてそのですね改善サイクルを何度も回す で回してるうちに あこの製品はこっちの方向だなっていうのが だんだん見えてくるんですよ もう完全にですね順番がひっくり返っちゃったんです 昔はコンセプトを決めてから作ったんですけれども 今は最初にもう何か作っちゃって そこからどうやってコンセプトを煮詰めていくのかっていう風になっちゃってるんですよ つまりですね何が起きたのかっていうと プロトタイプが考えるための道具になったんですね 頭の中で考えるんじゃなくて 手を動かして出てきたものを実際に見て使ってみて考える 手で考える時代になったという言い方が私は一番近いと思ってるんですけれども もうですねプロダクトマネージャーとかエンジニアとかデザイナーとかみんなプロトタイプ出せる そしてAIを使ってプロトタイプを出すというですねコストが非常に安くなっている昨今このやり方が一番早いんですよ ただここに落とし穴があるんですよ 早く作れるっていいことだけじゃないんですね 早く作れるってことは早くバラバラになるっていうことでもあるんですよ どういうことかっていうとAIに画面を作らせるとAIは1枚1枚その画面だけを見てこの画面にとっての最適なデザインを出してくるんです 例えば1枚目はいい感じの青を使うとかで3枚目はなんとなく違う青になってるとかボタンの形も余白の取り方も画面ごとに微妙にずれていくんですね 要は一貫性の予告紙をですね通す基準がどこにもないことが多いんですよ これがさっき言ったなんか違うの正体なんですね 出てきたデザインを1枚ずつ見ると別に悪くはないんですよ 割と綺麗なんですけれども でも並べた瞬間に一貫性がないことが分かって 気持ちが悪くなっちゃうんですよ つまりですね問題は1枚1枚 AIが出してくる1枚1枚のデザインの出来じゃなくて 全体を貫く一貫性がない そこに尽きることが多いんですね じゃあどうすればいいかっていう話になるんですけど 先に土台を引いておかなきゃいけないんですよ これをですねデザインシステムって呼びます もちろんデザイナーの方とかですね 製品作りをされている方はもう 馴染みのある用語だと思うんですけれども 知らない方のために解説するとですね デザインシステムって聞くとなんか 専門的に聞こえるかもしれないんですけれども 中身はすごいシンプルなんですね 要は一度決めて二度と 蒸し返さない決定の束 要はパターンなんですよ デザインのパターン 使う色はいつもこれ 文字組はいつもこれ 余白の取り方もいつも一貫性のあるこういうやり方 ボタンはいつもこの形 そういった共通のルールを先に1回だけ決めて束ねておく それだけなんですよ なんで先に決めるのか さっきの話と繋がってくるんですけど プロトタイプを早く回すっていうことは 回してる間にずっと見た目とブランドを崩さずに 保ち続かなきゃいけないってことなんですよ もう最近の現代のデザインフローっていうのは 最初に見た目とかブランディングも全部デザインの中に入れ込んじゃって どういう見た目でどういうふうな使い心地なのか 全部入りの状態で試すことが多いんですね それが一番真に迫ったコンセプトを作れる ただ見た目とブランドを崩さずに保つを人間の気合でやるのは無理なので だから土台にその仕組みを入れておくんです デザインシステムは早く回すための前提条件なんですよ だからこれを先に決めておくのはそのためなんですね デザインの世界ではこの一貫性コンシステンシーというんですけれども これが非常に重視されていましてこれが効く理由って実は3つあるんですよ 1つはですね単純に見た目なんですね 揃っていると整って見える これはわかりやすいですね 2つ目の理由がすごく重要でブランドなんですよ 見た目がですねバラバラだと誰が作ったかが消えるし そのですねいわゆる見た目の後ろ側にある必然性とか物語性みたいなものは消えてしまうんですね 色も雰囲気も画面ごとに違ったら記憶に残らないし信頼も生まれないんですよ 逆にずっと同じトーンで揃ってると ああこれあそこのやつだって覚えてもらえるんですね ブランドが伝わるっていうのは一貫性が非常に大事になってきまして避けて通れないんですよ そして3つ目 これがですね デザインシステムの一番重要なところでもあるんですけれども 使いやすさの担保ですね 見た目が揃っていると 人は迷わないんですよ 同じボタンがいつも同じ場所にあって 同じ動きをする いつも同じ見た目 そうすると人は次にこうなるだろうなって 予測できるようになるんですね 予測できるっていうことは いちいち考えなくていいということなんですよ 脳に負担がかからないんですね これがですね いわゆる使いやすさの革新的な話で 要はですね 人にユーザーに考えさせてはいけない なるべく考えさせないで 本能的に使えるものを作れっていうのが 使い勝手の革新になるんですけれども 人間の脳って毎回ゼロから考えるのがすごく苦手なんですよ だから見慣れたパターンに乗れると ものすごく楽になるんですね もう反射で使えるようになるんで なので一貫性ってただ見た目を磨くことじゃなくて 人間の脳が楽をできる仕組みを作ることなんですね もう一つですね どうしてプロトタイプを作るのか コードとかで実装すればいいじゃんって言うんですけど 私はプロトタイプっていう言い方をしたと思うんですけど これでですねちゃんと理由があって 見た目とか動きとか触り心地とか こういう側の部分をですね 私はコードを書くエージェントに渡す前に デザインツールの方で先に固めるんですよ もうプロはみんなそうしてるんですね なんでわざわざそうするのかっていうと理由はいくつもあるんですけれども まずですね作り直しを減らせるんです ちゃんとデザインが固まらないままいきなりですね本実装 コードを書き始めると後からやっぱり違うってなった時 作り直しがすごく高くつくんですね それはAI時代でも変わらなくてトークンの消費量がやっぱりですね 側だけデザインして側だけのプロトタイプを作ってるのと バックエンドまで作り込んだ実装を行うんじゃ全然コストが変わってくるんですね なのでデザインの段階で決め切っておけばその手戻りが減るんですよ あとそれから動きとかですねアクセシビリティとかそういった部分になるんですけども ここをどう作るかって文字でコードに説明するよりデザインツールの上で体験として並べて整理した方が絶対にやりやすいんですよ これはもう実務上の判断で基本的にプロの現場ではみんなですね そういったところはデザインの段階で決め打ちするというものになってます やっぱり本実装ってすごく高いんで ちゃんと動くものを作るには一番コストがかかると だから側を先に決め打ちしてから コーディングエージェントとか 本物のエンジニアに渡すっていうのが結局一番安いんですね だから順番はプロトタイプをまず作って 側だけ動く表面的に動いて バックエンドは適当にサンプルが出るような形で 簡単なロジックだけ入れて その側の外側の部分が決まってから コーディングエージェントに渡して立てると そういうやり方がプロの現場では普通になってます それでは実際に見せていこうと思うんですけれども 今回は実演ということで ちょっと変わったものを作ってみようと思います 私皆さんワークアウトとかされると思うんですけど それのヘルスダッシュボードを作ってみようと思うんですけど スタイルをですね ちょっといつもと違った感じにして 純和風の浮世絵風のヘルスダッシュボードみたいなものをですね 作成してみようと思います それで私もですねこういうことはやったことないんで どこまでできるかわからないんですが 逆にですね私がどういう風な形で それをデザインしていくのかまたは詰めていくのかというようなものをですね 見せられればいいと思ってます 今ですね開けているこのクールアーズっていうウェブサイトがあるんですけれども ここでですねよく私色をですね見つけてくることが多いです でこれあのいろいろあってですねパレットジェネレーターこういった形ですね いろんなパレットから色をですね作ったりとか あるいはもうすでにですね決め打ちされているこういった感じの こういったものからですねあのいろいろと色を取ることができまして 日本風純日本風のですね色を取りたいなと思ってたんで なんか日本風のものないかなと思ってここに来たんですが 日本の特に浮世絵風の色ってなると なかなかやっぱりですね西洋のカラーパレットとか そういったものではなかなか作られてなかったりするんで じゃあどうするのかって話になるんですけれども このですね実際の浮世絵 これをですねクロードとかあとはAIエージェントとかに投げて これをインスピレーションとしてデザインシステムのカラーパレットを作ってくれないかと ここで何をしなくちゃいけないのか AIデザイン用の標準規格としてdesign. amdというファイルがありまして それをAIエージェントに作ってもらいたいんですね 基本的にはクロードにこのイメージをセーブして クロードに投げます こんな感じ 色のイメージとしてはこんな感じみたいな感じで クロードに投げてですね もう私はヘルスダッシュボードを作りたいので デザインシステムのデザイン. mdを出してくれという依頼をですね クロードに行っています 私がですね言ったのは浮世絵河原版風ヘルスダッシュボードなんてどうだろうと ちょっと黄ばんだ和紙のようなテクスチャーがベースで その上に浮世絵風のスタイルの純和風ヘルスダッシュボードみたいな 数字は木を照らって漢字に 当然ダッシュボードは全部日本語で こういうデザインmd作れないと 私今ですねちょっとスタイルどういう風にするのかっていうのを相談してたんですけれども 一応いろいろ試している中で浮世絵っぽいのが面白いかなと思えてきたので 先ほどですねこれを参考資料として渡していると 非常に大事なのはですねクライアントとかまたは自分が出したいブランド このケースの場合はですねなんかすごい純和風のフィットネスダッシュボードみたいなのをですね 作ろうとしているわけで今まで存在しなかったようなものなので 何らかのですねインスピレーションになるようなものを入れて 最終的なスタイルを詰めていくというような形になります これはただのですね叩き台にしか過ぎないので この段階でデザインMDそこそこのスペックというものをですね 出してもらってクロードデザインに入れていくことになります デザイン.

MDが出ましたね このような形でカワラバンヘルスとかなんか名前が勝手に付けられてるんですけれども こういった形でですねキーとなるブランドエレメント この実際のインスピレーションとなるイメージから取られた色ですね 色合いをですね全部取ってくれて どういう時にどういう色を使えばいいのかというですね設定をしてくれる でテクストはどうで数字は漢字でこんな感じで フォントはこういう形でやれというような形でですね 基本的にAIエージェントが手伝ってくれている もちろんですねプロのデザイナーだったらもうちょっとですね 細かくスペックを詰めるんですけれども 今回はですね私もちょっと経験のない 純和風のヘルスダッシュボードみたいなデザインになってますんで 私も正直分かんないことが多いんですよ なのでとりあえずこれでクロードデザインに投げます こちらがですねクロードデザインのUIになります 今ですね何をしているのかというとこのデザインシステム 私ですね空気デザインシステムっていう自分のデザインシステムを持ってるんですけど それ以外に新しいものを作りたいということで このデザインシステムというところからこのセットアップはデザインシステムというものがあるので これをですねまず選びます でこれでカンパニーネーム&ブラウブデザインシステムの名前を付けてくださいということなので これは純和風河原版システムみたいな形で名前を付けます 先ほどのデザインMDがあるんですけれども これをですね このここの部分 Add Font Logos Asset ここの部分に入れます 入りましたね 他にもですねGitHubとか既に存在しているレポジトリをリンクしたりとかですね 既に存在するデザインシステムを 入れたりすることもできるんですけれども またFigmaファイルとかも入れられるんですが 今回はもう完全にAIエージェントを任せのデザイン プロもやっているようなやり方という形になりますので とりあえずデザインMDを使ってクロードデザインに投げます このdesign. mdという企画についてちょっと説明したいんですけれども これっていわゆるAIエージェント間の共通企画になってまして 基本的にはどのエージェントに投げても受け付けてくれて そしてこれを元にデザインシステムを構築してくれるというものになってます なので例えばですねアンチグラビティにそのまま投げてもいいですし またはクロードコードにそのまま投げてもいいんですけれども あえてここはクロードデザインに投げてます なんでかっていうとクロードデザインって 先ほども言った通りですね 実装の時に裏側まで作り込まないんですね 基本的に側だけ 要はもう本当フロントエンドのいわゆるUI側のインタラクションとか そういったものを詰めるのに最適なAIエージェントということになっておりまして その上ですね後で見せるんですけれども クロードデザイン自体がですねデザインシステムのデザインに特化しているという部分がありまして 現状ではデザインシステムを作るのには最もおすすめなツールがクロードデザインということになっております ここにAny Other Notesって書いてあるんで 基本的にはヘルスダッシュボード用のデザインシステムとなる Garmin ConnectやNikeですね ようなレイアウトに準拠する パワーラバンスタイルになる こんな感じでですね 一応注意書きみたいなのを入れて それをですね このContinue to Generation これですね これで作っていくことになります。 このデザインシステムについてもうちょっと詳しく説明したいんですけど、 デザインシステムってそもそもなんじゃっていう話をですね、 ちょっとしたと思うんですけれども、 基本的にデザインって、 いわゆるアトミックデザインともよく言われるんですけれども、 いわゆるベースとなる要素、 色だとかフォントだとかスペーシングだとかアイコンだとか、 そういう一番小粒のいわゆるレゴブロックでいうところのブロックですよね。 その色とかですねフォントを元にですねいろんな部品を作っていくことになるんですね ドロップダウンメニューだとかあとアコーディオンメニューだとかそういったものができていくんですけども それの基本構成となる部品自体は色とフォントとあと線ですよね あとアイコンですねというものになりますんで そういったものがですね全てここに定義されているというのがこのデザインMDになります デザインMD自体がいわゆる一つのデザインシステムのためのスペックみたいなものになっているんですよ これよく見るとわかるんですけれども 例えばカラーっていう項目がここにありますよね これで全部使うべきカラーパレットを指定していると ここのセマンティックっていうのはどういった要素があるべきなのか バックグラウンドだとかパネルだとか あとはディープなところにあるパネルまたはデータ 例えばヘルスダッシュボードなんで当然その折れ線グラフだとか パイチャートだとかそういうのが出るじゃないですか その時にどういった色を使うか でフォントはこういうのを使ってくださいねとか こういったものも書いてありますし さらに大事なのはこれですねスペーシング 実はですねビジュアルデザイン 要は整ったUIを作るの 実はその要素そのものよりも このスペーシングの方が大事だったりするんですね スペーシングって全部4の倍数とか いわゆる偶数で割り切れる感じじゃなきゃいけないっていうセオリーがあるんですけれども そういった部分もクローズデザイン またはクローズの方でデザインMDを設定してくれるときに勝手にやってくれると モーションとかですね アニメーションさせるときにどれくらいの速さで動くべきなのか どういったアニメーションカーブを使うべきなのかとか そういう専門的なことが書いてありますけども 基本的にはデザインMDを出してもらえれば 基本的にパッケージで出してくれるというのが最も大事な予想になります これに関してはデザインの大事なところっていうのが分かってれば分かっているほど細かく指定ができるということになってます ただクロードデザインで素晴らしいところっていうのはそういったデザインの詳しいことを知らなくてもある程度ですね 細かいところが埋められるようになってるんですよ それが素晴らしいんです それをちょっとこれから見せていきたいんですけれども そんなことをしてる間にですね、 なんかロゴみたいなのを適当に作りましょうか。 えーっとですね、 じゃあ 大したロゴっていうか、 むしろなんか見た目が良くないロゴですけれども とりあえずはこれでやってもらおうと思います その間にいろいろデザインシステムの一部ができてきましたので これがさっき言ったデザインシステムのレビューができるというものになります まずいろんな要素を挙げてきています まず和紙のテクスチャーみたいなのを出してほしいとお願いしたので とりあえず色をですねいわゆるベースとなる色を出してきましたので この和紙の色はこれでどうですかという感じなので これは良いと思いますのでこれはグッドで これはですねダークな方の色ですね 墨インク 鈍色いいですね 伝統色 さすがにですね 安藤博重の浮世絵から 色を取っただけあって結構いい 色を取ってますね 藍色はもうちょっと正直 濃くてもいいと思うんですけれども これ以上濃くしてしまうと他の色との バランスが取れなくなってしまうんですね これおそらくですね データ用の色のアクセントカラー ますんでまぁこれはですね全体のバランス みたいなが大事になりますんでまぁこの まま いうことになりますテクストセーフピグメント 要はですねここに出ているようにアクセシビリティ 上のですねコントラストがすべて基準を クリアしているというのがここで見られる ようになっておりますで i であろうとも 赤積みでも松葉でも全部コントラストを クリアということでこれは ok これがデータの色ですね 0対1234とまあ ok ですねあっはっ これをいいですねこの有事主給っていうですねフォント使ったことないんですけどなかなか こんな本当があるんですね知らなかったですけどとりあえずこのフォントも後で変える こといくらでもできますのであのこれはこれで ok にします そうですね全部民調系の色になってて そして一番大事なのはですね 見やすいかどうかってことなんですけど 基本的に見やすいのでこれもOKですね フォントは何度も見ますけれども あって置き換え可能になりますので 特に問題はないですねこれに関しては とにかくそれっぽく出てれば大丈夫 もしプロフェッショナルであれば当然ですね 例えば会社のフォントであるとか あるいはGoogleだったら マテリアルデザインで決まっているですね Googleものとかですね Googleサンズと呼ばれるものがありますので それを使うようになると Appleであればサンフランシスコと呼ばれる カンパニーフォントがありますので そちらを使うということで フォントは非常に大事になりますが 自分のためにやっているのであれば 自分が一番気持ちよくなれるようなフォント そして読みやすいフォントを選べばいいというものになります これですねヘッドラインだとか ヘディングだとかボディだとか あとは数字だとかも全部出してくれてますね これ全部OKっぽいですね それなりに統一感はあるんですけれども これも後でレイアウト組んでみれば またアラが見えてきたりするんで とりあえず今OKを出します スペーシングはこんな感じ 先ほども言った通りですね 偶数で4の倍数というのが基本になります これ奇数だったりすると大変なことになるので なんでか説明すると長くなるので説明しないんですけど 基本的には偶数ということになっております これもOKということになります。 これがですね、 例えばもっと高級感のある、 例えばショッピングサイトとかそういったものになると、 おそらくですね、 スペーシングはもっとでかく取らなきゃダメとか、 そういったセオリーもあるんですけれども、 その辺はですね、AIに相談してもらえればやってもらえるであろうというものになります。 これはボーダーとラディウスなんですけど、 ラディウスは2かなるほど。 これは悪くないですけど、ボーダーはもうちょっと濃いめでもいいですね。 こういった場合は、 キーラインは2. 5。 ルールは1. 5で。 そういった感じでもうちょっと強くしてほしいという形でリクエストを出すことができますので、 これで リクエストを出します こっちの方にリクエストが入りますんで 今ですね クロードデザインの方が 自分で 色々変更をかけているということになります そうですね ちょっと持ち上がっているやつは ドロップした動画ついて こんな感じになりますよってことなんですけど あんまり好きじゃないですけど とりあえず全体を組んでみてからですね やっぱり で先ほどのボーダーリクエストを ましたこのように変更がかかってます ちょっと黒が強くなってますねまあとりあえず これでやってますで全体のですねボーダーの ラインを強くしたことによって全てのですね あの他の エレメントもまあ強いボーダーが入ったということ になりますこれわかるように先ほどですねその ボーダーの厚みだとかあとはドロップした 道がですねまあそういったものを決め打ち したんですけれどもそういったものが下流で ボタンとかテクストボックスとか そういったものに 波流に入ってきて 影響するということになるので こういったいわゆるアトムの部分 原子を変えると分子が変わる 分子が変わると生物が変わる みたいな感じで デザインシステムっていうのは 原子と分子と生物の 関係ってよく言われるんですけれども いわゆるアトム 原子となる部分 色とかフォントとか線とか それを変えることによって 分子となる例えばボタンだとか あとはテクストフィールドだとか そういったもののエレメントが全て変わってくる それによって一貫性のある見た目を担保する というようなシステムになってますんで 覚えておいてほしいのは いわゆるアトムの部分になればなるほど 全体に影響を及ぼすということになります なので基本的なフォントの大きさとかも変えると おそらくですねこのボタンのラベルとか そういったものも全て大きくなったり小さくなったりすると ワシパネル 二重計いいですね 特集体っていうのはなかなか 面白いですけどね 安定時心拍 これ熱いですねあと これクローズデザインが勝手にやってくれてるんですけど ちゃんとですね ちゃんとした数字とかも 入れてくれてるのはこれは結構熱いですね 距離とかわけわかんないですもんねこれ 心拍ゾーン一覧 OKじゃないですか なんか京都テーマになってますけどこれ大丈夫なんですかね あーあーあーあーあーあーあーあーなるほどねはいはいはいはいはいうんいいんじゃないでしょうか 先ほどのロゴはこんな感じで入れ込まれたのを確認しました あー文様も作ってくれてますねこれは結構厚いですね とりあえずとりあえずデスクトップウェブアプリ用のUIを試しに組んでみて 自転車のフィットネスを ドラッグするような内容を見てほしいと I'm going to go. デザインシステムが出来上がった段階で クロードコードに送ってしまってもいいんですね ここからですね シェアで エクスポート とかですね あとはセンドトゥーっていうのがあるんで このセンドトゥーがですね 一番やりやすいんですけども このセンドトゥーでクロードコードに そのまま送るというオプションがありますので これを使ってやってもいいですし あるいはですね このプロジェクトアーカイブというのがあるんですけれども これを使えばですね ファイルデザイン md とかですね ザインシステムスペックをまとめたすべてが ですねあのファイルの中に入ってますので これをダウンロードしてでまぁ例えば コーデックスだとか アンチグラビティなどに 渡すということも可能になりますただですね 私のおすすめとしてはできてきたデザイン システムと後実際のアプリの ui とかですねまあそういったものある程度 ここで詰めてしまった方がいいと思います なんでかっていうと実際に実装に入ってしまうとやっぱり高くついてしまうんで まだバックエンドを作る前に じゃあ実際のそのユーザー体験はどうしたものなのかっていう部分をですね やっぱりこっちのデザインの方で詰めた方が安いことが多いんですね こっちの方が早いですし それにクロードデザインの方がおそらくですねデザイン特化しているので いいデザインがですね肌感なんですけれども いいデザインが出てきやすい傾向があるんですよ なのでその辺のバランスをうまくとって なるべく私のおすすめとしては クロードデザインで粘って これならもういけるなと もう本当の本データを入れてもいいなと バックエンドを作ってもいいなという段階になってから 初めてクロードコードに動かすというのがおすすめです 1回クロードコードに動かしてしまうと またクロードデザインに戻ってきて デザインを変えるとかですね そういったことがちょっと難しくなりますので なるべくデザインはこの段階で詰めるようにしましょう グッてなんでしょうね やっぱり線をですね 太くしたのは正解だと思いますね なんとなく太い方がいいんじゃないかなと思ってやったんですけど やっぱりその印象の強いですね レイアウトになってくれたと思うんで 正しかったかなと思います あとはですねクローズデザインって一応ですねデザインを複数出してもらうこともできるんですね 例えばですね私は最初から結構細かく指定しましたけれども 例えばこの数字をですねちゃんとしたアラビア数字にするというようなデザインも可能でして そういった場合はですねこのトゥイークと呼ばれる ここですねこのトゥイークと呼ばれるオプションがあるんです ここからどういった種類のデザインをですね 見てみたいのかというリクエストを投げることができますので そうするとですね 例えばこの漢字なのか 実際の数字を使うのかというオプションをですね 試すことができたりとか あるいはこのちょっと和紙っぽい感じのですね 劣化度合いですね がどれくらいの漢字なのかとか そういったことをですね コントロールとして出してもらって ができると私70%ぐらいがいいですかね ちょっと薄汚れて嫌な感じがいいんでこれ くらいであとはですねこの差し色アクセント カラーですね例えば愛を今使ってます けれどもサンゴ 松葉と いう形で好きな 差し色を 選んだ場合 どういうふうに見えるのかとかそういった こともできますんで非常にですね黒デザインは 優れたデザインツールとなっておりますんで なるべくデザインはこちらで詰めるようにしていただきたいと思います こういった形でですね ある程度詰めていって よかったらエクスポートという形になります うまくですねこの辺のツールも使っていただければ もう全然ですね 細かいところ詰めていくのも簡単になりますので このマークアップですね この好きなところをマークアップツールで囲んであげて そこにコメントを入れたりとかですね あるいは直接ですね 書いたいところをこうやって セレクトしてあげて セグメントの代わりに 適度な日本語を これもね ライドじゃないんですよ ライドじゃなくて 確かなんて言ってたっけ 漏液? 漏液ですね これらオレソングラフは ホバージに 一回作り込み始めるとですね本当にあのいくらでも時間が溶けてしまうんでまぁ 上でこのこのあたりにさせていただこうと思いますで当然ですねモバイルバージョンとかそういったものも 作ることができますので まあそういったところも含めてですねまぁ作り込んでもらえればと思います まあここでですね正直に言っておきたいことがあるんですけれど今日紹介したツール クロードデザインとか V0とかですね色々あると思うんですけれども 多分来年にはまたいいツールって他にも出てきてるんですよ 名前ごと変わってるかもしれないし そのくらいですねこの世界の動きは早いんですよね でも一つだけ変わらない心理っていうのがあって 実際に実装する前にデザインシステムを先に作るっていうのは おそらくこれからも変わらないと思います この順番だけはツールが何に変わろうと変わらないんですよ AIで誰もが一人でいろんなものを作れるようになったじゃないですか そうなった今デザインシステムってもう一部のデザイナーだけの専門技術じゃないんですよね 何かを作る人全員の基礎教養になりつつあるんですよ ツールはいくらでも調べれば出てきますし 明日には新しいのが出てるかもしれない でもこういったワークフローとかですね プロがやっている順序みたいなのはですね そう簡単に変わらないんですよ 順番を間違えると何を使っても何か違うものしか出てこない それはですねAIツールが入ってきても基本的には変わらないんですね 今回の動画はAIエージェントを使った 現代のプロのデザインのワークフローというのをですね 簡単にお見せしました 大事なのはとにかくですね もう悩むよりも作ってしまうというのがですね もうプロのやり方になってます ブランドとかですね そういったDNAをデザインに入れ込む定義が終わったら デザインに入れ込んだらデザインシステムをその上で作ってしまって 土台を作ってしまう その上で一気にプロトタイプを作るところまで持っていってしまう もう1日でそれが全部できてしまうんですね それで実際に自分で総合的な見た目や使い心地を確認してみて 私みたいにクロードデザインとかそういったものを使って インタラクティブなプロトタイプがすぐ出てきますので側だけですけれどもね それで足りないところとか どういった情報を出したいのか こういったことをですね 詰めて自信が深まった後に本実装に持ち込めばですね 最も効率的に そして最も質が高いものが出てくる可能性が高いと言えると思います というわけで今回はですね 現代のプロデザイナーのコンセプトデザインの作り方 そしてプロタイプの作り方というのを解説いたしました それではまた次の動画でお会いしましょう それでは