AIを学ぶより、まず作ってみる。LP制作ハッカソン参加レポート
ここ最近、
「AIだけでLPを作った」
「コーディングした」
「アプリを開発した」
そんな話を目にする機会が一気に増えました。
一方で、
「実際の制作でどう使えばいいの？」
「何から触ればいいのか分からない」
「気になってはいるけれど、結局後回しになっている」
そんな方も多いのではないでしょうか。
私自身もその一人でした。
AIツールの名前は知っていても、制作フローにどう組み込めばいいのか分からない。
勉強しなきゃと思いながら、なんとなく後回しにしていました。
そんな中で参加したのが、今回の『AIハッカソン』です。
参加者全員でAIを使いながら、LPの設計からデザイン、実装、デプロイまでを2時間でやり切るというイベント。
「AIをどう制作に活かすか」を理解するには十分すぎる体験でした！
開催概要
📅 6月23日（火）13:00〜15:00
📍 オンライン（Zoom）
主催は、Webディレクター・コーダーとして活躍しているこずえさん（@ico_works）。
「知識として聞くだけでなく、実際に手を動かして、作ったLPが世に公開される体験を」
そんなコンセプトのもと、参加者全員でAIを使いながらLPを設計→デザイン→コーディング→デプロイまでやりきる、ハッカソン形式のイベントです。
そもそも、AIハッカソンとは？
「ハッカソン」とは、決められた時間内に手を動かしてものづくりをするイベント形式のこと。
開催の背景には、ノンデザコミュニティ内でこんな声があったそう。
「AIっていろいろ出来るらしいけど、正直全然触れてない……」
「Xでなんだか凄そうなものを見たけど、自分では使えていない……」
「部分的には使っているけれど、他にも活用方法があるのでは？」
そんな方に向けて、「まずはみんなで触ってみよう」というのが今回の趣旨でした。
また、当日は最初にこんな前提が共有されました。
- 「明日からAIに丸投げできる魔法のプロンプト」は配布しない
- AIをこれから触る人にも参加しやすい内容にする
- そのまま納品できるものを目指すのではなく、「この工程はAIで効率化できそう」という気づきを持ち帰る
AI活用に過度な期待をあおるのではなく、実務で使えるかどうかまずは体感することに重きを置いていたのが印象的でした！
ノンデザLPハッカソンイベントの流れ
当日は、以下のステップで進行しました。
- はじめに・企画説明
- 制作テーマ決定（サンプルお題あり）
- 設計・ワイヤーフェーズ
- デザインフェーズ
- 実装・デプロイフェーズ
- URL共有・アンケート
使用するツールは自由。
Claude Code・Claude Designはもちろん、CodexやChatGPTなど、参加者それぞれが普段使っている環境でチャレンジしました。
無課金ユーザーでも参加できる範囲で参加でき、もちろん見る専の方もいらっしゃいました。
AI初心者の私が、2時間で学べたこと
今回のイベントを通して、特に印象に残ったことが3つありました。
① AIは「作る」より前の工程でも役立つ
私が取り組んだテーマは、サンプルお題の「中目黒にオープンする少人数制ヨガスタジオのLP」。
制作を始める前に、ターゲットの特徴や顧客が抱える悩み、
申し込みに至る背景、業界の傾向などをAIに整理してもらいました。
AIというとデザインやコーディングに目が向きがちですが、
要件整理やリサーチといった「作る前」の工程で、
考えを整理する壁打ち相手としてこそ活用すべきと感じました。
② AIにも分かりやすい指示が必要
LP制作を進める中で参考になったのが、AIと一緒に制作する際のルールです。
- 出力するファイル名やフォルダ名を明確に指定する
- ワイヤーフレームとデザインの役割を分ける
どれも特別なテクニックではありませんが、
人間同士で仕事をするときと同じように、
AIにも整理された指示を出すことで、成果物の精度が変わることを実感しました。
こずえさんが全プロンプトを共有してくださったので、
指示の出し方も勉強になりました。
③ 「いい感じ」より要件整理が大事
個人的に面白かったのは、ChatGPTでイメージボードを作り、
その内容をClaude Designへ渡してデザインを生成する流れです。
AIに「いい感じで作って」とお願いするのではなく、要件を言語化して渡す。
私自身、ChatGPTやClaudeは触ったことがあったものの、
Claude CodeやClaude Designについてはほとんど知識がありませんでした。
それでも、参加者全員で同じ流れに沿って制作を進めていく中で、
「これは設計や実装に向いている」「これはデザイン生成に強い」
といった役割の違いが少しずつ見えてきました。
AIの情報を集めるだけでは分からなかったことも、実際に使ってみることで理解できる。そんな体験ができたのは、ハッカソン形式ならではだと感じます。
2時間で、それぞれのLPが公開できる状態に
驚いたのは、参加者全員がゼロからスタートしたにもかかわらず、
2時間後にはURLを共有できる状態まで到達していたことです。
サンプルお題の他にも、個人でテーマ設定して制作した方も多く、
パーソナルジムLP、バンドLP、出張撮影サービスサイトなどが制作されました！
同じイベント、同じ時間の中で制作していても、テーマや作り手によって完成するサイトはまったく異なります。
「AIの出力をそのまま納品できるか」というと、それはまた別の話ですが。
ただ、「まずはたたき台を作る」「方向性を可視化する」という意味では、
AIが制作の初速を大きく高めてくれることを実感しました。
参加者の声
参加者からは、こんな感想が寄せられました。
「Claude Designがどんなものか、使い方についても参考になりました。同じサイトでも、人によってデザインが変わることも知れて良かったです」
「クライアントとの方向性確認で今日の知識を活用していきたいです！」
「ずっと自社サービスサイトを作ろうと思いつつ放置していましたが、とりあえずAIに作ってもらってイメージできました。これをたたき台にして進められそうです」
Xにも参加者の声が上がっていたので、一部ご紹介します。成果物はノンデザ公式Xよりご覧ください。
「2時間で自社サイトの草案が完成した」
「半信半疑ながらも一緒に2時間でやり切れた！」
「ツールによるアウトプットの差分も検証できた」
「短時間でインプットできた！」
やってみて分かったこと
今回参加して感じたのは、「AIを学んでから使う」のではなく、「使いながら学ぶ」ほうが圧倒的に理解が早いということでした。
本や動画で情報を集めるだけでは見えてこなかったことも、実際に手を動かすことで初めて理解できる。
AI活用に限らず、新しい技術を学ぶときの姿勢そのものを考えさせられる時間になりました。
AIは難しそうだからと後回しにしていましたが、今回参加したことで「まずは触ってみること」の大切さを改めて実感しました。
ノンデザだから、こういうイベントが生まれる
ノンデザには、「誰かが学んだことを共有し、それをみんなで試してみる」文化があります。
今回のAIハッカソンも、その文化から生まれたイベントのひとつでした。
一人ではなかなか触れない新しい技術も、仲間と一緒なら挑戦しやすい。
そして、ただ知識をインプットするだけではなく、実際に手を動かしながら学べる場がある。
そんな環境があることも、ノンデザの魅力だと改めて感じました🌿
過去のイベント記事はこちらからご覧いただけます⬇️
タスク管理、なんとなくになってない？フリーランスの業務ノートを実物公開！
今回のイベントアーカイブは、ノンデザコミュニティ会員限定で視聴できます。
実際の制作画面を見ながら学べるので、参加できなかった方もぜひチェックしてみてください。
「AIとっつきにくいけど、ちょっと触ってみようかな」
そんな一歩を踏み出すきっかけになれば嬉しいです。
