# あいさつ おはようございます。デザイナーの島安です。 元Yahoo!のデザイン責任者で、SNSでデザインのTipsを発信したり、デザインの解剖図鑑の著者、 Adobeことはじめ、クリエイティブカレッジの講師や、Adobeコミュニティエキスパートをしたりしております。 この番組は、センスがなくてもできるデザインの小技を一日一つお送りしていきます。 本日のテーマは、現段階におけるAIコーディングの限界というテーマでお話をします。 それでは本日もよろしくお願いします。 # 本編 本日もお聞いていただきまして ありがとうございます 今日は 現代化におけるAIのHTML とかCSSのコーディングの限界という お話をしていきます 私は20年以上 デザインの仕事をやって ウェブ デザインの仕事を主に中心にやって きて たまに名刺とかハマチラシ とか紙とかもいくつかやったり ロゴとかを作ったりもするんですけど 基本はウェブデザインの仕事を 別にやってきています Yahooのデザイン 責任者だったり 去年からAdobeのクリエイティブ カレッジというところで講師を やったりとか あとは今年の初めに デザインの解剖図鑑という書籍 を出したりしています その中で 僕は基本的にはHTMLとかCSSのコーディング とかはやれるんですけど そっちは メインではなく 割と前工程というか デザインの設計とか 設計に必要な UXとか カスタマージャーに引いて どこで例えばデザインとか どこ に触れたほうがいいか じゃあこの 画面作ろうかみたいなことを考え ながらですね 割とやるようなタイプ なので 全体の設計をするっていうこと が多いんですけど 今回 久々にHTML とかを触る機会があったので せっかくだから 主にはChatGPTを 使って そのコーディングを自分 でやらずに 全部AIに任してみよう と思ってやったんですね 結果的 には 概ね問題ない 概ねできる 別に多分 変なHTMLとかCSSの知識 がなくても 概ねできるんですけど これは皆さん 使ってる方には社会 に説法というか あれですけど これは もしかしたら 前提として 僕があんまりプロンプトとかを うまく使いこなせないかもしれない んで うまくやればできるぞっていう 話はあるのかもしれないですけど 僕は完全にAIでやると結構時間 かかるなって感じはしました ちょっと したことができなかったりするん ですよね これはもう僕のせいかもしれない んで そんな感じで話半分で聞いて ほしいんですけど 僕がやろう としてたデザインっていうのは 左側に画像があって 右側に見出し と本文とみたいな感じで並んで いく たまにULって言ってるところ あれですね HTMLとかCSSが分からない 人からするとなんじゃらほいって 感じですけど リストマークみたいな ものがあったりするような見た目 だったんですね 一応 既存のCSSも あって WordPressで作るんで 既存の CSSとかも読ませながら こんな感じ ですっていうのをやって ワードプレス で追加のCSSを入れるところがある ので そこに入れる前提でちょっと 出してねっていう話 これちょっと HTMLとかCSSとかワードプレス知らない 人からするとなんじゃらほいって 感じだと思うんで AIでいろいろ コードを書こうとした準備をしてる よっていうことを それでAIにいろいろ 入れて むんごいワンちゃん鳴いて ますけど すごいCSSを出してもらって やってたんですけど ちょいちょい 崩れるんですよね これでオッケー だと思ったら そのリストマーク が消えたりとか これオッケーだ と思っていったら 今度 さっきまで できたことができなくなっちゃ ったりとかっていうのがあって なかなか こっちが収まったらこっち できないみたいな感じで これで 完璧ですみたいな感じで言うん ですけど あんまりうまくいかなか ったんですよね だから最終的には それを人力で一部調整したりとか CSSを修正して これオッケーそうだ なって感じになる 一見 対処する ともダメみたいなことがちょい ちょいあるので そこら辺は自分で できるほうがいいかだって感じ ですね だから結構 HTMLとかCSSとか 今 僕がコンサルトを教えてる 方とかも避ける方が多いんですけど 最低限覚えておいたほうがいい 多分 AIによって我々のワークフロー っていうのは大きく変わるんですよ ね やっぱりそのAIを主体にして AIに指示を出し そのAIが指示を 出した結果を出してくるって 多分 デザイナーの役割として大きな ところで言うと それを的確に判断 したり調整したりっていうところ お客さまとかの要望とかディーズ とかサービスをどう見せるみたいな ところの漠然とした抽象度の高い 依頼に対して デザイナーはそれを 咀嚼して 具体的な形にどんどん していく その過程でAIを使って 形にしていくんだと思うんですけど スピードはすごい速いんで それを 判断できるとか 微妙だったら ちょっと微調整をして進める みたいな そういった役割になって いくのかなと思うと そこでやっぱり HTMLとかCSSの知識もあったほうが AIをより柔軟に使いこなせたり とか 思うような形にしていける っていうところがあるかなと思いました 今日は 現段階におけるAIの限界 みたいなところで実際使ってみて ちょっとここら辺課題だなと思 ったので ちょっと話をしてみました # デザインの解剖図鑑が絶賛発売中！！ お知らせをさせてください。私の初めての著書、デザインの解剖図鑑が絶賛発売中です。 全編図解でデザインのティップスやマインドをまとめた一冊丸々図解の書籍となります。 初心者デザイナーの方はもちろん、SNSで図解を作ったり、お仕事で資料を作るようなデザイナー以外の方にもとてもおすすめの書籍となります。 このチャプターにAmazonのリンクをつけておきますので、興味のある方はぜひチェックしてみてください。 # デザイナー初心者向けに無料特典を配布しています！！ デザイナーって場所にとらわれずに ノマドで働けるので始める人が とても多いんですけど やることが たくさんあって デザインという 一つの言葉だけでも抽象度が高い ので 例えばウェブデザインとか 紙のデザインとかロゴのデザイン とか いろいろあって それを学ぼう とすると 何から学んでいいか 分からないとか じゃあ実際作って みても これって私はプロとして やっていけるレベルなんだろう かとか これぐらいスキルを身に つけたら 例えば案件受注していいん ですかね みたいなところもなかなか 分かりづらいんですよね 算数 とかだったら1たす1は2みたいな 正解があるんですけど デザイン って正解がないので 何かしらこの 最初のうちというのは 本気でやる 人であればあるほど そういった アドバイスをくれる人っていう のが結構いたほうが絶対に有利で スピード感を持って収益化ができる ようになると思います そんな方に 僕自身がいろいろアドバイスを したりとか あとは動画でそうい ったコツみたいなものをお伝え しています なんで もし良ければ このチャプターに公式ラインの リンクがついてますので ぜひ得点 もつけてますので ご確認ください # おまけ はい、それではおまけの放送を収録していきます。 今日はですね、これ悔しいんですよね。 もともと1日前にですね、配信をするはずだったんですけど、 なんかあの、予約投稿がうまくできていなくて、 1日ずつずれていて、 月曜に放送するはずのものを火曜日に放送して、 火曜日に放送するはずだったものを、 今日水曜日に放送するという感じになっちゃったので、 ちょっとですね、これ気を付けないといけないですね。 最近Voicyが怠け気味になっているので、 ちゃんとですね、毎日配信していこうかなと思っています。 AIの話だったんですよね。 AIやってみて、すごい便利だなと思う反面で、 やっぱりまだもうちょっと足りないなというところがあって、 やっぱり判断するというところは、 やっぱり大事な役割なんだろうなと思っています。 僕の場合、本業でエンジニアさんとかと一緒に仕事をすることがあるんですけど、 やっぱりエンジニアさんも一緒なんですよね。 結構今はAIでやることができてきているので、 実際行動を書くというよりは、指示を出して、 作ってもらって、それを判断して、 実際に本番反映していくみたいな感じの流れが多いので、 そこら辺をうまいことやっていけるといいかなという感じですよね。 デザイナーもその流れにどんどんなっていくと思います。 そんな感じでですね、今日はここまでで。 またですね、ここまで聞いていただきましてありがとうございました。 また明日。