- 投稿日：2025/09/22
- 更新日：2025/09/30
私はもともとプログラマーとして12年間、クライアント・サーバ型のシステム構築に携わってきました。
業務システムの開発経験は積んできましたが、Web関連はまったくの未経験。Webサイト構築もしたことがありませんでした。
そんな私が、今回はじめて挑んだのは、ShopifyというECサイトプラットフォーム上でWebサイトを構築するプロジェクトでした。
知識といえば、昔に少しだけ触った、「タグで文字色やサイズを指定し、テーブルでレイアウトを組むようなHTML」で止まっていた程度です。
そんな私が突然、Shopifyを使ってWebサイトを立ち上げることになったのです。
当然、不安だらけのスタートでしたが、「AIを活用すればなんとかなるかもしれない」という期待もありました。
最初のつまずき：そもそもWebサイト構築の始め方がわからない
最初に直面したのは「Webサイトをどうやって構築すればいいのか、全くわからない」という壁でした。どこから手をつければよいのか、全体像すら掴めない状態です。
そこでAIに相談すると、
・「まずは企画書を作りましょう」
・「サイトマップを作りましょう」
といった提案を受けました。
案内に従って企画書を作り、サイトマップを作成してみると、少しずつサイト全体のイメージが見えるようになりました。
次のつまずき：Shopify上でどう実現すればいいのか
しかし、サイトマップができた時点で新たな問題が出てきます。
「このサイトマップの内容を、Shopify上でどうやって実現すればいいのか」が全くわからなかったのです。
AIはHTMLやCSSでサンプルコードを提示してくれるのですが、Shopifyではテーマに合わせてノーコードで構築する方法が多くのサイトで解説されています。そのため、「このコードをどうShopifyに組み込めばいいのか」という部分が特に分かりづらく、試行錯誤を繰り返すしかありませんでした。
単純にHTMLやCSSを書くだけでは不十分で、Shopifyに合わせた形（Liquidファイルを用いた実装）が必要になります。
けれど、その方法が全然分からない。
「せっかく設計図はできたのに、実際にどう作ればいいのかが分からない…」
これが2つ目の大きなつまずきでした。
序盤：AIに助けられて進んだ時期
試行錯誤の末、「Shopifyに組み込める形でコードを出してほしい」とAIに頼むことで、少しずつ前に進めるようになりました。
「この部分にバナーを入れたい」と相談すると、AIがLiquidに組み込める形でコードを提示してくれる。それを反映すると、実際にShopify上で表示が変わる！
初めて画面に意図通りに反映できたときは、本当に嬉しかったです。
「未経験でもAIと一緒なら進めるんだ」と思えた瞬間でした。
中盤：再び壁にぶつかる
ただし、ここからが本当の試練でした。基礎知識が不足しているため、AIの出力が正しいのか判断できないのです。
・修正を重ねても期待通りに動かない
・どのコードが効いているのか分からない
・CSSがどんどん重複して後から修正できない
さらに苦しかったのは、その界隈で使われている言葉自体が分からないことでした。
たとえば「ヒーロー」「CTA」といった単語を目にしても意味が分からず、AIに質問したくてもどう聞けばいいのか分からない。知識不足ゆえに、疑問を言語化することすらできない場面が多々ありました。
そして、追い打ちをかけるように「このままでは納期に間に合わないかもしれない」という強い危機感が出てきました。
結局、理解が追いつかない部分は残業でカバーするようになり、精神的にも体力的にもかなり追い詰められていきました。
序盤の勢いは徐々に失われ、「自分には無理かもしれない」と思うほどに。
方針転換：成果物ではなく「学び」を得る
そんな中で「このやり方では限界がある」と気づきました。
AIに完成品のコードを出してもらっても、その意味が理解できないから改善もできない。そこで思い切って方針を変え、成果物ではなく学びを得るための先生役としてAIを使うことにしました。
・わからない言葉が出てきたら、その場で丁寧に質問する
・コード全体の構造をどう把握するのか尋ねる
・1行ずつ意味を解説してもらう
こうしたやり取りを繰り返すうちに、少しずつ理解が深まり、再び前に進めるようになりました。
「AIに頼る」のではなく「AIと一緒に学ぶ」というスタンスに切り替えたことで、暗闇の中に一筋の光が差し込んできたのです。
そして気づいたのは、知識が足りないなら、今から学び直せばいいというシンプルな事実でした。
AIは疑問にすぐ答えてくれる存在だからこそ、基礎を補う学び直しの相棒に最適でした。
この経験を通して「次に同じようなプロジェクトがあっても、もっと効率よく進められる」という自信も生まれました。
実際の失敗から得た学び
特に痛感したのは、CSSの扱い方でした。
AIの提案をそのまま追記していくと、スタイルが重複し、修正が困難になる状況に陥りました。
最初は期待通りのデザインに近づくので「これで正しい」と思ってしまいます。しかし、後から「色を変えたい」「余白を調整したい」と思った時、どのコードを直せばいいのか分からず、結局大幅に書き直す羽目になりました。
この失敗を通じて学んだのは、AIの出力をそのまま積み重ねるのではなく、整理・統合しながら管理する重要性です。
「今は動けばOK」ではなく、「後から修正できるかどうか」を考えて設計することが、安定した開発には欠かせないと痛感しました。
AIに助けられたこと
それでもAIがあったからこそ進められた部分もたくさんあります。
・学習効率の向上：知りたいときにすぐ解説が得られる
・思考のサポート：複数の案を提示してくれるので選択肢が広がる
・短期間で成果が出せた：Liquidを理解し、テーマをカスタマイズできた
未経験の自分がここまで到達できたのは、間違いなくAIのおかげです。
今後に向けて準備したい知識
今回の経験から、次回同じようなプロジェクトをするなら、まずは以下を学んでおくべきだと感じました。
・HTML（最新のセマンティックな構築方法）
・CSS（FlexboxやGridによるレイアウト）
・Liquid（基本文法、テーマ構造、ファイル構造）
・Webデザインの基礎
・Shopifyの基本操作（商品登録、アプリ連携など）
・ECサイト運営（販売フロー、決済・配送など）
これらを身につけた上でAIを使えば、より効率的に進められるだろうと感じています。
まとめ
AIのおかげで、未経験からでもShopifyでのWebサイト構築に挑戦し、形にすることができました。
ただし同時に、基礎知識がなければAIに振り回されてしまうという現実も強く学びました。
AIは強力なアシスタントですが、最終的に判断するのは自分自身です。
これからAIを使って何かの挑戦する方にとって、私の体験が少しでも参考になれば嬉しいです。
