はじめに
みなさん、AIとうまく付き合えてますか？
いろんな生成AIが世に出てきていますが、恥ずかしながら筆者はよくわかってません！
しかし、どうやらFigmaにコード生成ができるツールがあるらしい・・・！
というわけで、今回はコーディングをやってる人、デザインをやってる人にAIが書いてくれたコードを見てもらいつつ、それぞれの目線でできてることできてないことを話し合ってみようと思います！
今回のメンバー
まなみちゃん筆者であり司会担当。デザインの人。最近XDからFigmaに乗り換えた。コーディング知識はHTMLとCSSを軽く触った程度。
けーくんデザインとAIの人。ハナプレにてAIに関する記事を連載中。HTML、CSSはかじった程度。JS、Tailwind、Reactなど用語は知ってる。
いまちゃんコーディングの人。Word pressの自作テーマでサイトを制作したり、tailwindでLPを作ったりしている。Node.jsやphpも使用はするが、深くは知らない。
ひろとくんコーディングの人その２。コーディングの基礎知識に加え、最近はTailwindを使っている。Reactも勉強中。
えっちゃんデザインの人でありコーディングの人。デザインはFigma、XD、コーディングはHTMLとCSS。jsはライブラリを使う程度。Tailwindはじめました。
ハナプレを運営するハナグミでは、基本的にまなみ、けーくんのデザイナー組がデザインを作り、いまちゃん、ひろとくんのコーダー組がコーディングする、という体制でWebサイトを作っています。
えっちゃんのみ例外で、デザインの知識もコーディングの知識もあるため両方兼任しています。両方の立場からの意見を言える貴重な人材ですね！
筆者自身普段はデザインに明け暮れているので、今回はコーダーがどんなことを気にしてコーディングをしているのかを知れるよい機会になったと思います！
全員が手探りの企画となりますので、どうぞ生暖かい目で見てやってください〜
Figma sitesを使ってみよう
今回使ってみたのは、Figma sitesという機能です。
Figma sitesとは？
Figmaの中で提供されているWebサイト制作機能。Figma上で作ったデザインをそのままWebサイトとして公開・共有できるノーコードツール。今回はベータ版を使用。
けーくんがLPサイトのデザインを用意してくれたので、そのままfigma sitesに持ってきてみます。
けーくん今回なぜFigma sitesにしたかというと、実は準備段階でそのままコードを生成してみたら、divだらけになってしまう問題があったんですね。
その点Figma sitesは右クリックでheaderやsectionなどHTMLタグを指定できるので、その問題は解消されるかなってことで用意してみました。
まなみちゃんコーディングの人に質問！なんで全部divじゃだめなんですか？
いまちゃん正直全部divでも成立はするんですけど・・・他のコーダーもブラウザ側も読みづらいって問題があるからです。、例えば全部divで囲ってしまうと、どの文字がタイトルなのか判断できず検索エンジンに引っかからないとか。AIしか読まなくてもよくなるなら、全部divでもよくなるかもしれないですね。
まなみちゃんじゃあFigma sitesのタグを指定できる機能はコーダー的に結構いいんですか？
ひろとくんそうですね、いいと思います！
いまちゃん逆に聞きたいんですけど、ここはこのタグ使うだろうな〜って思いながらデザインしないんですか？
けーくんタグは気にしたことないですね（苦笑）
まなみちゃんしないですね！気にした方がコーディングしやすいですか？
いまちゃんしやすいっていうか、デザイナーがタグを決められればもっと完璧にコードを書き出せるし、コーダーにとってもやりやすいのかなとか。ただあんまりやりすぎると、デザインの幅が狭くなるっていうせめぎ合いはあるんだろうなとも思いますね
まなみちゃん確かに、タグを意識しながらデザインはできたらいいかもですね
このへんはちょっと業務の話になってたので割愛しますが、こういうデザインとコーディングの間のすり合わせみたいな話も、ちゃんとしないといけないんだろうな〜と筆者は個人的に思いました。
というわけで、サイト作ってみました！公開ワンクリックでブラウザに表示されました。
いまちゃんぱっと見いけてますね。我々の仕事が・・・
ひろとくんすご！仕事なくなりますね
ぱっと見た感じ好評のようです。レスポンシブもこの通り！
けーくんレスポンシブは、Figma sitesでブレイクポイントごとに作っていったり、オートレイアウトを細かく設定する必要があるんですよね。
ecchan補足説明パート
レスポンシブ…同じHTMLを使いながら、PC・タブレット・スマホそれぞれに合わせてレイアウトが自動で切り替わる仕組みのこと。
もちろん、勝手にいい感じにしてくれるわけではなく(泣)、コーダーが細かく指定する必要がある。サイズごとに微調整が多くちょっと面倒な作業なんですが、Figma Sitesでも同じような対応を自分でやる必要があるみたい。そこがサボれたらいい機能なのにな〜
ecchan補足説明パート2
オートレイアウト…Figma独自の機能で、CSSの flex に近い自動整列の仕組み。
自動で位置を揃えてくれる反面、動きを理解してないとデザインが崩れがち。
Figma初心者がよくつまずくポイントのひとつ。
まなみちゃんこの作業がめっっちゃめんどくさいんだけどね
しかし当然、大きな問題点も見つかります。
いまちゃん問題は、人間が読みにくいコードで書かれてることですね。こうされると人間の手を加えにくい。なのでAIが書き出せるコードと、人間が触りやすいコードの中間が見つかれば、もっとやりやすくなりますよね。
ひろとくん（無言で頷く）
いまちゃん人間が直さなくていいくらい完璧に作ってあったらいいけど、まだそこまでには至ってないっていう・・・
ただ「これでもいいや」って人はいそうですけどね
まなみちゃんじゃあ、それこそペライチみたいな、何も直さなくていいしただ一つの目的のためだけにあるようなサイトだったら、これで作ってもいいかもしれないってことですか？
ecchan補足説明パート３
ペライチ…ノーコードで1ページのWebサイトを簡単に作れるサービス。
コーディングやプログラミングの知識不要で、割と本格的なページが作れる。
その名の通り1ページ完結のサイトには最適ですが、複数ページ構成には不向き。
けーくんテキストとか画像とかぺたっと置いてあって、どっかにリンクだけ飛ばすみたいな・・・
いまちゃんそれだったら別にいいんじゃないですか？
けーくんまあ見た目上はね？笑
記事用のサイトを作ってくれたけーくんは、作りながら思ったこともあったようです。
けーくん今回PCサイズから作ったんですけど、それをSPサイズに直していく時にどうなんねんっていうのが難しくて。だったら、最初からSP基準で考えればよかったなって思いました。
まなみちゃんそれは、SPファーストで作った方がいいって言うのにも通ずるものがありますね
いまちゃんっていうことは、レスポンシブした時にも綺麗に見えるようなやり方を考えてるってことで、けーくんの負担は増えてるんですね
けーくん増える！笑 そしてデザイン的に表現したいことが増えるほど、できなくなっていくっていう
いまちゃん（さっきのカードのレスポンシブを見て）ここは、ブラウザ幅が縮んだら横並びから一気に縦並び１列にするんじゃダメなんですか？
けーくんそれは、デザイン的に気持ち悪い！
まなみちゃんデザイナーのこだわりだよね〜
このあたりのデザイナー的なこだわりと、技術的にできないことの間のズレは、普段デザイナーとコーダーの間で発生しがちな問題そのままでしたね。
えっちゃん聞いてる限りだと、コーダーがFigmaでサイト作ろうと思うとfigmaを覚えないといけないし、デザイナーがFigma sitesでサイト作ろうと思うと、またCSS書くのとは違う、Figma sites用の作業を覚えないといけないんですね・・・
まなみちゃんFigma sitesを覚えるくらいなら、頑張ってコードの書き方覚えた方がたぶん早いんですよね笑
けーくん結局そう笑
まなみちゃんFigma sitesでやってると、オートレイアウトとかをきかせるためにこうかな？こうかな？てやる作業があって、それだったらもうコーディングでその作業やったほうが近道になるって言う
えっちゃんそんな細かいところまで指定してるんだったら、ほぼほぼCSS書いてるみたいなもんですね
まなみちゃんデザインの細かいところまでAIに指示ださないといけないって考えると、デザイナーがペラっとデザイン作ったのを、コーダーが意図を読み取って作ってくれるのはありがたい
けーくんありがたい！（しみじみ）
いまちゃんそれでいうと、コーディングする時を考えてデザインして欲しいですけどね。まあこの話はまた別で・・・「コーダーVSデザイナー」って言う記事に・・・
これ以降、ハナグミで扱っている案件について一悶着あったので割愛します。（嘘です。ハナグミはアットホームな職場です）
結論どうなの？
みんなで話し合った結論としては、
コーダー側「ぱっと見できてるけど、人間が手を加えにくいコードになってるね」
デザイナー側「完璧なサイトに仕上げようと思ったらめっちゃ大変。結局コーディング覚えた方が早そう」
という感じでした。
また、ハナグミを裏で牛耳るボスからはこんな意見があったようです。
BOSSAIを使うにしても、AIにやらせてもいいのは自分にできることだけ。できないことをやらせると問題が起こった時に対処できなくなる。
とのことです。楽してAIにコード書かせようっていう私のような考えは捨てて勉強しろということですね！
とうわけで、AIが生成したコードをみんなで見てみる企画でした！
半年後くらいに同じテーマで記事を書いたら、技術の進歩でまた違った内容になりそうですね。
それではここまで読んでいただきありがとうございました〜
