BANAKANA COFFEEのECサイトが、今年の春にリニューアルした。具体的には今までのBASEからWordPressに変わった。
コードは読めない。もちろん書けない。デザインの専門知識もない、そんな私がどうやったのかというと、Anthropicが提供するAIツールClaude Codeを使いながら1ヶ月かけてなんとか形にした話を今日は書こうと思う。
「自分には無理かな」と思っている人に、少しでも参考になれば嬉しい。
本記事の目次
BASEをやめようと思ったきっかけ
ブログとネットショップが別々で、管理がバラバラだった
正直、BASEのサービス自体に大きな不満があったわけじゃない。ただ、BASEは「商品を売る」ことに特化したサービスで、私がやりたかったことのひとつであるブログには、あまり向いていなかった。
というのも、BANAKANA COFFEEではコーヒーの話や副業の話をブログで発信していて、将来的にはここも収益の柱のひとつに育てたいという思惑があった（コーヒー器具の紹介とか、やりたいことは結構ある）。でもBASEのブログ機能は良くも悪くも簡易的で、アフィリエイトのような使い方は難しい仕様だった。
だから結果として、商品を売るためのBASEと、ブログを書くためのWordPress、2つのサイトに分かれて運用することになっていた。
お客さんから見れば「コーヒーを買うサイト」と「ブログを読むサイト」が別々にある状態で、私から見れば管理する場所が2つある状態。記事を書いた後に「じゃあ商品ページも更新しよう」となると、全然違うサービスに移動しなければいけない、この面倒さがずっと頭の片隅にあった。
BASEでは思い通りのデザインにならなかった
もうひとつがデザインの話。BASEにはテンプレートがたくさん用意されていて、有料のものも含めるとおしゃれなデザインが本当に多い。ただ、あくまで「テンプレートから選ぶ」のが基本で、そこにオリジナリティを加えていくのは難しかった。
一応HTMLを編集できるカスタマイズ機能もあって、AIに聞きながら試してみたこともある。でも、意図しない部分が崩れたり、どこを直せばいいのかわからなくなったり、そういうことが続いて「自分の思い描いているデザインにはならないな」と感じることが多かった。
それに、商品ページはある程度いじれても、たとえば会計画面のような部分はそもそも手を入れられない。「ここをこうしたいな」というイメージが湧いても、それを活かせる場所が限られている。ここを改善したいという気持ちが、ずっとあった。
WordPressへの移行を決めた理由
きっかけは、YouTubeで知ったClaude Code
私はもともと、YouTubeでAI系の情報をよく見ていた。その中で、Claude Codeが出てきた瞬間から「これは今までのAIとは違うらしい」という話が一気に増えた。
調べていくと、Claude Codeを使えばホームページの制作が一からできるらしい、ということもわかってきた。それを知ったとき、今まで課題に感じていた部分も、これなら解決できるんじゃないかと思った。ECサイトを作り直そうかな、と考え始めたのはここからだった。
ブログとECサイトを、1つにまとめられるとわかった
さらに調べていくと、WordPressの中でECサイトを作れることもわかった。もともとBANAKANA COFFEEのブログはWordPressで動いていたから、そこにECの機能を乗せてしまえば、ブログとECサイトを1つのサイトで運用できる。
記事を書いた後に同じ画面で商品も確認できる、デザインもブログと統一できる、お客さんにとっても同じサイト内で買い物と読み物が完結する。それが実現できるなら、移行する価値があると思った。
「これは挑戦するしかない」と思った
正直、Claude Codeが実際どこまでできるのかは、やってみないとわからなかった。ただ、チャットでやり取りするだけの今までのAIと違って、PCの中に入って実際に作業をしてくれるというのは、体験として全く新しいものだったから、勉強も兼ねて触ってみたい気持ちが強かった。
ずっと改善したいと思っていた課題があって、そこに「自分でも一から作れるかもしれない」という環境が揃った。これはもう挑戦するしかないなと思って、移行を決めた。
コードを書けない私が、どうやって作ったのか
まず、Claude Codeの中に「AIのチーム」を作った
最初にやったのは、サイト作りではなくて体制作りだった。YouTubeで学んだ初期設定の考え方を参考に、Claude Codeの中に小さな会社のようなチームを作った。方針を決めるプロダクト担当、見た目を考えるデザイナー、実装をするプログラマー、そして仕上がりを確認するチェック役。そんなふうに、役割を分けたAIを用意した。
コードが書けない私の代わりに手を動かすのはAIで、私はやりたいことを伝えて、出てきたものを確認する。この分担が最後までずっと基本形だった。
いきなり作らせず、まず壁打ちから始めた
もうひとつ意識したのは、いきなり作ってもらわないこと。まずはプランモードという壁打ちのような使い方で、どういう目的のサイトなのか、BASEで何に困っていたのか、どんなデザインにしたいのか、ゴールは何か、というところをかなり細かくAIとすり合わせた。
この目線合わせをしっかりやったおかげで、一番最初に出てきたものが、割とイメージに近かった。もちろんそこから細かい修正はたくさんあった。でも「いや、全然イメージと違うんだけど」ということが一度もなかったのは、作る前のすり合わせがあったからだと思う。
チェック役のAIが、「作りっぱなし」を防いでくれた
チームの中にチェック役を置いたのも効いた。プロダクト担当のAIが方針を出して、デザイナーのAIが形にして、最後にチェック役のAIが「ここを改善した方がいい」と差し戻す。そこで直したものが私のところに上がってくる。
だから、私の手元に来る時点で変なものがほとんどない。AIが作ったものをAIがチェックするというと不思議な感じもするけど、この仕組みのおかげで、やってほしいことと全然違うものが出てくるということがなかった。
作業は平日の朝と夜、あとは週末
作り始めたのは4月に入ってから。平日は本業があるので、朝の時間と仕事が終わった後の夜、あとは週末を使って進めた。
とはいえ、ずっと手を動かしているわけじゃない。「こういうものを作りたい」と指示を出して、AIが作って、私が確認する。この繰り返しだから、隙間時間でも意外と進む。コードを書く時間はゼロで、考える時間が仕事だった。
ひとつリアルな話をすると、Claude Codeには利用の上限がある。最初は月3,000円の一番安いプランでやっていたんだけど、集中して作業すると上限に引っかかって「何時間後まで使えません」となってしまい、作業が止まる。それがもどかしくて、途中から月15,000円のプランに上げて一気に進めた（完成した後は元のプランに戻した。移行期間だけ上げる、という柔軟な使い方ができるのは良かった）。
実際にやってみてどうだったか
PCとスマホで表示が違う問題、これが一番大変だった
作業を進めていて一番時間を取られたのが、PCとスマホで表示が違うという問題だった。
PCで確認して「よし、いい感じ」となっても、スマホで見ると何かがずれている。逆にスマホで整えたらPCのレイアウトが崩れる。この繰り返しが思った以上に続いた。ECサイトはスマホで見るお客さんも多いので、どちらも妥協できないという難しさがあった。
Claude Codeと何度もやりとりしながら少しずつ調整していったけど、「あ、今度はこっちがずれた」という状況が続くので、ここに一番根気が要ったと思う。
意外なことに、「できなくて困った」はなかった
やる前は技術的な壁を覚悟していたけど、振り返ってみると「これがやりたかったのにできなかった」ということは、実はなかった。
むしろ逆で、「こんなに何でもできるんだ」という驚きの方が大きかった。
本当に悩んだのは、「どこまでやらないか」だった
何でもできるとなると、今度は別の悩みが出てくる。機能は、つけようと思えばいくらでもつけられる。でも、機能を増やせば増やすほど、お客さんは買うときに迷いやすくなるし、サイトも操作しにくくなっていく。
だから「どの機能を入れて、どれを入れないか」は、制作の中で一番考えたところだと思う。技術ではなくて、判断の問題。わかりやすさを守るために、やれることをあえてやらない。この線引きが、コードを書くことよりずっと難しかった。
全部を一度にやらず、商品を絞ってスタートした
範囲についても同じで、前のECサイトで改善したいと思っていたギフト系、オリジナルパッケージ、個包装は、一旦ストップすることにした。ここの改善までやろうとすると、時間がかかりすぎて全てが中途半端になると思ったからだ。
まずはECサイトを完成させることを第一優先にして、通常のコーヒー豆と、通常の袋で作れるドリップバッグに絞って移行した。あわせてパッケージのデザインも一新したから、どの段階でサイトを公開するか、優先順位はかなり考えた。「まずここから」という範囲を決めてスタートしたことで、1ヶ月でなんとか形にできたと思っている。
（ちなみにオリジナルパッケージは、近々リニューアルオープンする予定。以前より使いやすく、価格も抑えられる形になりそうなので、ここは期待していてほしい）
気になるお金の話
BASE時代にかかっていたお金
BASEは初期費用も月額も無料で、商品が売れたときに決済手数料3.6%＋40円とサービス利用料3%がかかる仕組みだった（スタンダードプランの場合）。つまり、売れるまでは1円もかからない。この身軽さは、始めたばかりの頃には本当にありがたかった。
WordPressに移行してからかかっているお金
今は、レンタルサーバー（ConoHa WINGを使っている）のサーバー代が月1,000円前後。ドメイン代は契約の特典で無料になっている。売上に応じた手数料はなくなって、毎月の固定費に変わった、というのが大きな違いだと思う。
これに加えて、制作期間はClaude Codeの利用料がかかった。さっき書いた通り、普段は月3,000円、移行期間だけ月15,000円という使い方。どちらが得かは売上の規模やスタイルによって変わるから一概には言えないけど、「手数料型から固定費型になった」というのは、移行を考えている人には大事なポイントかなと思う。
（※料金や手数料はどちらも執筆時点のもの。最新の情報は各サービスの公式サイトで確認してほしい）
移行してみてわかったこと
思いついたことが、すぐ形にできるようになった
移行して数ヶ月経って、一番変わったなと思うのはここ。頭に思い浮かべた「こうしたいな」が、割とすぐに形になる。
これはサイトがWordPressになったからというだけじゃなくて、やっぱりClaude Codeの存在が大きい。WordPressは必要な機能をプラグインで追加していく仕組みなんだけど、そのプラグインのファイル自体をClaude Codeが作れてしまうから、やりたいことの自由度がすごく高い。準備を進めているオリジナルパッケージも、「こういう形ならもっと良くなるかも」というイメージを話すだけで、かなりスムーズに進んでいる。
しかもAI自体がどんどん進化していく。最近もFableという新しい頭脳が出て、また一段とできることが変わってきた。サイトを作って終わりじゃなくて、サイトと一緒に道具も成長していく感覚がある。
それでも、初めてなら私はBASEをすすめる
こんな話を書いてきてなんだけど、BASEが使いにくいサービスだったとは全く思っていない。初めてECサイトを始めるなら、BASEは本当に使いやすい。登録して、商品を登録して、すぐ売れる状態になる。AIに課金しなくても、その日のうちにスタートできる。
機能に制限があるからこそ迷わない、という良さもある。私の場合は「ブログと一緒に運営したい」「デザインを自分でコントロールしたい」という方向に状況が変わってきたから移行しただけで、サービスの良し悪しじゃなくて、自分の状況との相性の話だった。
とにかくやってみることが大事だと思った
移行前は「1ヶ月でできるのかな」「うまくいかなかったらどうしよう」という不安があったのは正直なところ。でも、やってみて気づいたのは、完璧にできなくてもとりあえず動く状態にしてしまうことが一番大事だということだった。
そして1ヶ月でやり切れた一番の理由は、シンプルにAIのおかげだと思っている。特に、作り始める前の壁打ちで目線を合わせたこと。最初に出てきたものがイメージから大きく外れていなかったから、あとは細かく直していくだけで良かった。急がば回れじゃないけど、「作る前」に時間をかけたことが、結果的に一番の近道だった。
おわりに
コードが読めなくても、専門知識がなくても、自分のブランドのECサイトを自分で作ることはできる、ということを今回実感した。
「難しそうだから無理」と思っていたことが、やってみたら選択肢になっていた。それが一番の収穫かもしれない。
これからは、オリジナルパッケージをしっかりオープンさせること、そしてブログもしっかり書いていくこと。普段からコーヒー器具もいろいろ使っているから、そういうものの紹介もしていきたいし、会社員をしながら副業でコーヒー屋をやっている身として、副業という観点の話も書いていけたらと思っている。
新しいECサイトを作ってから、もう数ヶ月が経った。その間にもAIは凄まじいスピードで進化しているので、今から始めれば、私のときよりもっと簡単に作れると思う。実際に私も今、ECサイトの機能拡充の準備を進めている。
もしこの記事を読んで「ホームページ、自分でも作れるかも」と思ってもらえたなら嬉しい。そして、まだAIに触ったことがない人こそ、無料のものでもいいから一度触ってみてほしい。やれることが日々増えている今、AIに触れておくことは、自分の引き出しと可能性を広げてくれると思うから。
BANAKANA COFFEEのECサイトは現在 banakana-coffee.com で公開中なので、ぜひ覗いてみてください。
