[{"data":1,"prerenderedAt":249},["ShallowReactive",2],{"content-query-eTvtbf9tdf":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"eyecatch":12,"eyecatchEmoji":13,"body":14,"_type":243,"_id":244,"_source":245,"_file":246,"_stem":247,"_extension":248},"/article/260604/create-web-page-by-ai","260604",false,"","AIにWebページを作らせてみた","Figma MakeとChatGPTで同じプロンプトを使ってWebページ（LP）を作ってもらいました。","2026-06-04","Web EC",null,"👾",{"type":15,"children":16,"toc":236},"root",[17,25,41,58,63,69,74,79,85,90,98,103,126,132,139,143,166,171,176,189,194,208,213,217,222],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","こんにちは、だいちゃんです。",{"type":18,"tag":19,"props":26,"children":27},{},[28,30,39],{"type":23,"value":29},"細々と ",{"type":18,"tag":31,"props":32,"children":36},"a",{"href":33,"rel":34},"https://udcxx.stores.jp/",[35],"nofollow",[37],{"type":23,"value":38},"kintone のカスタマイズを販売",{"type":23,"value":40}," したりしているのですが、びっくりするくらい売れないので売上改善施策の1つとして LP を作ってみることにしました。",{"type":18,"tag":42,"props":43,"children":44},"ul",{},[45],{"type":18,"tag":46,"props":47,"children":48},"li",{},[49,51],{"type":23,"value":50},"既に実施した施策は ",{"type":18,"tag":31,"props":52,"children":55},{"href":53,"rel":54},"https://blog.udcxx.me/article/260311/kintone-shop-analytics/",[35],[56],{"type":23,"value":57},"こちら",{"type":18,"tag":19,"props":59,"children":60},{},[61],{"type":23,"value":62},"とはいえ、売れてない事業の LP にデザイナーさんを雇う予算もないので、無料で使える「ChatGPT」と「Figma Make」の2つの AI にデザインからコーディングまでを任せてみたので、比較して見ようと思います。",{"type":18,"tag":64,"props":65,"children":67},"h2",{"id":66},"前提",[68],{"type":23,"value":66},{"type":18,"tag":19,"props":70,"children":71},{},[72],{"type":23,"value":73},"両者ともに全く同じプロンプトを投げて、手直しもしていない状態で比較しています。",{"type":18,"tag":19,"props":75,"children":76},{},[77],{"type":23,"value":78},"プロンプトには、構成や記載内容に加えて、簡単な LP を作る意図、ターゲットなどを記載し、文章は適宜改変して良い旨も伝えています。ファーストビューの文言とか、細かい文章は与えていないのでそれは各 AI の個性です。",{"type":18,"tag":64,"props":80,"children":82},{"id":81},"chatgpt",[83],{"type":23,"value":84},"ChatGPT",{"type":18,"tag":19,"props":86,"children":87},{},[88],{"type":23,"value":89},"なんでもできる子 ChatGPT を作ってもった LP はこちら。",{"type":18,"tag":19,"props":91,"children":92},{},[93],{"type":18,"tag":94,"props":95,"children":97},"img",{"alt":7,"src":96},"/images/260604_1.jpg",[],{"type":18,"tag":19,"props":99,"children":100},{},[101],{"type":23,"value":102},"特徴：",{"type":18,"tag":42,"props":104,"children":105},{},[106,111,116,121],{"type":18,"tag":46,"props":107,"children":108},{},[109],{"type":23,"value":110},"フレームワークは使ってないみたい。Google Font は使っていた。",{"type":18,"tag":46,"props":112,"children":113},{},[114],{"type":23,"value":115},"角丸の四角形を多用している印象",{"type":18,"tag":46,"props":117,"children":118},{},[119],{"type":23,"value":120},"全体的にちょっと前の AI 臭がする(個人の感想です)",{"type":18,"tag":46,"props":122,"children":123},{},[124],{"type":23,"value":125},"行送りとかがあと一息",{"type":18,"tag":64,"props":127,"children":129},{"id":128},"figma-make",[130],{"type":23,"value":131},"Figma Make",{"type":18,"tag":19,"props":133,"children":134},{},[135],{"type":18,"tag":94,"props":136,"children":138},{"alt":7,"src":137},"/images/260604_2.jpg",[],{"type":18,"tag":19,"props":140,"children":141},{},[142],{"type":23,"value":102},{"type":18,"tag":42,"props":144,"children":145},{},[146,151,156,161],{"type":18,"tag":46,"props":147,"children":148},{},[149],{"type":23,"value":150},"すき。",{"type":18,"tag":46,"props":152,"children":153},{},[154],{"type":23,"value":155},"フレームワークに React や Tailwind CSS と使ってた",{"type":18,"tag":46,"props":157,"children":158},{},[159],{"type":23,"value":160},"Vite でローカル環境もすぐ構築できるようになってた。モダン。",{"type":18,"tag":46,"props":162,"children":163},{},[164],{"type":23,"value":165},"文章の AI 臭さは否めない",{"type":18,"tag":64,"props":167,"children":169},{"id":168},"結果",[170],{"type":23,"value":168},{"type":18,"tag":19,"props":172,"children":173},{},[174],{"type":23,"value":175},"Figma Make が作ってくれた LP をちょっと手直しして公開しました！",{"type":18,"tag":42,"props":177,"children":178},{},[179],{"type":18,"tag":46,"props":180,"children":181},{},[182],{"type":18,"tag":31,"props":183,"children":186},{"href":184,"rel":185},"https://udcxx.me/kintone-support/",[35],[187],{"type":23,"value":188},"kintone カスタマイズ プラグインの相談・開発",{"type":18,"tag":19,"props":190,"children":191},{},[192],{"type":23,"value":193},"感覚的な話ですが、なんとなく日本語にクセがあるように感じたので、特に気になるところは文章の修正を行いました。",{"type":18,"tag":19,"props":195,"children":196},{},[197,199,206],{"type":23,"value":198},"あと、イラストも「SVGで頑張って描きました！」って感じの変な絵だったので、 ",{"type":18,"tag":31,"props":200,"children":203},{"href":201,"rel":202},"https://soco-st.com/",[35],[204],{"type":23,"value":205},"ソコスト",{"type":23,"value":207}," さんのイラストを使わせていただきました。",{"type":18,"tag":19,"props":209,"children":210},{},[211],{"type":23,"value":212},"React で作られてるからビルドしないとスタティックページとして使えなかったり、地味に no-index 設定されてたりと多少知識ないと詰みそうな感じもありましたが、概ね一発で作れたので体験としてはとても良かったです。\nただ、Figma Make上で手直しさせようとすると、2回目で上限到達しちゃったので、妥協できないものは課金必須かもしれません。",{"type":18,"tag":214,"props":215,"children":216},"hr",{},[],{"type":18,"tag":19,"props":218,"children":219},{},[220],{"type":23,"value":221},"という感じで、簡単な LP ならサクッと作れる時代になったんだなぁとしみじみしつつ、その分別のことに時間割かないとヤバいなとも思ったのでした。",{"type":18,"tag":19,"props":223,"children":224},{},[225,227,234],{"type":23,"value":226},"kintone のカスタマイズ開発なども請け負ってますので、興味ある方は ",{"type":18,"tag":31,"props":228,"children":231},{"href":229,"rel":230},"https://work.udcxx.me/contact",[35],[232],{"type":23,"value":233},"お問い合わせ",{"type":23,"value":235}," ください〜！",{"title":7,"searchDepth":237,"depth":237,"links":238},2,[239,240,241,242],{"id":66,"depth":237,"text":66},{"id":81,"depth":237,"text":84},{"id":128,"depth":237,"text":131},{"id":168,"depth":237,"text":168},"markdown","content:article:260604:create-web-page-by-ai.md","content","article/260604/create-web-page-by-ai.md","article/260604/create-web-page-by-ai","md",1780643764719]