久しぶりです！！
AIツール紹介動画は編集なうです。Youtubeより前にBONO向けに公開しようかなとは思ってます〜！
（ちょっともう何回目なのかわからなくなってきた）
要約
デザインとフロントエンドが融合し始めていることについて説明しています。Figmaのデータが簡単にフロントエンドのコードに変換できるようになったことで、UIデザインと実装の垣根がなくなってきています。
デザインシステムの流れから、UIの表層部分とフロントエンドの部分が融合しているため、UIデザインの「表層」を強みにしたい人はフロントエンドを学ぶべきだと考えられます。
00:01
はい始まり始まりました [音楽] ボノラジチャチャ ラって流したいんやけどねはいお 久しぶりですね皆様新年明けましてボノ ラジからね2回目じゃないですかどれだけ ラジオ取ってないんだという感じですよね なんかねでもね去年の年末ぐらいからもう 何1日終わるのマジあっという間なんです よねなんでだろう年取ったからかな はい言い訳ですねというわけでちょっと 取っていこうと思ってますで今日の内容は AIの話とフロントエンドと UIの UIデザインかのフュージョンについてお 話ししていってみようかなとと思います まあ僕の結構考えになっていく内容なので
01:06
私はこう思うわとかここら辺ってどういう ことなんすかみたいなやつめちゃくちゃ 歓迎してますはいで実はボノラジチャンネ ルっていうのはですねSlackにあり ましてですねそこでコメントいただいても いいですし タイムスカイ君にあの書き込んでいただい ても構いませんあの僕に教えてください コメント欄欲しいね実装したいねコメント 欄をボノさんにねはいというわけで今日 話していくんですけどまずその前に最近の ボノということでちょっと話していってみ ますと新年ねあの入会される方が増えまし た入会って呼んでねえわごめんねやめよう 今のははい入会じゃないからはいメンバー になってね来る方が増えましたやっぱり 新年っていうのは何かこう人を焚きつける サムシングがあるんでしょうねはい somethingがsomething ねちょっとsomethingって曲名 出そうと思ったけど何も浮かばなかった はいちょっと水飲みますねあそうあの僕 ですね今これねラジオなんで誰も画面見て ないと思うんですけど
02:13
今年から 制服を作ります僕のための僕だけのための 制服ですこのジャケットですねこの ちょっとネイビーじゃねえなオリーブっ ぽい色なんですけどこれあの動画じゃ わかんないけどこれをですねあの 夏も着ていこうかなと思いますあの要は 中田敦彦がスーツを着るような感じでもう これであの動画はずっと撮っていこうかな と思ってますねはいキャップはかぶったり かぶらなかったりしようかなという感じ ですねはいちょっとあのスーツっぽいんで ちょっとあのかしこまりすぎるとねなんか 逆にダサいのでやっぱ着崩していきたいな というところでキャップかぶったりとか あのこれはちょっと今日はIBMのT シャツなんですけど ちなみに全部ユニクロですはいとかメガネ かけたりとか してねはいちょっとなんかずらしていこう かなと思ってますメガネはちょっとなんか 真面目すぎますねはいちょっと画面見て ないんでみんなでわかんないと思うんです けど白メガネとかするとだいぶ 胡散臭いあいつになってしまうんですけど
03:17
白メガネとか結構いいかもしれませんね はいとかあのロックティーとかねなんか 下北で400円ぐらいでなんか売ってねえ かなって探してなんか買ってこようかなと 思います 暇な時 っていうようなことちょっと導入したのが 最近のボナラジじゃないわ最近の1個目 ですね全然みんな関係ないですねあとは ですね今年は1ヶ月に1回ミートアップ やりますミータップってかオフ会みたいな のやっていきますこれあの初めて最近入ら れた方もね聞いてるかもしれませんこの ラジオ是非ねあの覚えておいていただける といいんですけど僕がですねあの 東京に近い神奈川県に住んでますので関東 になってしまうんですけど月に1回は最低 集まれる 場を作ります神奈川の方にですねボノの 秘密基地という名の僕の家がありまして めちゃくちゃ広いんですよ和訳やって2 LDKに一人で住んでますのですごく広い んですね最近あのサウナとか買っちゃった んで色々あるんですけどもそれはいいや 要するにあの場所が余ってるんですよなの で土日とか集まってなんかね人集めやすい
04:22
んですよちょっと遠いですけどねあの都心 からは若干なのでですけどまあまあ 集まれる場があるというラフになので1 ヶ月に1回集まれる場所を作っていこうか なと思いますやっぱりねもうやってるん ですよ結構 ちょこちょこねいいですね効果がなんか あのボノにをめちゃくちゃやってくれる ようになるっていうすごく僕目線のいい こともあるんですけど何よりやっぱり人と の出会いっていうのが一番人を変えますね 僕は思いますやっぱこうやる気をこう なんかこうねそこからえーってる人もが やっぱ一番多いかなと思ったりとかします し何だろうねやっぱこう人間じゃないです か言うて なんかデザイナーでデザインをしていくん ですけどデザインの対象って人間なわけ ですよなのでやっぱり人間と触れ合って 人生を語りデザインを語りしていくことに よって自分は何のためにやっぱデザインを していくのかっていうものが 磨かれていくのではないかと思っておる わけですよ」っていうようななんかこう
05:28
変化を僕が感じてますはい僕自身の変化 ですねっていうのがやっぱ一番いいと思い ますねなので動画見てなんかスキルをつけ るっていうのは僕はやって欲しいとは思い つつまあとはいえ継続できなかったりとか ねなんだかんだやりませんでしたっていう 人多いですそれでいいですただまぁあの せっかくこういう場に入ってきたわけです よそんなに安くもないお金を払ってので あれならばやっぱ一人ぐらいねこう出会っ てですね何かしらこう影響を受けて いただきたいなと思うわけなんですねこう やってやってる側からするとっていう意味 ではすごくいい場を作りやすいなと思って ますオフラインってやっぱ大事ですねって いうわけなので結構月に1回やろうと思い ますもう3月はこの間 雑談チャンネルに書いてもう人数パンパン なんでちょっと10人 ちょいぐらいいるんでちょっとね 厳し目なんですけど4月とかもやっていく のではいあの 秘密基地行きたいよって方はDMください はいあの全然 誘うんでその人を軸にねはいあのやっぱ僕
06:32
からするとですね皆さんが何を考えてるの か知りたいですし逆に言ってわかんないの で伝えてもらえるとじゃあそれでちょっと なんかね喋ってみようかなとかなんか ちょっと調べてなんか僕の意見を 投下してみようとかなんかその学び方は なんか僕なりにまとめてみようとかね いろいろなこうやろうと思えたりとかする ので教えてもらえるとありがたいですか ねっていうまあそういうオフラインの 場づくり 場づくりとか場っていうのはすごくいい ですよっていう お話ですかねもちろんあの関東以外にも僕 行きたいと思ってます呼ばれたり行きます 僕はあのね完全にフルリモートなので正直 あのね日本どっかしら行きたいんですよね 言うてもコロナあれもう終わってますけど 言うてとはいえ結構国内行くチャンス機会 ではあったりするしサウナ好きなんでね なんかねついでにサウナ寄って帰るとか 結構僕的にはありなんではいなんか関東 以外のところ関東って広いね東京 以外東京埼玉千葉神奈川以外の方もね誘っ
07:36
ていただければ行きたいなと思いますので ぜひねそれも教えてください水飲みます はいって感じですかねあと 黙々会ですねいいですねこれどんどんやっ ていきましょうはいであの黙々オフィスア ワーっていうのをたまにやってその時間は なんかね僕いるんで絶対確実になんか質問 とかしたかったら全然あのガッツリして もらっていいですよみたいなのもこれも 毎週やっていきますねもう木曜日行きます 木曜日の8時10時僕の予定がない限りは 確実に黙々とオフィスアワーをする時間に したいと思います 毎週木曜日ですね 黙々なんで木曜日ですあの全然違う目的 ですけどねはいなので 木曜日の8時から10時ぐらいに僕いるん でなんかこう相談したいとか 質問したいことあったら来てくださいはい でついでに他のメンバーと喋って帰って くださいはいっていうのがそういう場もね やっぱ作るといいんですよおそらくはいな のでそれもやっていきたいと思いますし誰 かしらなんかもくもくしてるんでこれは
08:41
かなりね 場としていいですよ でもなんだかんだねそんなやっぱ 遊びに来る場ではないので 遊びに来てもらっていいんですけど ドライブちょっとやっぱちょっと 頑張らないとなみたいなのを感じる場だと 思うのではいぜひねやっていってもらえる のはすごくいいと思ってますのでぜひね皆 さんも黙々していただきたいですしあの 黙々作業部屋ってチャンネルがありまして そこでみんなの黙々したい方がURL投稿 してこれからもくもくしますみたいなこと をやってますのではいぜひね行ったこと ない方とかちょっと作業実はしてるんだよ ねって人は 遊びに来てみるといいんじゃないかなと 思ってますはい全然音出してないんで みんなもう 完全無音でそこに人がいるかみたいな感じ でやってるのでぜひ来てもらえるといいん じゃないかなと 思っておりますねはいそんなところですか ねはいあとは何ですかねなんかいろんなね ブログ見ましたしちょっとこれ公表してる
09:47
かわかんないで転職された方とかも いらっしゃったりとかその未経験からです ね決まった方とかもいらっしゃったりとか するのでそれはそれでやっぱりいいなと 思ったりしてますかねはいそんな感じかな そんなもんかなあとあれですねスタンプ 職人が現れましたねうちのコミュニティに はいスタンプ職人ミーが現れましたね なんか最近あの上げぽよとかイエーイ みたいなスタンプ僕を押してるのでお 気づきな方いらっしゃるかなと思うんです けどもあのなんかちょっとあげあげな スタンプを 量産されてるみーさんって方がですね いらっしゃいましてなんかギャルらしいん ですよマインドがあのリアルも出るかも しれませんけどなのでその方がねどんどん 新作を作られてるみたいです聞いた方は タイムスミーみたいなのがあるので検索し てSlackでね言っていただけるとあの 量産される様がね見えるかなと思います はい個人的にはもう彼女は
LINEスタンプとか作りまくってなんか で一発当てて 儲けて欲しいなと思うんですけど そういうところでございますかね他には なんかね皆さんでもあれですねブログ ノートとかまとめてコンテンツやったやつ とか見てたりはするんですけどもはいまあ ブログ書くあそうだポートフォリオの コンテンツ出しましたはいちょっとね シリーズ化とか適当にやっちゃって一応 シリーズ化してるんでまとまってはいるん ですけど3本しか動画ないですけどはい 出しましたロードマップにも載せました リンクをゴールのところにありますなので えっとロードマップにあるので ポートフォリオを作る人も見てほしいん ですけどフロートマップとのゴールって いうのが2つあってまあ1つまあゴールは ポートフォリオ作るなんですよこれが ゴールですロードマップので一応2つあっ て1つがその3つの基礎ってやつを とりあえずとにかく通るというのが一つで そのゴールの2つ目が先のポートフォリオ 作るですねはいというのがあるのでなんか 何を勉強したらいいのかっていうのが
わからなくてものに興味持った人って多い と思うんですよ未経験の方でそういう方は この ポートフォリオで言ってる中身の ポートフォリオを作るっていうのをゴール にするともう全然いいと思いますかなり 通用するんじゃないかなと思っているはい 感じですという意味でもポートフォリオの 動画あるのでラジオ感覚でいいですなんか 聞き流す感じで全然いいと思います聞いて みると何を目標にしなきゃいけないんだ なっていうのが結構みんなブレるんです けど ブレずらくなるし立ち返られる場所が できると思うのでそれがロードマップなん ですけどまぁまぁそういうものがあるので ポートフォリオの動画気になった方見て みるといいんじゃないかなと思ったりし ますねはいという意味ではさっきのそのね ブログの話でまあ学習ログまとめておくと その人の人となりがち伝わるので皆さん 引き続きねぜひやっていただきたいなと 思ったりはしてますねはいそんな感じです かね最近のコミュニティについてはもう ちょっとねなんかいっぱい入ってきたので
なんかオンラインでもあのオフ会じゃない ですけど交流会をやらなくてはならないな と思ってるんですけどなんかね僕の予定が なんか微妙なんですよねなんかちょっと いろいろ入れちゃってるのでまぁちょっと やった方がいいかなと思ってますので やろうかなと思います3月頭かな2月末で もいいけどもう来週だっちゃうんで2月末 が はいという感じです一応ねあの 毎月の初めに 黙々会じゃないわ目標設定回ですね 黙々ですね木津長いですね目標設定かやっ てますのでそこで メンバー集まるし雑談できるので結構僕 それが交流会として一番いいんじゃないか なと勝手に思ったりしているのでやってな いっていう理由があるんですけどまあまあ まあまあまあまあちょっとよねあのオフ ラインじゃなかったオンラインでも場を 作って行った方がいいと思うのでやって いきたいと思いますはいそれでは今日の 本題に参りましょうかえーAIと UIとフロントエンドがなんか重なって いってるというお話ですねAIはまあ 付け足しなんで別に後反射するかじゃあ
その 友愛デザインとフロントエンドの領域が 結構フュージョンし始めてるという話をし ていくんですけどこれは最近 YouTubeでキャリアの動画を出し ましたでそこでなんか役職とかじゃなくて そのデザインのフローでどこを自分は担当 するのかとかどこに強みを置くのかみたい なのでキャリア考えるといいよみたいな話 をしてるねやつなんですけどそれとそれで 想像するとわかりやすい話ですで何がどう なってるかって言うとまず怒ってることっ て言うと figmaのデータですねもうヒグマが やっぱりちょっと出てきてしまったことに よっていろいろ確変してるんですけど ヒグマのデータがそのまま簡単なフロント エンドのコードに変換できるっていう時代 にもうすでになっているっていう事実です ね例えば僕が使ってるwebフローという ノーコードのWEBサイトビルダーの サービスとかもプラグインを出しまして figmaの もののデータをそのウェブフローってやつ でコピペできるみたいなそうやると
だいたい8割ぐらいはそのまま出力されて することができるという機能を出してたり がするんですねそのウェブサイトとして 公開することもできるっていう機能なん ですよすごいんですよねうんもう figmaで作ったものがそのままWeb 上にアップロードできるっていう機能が もう出てるんですよでこれはノーコード ツールの話じゃんって思うと思うんです けど全然調べてみるとfigmaのデータ を簡単なHTMLCSSに変換できる ツールで結構前からなんかエラーが起こっ たりとかしてるみたいですがまああったり とかするしえっとこれもYouTubeで 紹介する予定なんですけど リアクトのコードとかまあ同じですね HTMLとかに変換するものも出てきたり とかしてますなのでヒグマで作った デザイン見た目と構造ですねフレームの 名前とかオートレイアウトとかなんかそう いうものをちゃんと組めばそれが見た目の
部分のコーディング実装にもうそのまま 変換されるっていう時代に来てるんですよ ね 今までっていうのはそのデータを見て フロントエンドのコードを書く方が 余白はいくつとかをチクチクチクチクこう なんかやってたりやったりしてるんですよ うんっていうものがまあほぼほぼ自動化さ れてる自動化できる時代にもすでになって いるもう来てるあと使うだけ ワークフローにどう仕組み化しても入れる かっていう話になってるんでそういう時代 が来てるわけなんですよこれがやっぱり そのねデザインシステムの流れからのこう ネクストステップがすでに来てると思って いてデザインシステムっていうのも いわゆるデザインまあそのビジュアルUI とかのビジュアルをコードのシステム [音楽] とに変換しやすい形として連携しやすい形 に仕組み化しましょうよっていう取り組み なんですよ基本的にはねもちろん違う部分
もありますよそのうちのサービス的には これはこういう時に使うっていうその なんかコンセプト的なコンセプト的なもの もありますけどちょっと水飲みますね 喉が痛いちょっと今動画4本ぐらい撮っ てるんですよねこれで 2本目なんですけど 喉がちょっとはいまあそういうものがある のがデザインシステムなんですけども半分 ぐらいの役目はその エンジニアリングとデザインという垣根を なるべくなくして効率化するっていう部分 だったりするんですよねなのでfigma が出ることによってそのコードでやるよう なコンポーネント管理とか 余白の管理フォントサイズの管理とか めちゃくちゃ簡単にできるようになりまし たとこれって要するにフロントエンドで今 までやってきたことをデザインデータでも できるようになったっていうことなんです けども要はその流れから来てるので UIを作るその見た目を作るっていう部分 だけ取るとものすごいもう融合がどんどん 進んでるんですよデザインシステムとか
ヒグマが出てきた時点から はいなのでもうここは結構もうねヒグマの データがねそのままフロントエンドにな るって事はもうフロントエンドの人が figmaのデータを使ってそのまま行動 を書くみたいな感じになりそうですよね もうすでにねはいっていう感じになってる のでまやっぱりUIデザインは広いんです けどの中のそのビジュアル表面表層を作る 部分で言うとだいぶもフロントエンドと ガッチャンコしてるんですよね逆に言うと もうフロントエンドの人が 揃ってるコンポーネントを使って要は揃っ てるUIパーツの範囲だけしか多分ね既存 のサービスをなかなか使えないと思うので その 範囲内で 適したUIを作ることができるのであれば まあね有害デザイナーがわざわざ表層の 部分をデザインしなくてもいいんじゃない かなみたいなことになったりもするわけ ですよ ワークフロー的にはねまだまだエンジニア さんがデザイン知識なかったりするので すぐにできるようにはようにな
るってかそういう世の中にすぐにはなら ないかもしれませんけどまあまあ現実的に なってきているし時間の問題かなと思うん ですよ っていうのがもうすでに起こってまして逆 にじゃあね有害デザイナーとしてはどうし たらいいのかというとまあまあこれでも 変わらずそのフロントエンドの理解という かその実装部分との関係性構築デザイン システムの仕組みをちゃんと知るとか オートレイアウト」って何であんのかって いうのをちゃんと理解するとか コンポーネントの意味とか作れるように なっておくとかそういうものは変わらずな んですけどどんどん 垣根がなくなっていっているのでどんどん 多分エンジニアの人もヒグマのデータに もうすでに入っていけると思うんですけど 入ってくると思いますのでそのデザイナー 側が全く何も変わらずいるとどんどんその 何ですか役目を奪われるのは間違いないな と思うわけですよ何もしなかったらねそれ はもちろんそうですよねっていうような 流れは加速するばかりなのでその放送の 部分と実装の部分っていうのはもう
垣根がないと なくなっているまあほぼないと思って もらった方がいいよっていう話ですかねな ので UIデザインをやっててその 職場的なポジションで 表層の部分までちゃんと見なきゃいけない とか サービス全体として一貫した コンポーネントを作る 管理するとかそういうところをメインで やってる方ですねっていうのはもう フロントエンドを学ぶべきだと思います もう正直だってねもう垣根ないんだもん 全部できなくていいんですけどやっぱそこ でやれた方が逆に実装者との連携が取り やすくなるわけなんですよねってなると すごいワークフローが効率化されて ユーザーさんに避ける時間が増えたりとか ユーザーさんに機能をデリバリー届ける までの時間が 減ったりとかするわけですよ少なくなっ たりすぐ届けられるようになったりする わけなんですよねっていう風にどんどん なってってるんでなんかその UIの表層の部分を作るとかデザイン システムやってますとかコンポーネント
管理ですとかfigmaの使い方です みたいなところをすごくメインでやってる 人とかやりたい人っていうのは多分そこ だけだと思うあんまりバリューが出ない わけじゃないですよありますあるいはあり ますがそこだけだとちょっと物足りないよ ねっていう世の中にどんどん今なってる すでに行ってないだけでなってる説みたい な感じがすごくしてますねはい現に僕 なんかもう今ねWebフローってやつで figmaからコピペできるんでなんか そんな感じになってるわけですよまだね コンポーネントとかは 拾ってくれないのでその辺はねちょっと 進化に期待したいところなんですけども まあまあまあそういう風になってるわけな のでまあそのフロントエンドっていう部分 とUIの表層部分ですねあとUIの仕組み 化の部分ですねデザインシステムとかの ところはもうなんか一緒くたにどんどん今 なってるという理解をしていただいた方が 世の中夜渡り的にはいいんじゃないかなと 思っるっていう話でした
はいでこの辺ってちょっとAIの話入って いくんですけどパターンがあるわけですよ ある程度ねデザインシステムって何を定義 しますかってパターンありますあるわけ ですよボタン3種類とかねホバーした時と かボーダーは2種類ぐらい持っとくのが 普通かなまあ3種類かなとかだいたいある わけですよねでその2種類3種類のどう いう風に使い分けするかじゃあボーダー だったらゆるくあ違う薄く引くとこ 弱く区別したいところはこの色強く区別し たい時はこの色とかねあるわけですよ プライマリーから配色だったら プライマリーから 適切に使うからボーダーに使うカラーとか ねだいたいもパターンあるわけですよね こういうところっていうのはやっぱAIが 得意だけですよねもうほぼほぼその状況と かよって答えを模索する必要性のない 平均値がありよくあるパターンがある パターン化されてる部分っていうのはAI さんが学習しやすいところであり再現し やすいところなのでこういうのも一発で ポーンってとりあえず出して細かいとこは
チューニングするっていうワークフローに 多分今年中にはなるんじゃないかと思っ たりはしてますかねまあサービス手続きて 定着が来年とかかもしれませんけど っていう風になってるわけなんですよて なってくるとやっぱその表層だけやってる とか逆にのデザインシステムすごく強い ですみたいな人のやることをAI アシスタント君がやってくれたりするわけ なんですよね全部とは言いませんよ半分 以上やるようになってくるでしょうという 風になってくると思うんですよまあそう なった場合でもその UIの表層部分とフロントエンドの融合 ってのはさらに進むわけですよねまあ誰で もできるようになってくるっていうかその 両方 掛け持ちしていた方が逆にできるみたいな 世の中になってくると思うんですよって いう風になってきてるんですよねはいって いうのがあのその UIデザインとフロントエンドっていう もののUIデザイン一部がフュージョンし 始めてるっていう話ですねなのでまあUI デザイナーとして現場に入るとまずはその
要件の部分も多分ミーティングには絶対 入れて いると思うんですけど とはいえ最初はUIを作るという部分に なってくると思うのでなんか初めのうち からまだ多分大丈夫ですよもちろんこれが 一般的になってしまうと塗ってしまうって いうのはなると やっぱその若干フロントの知識とか確実に 必要になってくるもう今もね必要なんです よデザインシステムとかや るってなるとちょっと待って水飲みますね なんでみんな水飲まないのかわかんないの は1時間ぐらいしゃべってる人って俺絶対 無理なんだけどもカラカラなんだけど はいなんだっけ現場かそう現場だと そういう仕事すると思うんですよなんか もうすでにオートレイアウトとか コンポーネント化されてる今のサービスの UIのコンポーネントだけでデザインを するとかってめちゃあると思うんですけど
もそういうのも含めてもうすでにあるん ですけどやっぱ初心者の 段階からヒグマのそのオートレイアウトと かコンポーネントの理解とか何でそれやら なきゃいけないのかっていう理解とかその 簡単なフロントエンドの理解もう LPをHTMLとCSSで組んでリリース 1回してみるぐらいで多分まあまだまだ いいと思うんですけどとかをやっぱやった 方がいいよねっていう風にもうすでになっ てるんですけどよりなるなっていう気がし てますね というわけでここ今ね解散対応できてない のでちょっとねやんなきゃなーと思って ますまあ多分無料で出す分なんでボノを あんま関係ないかもしれないわかんない どうだろうボノでやるかもしれないです もので出す部分もあるかもしれませんけど ちょっと初心者向けになっちゃうんです けどそういうのやった方がいいかなと思い ますまあ皆さんに割と当てはまるのはその フロントエンドのコードの部分ですかね これの簡単なチュートリアルみたいなもの はまあ言うてみーとかで漁れば無限にある んですけど僕も作ってもいいのかなと思っ たりとかしてますなので はいっていうところですかねってなって くるとじゃあどこで差はつけりゃええね
んってなるじゃないですかもう2つでこれ はもう変わらずでそのフロントエンドの 部分までやっぱガツッと表現をやりたけれ ばやっぱやるべきなんですよ今までやっぱ おかしかったその建築士で言うとその 一級建築士の資格を取るときに別にその 側の 設計の部分だけやれてればいいわけじゃ なくてその建物の中の空気の循環だとか 温度なんか 管理とか土台で地震にならないなんか計算 とか計算やるか落ちとか多分やると思うと か土のなんか種類のなんだこうものとか そういう知識まで 求められるんですよ建築やるってなると 当たり前ですよねそのなんかね土台だけ 作っていいって思うんじゃなくてそこどこ に建てるのかとかえっとその空気の循環が 悪いとね人がやっぱ生活しづらいとかある わけですよね 排水のなんか仕組みとかもあるわけなので やんなきゃいけないんですけどなので一緒 に一緒の知識が必要なんですよ1級建築士 っていうものを建築士としてやっていく ための資格を得るためには人の命かかって
ますからね半分以上まあなんだけどWeb の世界だとねそういうのないじゃないです か僕らが作ったデータで作ったデザインて コードで生成されるのにコードのこと何も わかんなくてもまあデザイナーにはなれる わけですよまあ 慣れるな別にいいとしてまあいいか悪い かっていうとちょっとおかしいと思うん ですよね なんかそれをね他の人に任せるでデザイン するってやっぱちょっとなんかおかしな話 ではあるのでまあ逆に本来の形にはなって いきつつあるのかな行きつつあるのかなと かになったのかなと思ったりはするので まあそろそろ UIとかそのソフトウェアを作るのであれ ばWebサイトもそうですけどねあの コート書いてもいいんじゃないかなコート かける最低限知識はあってもいいのかなと いうところですかね なのでこの分野をコードと含めてどの 突き詰めていくっていうまあフロント エンドエンジニアかける UIデザイナー表層部分とかシステム強い みたいな 職種そういう作る部分ですねその要件とか
の後の話を 極めてくってところで自分のバリューを どんどん 出していくっていう世の中じゃあ世の中 じゃないキャリアの積み方ってのは一つ あると思いますでもう一つやっぱその 顧客理解とかですね誰のために何を作る べきかっていうところでここもそのUX だろって思うかもしれないですけどその なんかUXのなんか分野ってなんかあんま 難しくてそのなんかやり方しのドリブンの 話が多いんですよね僕の 裸眼もあると思うんですけどそのなんか ユーザーインタビューの正しいやり方とか なんかなんだろうその人間の理解とかです かねちょっと研究職っぽいんですよねただ 何だろう誰かに勝ち提供するってなると それだけじゃ絶対ダメでそのどう伝える かっていうまあマーケっぽい話と コミュニケーションデザインという話とか もう絶対かかってくるしコンセプトの作り 方にそこからねやっぱ合わさってくると 思うんですよ誰が対象でみたいなってなっ てるとなんかちょっとマーケターっぽい 側面もねやっぱやらなきゃいけない くなると思うんですよ本当に価値届けよう
と思うのね顧客理解すればいいやだけだと ならないんですけど本当にでも本当そこ だけで意味ないじゃないですか固着理解 できるだけの人材って僕あんまり価値ない と思うんですよ本来はそこの スペシャリストがいるところでじゃあ何 するよってところがちゃんと伴わないと 価値提供できないのでやっぱ価値提供でき ないってことは価値がないと思うので なんか早口なっちゃいましたけどはいなの でそういうビジネスの知識も絶対必要です よねその 夢物語描いて実現できませんでしたとかお 金も分かりませんとかじゃ絶対実行され ないでも思いますしはいとかまあ逆に言う とUIが悪かったら勝ち届かないのでUI の最低限の理解とかも必要になってくるの で なんかやっぱそういうこう広い講義の意味 での価値デザインみたいなものをやってい くっていうところはあるんじゃないかなと 思ったりしますね こういうシステム的な3つ目ですねあの システム的な部分を理解しつつなんか ブランディングのデザインあるとかなんか ねロゴ作るっていう意味のブランディング もありますしそういうなんかさっき言った
ようなえっと誰が顧客で 企業とかサービスとしての未来はこういう 風な方向性でいくべきなのでこういう指針 にしましょうとか方針を立てましょう みたいなねものやっていくとかはいそう いうようなところをトータルで設計できる デザインブランドデザインみたいなもの だったりとかそういうような視点ですね別 にブランドデザインの言葉じゃなくていい んですけどそういう視点でデザインできる ようなスキルをつけていく得意な分野を 見つけるというところを引き続きやって いくのはまああんま変わらないかなと思っ たりはしますかねはいただまぁ話を戻し ますけどフロントエンドというアイ デザインというのはすごくもうだいぶ 融合できる状態にはレディーになってるの で UIデザイナーとして現場でやる上では もう 嫌なぐらいこの話は話題になると思います 今後も今後この12年1年少なくとも1年 はAIとともになってくるんじゃないかな と予測しておりますはいなのでまあやった 方がいいんだけど本当のクリエーションで
どこにあるんだっけってトラ考えると ねっていう風には思いますね個人的には はい水飲みましたはいなんかでそんなね 仕組み化とかするのって別に何だろう 管理者がやればいいってやればいいと思っ てるわけじゃないですけどやってもいい 部分でありなんかデザイナーっていろんな 定義であるので別にいいんですけど僕的に はねやっぱりまだ見たことないけど誰かが 求めているであろうものを 具体化形作る人だと思うのですでにある ものを仕組み化して効率よくするっていう のはエンジニアリングだと思うんですよ僕 はどっちかで振るならエンジニアリングか デザインがでるならって話なんですけど そこの融合っていう話なんですけど今回は まあまあただまぁデザインニングって 考えると なんかねその仕組み化だけやってていいん だっけみたいなね新しい価値作ろうよとか 課題とこうよとか 結局課題発見しようよとかなんかそっちな
んじゃないかなと思いますねはい っていうのは個人的には思うので なんかデザインとはなんぞやっていうのは やっぱりここのデザインをやっていく人と しては 考え続ける必要性があるのかなと思ったり しますねはい という感じかなうんちょっとまあAIとか フロントエンドの最近調べ物してたので こういう話をしてみました はいいかがですかねちょっと感想があり ましたらね僕いっぱい最近コメントがね 一番ね嬉しいことが分かりましたのでぜひ あの自分のタイムスでもいいですし僕の タイムズカイ君でも いいのでコメントいただけるとありがたい なと思いますはいなんか感想コメントお 待ちしてますはいまあねボノにもコメント 機能があればいいんですけどちょっとね僕 も頑張って今行動を書かないとって感じ ですねちょっとまだまだ今年中は無理です けど来年とかにはねなんか始めたいねと
思いますねはいでちょっとモノラジオで やっぱ続けていきたいのでそうですね やっぱ最近僕デザインの本をあまり読ま なくなったんですよねあえて読んでないっ てのが結構でかいんですけどねデザインの ことをやっててもデザインできねえやって 思っちゃったりとかしてるんでなんかで あえて別の 領域の本とか読むことで逆に言うと デザインにつながってくるみたいな感じな のであんまりデザインの本を読んでないの ですがまあちょっと改めてねコンテンツ 作る意味でもあの動画ですね作る意味でも ちょっと読み直した方がいいしなんかそう いう話のが皆さん的には受けるんじゃない かなっていうのがあるので本デザイン系の 本の話題の話をしたりとかしてみたいなと 思います 結局あのインプットしないとねあの話せる アウトプットが僕の中にもないので ちょっと勉強したいと思います僕のラジオ のためにはい皆さんもねこの本良かったよ とか 解散好きそうですとかあったら教えて ください多分80%ぐらいで買わないと 思うんですけど
僕自分の読んでる本以外を買わないんです よ読み終わったら次何買おうかなって思っ てその時に 検討材料になる 並べるんですけど基本的にツン読しないっ ていうかそのあんまりこう溜めないんです よ買った本はすぐ読むっていう風にしてる ので すぐに買わないと思うんですけどこういう のはありましたよとかあったら嬉しいよ 嬉しいので教えてもらえると嬉しいです はい嬉しいです 嬉しいよなんか言いましたかねはいそれで はね今回のモダラジはこんな感じですかね ちょっとリハビリボノラジでしたけどはい 楽しんでいただけたらと思いますまた 引き続きボノでよろしくお願い 致しますあ4月以降のオフ会とかあの 各地方のお誘いお待ちしておりますので これガチですはいガチではもうそういうお 待ちしておりますので皆様よろしく お声掛けよろしくお願いしますそれでは
久しぶりです！！
AIツール紹介動画は編集なうです。Youtubeより前にBONO向けに公開しようかなとは思ってます〜！
（ちょっともう何回目なのかわからなくなってきた）
要約
デザインとフロントエンドが融合し始めていることについて説明しています。Figmaのデータが簡単にフロントエンドのコードに変換できるようになったことで、UIデザインと実装の垣根がなくなってきています。
デザインシステムの流れから、UIの表層部分とフロントエンドの部分が融合しているため、UIデザインの「表層」を強みにしたい人はフロントエンドを学ぶべきだと考えられます。
00:01
はい始まり始まりました [音楽] ボノラジチャチャ ラって流したいんやけどねはいお 久しぶりですね皆様新年明けましてボノ ラジからね2回目じゃないですかどれだけ ラジオ取ってないんだという感じですよね なんかねでもね去年の年末ぐらいからもう 何1日終わるのマジあっという間なんです よねなんでだろう年取ったからかな はい言い訳ですねというわけでちょっと 取っていこうと思ってますで今日の内容は AIの話とフロントエンドと UIの UIデザインかのフュージョンについてお 話ししていってみようかなとと思います まあ僕の結構考えになっていく内容なので
01:06
私はこう思うわとかここら辺ってどういう ことなんすかみたいなやつめちゃくちゃ 歓迎してますはいで実はボノラジチャンネ ルっていうのはですねSlackにあり ましてですねそこでコメントいただいても いいですし タイムスカイ君にあの書き込んでいただい ても構いませんあの僕に教えてください コメント欄欲しいね実装したいねコメント 欄をボノさんにねはいというわけで今日 話していくんですけどまずその前に最近の ボノということでちょっと話していってみ ますと新年ねあの入会される方が増えまし た入会って呼んでねえわごめんねやめよう 今のははい入会じゃないからはいメンバー になってね来る方が増えましたやっぱり 新年っていうのは何かこう人を焚きつける サムシングがあるんでしょうねはい somethingがsomething ねちょっとsomethingって曲名 出そうと思ったけど何も浮かばなかった はいちょっと水飲みますねあそうあの僕 ですね今これねラジオなんで誰も画面見て ないと思うんですけど
02:13
今年から 制服を作ります僕のための僕だけのための 制服ですこのジャケットですねこの ちょっとネイビーじゃねえなオリーブっ ぽい色なんですけどこれあの動画じゃ わかんないけどこれをですねあの 夏も着ていこうかなと思いますあの要は 中田敦彦がスーツを着るような感じでもう これであの動画はずっと撮っていこうかな と思ってますねはいキャップはかぶったり かぶらなかったりしようかなという感じ ですねはいちょっとあのスーツっぽいんで ちょっとあのかしこまりすぎるとねなんか 逆にダサいのでやっぱ着崩していきたいな というところでキャップかぶったりとか あのこれはちょっと今日はIBMのT シャツなんですけど ちなみに全部ユニクロですはいとかメガネ かけたりとか してねはいちょっとなんかずらしていこう かなと思ってますメガネはちょっとなんか 真面目すぎますねはいちょっと画面見て ないんでみんなでわかんないと思うんです けど白メガネとかするとだいぶ 胡散臭いあいつになってしまうんですけど
03:17
白メガネとか結構いいかもしれませんね はいとかあのロックティーとかねなんか 下北で400円ぐらいでなんか売ってねえ かなって探してなんか買ってこようかなと 思います 暇な時 っていうようなことちょっと導入したのが 最近のボナラジじゃないわ最近の1個目 ですね全然みんな関係ないですねあとは ですね今年は1ヶ月に1回ミートアップ やりますミータップってかオフ会みたいな のやっていきますこれあの初めて最近入ら れた方もね聞いてるかもしれませんこの ラジオ是非ねあの覚えておいていただける といいんですけど僕がですねあの 東京に近い神奈川県に住んでますので関東 になってしまうんですけど月に1回は最低 集まれる 場を作ります神奈川の方にですねボノの 秘密基地という名の僕の家がありまして めちゃくちゃ広いんですよ和訳やって2 LDKに一人で住んでますのですごく広い んですね最近あのサウナとか買っちゃった んで色々あるんですけどもそれはいいや 要するにあの場所が余ってるんですよなの で土日とか集まってなんかね人集めやすい
04:22
んですよちょっと遠いですけどねあの都心 からは若干なのでですけどまあまあ 集まれる場があるというラフになので1 ヶ月に1回集まれる場所を作っていこうか なと思いますやっぱりねもうやってるん ですよ結構 ちょこちょこねいいですね効果がなんか あのボノにをめちゃくちゃやってくれる ようになるっていうすごく僕目線のいい こともあるんですけど何よりやっぱり人と の出会いっていうのが一番人を変えますね 僕は思いますやっぱこうやる気をこう なんかこうねそこからえーってる人もが やっぱ一番多いかなと思ったりとかします し何だろうねやっぱこう人間じゃないです か言うて なんかデザイナーでデザインをしていくん ですけどデザインの対象って人間なわけ ですよなのでやっぱり人間と触れ合って 人生を語りデザインを語りしていくことに よって自分は何のためにやっぱデザインを していくのかっていうものが 磨かれていくのではないかと思っておる わけですよ」っていうようななんかこう
05:28
変化を僕が感じてますはい僕自身の変化 ですねっていうのがやっぱ一番いいと思い ますねなので動画見てなんかスキルをつけ るっていうのは僕はやって欲しいとは思い つつまあとはいえ継続できなかったりとか ねなんだかんだやりませんでしたっていう 人多いですそれでいいですただまぁあの せっかくこういう場に入ってきたわけです よそんなに安くもないお金を払ってので あれならばやっぱ一人ぐらいねこう出会っ てですね何かしらこう影響を受けて いただきたいなと思うわけなんですねこう やってやってる側からするとっていう意味 ではすごくいい場を作りやすいなと思って ますオフラインってやっぱ大事ですねって いうわけなので結構月に1回やろうと思い ますもう3月はこの間 雑談チャンネルに書いてもう人数パンパン なんでちょっと10人 ちょいぐらいいるんでちょっとね 厳し目なんですけど4月とかもやっていく のではいあの 秘密基地行きたいよって方はDMください はいあの全然 誘うんでその人を軸にねはいあのやっぱ僕
06:32
からするとですね皆さんが何を考えてるの か知りたいですし逆に言ってわかんないの で伝えてもらえるとじゃあそれでちょっと なんかね喋ってみようかなとかなんか ちょっと調べてなんか僕の意見を 投下してみようとかなんかその学び方は なんか僕なりにまとめてみようとかね いろいろなこうやろうと思えたりとかする ので教えてもらえるとありがたいですか ねっていうまあそういうオフラインの 場づくり 場づくりとか場っていうのはすごくいい ですよっていう お話ですかねもちろんあの関東以外にも僕 行きたいと思ってます呼ばれたり行きます 僕はあのね完全にフルリモートなので正直 あのね日本どっかしら行きたいんですよね 言うてもコロナあれもう終わってますけど 言うてとはいえ結構国内行くチャンス機会 ではあったりするしサウナ好きなんでね なんかねついでにサウナ寄って帰るとか 結構僕的にはありなんではいなんか関東 以外のところ関東って広いね東京 以外東京埼玉千葉神奈川以外の方もね誘っ
07:36
ていただければ行きたいなと思いますので ぜひねそれも教えてください水飲みます はいって感じですかねあと 黙々会ですねいいですねこれどんどんやっ ていきましょうはいであの黙々オフィスア ワーっていうのをたまにやってその時間は なんかね僕いるんで絶対確実になんか質問 とかしたかったら全然あのガッツリして もらっていいですよみたいなのもこれも 毎週やっていきますねもう木曜日行きます 木曜日の8時10時僕の予定がない限りは 確実に黙々とオフィスアワーをする時間に したいと思います 毎週木曜日ですね 黙々なんで木曜日ですあの全然違う目的 ですけどねはいなので 木曜日の8時から10時ぐらいに僕いるん でなんかこう相談したいとか 質問したいことあったら来てくださいはい でついでに他のメンバーと喋って帰って くださいはいっていうのがそういう場もね やっぱ作るといいんですよおそらくはいな のでそれもやっていきたいと思いますし誰 かしらなんかもくもくしてるんでこれは
08:41
かなりね 場としていいですよ でもなんだかんだねそんなやっぱ 遊びに来る場ではないので 遊びに来てもらっていいんですけど ドライブちょっとやっぱちょっと 頑張らないとなみたいなのを感じる場だと 思うのではいぜひねやっていってもらえる のはすごくいいと思ってますのでぜひね皆 さんも黙々していただきたいですしあの 黙々作業部屋ってチャンネルがありまして そこでみんなの黙々したい方がURL投稿 してこれからもくもくしますみたいなこと をやってますのではいぜひね行ったこと ない方とかちょっと作業実はしてるんだよ ねって人は 遊びに来てみるといいんじゃないかなと 思ってますはい全然音出してないんで みんなもう 完全無音でそこに人がいるかみたいな感じ でやってるのでぜひ来てもらえるといいん じゃないかなと 思っておりますねはいそんなところですか ねはいあとは何ですかねなんかいろんなね ブログ見ましたしちょっとこれ公表してる
09:47
かわかんないで転職された方とかも いらっしゃったりとかその未経験からです ね決まった方とかもいらっしゃったりとか するのでそれはそれでやっぱりいいなと 思ったりしてますかねはいそんな感じかな そんなもんかなあとあれですねスタンプ 職人が現れましたねうちのコミュニティに はいスタンプ職人ミーが現れましたね なんか最近あの上げぽよとかイエーイ みたいなスタンプ僕を押してるのでお 気づきな方いらっしゃるかなと思うんです けどもあのなんかちょっとあげあげな スタンプを 量産されてるみーさんって方がですね いらっしゃいましてなんかギャルらしいん ですよマインドがあのリアルも出るかも しれませんけどなのでその方がねどんどん 新作を作られてるみたいです聞いた方は タイムスミーみたいなのがあるので検索し てSlackでね言っていただけるとあの 量産される様がね見えるかなと思います はい個人的にはもう彼女は
LINEスタンプとか作りまくってなんか で一発当てて 儲けて欲しいなと思うんですけど そういうところでございますかね他には なんかね皆さんでもあれですねブログ ノートとかまとめてコンテンツやったやつ とか見てたりはするんですけどもはいまあ ブログ書くあそうだポートフォリオの コンテンツ出しましたはいちょっとね シリーズ化とか適当にやっちゃって一応 シリーズ化してるんでまとまってはいるん ですけど3本しか動画ないですけどはい 出しましたロードマップにも載せました リンクをゴールのところにありますなので えっとロードマップにあるので ポートフォリオを作る人も見てほしいん ですけどフロートマップとのゴールって いうのが2つあってまあ1つまあゴールは ポートフォリオ作るなんですよこれが ゴールですロードマップので一応2つあっ て1つがその3つの基礎ってやつを とりあえずとにかく通るというのが一つで そのゴールの2つ目が先のポートフォリオ 作るですねはいというのがあるのでなんか 何を勉強したらいいのかっていうのが
わからなくてものに興味持った人って多い と思うんですよ未経験の方でそういう方は この ポートフォリオで言ってる中身の ポートフォリオを作るっていうのをゴール にするともう全然いいと思いますかなり 通用するんじゃないかなと思っているはい 感じですという意味でもポートフォリオの 動画あるのでラジオ感覚でいいですなんか 聞き流す感じで全然いいと思います聞いて みると何を目標にしなきゃいけないんだ なっていうのが結構みんなブレるんです けど ブレずらくなるし立ち返られる場所が できると思うのでそれがロードマップなん ですけどまぁまぁそういうものがあるので ポートフォリオの動画気になった方見て みるといいんじゃないかなと思ったりし ますねはいという意味ではさっきのそのね ブログの話でまあ学習ログまとめておくと その人の人となりがち伝わるので皆さん 引き続きねぜひやっていただきたいなと 思ったりはしてますねはいそんな感じです かね最近のコミュニティについてはもう ちょっとねなんかいっぱい入ってきたので
なんかオンラインでもあのオフ会じゃない ですけど交流会をやらなくてはならないな と思ってるんですけどなんかね僕の予定が なんか微妙なんですよねなんかちょっと いろいろ入れちゃってるのでまぁちょっと やった方がいいかなと思ってますので やろうかなと思います3月頭かな2月末で もいいけどもう来週だっちゃうんで2月末 が はいという感じです一応ねあの 毎月の初めに 黙々会じゃないわ目標設定回ですね 黙々ですね木津長いですね目標設定かやっ てますのでそこで メンバー集まるし雑談できるので結構僕 それが交流会として一番いいんじゃないか なと勝手に思ったりしているのでやってな いっていう理由があるんですけどまあまあ まあまあまあまあちょっとよねあのオフ ラインじゃなかったオンラインでも場を 作って行った方がいいと思うのでやって いきたいと思いますはいそれでは今日の 本題に参りましょうかえーAIと UIとフロントエンドがなんか重なって いってるというお話ですねAIはまあ 付け足しなんで別に後反射するかじゃあ
その 友愛デザインとフロントエンドの領域が 結構フュージョンし始めてるという話をし ていくんですけどこれは最近 YouTubeでキャリアの動画を出し ましたでそこでなんか役職とかじゃなくて そのデザインのフローでどこを自分は担当 するのかとかどこに強みを置くのかみたい なのでキャリア考えるといいよみたいな話 をしてるねやつなんですけどそれとそれで 想像するとわかりやすい話ですで何がどう なってるかって言うとまず怒ってることっ て言うと figmaのデータですねもうヒグマが やっぱりちょっと出てきてしまったことに よっていろいろ確変してるんですけど ヒグマのデータがそのまま簡単なフロント エンドのコードに変換できるっていう時代 にもうすでになっているっていう事実です ね例えば僕が使ってるwebフローという ノーコードのWEBサイトビルダーの サービスとかもプラグインを出しまして figmaの もののデータをそのウェブフローってやつ でコピペできるみたいなそうやると
だいたい8割ぐらいはそのまま出力されて することができるという機能を出してたり がするんですねそのウェブサイトとして 公開することもできるっていう機能なん ですよすごいんですよねうんもう figmaで作ったものがそのままWeb 上にアップロードできるっていう機能が もう出てるんですよでこれはノーコード ツールの話じゃんって思うと思うんです けど全然調べてみるとfigmaのデータ を簡単なHTMLCSSに変換できる ツールで結構前からなんかエラーが起こっ たりとかしてるみたいですがまああったり とかするしえっとこれもYouTubeで 紹介する予定なんですけど リアクトのコードとかまあ同じですね HTMLとかに変換するものも出てきたり とかしてますなのでヒグマで作った デザイン見た目と構造ですねフレームの 名前とかオートレイアウトとかなんかそう いうものをちゃんと組めばそれが見た目の
部分のコーディング実装にもうそのまま 変換されるっていう時代に来てるんですよ ね 今までっていうのはそのデータを見て フロントエンドのコードを書く方が 余白はいくつとかをチクチクチクチクこう なんかやってたりやったりしてるんですよ うんっていうものがまあほぼほぼ自動化さ れてる自動化できる時代にもすでになって いるもう来てるあと使うだけ ワークフローにどう仕組み化しても入れる かっていう話になってるんでそういう時代 が来てるわけなんですよこれがやっぱり そのねデザインシステムの流れからのこう ネクストステップがすでに来てると思って いてデザインシステムっていうのも いわゆるデザインまあそのビジュアルUI とかのビジュアルをコードのシステム [音楽] とに変換しやすい形として連携しやすい形 に仕組み化しましょうよっていう取り組み なんですよ基本的にはねもちろん違う部分
もありますよそのうちのサービス的には これはこういう時に使うっていうその なんかコンセプト的なコンセプト的なもの もありますけどちょっと水飲みますね 喉が痛いちょっと今動画4本ぐらい撮っ てるんですよねこれで 2本目なんですけど 喉がちょっとはいまあそういうものがある のがデザインシステムなんですけども半分 ぐらいの役目はその エンジニアリングとデザインという垣根を なるべくなくして効率化するっていう部分 だったりするんですよねなのでfigma が出ることによってそのコードでやるよう なコンポーネント管理とか 余白の管理フォントサイズの管理とか めちゃくちゃ簡単にできるようになりまし たとこれって要するにフロントエンドで今 までやってきたことをデザインデータでも できるようになったっていうことなんです けども要はその流れから来てるので UIを作るその見た目を作るっていう部分 だけ取るとものすごいもう融合がどんどん 進んでるんですよデザインシステムとか
ヒグマが出てきた時点から はいなのでもうここは結構もうねヒグマの データがねそのままフロントエンドにな るって事はもうフロントエンドの人が figmaのデータを使ってそのまま行動 を書くみたいな感じになりそうですよね もうすでにねはいっていう感じになってる のでまやっぱりUIデザインは広いんです けどの中のそのビジュアル表面表層を作る 部分で言うとだいぶもフロントエンドと ガッチャンコしてるんですよね逆に言うと もうフロントエンドの人が 揃ってるコンポーネントを使って要は揃っ てるUIパーツの範囲だけしか多分ね既存 のサービスをなかなか使えないと思うので その 範囲内で 適したUIを作ることができるのであれば まあね有害デザイナーがわざわざ表層の 部分をデザインしなくてもいいんじゃない かなみたいなことになったりもするわけ ですよ ワークフロー的にはねまだまだエンジニア さんがデザイン知識なかったりするので すぐにできるようにはようにな
るってかそういう世の中にすぐにはなら ないかもしれませんけどまあまあ現実的に なってきているし時間の問題かなと思うん ですよ っていうのがもうすでに起こってまして逆 にじゃあね有害デザイナーとしてはどうし たらいいのかというとまあまあこれでも 変わらずそのフロントエンドの理解という かその実装部分との関係性構築デザイン システムの仕組みをちゃんと知るとか オートレイアウト」って何であんのかって いうのをちゃんと理解するとか コンポーネントの意味とか作れるように なっておくとかそういうものは変わらずな んですけどどんどん 垣根がなくなっていっているのでどんどん 多分エンジニアの人もヒグマのデータに もうすでに入っていけると思うんですけど 入ってくると思いますのでそのデザイナー 側が全く何も変わらずいるとどんどんその 何ですか役目を奪われるのは間違いないな と思うわけですよ何もしなかったらねそれ はもちろんそうですよねっていうような 流れは加速するばかりなのでその放送の 部分と実装の部分っていうのはもう
垣根がないと なくなっているまあほぼないと思って もらった方がいいよっていう話ですかねな ので UIデザインをやっててその 職場的なポジションで 表層の部分までちゃんと見なきゃいけない とか サービス全体として一貫した コンポーネントを作る 管理するとかそういうところをメインで やってる方ですねっていうのはもう フロントエンドを学ぶべきだと思います もう正直だってねもう垣根ないんだもん 全部できなくていいんですけどやっぱそこ でやれた方が逆に実装者との連携が取り やすくなるわけなんですよねってなると すごいワークフローが効率化されて ユーザーさんに避ける時間が増えたりとか ユーザーさんに機能をデリバリー届ける までの時間が 減ったりとかするわけですよ少なくなっ たりすぐ届けられるようになったりする わけなんですよねっていう風にどんどん なってってるんでなんかその UIの表層の部分を作るとかデザイン システムやってますとかコンポーネント
管理ですとかfigmaの使い方です みたいなところをすごくメインでやってる 人とかやりたい人っていうのは多分そこ だけだと思うあんまりバリューが出ない わけじゃないですよありますあるいはあり ますがそこだけだとちょっと物足りないよ ねっていう世の中にどんどん今なってる すでに行ってないだけでなってる説みたい な感じがすごくしてますねはい現に僕 なんかもう今ねWebフローってやつで figmaからコピペできるんでなんか そんな感じになってるわけですよまだね コンポーネントとかは 拾ってくれないのでその辺はねちょっと 進化に期待したいところなんですけども まあまあまあそういう風になってるわけな のでまあそのフロントエンドっていう部分 とUIの表層部分ですねあとUIの仕組み 化の部分ですねデザインシステムとかの ところはもうなんか一緒くたにどんどん今 なってるという理解をしていただいた方が 世の中夜渡り的にはいいんじゃないかなと 思っるっていう話でした
はいでこの辺ってちょっとAIの話入って いくんですけどパターンがあるわけですよ ある程度ねデザインシステムって何を定義 しますかってパターンありますあるわけ ですよボタン3種類とかねホバーした時と かボーダーは2種類ぐらい持っとくのが 普通かなまあ3種類かなとかだいたいある わけですよねでその2種類3種類のどう いう風に使い分けするかじゃあボーダー だったらゆるくあ違う薄く引くとこ 弱く区別したいところはこの色強く区別し たい時はこの色とかねあるわけですよ プライマリーから配色だったら プライマリーから 適切に使うからボーダーに使うカラーとか ねだいたいもパターンあるわけですよね こういうところっていうのはやっぱAIが 得意だけですよねもうほぼほぼその状況と かよって答えを模索する必要性のない 平均値がありよくあるパターンがある パターン化されてる部分っていうのはAI さんが学習しやすいところであり再現し やすいところなのでこういうのも一発で ポーンってとりあえず出して細かいとこは
チューニングするっていうワークフローに 多分今年中にはなるんじゃないかと思っ たりはしてますかねまあサービス手続きて 定着が来年とかかもしれませんけど っていう風になってるわけなんですよて なってくるとやっぱその表層だけやってる とか逆にのデザインシステムすごく強い ですみたいな人のやることをAI アシスタント君がやってくれたりするわけ なんですよね全部とは言いませんよ半分 以上やるようになってくるでしょうという 風になってくると思うんですよまあそう なった場合でもその UIの表層部分とフロントエンドの融合 ってのはさらに進むわけですよねまあ誰で もできるようになってくるっていうかその 両方 掛け持ちしていた方が逆にできるみたいな 世の中になってくると思うんですよって いう風になってきてるんですよねはいって いうのがあのその UIデザインとフロントエンドっていう もののUIデザイン一部がフュージョンし 始めてるっていう話ですねなのでまあUI デザイナーとして現場に入るとまずはその
要件の部分も多分ミーティングには絶対 入れて いると思うんですけど とはいえ最初はUIを作るという部分に なってくると思うのでなんか初めのうち からまだ多分大丈夫ですよもちろんこれが 一般的になってしまうと塗ってしまうって いうのはなると やっぱその若干フロントの知識とか確実に 必要になってくるもう今もね必要なんです よデザインシステムとかや るってなるとちょっと待って水飲みますね なんでみんな水飲まないのかわかんないの は1時間ぐらいしゃべってる人って俺絶対 無理なんだけどもカラカラなんだけど はいなんだっけ現場かそう現場だと そういう仕事すると思うんですよなんか もうすでにオートレイアウトとか コンポーネント化されてる今のサービスの UIのコンポーネントだけでデザインを するとかってめちゃあると思うんですけど
もそういうのも含めてもうすでにあるん ですけどやっぱ初心者の 段階からヒグマのそのオートレイアウトと かコンポーネントの理解とか何でそれやら なきゃいけないのかっていう理解とかその 簡単なフロントエンドの理解もう LPをHTMLとCSSで組んでリリース 1回してみるぐらいで多分まあまだまだ いいと思うんですけどとかをやっぱやった 方がいいよねっていう風にもうすでになっ てるんですけどよりなるなっていう気がし てますね というわけでここ今ね解散対応できてない のでちょっとねやんなきゃなーと思って ますまあ多分無料で出す分なんでボノを あんま関係ないかもしれないわかんない どうだろうボノでやるかもしれないです もので出す部分もあるかもしれませんけど ちょっと初心者向けになっちゃうんです けどそういうのやった方がいいかなと思い ますまあ皆さんに割と当てはまるのはその フロントエンドのコードの部分ですかね これの簡単なチュートリアルみたいなもの はまあ言うてみーとかで漁れば無限にある んですけど僕も作ってもいいのかなと思っ たりとかしてますなので はいっていうところですかねってなって くるとじゃあどこで差はつけりゃええね
んってなるじゃないですかもう2つでこれ はもう変わらずでそのフロントエンドの 部分までやっぱガツッと表現をやりたけれ ばやっぱやるべきなんですよ今までやっぱ おかしかったその建築士で言うとその 一級建築士の資格を取るときに別にその 側の 設計の部分だけやれてればいいわけじゃ なくてその建物の中の空気の循環だとか 温度なんか 管理とか土台で地震にならないなんか計算 とか計算やるか落ちとか多分やると思うと か土のなんか種類のなんだこうものとか そういう知識まで 求められるんですよ建築やるってなると 当たり前ですよねそのなんかね土台だけ 作っていいって思うんじゃなくてそこどこ に建てるのかとかえっとその空気の循環が 悪いとね人がやっぱ生活しづらいとかある わけですよね 排水のなんか仕組みとかもあるわけなので やんなきゃいけないんですけどなので一緒 に一緒の知識が必要なんですよ1級建築士 っていうものを建築士としてやっていく ための資格を得るためには人の命かかって
ますからね半分以上まあなんだけどWeb の世界だとねそういうのないじゃないです か僕らが作ったデータで作ったデザインて コードで生成されるのにコードのこと何も わかんなくてもまあデザイナーにはなれる わけですよまあ 慣れるな別にいいとしてまあいいか悪い かっていうとちょっとおかしいと思うん ですよね なんかそれをね他の人に任せるでデザイン するってやっぱちょっとなんかおかしな話 ではあるのでまあ逆に本来の形にはなって いきつつあるのかな行きつつあるのかなと かになったのかなと思ったりはするので まあそろそろ UIとかそのソフトウェアを作るのであれ ばWebサイトもそうですけどねあの コート書いてもいいんじゃないかなコート かける最低限知識はあってもいいのかなと いうところですかね なのでこの分野をコードと含めてどの 突き詰めていくっていうまあフロント エンドエンジニアかける UIデザイナー表層部分とかシステム強い みたいな 職種そういう作る部分ですねその要件とか
の後の話を 極めてくってところで自分のバリューを どんどん 出していくっていう世の中じゃあ世の中 じゃないキャリアの積み方ってのは一つ あると思いますでもう一つやっぱその 顧客理解とかですね誰のために何を作る べきかっていうところでここもそのUX だろって思うかもしれないですけどその なんかUXのなんか分野ってなんかあんま 難しくてそのなんかやり方しのドリブンの 話が多いんですよね僕の 裸眼もあると思うんですけどそのなんか ユーザーインタビューの正しいやり方とか なんかなんだろうその人間の理解とかです かねちょっと研究職っぽいんですよねただ 何だろう誰かに勝ち提供するってなると それだけじゃ絶対ダメでそのどう伝える かっていうまあマーケっぽい話と コミュニケーションデザインという話とか もう絶対かかってくるしコンセプトの作り 方にそこからねやっぱ合わさってくると 思うんですよ誰が対象でみたいなってなっ てるとなんかちょっとマーケターっぽい 側面もねやっぱやらなきゃいけない くなると思うんですよ本当に価値届けよう
と思うのね顧客理解すればいいやだけだと ならないんですけど本当にでも本当そこ だけで意味ないじゃないですか固着理解 できるだけの人材って僕あんまり価値ない と思うんですよ本来はそこの スペシャリストがいるところでじゃあ何 するよってところがちゃんと伴わないと 価値提供できないのでやっぱ価値提供でき ないってことは価値がないと思うので なんか早口なっちゃいましたけどはいなの でそういうビジネスの知識も絶対必要です よねその 夢物語描いて実現できませんでしたとかお 金も分かりませんとかじゃ絶対実行され ないでも思いますしはいとかまあ逆に言う とUIが悪かったら勝ち届かないのでUI の最低限の理解とかも必要になってくるの で なんかやっぱそういうこう広い講義の意味 での価値デザインみたいなものをやってい くっていうところはあるんじゃないかなと 思ったりしますね こういうシステム的な3つ目ですねあの システム的な部分を理解しつつなんか ブランディングのデザインあるとかなんか ねロゴ作るっていう意味のブランディング もありますしそういうなんかさっき言った
ようなえっと誰が顧客で 企業とかサービスとしての未来はこういう 風な方向性でいくべきなのでこういう指針 にしましょうとか方針を立てましょう みたいなねものやっていくとかはいそう いうようなところをトータルで設計できる デザインブランドデザインみたいなもの だったりとかそういうような視点ですね別 にブランドデザインの言葉じゃなくていい んですけどそういう視点でデザインできる ようなスキルをつけていく得意な分野を 見つけるというところを引き続きやって いくのはまああんま変わらないかなと思っ たりはしますかねはいただまぁ話を戻し ますけどフロントエンドというアイ デザインというのはすごくもうだいぶ 融合できる状態にはレディーになってるの で UIデザイナーとして現場でやる上では もう 嫌なぐらいこの話は話題になると思います 今後も今後この12年1年少なくとも1年 はAIとともになってくるんじゃないかな と予測しておりますはいなのでまあやった 方がいいんだけど本当のクリエーションで
どこにあるんだっけってトラ考えると ねっていう風には思いますね個人的には はい水飲みましたはいなんかでそんなね 仕組み化とかするのって別に何だろう 管理者がやればいいってやればいいと思っ てるわけじゃないですけどやってもいい 部分でありなんかデザイナーっていろんな 定義であるので別にいいんですけど僕的に はねやっぱりまだ見たことないけど誰かが 求めているであろうものを 具体化形作る人だと思うのですでにある ものを仕組み化して効率よくするっていう のはエンジニアリングだと思うんですよ僕 はどっちかで振るならエンジニアリングか デザインがでるならって話なんですけど そこの融合っていう話なんですけど今回は まあまあただまぁデザインニングって 考えると なんかねその仕組み化だけやってていいん だっけみたいなね新しい価値作ろうよとか 課題とこうよとか 結局課題発見しようよとかなんかそっちな
んじゃないかなと思いますねはい っていうのは個人的には思うので なんかデザインとはなんぞやっていうのは やっぱりここのデザインをやっていく人と しては 考え続ける必要性があるのかなと思ったり しますねはい という感じかなうんちょっとまあAIとか フロントエンドの最近調べ物してたので こういう話をしてみました はいいかがですかねちょっと感想があり ましたらね僕いっぱい最近コメントがね 一番ね嬉しいことが分かりましたのでぜひ あの自分のタイムスでもいいですし僕の タイムズカイ君でも いいのでコメントいただけるとありがたい なと思いますはいなんか感想コメントお 待ちしてますはいまあねボノにもコメント 機能があればいいんですけどちょっとね僕 も頑張って今行動を書かないとって感じ ですねちょっとまだまだ今年中は無理です けど来年とかにはねなんか始めたいねと
思いますねはいでちょっとモノラジオで やっぱ続けていきたいのでそうですね やっぱ最近僕デザインの本をあまり読ま なくなったんですよねあえて読んでないっ てのが結構でかいんですけどねデザインの ことをやっててもデザインできねえやって 思っちゃったりとかしてるんでなんかで あえて別の 領域の本とか読むことで逆に言うと デザインにつながってくるみたいな感じな のであんまりデザインの本を読んでないの ですがまあちょっと改めてねコンテンツ 作る意味でもあの動画ですね作る意味でも ちょっと読み直した方がいいしなんかそう いう話のが皆さん的には受けるんじゃない かなっていうのがあるので本デザイン系の 本の話題の話をしたりとかしてみたいなと 思います 結局あのインプットしないとねあの話せる アウトプットが僕の中にもないので ちょっと勉強したいと思います僕のラジオ のためにはい皆さんもねこの本良かったよ とか 解散好きそうですとかあったら教えて ください多分80%ぐらいで買わないと 思うんですけど
僕自分の読んでる本以外を買わないんです よ読み終わったら次何買おうかなって思っ てその時に 検討材料になる 並べるんですけど基本的にツン読しないっ ていうかそのあんまりこう溜めないんです よ買った本はすぐ読むっていう風にしてる ので すぐに買わないと思うんですけどこういう のはありましたよとかあったら嬉しいよ 嬉しいので教えてもらえると嬉しいです はい嬉しいです 嬉しいよなんか言いましたかねはいそれで はね今回のモダラジはこんな感じですかね ちょっとリハビリボノラジでしたけどはい 楽しんでいただけたらと思いますまた 引き続きボノでよろしくお願い 致しますあ4月以降のオフ会とかあの 各地方のお誘いお待ちしておりますので これガチですはいガチではもうそういうお 待ちしておりますので皆様よろしく お声掛けよろしくお願いしますそれでは
久しぶりです！！
デザインとフロントエンドが融合し始めていることについて説明しています。Figmaのデータが簡単にフロントエンドのコードに変換できるようになったことで、UIデザインと実装の垣根がなくなってきています。
デザインシステムの流れから、UIの表層部分とフロントエンドの部分が融合しているため、UIデザインの「表層」を強みにしたい人はフロントエンドを学ぶべきだと考えられます。
AIツール紹介動画は編集なうです。Youtubeより前にBONO向けに公開しようかなとは思ってます〜！
（ちょっともう何回目なのかわからなくなってきた）
はい始まり始まりました [音楽] ボノラジチャチャ ラって流したいんやけどねはいお 久しぶりですね皆様新年明けましてボノ ラジからね2回目じゃないですかどれだけ ラジオ取ってないんだという感じですよね なんかねでもね去年の年末ぐらいからもう 何1日終わるのマジあっという間なんです よねなんでだろう年取ったからかな はい言い訳ですねというわけでちょっと 取っていこうと思ってますで今日の内容は AIの話とフロントエンドと UIの UIデザインかのフュージョンについてお 話ししていってみようかなとと思います まあ僕の結構考えになっていく内容なので
私はこう思うわとかここら辺ってどういう ことなんすかみたいなやつめちゃくちゃ 歓迎してますはいで実はボノラジチャンネ ルっていうのはですねSlackにあり ましてですねそこでコメントいただいても いいですし タイムスカイ君にあの書き込んでいただい ても構いませんあの僕に教えてください コメント欄欲しいね実装したいねコメント 欄をボノさんにねはいというわけで今日 話していくんですけどまずその前に最近の ボノということでちょっと話していってみ ますと新年ねあの入会される方が増えまし た入会って呼んでねえわごめんねやめよう 今のははい入会じゃないからはいメンバー になってね来る方が増えましたやっぱり 新年っていうのは何かこう人を焚きつける サムシングがあるんでしょうねはい somethingがsomething ねちょっとsomethingって曲名 出そうと思ったけど何も浮かばなかった はいちょっと水飲みますねあそうあの僕 ですね今これねラジオなんで誰も画面見て ないと思うんですけど
今年から 制服を作ります僕のための僕だけのための 制服ですこのジャケットですねこの ちょっとネイビーじゃねえなオリーブっ ぽい色なんですけどこれあの動画じゃ わかんないけどこれをですねあの 夏も着ていこうかなと思いますあの要は 中田敦彦がスーツを着るような感じでもう これであの動画はずっと撮っていこうかな と思ってますねはいキャップはかぶったり かぶらなかったりしようかなという感じ ですねはいちょっとあのスーツっぽいんで ちょっとあのかしこまりすぎるとねなんか 逆にダサいのでやっぱ着崩していきたいな というところでキャップかぶったりとか あのこれはちょっと今日はIBMのT シャツなんですけど ちなみに全部ユニクロですはいとかメガネ かけたりとか してねはいちょっとなんかずらしていこう かなと思ってますメガネはちょっとなんか 真面目すぎますねはいちょっと画面見て ないんでみんなでわかんないと思うんです けど白メガネとかするとだいぶ 胡散臭いあいつになってしまうんですけど
白メガネとか結構いいかもしれませんね はいとかあのロックティーとかねなんか 下北で400円ぐらいでなんか売ってねえ かなって探してなんか買ってこようかなと 思います 暇な時 っていうようなことちょっと導入したのが 最近のボナラジじゃないわ最近の1個目 ですね全然みんな関係ないですねあとは ですね今年は1ヶ月に1回ミートアップ やりますミータップってかオフ会みたいな のやっていきますこれあの初めて最近入ら れた方もね聞いてるかもしれませんこの ラジオ是非ねあの覚えておいていただける といいんですけど僕がですねあの 東京に近い神奈川県に住んでますので関東 になってしまうんですけど月に1回は最低 集まれる 場を作ります神奈川の方にですねボノの 秘密基地という名の僕の家がありまして めちゃくちゃ広いんですよ和訳やって2 LDKに一人で住んでますのですごく広い んですね最近あのサウナとか買っちゃった んで色々あるんですけどもそれはいいや 要するにあの場所が余ってるんですよなの で土日とか集まってなんかね人集めやすい
んですよちょっと遠いですけどねあの都心 からは若干なのでですけどまあまあ 集まれる場があるというラフになので1 ヶ月に1回集まれる場所を作っていこうか なと思いますやっぱりねもうやってるん ですよ結構 ちょこちょこねいいですね効果がなんか あのボノにをめちゃくちゃやってくれる ようになるっていうすごく僕目線のいい こともあるんですけど何よりやっぱり人と の出会いっていうのが一番人を変えますね 僕は思いますやっぱこうやる気をこう なんかこうねそこからえーってる人もが やっぱ一番多いかなと思ったりとかします し何だろうねやっぱこう人間じゃないです か言うて なんかデザイナーでデザインをしていくん ですけどデザインの対象って人間なわけ ですよなのでやっぱり人間と触れ合って 人生を語りデザインを語りしていくことに よって自分は何のためにやっぱデザインを していくのかっていうものが 磨かれていくのではないかと思っておる わけですよ」っていうようななんかこう
変化を僕が感じてますはい僕自身の変化 ですねっていうのがやっぱ一番いいと思い ますねなので動画見てなんかスキルをつけ るっていうのは僕はやって欲しいとは思い つつまあとはいえ継続できなかったりとか ねなんだかんだやりませんでしたっていう 人多いですそれでいいですただまぁあの せっかくこういう場に入ってきたわけです よそんなに安くもないお金を払ってので あれならばやっぱ一人ぐらいねこう出会っ てですね何かしらこう影響を受けて いただきたいなと思うわけなんですねこう やってやってる側からするとっていう意味 ではすごくいい場を作りやすいなと思って ますオフラインってやっぱ大事ですねって いうわけなので結構月に1回やろうと思い ますもう3月はこの間 雑談チャンネルに書いてもう人数パンパン なんでちょっと10人 ちょいぐらいいるんでちょっとね 厳し目なんですけど4月とかもやっていく のではいあの 秘密基地行きたいよって方はDMください はいあの全然 誘うんでその人を軸にねはいあのやっぱ僕
からするとですね皆さんが何を考えてるの か知りたいですし逆に言ってわかんないの で伝えてもらえるとじゃあそれでちょっと なんかね喋ってみようかなとかなんか ちょっと調べてなんか僕の意見を 投下してみようとかなんかその学び方は なんか僕なりにまとめてみようとかね いろいろなこうやろうと思えたりとかする ので教えてもらえるとありがたいですか ねっていうまあそういうオフラインの 場づくり 場づくりとか場っていうのはすごくいい ですよっていう お話ですかねもちろんあの関東以外にも僕 行きたいと思ってます呼ばれたり行きます 僕はあのね完全にフルリモートなので正直 あのね日本どっかしら行きたいんですよね 言うてもコロナあれもう終わってますけど 言うてとはいえ結構国内行くチャンス機会 ではあったりするしサウナ好きなんでね なんかねついでにサウナ寄って帰るとか 結構僕的にはありなんではいなんか関東 以外のところ関東って広いね東京 以外東京埼玉千葉神奈川以外の方もね誘っ
ていただければ行きたいなと思いますので ぜひねそれも教えてください水飲みます はいって感じですかねあと 黙々会ですねいいですねこれどんどんやっ ていきましょうはいであの黙々オフィスア ワーっていうのをたまにやってその時間は なんかね僕いるんで絶対確実になんか質問 とかしたかったら全然あのガッツリして もらっていいですよみたいなのもこれも 毎週やっていきますねもう木曜日行きます 木曜日の8時10時僕の予定がない限りは 確実に黙々とオフィスアワーをする時間に したいと思います 毎週木曜日ですね 黙々なんで木曜日ですあの全然違う目的 ですけどねはいなので 木曜日の8時から10時ぐらいに僕いるん でなんかこう相談したいとか 質問したいことあったら来てくださいはい でついでに他のメンバーと喋って帰って くださいはいっていうのがそういう場もね やっぱ作るといいんですよおそらくはいな のでそれもやっていきたいと思いますし誰 かしらなんかもくもくしてるんでこれは
かなりね 場としていいですよ でもなんだかんだねそんなやっぱ 遊びに来る場ではないので 遊びに来てもらっていいんですけど ドライブちょっとやっぱちょっと 頑張らないとなみたいなのを感じる場だと 思うのではいぜひねやっていってもらえる のはすごくいいと思ってますのでぜひね皆 さんも黙々していただきたいですしあの 黙々作業部屋ってチャンネルがありまして そこでみんなの黙々したい方がURL投稿 してこれからもくもくしますみたいなこと をやってますのではいぜひね行ったこと ない方とかちょっと作業実はしてるんだよ ねって人は 遊びに来てみるといいんじゃないかなと 思ってますはい全然音出してないんで みんなもう 完全無音でそこに人がいるかみたいな感じ でやってるのでぜひ来てもらえるといいん じゃないかなと 思っておりますねはいそんなところですか ねはいあとは何ですかねなんかいろんなね ブログ見ましたしちょっとこれ公表してる
かわかんないで転職された方とかも いらっしゃったりとかその未経験からです ね決まった方とかもいらっしゃったりとか するのでそれはそれでやっぱりいいなと 思ったりしてますかねはいそんな感じかな そんなもんかなあとあれですねスタンプ 職人が現れましたねうちのコミュニティに はいスタンプ職人ミーが現れましたね なんか最近あの上げぽよとかイエーイ みたいなスタンプ僕を押してるのでお 気づきな方いらっしゃるかなと思うんです けどもあのなんかちょっとあげあげな スタンプを 量産されてるみーさんって方がですね いらっしゃいましてなんかギャルらしいん ですよマインドがあのリアルも出るかも しれませんけどなのでその方がねどんどん 新作を作られてるみたいです聞いた方は タイムスミーみたいなのがあるので検索し てSlackでね言っていただけるとあの 量産される様がね見えるかなと思います はい個人的にはもう彼女は
LINEスタンプとか作りまくってなんか で一発当てて 儲けて欲しいなと思うんですけど そういうところでございますかね他には なんかね皆さんでもあれですねブログ ノートとかまとめてコンテンツやったやつ とか見てたりはするんですけどもはいまあ ブログ書くあそうだポートフォリオの コンテンツ出しましたはいちょっとね シリーズ化とか適当にやっちゃって一応 シリーズ化してるんでまとまってはいるん ですけど3本しか動画ないですけどはい 出しましたロードマップにも載せました リンクをゴールのところにありますなので えっとロードマップにあるので ポートフォリオを作る人も見てほしいん ですけどフロートマップとのゴールって いうのが2つあってまあ1つまあゴールは ポートフォリオ作るなんですよこれが ゴールですロードマップので一応2つあっ て1つがその3つの基礎ってやつを とりあえずとにかく通るというのが一つで そのゴールの2つ目が先のポートフォリオ 作るですねはいというのがあるのでなんか 何を勉強したらいいのかっていうのが
わからなくてものに興味持った人って多い と思うんですよ未経験の方でそういう方は この ポートフォリオで言ってる中身の ポートフォリオを作るっていうのをゴール にするともう全然いいと思いますかなり 通用するんじゃないかなと思っているはい 感じですという意味でもポートフォリオの 動画あるのでラジオ感覚でいいですなんか 聞き流す感じで全然いいと思います聞いて みると何を目標にしなきゃいけないんだ なっていうのが結構みんなブレるんです けど ブレずらくなるし立ち返られる場所が できると思うのでそれがロードマップなん ですけどまぁまぁそういうものがあるので ポートフォリオの動画気になった方見て みるといいんじゃないかなと思ったりし ますねはいという意味ではさっきのそのね ブログの話でまあ学習ログまとめておくと その人の人となりがち伝わるので皆さん 引き続きねぜひやっていただきたいなと 思ったりはしてますねはいそんな感じです かね最近のコミュニティについてはもう ちょっとねなんかいっぱい入ってきたので
なんかオンラインでもあのオフ会じゃない ですけど交流会をやらなくてはならないな と思ってるんですけどなんかね僕の予定が なんか微妙なんですよねなんかちょっと いろいろ入れちゃってるのでまぁちょっと やった方がいいかなと思ってますので やろうかなと思います3月頭かな2月末で もいいけどもう来週だっちゃうんで2月末 が はいという感じです一応ねあの 毎月の初めに 黙々会じゃないわ目標設定回ですね 黙々ですね木津長いですね目標設定かやっ てますのでそこで メンバー集まるし雑談できるので結構僕 それが交流会として一番いいんじゃないか なと勝手に思ったりしているのでやってな いっていう理由があるんですけどまあまあ まあまあまあまあちょっとよねあのオフ ラインじゃなかったオンラインでも場を 作って行った方がいいと思うのでやって いきたいと思いますはいそれでは今日の 本題に参りましょうかえーAIと UIとフロントエンドがなんか重なって いってるというお話ですねAIはまあ 付け足しなんで別に後反射するかじゃあ
その 友愛デザインとフロントエンドの領域が 結構フュージョンし始めてるという話をし ていくんですけどこれは最近 YouTubeでキャリアの動画を出し ましたでそこでなんか役職とかじゃなくて そのデザインのフローでどこを自分は担当 するのかとかどこに強みを置くのかみたい なのでキャリア考えるといいよみたいな話 をしてるねやつなんですけどそれとそれで 想像するとわかりやすい話ですで何がどう なってるかって言うとまず怒ってることっ て言うと figmaのデータですねもうヒグマが やっぱりちょっと出てきてしまったことに よっていろいろ確変してるんですけど ヒグマのデータがそのまま簡単なフロント エンドのコードに変換できるっていう時代 にもうすでになっているっていう事実です ね例えば僕が使ってるwebフローという ノーコードのWEBサイトビルダーの サービスとかもプラグインを出しまして figmaの もののデータをそのウェブフローってやつ でコピペできるみたいなそうやると
だいたい8割ぐらいはそのまま出力されて することができるという機能を出してたり がするんですねそのウェブサイトとして 公開することもできるっていう機能なん ですよすごいんですよねうんもう figmaで作ったものがそのままWeb 上にアップロードできるっていう機能が もう出てるんですよでこれはノーコード ツールの話じゃんって思うと思うんです けど全然調べてみるとfigmaのデータ を簡単なHTMLCSSに変換できる ツールで結構前からなんかエラーが起こっ たりとかしてるみたいですがまああったり とかするしえっとこれもYouTubeで 紹介する予定なんですけど リアクトのコードとかまあ同じですね HTMLとかに変換するものも出てきたり とかしてますなのでヒグマで作った デザイン見た目と構造ですねフレームの 名前とかオートレイアウトとかなんかそう いうものをちゃんと組めばそれが見た目の
部分のコーディング実装にもうそのまま 変換されるっていう時代に来てるんですよ ね 今までっていうのはそのデータを見て フロントエンドのコードを書く方が 余白はいくつとかをチクチクチクチクこう なんかやってたりやったりしてるんですよ うんっていうものがまあほぼほぼ自動化さ れてる自動化できる時代にもすでになって いるもう来てるあと使うだけ ワークフローにどう仕組み化しても入れる かっていう話になってるんでそういう時代 が来てるわけなんですよこれがやっぱり そのねデザインシステムの流れからのこう ネクストステップがすでに来てると思って いてデザインシステムっていうのも いわゆるデザインまあそのビジュアルUI とかのビジュアルをコードのシステム [音楽] とに変換しやすい形として連携しやすい形 に仕組み化しましょうよっていう取り組み なんですよ基本的にはねもちろん違う部分
もありますよそのうちのサービス的には これはこういう時に使うっていうその なんかコンセプト的なコンセプト的なもの もありますけどちょっと水飲みますね 喉が痛いちょっと今動画4本ぐらい撮っ てるんですよねこれで 2本目なんですけど 喉がちょっとはいまあそういうものがある のがデザインシステムなんですけども半分 ぐらいの役目はその エンジニアリングとデザインという垣根を なるべくなくして効率化するっていう部分 だったりするんですよねなのでfigma が出ることによってそのコードでやるよう なコンポーネント管理とか 余白の管理フォントサイズの管理とか めちゃくちゃ簡単にできるようになりまし たとこれって要するにフロントエンドで今 までやってきたことをデザインデータでも できるようになったっていうことなんです けども要はその流れから来てるので UIを作るその見た目を作るっていう部分 だけ取るとものすごいもう融合がどんどん 進んでるんですよデザインシステムとか
ヒグマが出てきた時点から はいなのでもうここは結構もうねヒグマの データがねそのままフロントエンドにな るって事はもうフロントエンドの人が figmaのデータを使ってそのまま行動 を書くみたいな感じになりそうですよね もうすでにねはいっていう感じになってる のでまやっぱりUIデザインは広いんです けどの中のそのビジュアル表面表層を作る 部分で言うとだいぶもフロントエンドと ガッチャンコしてるんですよね逆に言うと もうフロントエンドの人が 揃ってるコンポーネントを使って要は揃っ てるUIパーツの範囲だけしか多分ね既存 のサービスをなかなか使えないと思うので その 範囲内で 適したUIを作ることができるのであれば まあね有害デザイナーがわざわざ表層の 部分をデザインしなくてもいいんじゃない かなみたいなことになったりもするわけ ですよ ワークフロー的にはねまだまだエンジニア さんがデザイン知識なかったりするので すぐにできるようにはようにな
るってかそういう世の中にすぐにはなら ないかもしれませんけどまあまあ現実的に なってきているし時間の問題かなと思うん ですよ っていうのがもうすでに起こってまして逆 にじゃあね有害デザイナーとしてはどうし たらいいのかというとまあまあこれでも 変わらずそのフロントエンドの理解という かその実装部分との関係性構築デザイン システムの仕組みをちゃんと知るとか オートレイアウト」って何であんのかって いうのをちゃんと理解するとか コンポーネントの意味とか作れるように なっておくとかそういうものは変わらずな んですけどどんどん 垣根がなくなっていっているのでどんどん 多分エンジニアの人もヒグマのデータに もうすでに入っていけると思うんですけど 入ってくると思いますのでそのデザイナー 側が全く何も変わらずいるとどんどんその 何ですか役目を奪われるのは間違いないな と思うわけですよ何もしなかったらねそれ はもちろんそうですよねっていうような 流れは加速するばかりなのでその放送の 部分と実装の部分っていうのはもう
垣根がないと なくなっているまあほぼないと思って もらった方がいいよっていう話ですかねな ので UIデザインをやっててその 職場的なポジションで 表層の部分までちゃんと見なきゃいけない とか サービス全体として一貫した コンポーネントを作る 管理するとかそういうところをメインで やってる方ですねっていうのはもう フロントエンドを学ぶべきだと思います もう正直だってねもう垣根ないんだもん 全部できなくていいんですけどやっぱそこ でやれた方が逆に実装者との連携が取り やすくなるわけなんですよねってなると すごいワークフローが効率化されて ユーザーさんに避ける時間が増えたりとか ユーザーさんに機能をデリバリー届ける までの時間が 減ったりとかするわけですよ少なくなっ たりすぐ届けられるようになったりする わけなんですよねっていう風にどんどん なってってるんでなんかその UIの表層の部分を作るとかデザイン システムやってますとかコンポーネント
管理ですとかfigmaの使い方です みたいなところをすごくメインでやってる 人とかやりたい人っていうのは多分そこ だけだと思うあんまりバリューが出ない わけじゃないですよありますあるいはあり ますがそこだけだとちょっと物足りないよ ねっていう世の中にどんどん今なってる すでに行ってないだけでなってる説みたい な感じがすごくしてますねはい現に僕 なんかもう今ねWebフローってやつで figmaからコピペできるんでなんか そんな感じになってるわけですよまだね コンポーネントとかは 拾ってくれないのでその辺はねちょっと 進化に期待したいところなんですけども まあまあまあそういう風になってるわけな のでまあそのフロントエンドっていう部分 とUIの表層部分ですねあとUIの仕組み 化の部分ですねデザインシステムとかの ところはもうなんか一緒くたにどんどん今 なってるという理解をしていただいた方が 世の中夜渡り的にはいいんじゃないかなと 思っるっていう話でした
はいでこの辺ってちょっとAIの話入って いくんですけどパターンがあるわけですよ ある程度ねデザインシステムって何を定義 しますかってパターンありますあるわけ ですよボタン3種類とかねホバーした時と かボーダーは2種類ぐらい持っとくのが 普通かなまあ3種類かなとかだいたいある わけですよねでその2種類3種類のどう いう風に使い分けするかじゃあボーダー だったらゆるくあ違う薄く引くとこ 弱く区別したいところはこの色強く区別し たい時はこの色とかねあるわけですよ プライマリーから配色だったら プライマリーから 適切に使うからボーダーに使うカラーとか ねだいたいもパターンあるわけですよね こういうところっていうのはやっぱAIが 得意だけですよねもうほぼほぼその状況と かよって答えを模索する必要性のない 平均値がありよくあるパターンがある パターン化されてる部分っていうのはAI さんが学習しやすいところであり再現し やすいところなのでこういうのも一発で ポーンってとりあえず出して細かいとこは
チューニングするっていうワークフローに 多分今年中にはなるんじゃないかと思っ たりはしてますかねまあサービス手続きて 定着が来年とかかもしれませんけど っていう風になってるわけなんですよて なってくるとやっぱその表層だけやってる とか逆にのデザインシステムすごく強い ですみたいな人のやることをAI アシスタント君がやってくれたりするわけ なんですよね全部とは言いませんよ半分 以上やるようになってくるでしょうという 風になってくると思うんですよまあそう なった場合でもその UIの表層部分とフロントエンドの融合 ってのはさらに進むわけですよねまあ誰で もできるようになってくるっていうかその 両方 掛け持ちしていた方が逆にできるみたいな 世の中になってくると思うんですよって いう風になってきてるんですよねはいって いうのがあのその UIデザインとフロントエンドっていう もののUIデザイン一部がフュージョンし 始めてるっていう話ですねなのでまあUI デザイナーとして現場に入るとまずはその
要件の部分も多分ミーティングには絶対 入れて いると思うんですけど とはいえ最初はUIを作るという部分に なってくると思うのでなんか初めのうち からまだ多分大丈夫ですよもちろんこれが 一般的になってしまうと塗ってしまうって いうのはなると やっぱその若干フロントの知識とか確実に 必要になってくるもう今もね必要なんです よデザインシステムとかや るってなるとちょっと待って水飲みますね なんでみんな水飲まないのかわかんないの は1時間ぐらいしゃべってる人って俺絶対 無理なんだけどもカラカラなんだけど はいなんだっけ現場かそう現場だと そういう仕事すると思うんですよなんか もうすでにオートレイアウトとか コンポーネント化されてる今のサービスの UIのコンポーネントだけでデザインを するとかってめちゃあると思うんですけど
もそういうのも含めてもうすでにあるん ですけどやっぱ初心者の 段階からヒグマのそのオートレイアウトと かコンポーネントの理解とか何でそれやら なきゃいけないのかっていう理解とかその 簡単なフロントエンドの理解もう LPをHTMLとCSSで組んでリリース 1回してみるぐらいで多分まあまだまだ いいと思うんですけどとかをやっぱやった 方がいいよねっていう風にもうすでになっ てるんですけどよりなるなっていう気がし てますね というわけでここ今ね解散対応できてない のでちょっとねやんなきゃなーと思って ますまあ多分無料で出す分なんでボノを あんま関係ないかもしれないわかんない どうだろうボノでやるかもしれないです もので出す部分もあるかもしれませんけど ちょっと初心者向けになっちゃうんです けどそういうのやった方がいいかなと思い ますまあ皆さんに割と当てはまるのはその フロントエンドのコードの部分ですかね これの簡単なチュートリアルみたいなもの はまあ言うてみーとかで漁れば無限にある んですけど僕も作ってもいいのかなと思っ たりとかしてますなので はいっていうところですかねってなって くるとじゃあどこで差はつけりゃええね
んってなるじゃないですかもう2つでこれ はもう変わらずでそのフロントエンドの 部分までやっぱガツッと表現をやりたけれ ばやっぱやるべきなんですよ今までやっぱ おかしかったその建築士で言うとその 一級建築士の資格を取るときに別にその 側の 設計の部分だけやれてればいいわけじゃ なくてその建物の中の空気の循環だとか 温度なんか 管理とか土台で地震にならないなんか計算 とか計算やるか落ちとか多分やると思うと か土のなんか種類のなんだこうものとか そういう知識まで 求められるんですよ建築やるってなると 当たり前ですよねそのなんかね土台だけ 作っていいって思うんじゃなくてそこどこ に建てるのかとかえっとその空気の循環が 悪いとね人がやっぱ生活しづらいとかある わけですよね 排水のなんか仕組みとかもあるわけなので やんなきゃいけないんですけどなので一緒 に一緒の知識が必要なんですよ1級建築士 っていうものを建築士としてやっていく ための資格を得るためには人の命かかって
ますからね半分以上まあなんだけどWeb の世界だとねそういうのないじゃないです か僕らが作ったデータで作ったデザインて コードで生成されるのにコードのこと何も わかんなくてもまあデザイナーにはなれる わけですよまあ 慣れるな別にいいとしてまあいいか悪い かっていうとちょっとおかしいと思うん ですよね なんかそれをね他の人に任せるでデザイン するってやっぱちょっとなんかおかしな話 ではあるのでまあ逆に本来の形にはなって いきつつあるのかな行きつつあるのかなと かになったのかなと思ったりはするので まあそろそろ UIとかそのソフトウェアを作るのであれ ばWebサイトもそうですけどねあの コート書いてもいいんじゃないかなコート かける最低限知識はあってもいいのかなと いうところですかね なのでこの分野をコードと含めてどの 突き詰めていくっていうまあフロント エンドエンジニアかける UIデザイナー表層部分とかシステム強い みたいな 職種そういう作る部分ですねその要件とか
の後の話を 極めてくってところで自分のバリューを どんどん 出していくっていう世の中じゃあ世の中 じゃないキャリアの積み方ってのは一つ あると思いますでもう一つやっぱその 顧客理解とかですね誰のために何を作る べきかっていうところでここもそのUX だろって思うかもしれないですけどその なんかUXのなんか分野ってなんかあんま 難しくてそのなんかやり方しのドリブンの 話が多いんですよね僕の 裸眼もあると思うんですけどそのなんか ユーザーインタビューの正しいやり方とか なんかなんだろうその人間の理解とかです かねちょっと研究職っぽいんですよねただ 何だろう誰かに勝ち提供するってなると それだけじゃ絶対ダメでそのどう伝える かっていうまあマーケっぽい話と コミュニケーションデザインという話とか もう絶対かかってくるしコンセプトの作り 方にそこからねやっぱ合わさってくると 思うんですよ誰が対象でみたいなってなっ てるとなんかちょっとマーケターっぽい 側面もねやっぱやらなきゃいけない くなると思うんですよ本当に価値届けよう
と思うのね顧客理解すればいいやだけだと ならないんですけど本当にでも本当そこ だけで意味ないじゃないですか固着理解 できるだけの人材って僕あんまり価値ない と思うんですよ本来はそこの スペシャリストがいるところでじゃあ何 するよってところがちゃんと伴わないと 価値提供できないのでやっぱ価値提供でき ないってことは価値がないと思うので なんか早口なっちゃいましたけどはいなの でそういうビジネスの知識も絶対必要です よねその 夢物語描いて実現できませんでしたとかお 金も分かりませんとかじゃ絶対実行され ないでも思いますしはいとかまあ逆に言う とUIが悪かったら勝ち届かないのでUI の最低限の理解とかも必要になってくるの で なんかやっぱそういうこう広い講義の意味 での価値デザインみたいなものをやってい くっていうところはあるんじゃないかなと 思ったりしますね こういうシステム的な3つ目ですねあの システム的な部分を理解しつつなんか ブランディングのデザインあるとかなんか ねロゴ作るっていう意味のブランディング もありますしそういうなんかさっき言った
ようなえっと誰が顧客で 企業とかサービスとしての未来はこういう 風な方向性でいくべきなのでこういう指針 にしましょうとか方針を立てましょう みたいなねものやっていくとかはいそう いうようなところをトータルで設計できる デザインブランドデザインみたいなもの だったりとかそういうような視点ですね別 にブランドデザインの言葉じゃなくていい んですけどそういう視点でデザインできる ようなスキルをつけていく得意な分野を 見つけるというところを引き続きやって いくのはまああんま変わらないかなと思っ たりはしますかねはいただまぁ話を戻し ますけどフロントエンドというアイ デザインというのはすごくもうだいぶ 融合できる状態にはレディーになってるの で UIデザイナーとして現場でやる上では もう 嫌なぐらいこの話は話題になると思います 今後も今後この12年1年少なくとも1年 はAIとともになってくるんじゃないかな と予測しておりますはいなのでまあやった 方がいいんだけど本当のクリエーションで
どこにあるんだっけってトラ考えると ねっていう風には思いますね個人的には はい水飲みましたはいなんかでそんなね 仕組み化とかするのって別に何だろう 管理者がやればいいってやればいいと思っ てるわけじゃないですけどやってもいい 部分でありなんかデザイナーっていろんな 定義であるので別にいいんですけど僕的に はねやっぱりまだ見たことないけど誰かが 求めているであろうものを 具体化形作る人だと思うのですでにある ものを仕組み化して効率よくするっていう のはエンジニアリングだと思うんですよ僕 はどっちかで振るならエンジニアリングか デザインがでるならって話なんですけど そこの融合っていう話なんですけど今回は まあまあただまぁデザインニングって 考えると なんかねその仕組み化だけやってていいん だっけみたいなね新しい価値作ろうよとか 課題とこうよとか 結局課題発見しようよとかなんかそっちな
んじゃないかなと思いますねはい っていうのは個人的には思うので なんかデザインとはなんぞやっていうのは やっぱりここのデザインをやっていく人と しては 考え続ける必要性があるのかなと思ったり しますねはい という感じかなうんちょっとまあAIとか フロントエンドの最近調べ物してたので こういう話をしてみました はいいかがですかねちょっと感想があり ましたらね僕いっぱい最近コメントがね 一番ね嬉しいことが分かりましたのでぜひ あの自分のタイムスでもいいですし僕の タイムズカイ君でも いいのでコメントいただけるとありがたい なと思いますはいなんか感想コメントお 待ちしてますはいまあねボノにもコメント 機能があればいいんですけどちょっとね僕 も頑張って今行動を書かないとって感じ ですねちょっとまだまだ今年中は無理です けど来年とかにはねなんか始めたいねと
思いますねはいでちょっとモノラジオで やっぱ続けていきたいのでそうですね やっぱ最近僕デザインの本をあまり読ま なくなったんですよねあえて読んでないっ てのが結構でかいんですけどねデザインの ことをやっててもデザインできねえやって 思っちゃったりとかしてるんでなんかで あえて別の 領域の本とか読むことで逆に言うと デザインにつながってくるみたいな感じな のであんまりデザインの本を読んでないの ですがまあちょっと改めてねコンテンツ 作る意味でもあの動画ですね作る意味でも ちょっと読み直した方がいいしなんかそう いう話のが皆さん的には受けるんじゃない かなっていうのがあるので本デザイン系の 本の話題の話をしたりとかしてみたいなと 思います 結局あのインプットしないとねあの話せる アウトプットが僕の中にもないので ちょっと勉強したいと思います僕のラジオ のためにはい皆さんもねこの本良かったよ とか 解散好きそうですとかあったら教えて ください多分80%ぐらいで買わないと 思うんですけど
僕自分の読んでる本以外を買わないんです よ読み終わったら次何買おうかなって思っ てその時に 検討材料になる 並べるんですけど基本的にツン読しないっ ていうかそのあんまりこう溜めないんです よ買った本はすぐ読むっていう風にしてる ので すぐに買わないと思うんですけどこういう のはありましたよとかあったら嬉しいよ 嬉しいので教えてもらえると嬉しいです はい嬉しいです 嬉しいよなんか言いましたかねはいそれで はね今回のモダラジはこんな感じですかね ちょっとリハビリボノラジでしたけどはい 楽しんでいただけたらと思いますまた 引き続きボノでよろしくお願い 致しますあ4月以降のオフ会とかあの 各地方のお誘いお待ちしておりますので これガチですはいガチではもうそういうお 待ちしておりますので皆様よろしく お声掛けよろしくお願いしますそれでは
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
0 Comments