エイプリルフール「くまちょんショップ」制作の裏側|株式会社クラベス(CLAVES) 〜22世紀の話をしよう〜

こんにちは！クラベスの宮田です。みなさん、エイプリルフール企画のくまちょんショップを見ていただけましたか？まだの方はぜひ企画の記事を先に読んでいただき「くまちょんショップ」をお楽しみください！今回は本企画の制作の裏側をお伝えします。

企画のきっかけ

エイプリルフール向けに何か制作するというのはクラベスでは毎年恒例です。今回ディレクターを務めさせていただいたものの、実は入社丸1ヶ月とちょっと経ったばかりでのアサインでした！なにせ右も左もわからない...。そこでまずは社内のメンバーから広くアイディアを募ることから始めました。

そこで出てきたキーワードとして「ECサイト」「Udemyの講座」というものがありました。 ・ECサイトに強いクラベスだからこそECサイトで遊んでみる ・UdemyでAI（GitHub Copilot）講座を出すので絡められるとおもしろそう この2軸を組み合わせたらおもしろいものができそうということで方向性を決定！

そしてここに忘れてはいけないクラベスのマスコットキャラクターである「くまちょん」にも登場してもらうことにしました。

実際の開発の裏側

過去のエイプリルフール企画だと早くて10〜11月時点でプロジェクトが始動していることもあるのですが、今回、まさかの....工期1ヶ月！！！！2月中旬から動き出して3月中旬には完成させたいという圧倒的時間なしプロジェクトということが開始する前から見えていました。

そこで何に頼ったかというとAIです。今回は「くまちょんがAIに作らせたらどうなるか？！」というシナリオがあったこともあり、AIに作らせた風のサイトではなく実際にAIに作らせてみました。

AIを使って開発を進めると、なんとびっくり1日でプロトタイプができたんです。そのおかげでブラッシュアップのアイディア出し→サイトへの反映というプロセスを毎日踏むことができました。

ちなみに実際の指示出しはこんな感じです。最初にこの指示をしたのですが、

エイプリルフール企画でふざけたECサイトを作る事になったので、実装お願いします。あくまでおふざけ企画なので、触れてる感があればいいです。バックエンドは不要でフロントだけで完結させてください。コンセプトはとにかく使いにくい、クソUIで作ってください。

イメージと違うものが出てきたので追加の指示で調整しています。

出してもらったのはちょっとイメージが違います。会社のマスコット的なかわいい熊のキャラクターがいるのですが、そのイメージにあうもっと可愛くてポップなデザインにしてください。

普段の業務なら絶対やらない「使いにくさ」を出す指示がとても新鮮でした（笑）

調整後のアウトプットがかなり優秀で公開しているサイトのベースとしてしっかり活かせるものが出てきました。ここにあえて使いにくくなるような仕様になるように要素を追加して行く形で実装を進めました。

ここがおかしいよポイント

実際にサイトを見ていただくとわかりますが、おかしいところ満載になるように用意しました。たくさんあるので全て解説はできないのですが、私がお気に入りのおかしいポイントをご紹介します。

表示件数の小数点表示

素材反映したらスクショ貼る

いや、本当に半分になるんかい（笑）実際には絶対ない仕様でとてもいいですね。めちゃくちゃ見づらい。

クーポンコードで商品0円になる

ものすごくおめでたい感じが出ていますが、激高送料になるのでプラマイゼロどころかマイナスですね。

逃げ惑うランダム購入ボタン

つい捕まえたくなります。きっとあなたも捕まえられるかチャレンジしましたね？この逃げるボタンは社内でも好評でした。

これはおかしいというよりこだわりポイントですが、シャケ（カーソル）追ってくるくまちょんめっちゃ可愛いですよね。よだれが出てるあたりもポイントが高いです。

お遊び要素を考えるのは楽しかった反面、普段と真逆の使いにくくなることを考えるので違う脳みそを使っている感じがしました。二択で悩んだ際にはついつい使いやすい方の選択肢を選んでしまっていたので、「こっちのが使いにくよね？」という視点の議論がされていました。

おふざけを支えるガチなAI開発手法

このスピード感で形にできたのは、普段からAIと向き合っているからこそできるものです。

今回の開発では、AIを活用する前提で環境を整えながら実装を進めています。

その裏側を少しだけお話しすると、

AIがプロジェクトの前提や設計方針を理解できるようコンテキストドキュメントを整備しつつ、ATDDやBDDと呼ばれる「期待する振る舞い」を先に明確にしてから実装する開発手法を試しています。例えば、「この操作をするとこの結果になる」といった振る舞いを先に言葉にして、それをもとに実装していくイメージです。こうした AIを前提にした開発の進め方の模索は、この企画だけでなく、社内の他のプロジェクトでも取り組んでいます。

そして、クラベスでは GitHub Copilotを活用した開発のUdemy講座も公開しており、 AIを活用した開発体験向上のためのノウハウや実践的な使い方も紹介しています。

興味がある方は、ぜひこちらもチェックしてみてください。

下記リンクからアクセスすると、本記事読者向けのクーポン（4月30日まで）が適用されます。 https://www.udemy.com/course/github-copilot-tutorial/?couponCode=CLAVES-E2D04E1E72F02

終わりに

振り返ってみると、あっという間の1ヶ月だったなと感じています。入社してまだ間もないこともあり、メンバーとの関係構築もこれからという不慣れな環境の中で、さらにタイトなスケジュールでプロジェクトを進めていくことに、正直最初は少し不安もありました。ですが、周りのみなさんにサポートしていただきながら進めることができ、無事に予定通りリリースすることができました。完成したECサイトは、とてもかわいくて、しかもどこかクスッと笑えるような仕上がりになっていて、個人的にもお気に入りです。

来年はどのメンバーで、どんなアイデアの企画が生まれるのか。今から楽しみにしています！