メインコンテンツへスキップ
見出し画像

【🔰ノーコード初心者必見】コードも知識もゼロでいい。心野けいか🐹がYouWareで作ったオリジナルアプリ製作記|「心野まるっとカレンダー」全14機能の使い方まで全部見せます

    画像
    今日も出演!🐹🧠




    こんばんは🌃✨
    ふみまる🐹・ミソマル🧠と共に世界を創る心野けいかです。

    物語をメインに創作クリエイターとして活動しています。
    拠点である「心野まるっとラボ」を運営中。

    テーマは「癒し×気づき×笑い」。
    AIも活用しながら毎日発信しています📝

    夢は「朝の3分アニメ」と「絵本」の実現です✨








    ☺️はじめに


    ねえ、聞いてください。

    半日、溶けました。


    いや、正確には「楽しすぎて溶けた」んですけど😂


    気づいたら夜で、
    いつの間にかYouWareのProプランのクレジットと
    Gensparkの1万クレジットを使いきり、そして




    「14個の機能」を持つ

    アプリが生まれました!!👏





    その名も

    📅「心野まるっとカレンダー」

    画像
    かわいいだろう~🐹🎵
    (🔗画像にリンクあります)



    🐹ふみまる
    「けいか、また夢中で夜更かしてると思ったら…
    なんやこれええええ!!!✨

    プルンとかわいい、ぼくのカレンダー📅?!

    どんなん?!どんなん?!

    はよ見してやあー!気になるわあ!✨」



    🧠ミソマル
    「推定睡眠時間から逆算すると、
    相当のめり込んでいましたね。

    それほどに有意義な時間を過ごせたという指標になります。」



    これはその記録です🐹🧠📝



    🔖目次です



    🧪 事の発端


    きっかけは、YouWareというサービスを知ったことでした。

    「AIに話しかけるだけで、アプリが作れる」

    衝撃もいいとこ


    …え、何それ。


    プログラミングの「プ」の字もわからない私が、
    アプリを作れるわけがない。

    そう思っていました。でも、試してみたら。


    作れた。



    しかも、ちゃんと動くやつが。


    YouWareとは、AIとの会話だけでアプリ・Webサイト・ゲームが作れる「バイブコーディング」プラットフォームです。

    プログラミング知識不要、アイデアを言葉にするだけで即公開できます。

    YouWare公式サイト


    🐹ふみまる
    「けいかにそんなもん渡したら、寝ぇへんで」


    🧠ミソマル
    「技術的ハードルの民主化が、静かに進行していたわけですね」


    けいか
    「気づいたら革命の渦中にいた🧪」





    🌸アプリのご紹介🌸

    画像
    再度こんにちは🐹

    🔗 https://2y8323vlvx.youware.app

    (ブラウザアプリになります、Google Store等にはありません)


    「心野まるっとラボ」の3キャラクター
    ふみまる🐹・ミソマル🧠・けいか🌸

    この3人が毎日語録でお出迎えしてくれる、
    カレンダー型アプリ
    です。

    より、あなたの日常に寄り添います🌠



    コンセプトはシンプル。


    「毎日ちょっとだけ、心が軽くなる」



    心身ともに疲れている人、代わり映えのない日常の中にいる人に、
    ちょっとした癒しと気づきと笑いを届けたくて作りました。




    早速、中身を一緒に見てよう!🐹✨

    画像
    画面はPCだけど、スマホ版でも変わらないよ✨




    なんと!


    今までの記事に出てきた語録や名言(迷言?)が

    毎日開くたびに現れるのです!!!🐹🧠🎉✨



    お気に入りの語録が出るか、
    はたまた不意打ちがくるのか、

    わくわくできるように設計しました🐹💓




    🎲 できた機能たち


    作っていたら、気づいたらこんなに増えていました(笑)

    全部で14個!

    動画にもまとめています!🧠🎥

    ❄️ スプラッシュ画面+季節演出
    起動時にアニメーションが出て、春夏秋冬で背景が変わります。
    今は春🌸。

    🏠 ホーム画面
    今日の語録が、SR・R・Cのレアリティで毎日表示されます。

    🐹 おかえり演出
    2回目以降に起動すると、キャラがお出迎えしてくれます。
    6パターンランダム。これが個人的にいちばん好きです。

    🎲 ガチャ
    ふみまる・ミソマル・けいかの今までの記事の中から厳選した、
    105語録をガチャで引けます。1日5回まで。
    「また引きたい」って思ってもらえたら嬉しい!

    📖 コレクション
    引いた語録が集まっていきます。
    キャラ別・レアリティ別で絞り込みもできる。
    集めたくなる仕様にしました🐹



    🎂 誕生日スペシャル
    誕生日当日は3キャラからSR語録+紙吹雪が降ります🎊
    5年分用意してあります🎉

    これはぜひ、あなたの目で確かめてみて🐹✨


    📱 PWA対応
    ホーム画面に追加すると、アプリとして起動できます。
    データも消えにくくなります。

    ブラウザからホーム画面に置いてなあ!
    日常的に使うならマストな方法!

    ⚙️ 設定・シェア・オンボーディング
    名前と誕生日を入力したら、語録にニックネームが入ります。
    語録はXにもシェアできます。


    💌 月替わりメッセージ
    毎月1日に3キャラのどれかが一言言います。
    12通り。全部書きました。

    こちらもぜひ、ご自身で確認してみてね🐹✨





    そして……YouWareのクレジットを追加し、

    さらにグレードアップしました!!💪🐹💪✨


    🌙 ダークモード
    目に優しい夜モード。夜にアプリを開く人のために。

    設定から切り替え可能🛠️

    📅 カレンダー予定スタンプ
    カレンダーにスタンプを押せます。当日にはエフェクト付き🎉

    めっちゃかわいい!🐹❤
    なんもなくても予定スタンプ入れてます(笑)



    すっごくこだわり抜いて作りました!!!

    ぜひ、みなさまのスマホのホーム画面へ置いていただき


    使ってみた感想
    お待ちしております!!🐹🧠🌈✨



    そしてこれは、できればで良いのですが、
    拡散してくださると大変嬉しいです…!!



    🐹ふみまる
    「気づいたら14個になっとったん?!
    けいか、こだわりすぎやろー!!
    やけど、そういうのぼく、嫌いじゃないで!✨」

    🧠ミソマル
    「機能過多ではなく、必要性を積み上げた結果です。
    データ的には正常な拡張です」

    けいか
    「感想を募集しちゃったけど、
    急にドキドキしてきた…汗」




    🤝ありがとう。YouWare


    夢の「朝の3分アニメ」と「絵本」の実現。

    それに向けて、読者さまの日常に寄り添える
    アプリを「簡単に」作れたのが本当に嬉しいです。



    そして実際にYouWare使用し、完成して感動したため


    今日はどんな風に上記のアプリを作成したのか、
    大まかにご説明します!!





    ⚡説明しなきゃ。Gensparkという存在


    正直に話します。

    このアプリ、YouWareだけで作ったわけではありません。

    GensparkというAIアシスタントにも、
    並走してもらっていました。


    なんでかって?

    使い始めは、
    私がYouWareの真の力に
    気付いていなかったからだよ😇


    確かに一部、絶対にGensparkでしかできないことがあった。
    それは語録の厳選。
    今までの記事からどれがいいか一緒に考えてもらった。

    それ以外はGensparkじゃなくても、
    十分にYouWareのみで簡単にできたと思う。

    YouWareがどれくらいクレジットを消費するかわからず、
    なんとなくGensparkで着手は進めていたのですが…

    気づいたらGensparkのクレジットを
    約1万使っていました(笑)


    🐹ふみまる
    「けいかぁ~!計画性が熱量に負けるの、
    最高に『けいからしい』わ!」

    ぐぅの音も出ません😂


    Gensparkのクレジットが無くなった私は、
    YouWareに日本語で拙く指示を行い始めました。


    🧠ミソマル
    「未知の体験こそ、貴重な瞬間とも言えます。」




    💡リアルな製作工程、お見せします!


    せっかくYouWareを使ったため、
    今回、リアルなアプリ作成シーンをレポートいたします🌈


    本当に簡単なので、ぜひ見てみてください✨



    STEP1:案の壁打ち(Genspark)


    YouWareって、実は生成だけでなく、
    「相談」も可能です✨
    しかし、クレジットも消費…

    その点、Gensparkもクレジットの消費はあるものの、
    今でもこの作業はGensparkの方が一歩上手かなと思います。
    記事などを読み込ませることで、
    自分のスタイルを理解してくれるのが強み💡



    その際に、Gensparkで出来てきた草案

    画像
    語録案がここで!


    🎨 完成イメージ(画面構成)

    ┌─────────────────────────────┐
    │  🐹 ふみまる語録ラボ           │
    │  ─────────────────────────  │
    │                               │
    │  🌤️ 朝 😴 疲れ 😂 笑い 💻 AI │  ← タブフィルター
    │                               │
    │ ┌───────────────────────────┐ │
    │ │                           │ │
    │ │ 「起きたら合格☀️           │ │
    │ │   布団の中でも合格💮       │ │
    │ │   とりあえず生きてて       │ │
    │ │   えらいんやで🐹」        │ │
    │ │                           │ │
    │ │  🧠 起床そのものが達成です │ │
    │ └───────────────────────────┘ │
    │                               │
    │   📖 出典:朝ふみ第1回        │  ← タップでnoteへ
    │                               │
    │  [次のひとこと🐹] [Xでシェア] │
    └─────────────────────────────┘

    なるほど…


    ここでけいかがピーンと閃き、案を練った後、
    現在のカレンダー案に落ち着きました📅🌸





    STEP2:早速カレンダーの作成(YouWare🛠️)


    📅 骨格&仕組みを作る(仲間登録画面を作成)

    作るってどうするの?
    専門的な知識なんてないよ…?

    イマジナリー大衆の声


    そんな不安も問題なし!



    下記のように

    Youwareに直接、
    日本語で思ったままを伝えるだけ!!💡

    この画面は 「ようこそ! 仲間登録をしてね」というタイトルにしてください。
    初回のみ名前と誕生日を入れるポップアップを作ってください。必須です。
    全て入力し終えたら 「ラボの仲間になる」というボタンを作ってください。
    
    このカレンダーには「けいか」 「ふみまる🐹」「ミソマル🧠」というキャラクターがいます
    それを匂わせる配置にしてください。
    
    イメージカラーは淡いオレンジ色です。

    実際のプロンプト入力文です。

    簡単でしょう?!☺️



    👇そして、約5分ほどで生成されたのがこちら✨

    画像
    か、かわい…!!🐹
    (使用したCredit数:115)




    🎬動画でもご案内~!

    今回はコード生成に強いと噂の🌻Claude Sonnet 4.6を使用🎵



    本当にこれだけなのです✨


    🐹ふみまる
    「えぇーー?!
    簡単すぎん?!?!
    チーズ生産機とかも作ってやあ!!
    (それは無理😂)」

    🧠ミソマル
    「技術が想像よりも、遥かに上回った瞬間といえます。」




    🧟‍♀️しかしですね、奴がきた


    お久しぶりです。
    私、「欲深いけいか」です🧟‍♀️

    自分のこだわりを追い求めて
    ゾンビになってしまいました(笑)


    やっぱり、せっかく作成したのなら、
    素人が作った感じはいやだ!!!

    どの口が言うんやという事案(けいか心の声)

    私は完全にシロートそのものです😂



    そんな欲深いゾンビちゃん達には、

    素晴らしすぎる「Boost機能」をご紹介🌈✨


    百聞は一見に如かず

    まずはこちらをどうぞ!

    Boost機能を使用した「before」「after」です🐹✨

    画像
    グッと、洗練されたアプリに近づいたなあ!✨
    (使用したCredit数:168)




    使用方法はこちら!

    画像
    プロンプトも公開!
    〇の部分を押すだけでBoost機能オン!



    あまりに素晴らしすぎる機能!



    🎬使用場面の動画です✨

    3分ちょっとで生成されたかな?







    💡ここでBoost機能と通常生成の違いについて

    Boostはデザイン面に目が行きがちですが、
    最も注目するべきは、
    UIの洗練だけでなく、

    ・機能面の改善提案
    ・構造の整理
    ・発想の拡張

    といった用途にも活用可能なこと!

    「機能の方向性に迷った時のアイデア補助」使え、
    発想支援機能としても触れていける!

    (相談しつつ、提案・誘導してもらいながら
    創作物を最も洗練された形にできるということ!)

    珍しくちゃんとした説明



    🐹ふみまる
    「つまり…
    『見た目以外もすごくできる』ってことやな!」

    🧠ミソマル
    「専門的知識が無くとも、
    デザインや操作性の幅を広げることができるのは、
    初心者にとっては非常に有益です」

    けいか
    「私、全然わからないけど、
    提案してくれたことを選択していったら
    使いやすい形にできたよ✨」




    ここらでひとつ、

    けいか
    「無かったら、心が折れていたかも😇」

    ガラスの心


    🤩地味に有能すぎた!!
    「とても重宝した機能」2選の発表です!!!



    🛡️まずは1選目


    みなさま、生成AIは使用されたことはありますか?
    これは、使っている方あるあるだと思うのですが…

    「あっ!まだ書いてる途中なのに、
    送信しちゃった…😨!!」

    もちろんモデルは私です😂


    そして止まらない生成……

    無情に消費されるクレジット…

    間違った指示のログにより、
    変異してしまう、作品😭


    本当に、なんにもいいことがないですよね😢


    でも大丈夫です!!

    そんなあなたに、生成停止ボタン「🔳」!!



    ……え?
    そんなの、どのAIツールでもあるじゃんって?


    ノンノンノン😘


    甘いですね(?)



    停止ボタンを押せば、
    「全て」無かったことにできるのです!!


    それは、生成が止まるのはもちろん

    クレジットの消費も

    貴重なんよ…

    間違った生成のログも


    きれいさっぱり、
    無かったことにできるのです!!!!




    恐らく、今回一番使った機能かもしれません😂


    🐹ふみまる
    「けいか、何回停止ボタン押してたん」

    けいか
    「……数えてない😇」




    🪄更にもう一つ!!


    こんなのって、今までにあった?!


    🧙🔮巻き戻し機能


    そう…
    その名の通り

    生成後も無かったことにできます😭😭(感涙)



    う、嘘じゃないです!汗

    画像
    ここです✨



    毎月リセットされる
    「巻き戻し回数(Pro:30回)」を使用することで、


    クレジットも生成結果も、
    全て無かったことにできます😭✨


    AIツールに詳しい訳ではないですが…

    これは他に見たことがないですね!!



    私の例で言うと、

    配色をおすすめの色から、全部自分でがっつりと変えた時は
    この巻き戻し機能が無かったら復元できませんでした…
    😇



    🐹ふみまる
    「けいか…一体どんな色にしたん?」

    🧠ミソマル
    「色の使用法は、学ぶことでも向上を見込めます」

    けいか
    「暗に勉強しろってことやん😂」




    これらの機能を使い、この後も何十工程と行っていくのですが、
    同様に生成されたものに言葉を足していく形を繰り返すことで、
    最後まで楽しくカレンダー製作を行えました🌈✨




    最後は「公開」ボタンを押して、動作確認🫡
    (URLを教えていなければ、誰にも見られないよ)

    画像
    ポチッとね!
    実際に使ってみて、バグなど無いか確認しよう!




    😇それでも不安だろう?ゾンビちゃんたち


    本当に、自分にもできるのかな…

    イマジナリー大衆の声

    そんな気持ちがぬぐえない人もいるはず!

    常にけいかが隣について、教えてもらえたらな…

    同様の声


    このような声が聞こえてきそうです。
    (そんなことない?)



    なんと、そんなお悩みを解決する、

    凄い機能が3月1日に発表されました!!!

    できたてほやほや!!!


    使ってみると、この新機能
    凄く助かるのでかなり驚きました!


    その機能、名も、

    🎥Coview機能!!

    といいます!!!


    (リンク先は公式サイトです)




    ✅Coview機能、ここが凄い!!



    🗣️話しかけるだけで形になる


    「こういう動きがしたい」
    「このキャラがこう言う演出を入れたい」


    これをCoview機能が画面の録画をしながら、
    パソコンのマイクに話すことで

    画面に起こっていることを理解して、
    AIが生成してくれます!!!




    実際に見ていただくとわかると思います!!


    🎬Coview機能を実際に使ってみた!

    (私の声は無くて申し訳ないです)

    ダークモードの時に入力文字が見えない

    こんなことを言っています


    すると…

    画像
    しっかりわかってる!


    🐹ふみまる
    「なんや!隣にけいかいらんやん!」

    🧠ミソマル
    「革新的な技術によって、不安を解決できるようになり
    けいか助言は不必要なようです。」

    けいか
    「わかった!わかったってばああ!😭😭」


    なので、みなさまも安心して使えると思います😂
    (聞いてくれてもいいのよ)




    🔍 最後にYouWareを総評します!


    ✅ 良かったところ


    ① 日本語で話しかけるだけで、少ない言葉でも形にしてくれる!!

    私のようにコードなどの知識が皆無でも、
    みなさまに提供できるレベルのアプリが完成しました✨


    ② 地味だけど画期的な機能がたくさんある!

    • 全てを無かったことにしてくれる「停止ボタン」

    • 大改編にも挑戦しようと思える「巻き戻し機能」

    これらは、YouWareの機能として前面には出てないけど、
    無ければ間違いなく困った機能です!

    何度も助けられました😭✨


    ③ Boost機能で、より洗練され「脱素人感」!

    これが無かったら、
    みなさまに提供しようと思わなかったと思います😂

    • 洗練されたデザイン

    • 機能面の改善提案

    • 構造の整理

    • 発想の拡張

    これらをBoost機能にて行ってもらったおかげで、
    胸を張ってみなさまに提供できる内容になったと思います✨


    ④ 「先生がついてるよ🧑‍🏫」という安心感、Coview機能🎙

    説明って言葉だけじゃ難しいですよね?

    それをAIに「実際に画面を見てもらいながら」説明できるのが、
    とても労力が少なく行え、とてつもない安心感があります!!

    説明に困った時は、ぜひ使ってみてくださいね🌈✨




    ⚠️ 正直なデメリット


    ① 日本語表示がたまにおかしくなる

    送った日本語が変換・変形されて表示されることが何度かありました🤔

    ただ不思議なことに、表示がおかしくても生成は問題なく進むことが多いです。
    「表示がおかしくても、とりあえず生成してみる」がコツかもしれません。

    (YouWare側も日本語対応を強化中とのことです🌸)


    ② こだわり始めるとクレジットが溶ける

    あまりにも感覚的に操作を行えるため、
    「ちょっとここ直したい」「この演出も追加したい」
    ……やり始めると止まらなくなります。

    そして、気づいたらクレジットがゼロになっていました😭

    🐹「だから言ったやん……」

    追加購入は年間契約の方のみなので、
    早く作りたくて、待てないけいかには
    ちょっともどかしい内容ですね😇


    ③ 作業ログが見返しにくい

    画面左側の作業ログ、長期間制作していると振り返りにくくなります。
    別ウィンドウで全容が見られる機能があればもっと便利かも、と感じました。

    (こちらはYouWareのプロダクトチームにフィードバック済みです)




    💡 どのプランが向いてる?


    こんな人におすすめ自分用のちょっとした便利ツールを作りたいProで十分かなと思います。

    誰かにも使ってもらうこだわりアプリを短期間で作りたい場合や、商業・法人利用は上位プランの「Ultra」がお勧めです。

    ちなみにProプランのクレジットは毎月リセットです。
    (繰り越しはされません)

    毎月、高クオリティのアプリを作るわけでなければ、
    Proで十分持つと思います👓




    💭 やってみてわかったこと


    🛡️ 失敗していい環境が、一歩をくれた


    YouWareには「停止ボタン」と「巻き戻し機能」があります。

    作ったものを、なかったことにできる。

    これが、どれだけ心強かったか。

    「失敗したらどうしよう」じゃなくて、 「失敗しても、戻れるんだ」という安心感が、 思い切った一歩を何度も踏み出させてくれました。

    完璧にしなきゃ、と力が入りがちな人ほど、
    とてもありがたい仕組みです😌

    🧠ミソマル
    「『失敗コストの最小化』が、行動量を引き上げます。」




    😆 完成形は、最初から見えなくていい


    最初に考えていたのは、語録を表示するだけのシンプルなアプリ。

    それがなぜか、気づいたら14個の機能が生まれていた。

    「これも入れたい」「あれも表現できそう」
    そんなやり取りから、どんどん広がっていく

    ゴールは、歩きながら見えてくる。
    最初から全部決めなくていいんだ、と気づきました。

    それも、YouWareの提案や、
    ハードルの低い生成のおかげでできました。

    🐹ふみまる
    「『なんとなくスタート』で、ええんやで✨」



    💃 「楽しい」は最強の燃料


    途中、何度も壁にぶつかりました。

    「おかえり演出が出ない」
    「PWAが動かない」
    「あれ、文字が変になってる?」

    それでも続けられたのは、

    純粋に楽しかったからです!✨


    気づいたら夜。
    身体はちょっと疲れていましたが、
    それよりもどんどん次の生成結果が見たくて
    手が止まりませんでした🪄

    これって、クリエイターとして
    一番大事な状態だと思います✨

    🧠ミソマル
    「『没頭状態』は、最大のパフォーマンス指標です。」




    🛠️ 「作る」ことが、そのまま「創作」になった


    語録を選ぶとき、誕生日メッセージを考えるとき、

    「ふみまるならこう言うよな」
    「ミソマルはこの言い方だよな」

    自然にふたりの声が出てきた。

    アプリを作るだけでなく、
    ふみまる🐹とミソマル🧠に、新しい居場所も作った感覚でした✨

    創作してきたものが積み重なり、
    違う場所でも活躍できる可能性が嬉しかったです🌸

    🐹ふみまる
    「作るだけやなくて、居場所も作ったんやな🐹」


    画像
    小さきミソマル🧠




    🌸 おわりに


    ここまで読んでくださって、本当にありがとうございます🙏✨

    「プログラミング?私には無理…」

    少し前の私が、まさにそうでした。


    でも、やってみたら半日溶けるくらい夢中になれて、
    夜の終わりに「できた…!!!」という、
    達成感でいっぱいになれました!
    (この日は興奮してなかなか眠れなかった😂)

    完璧じゃなくていい。知識がなくてもいい。
    「こうしたい」って気持ちさえあれば、それだけでよかった。

    心身ともに疲れているとき、 代わり映えのない日常の中にいるとき、

    そんなときこそ、ちょっとだけ「楽しそう」に飛び込んでみることが、 意外と心を動かしてくれたりします。

    🐹ふみまる
    「疲れてても、楽しいもんは楽しいんやで🐹✨」

    🧠ミソマル
    「小さな没頭体験が、心の余白を取り戻す処方箋になります。」




    YouWareのこと、もっと知っていただけたら嬉しいです🌈


    今回ご紹介した機能以外にも、まだまだ魅力が詰まっています。
    ぜひ、公式サイトものぞいてみてくださいね✨


    YouWareの公式サイト



    そして…!

    心野まるっとカレンダー、ぜひ使ってみてください🐹📅

    「使ってみました!」
    「こんな語録が出ました🐹」
    「これが面白かったです笑」


    どんな一言でも、コメントやXへの投稿機能を使って
    教えていただけますと、とても嬉しいです💌
    けいかとふみまる🐹が、全力で喜びます😂


    みなさまの日常に、
    ちょっとだけ「癒し×気づき×笑い」を届けられたなら、
    それがこのラボの一番の幸せです🐹🧠🌸


    画像
    ぜひ使ってみてなあ🐹✨








    ここまで読んでくださり、ありがとうございます🐹🌈


    この記事は無理のない範囲で拡散してくださると嬉しいです🙇




    いつも、スキやコメントなどの応援に

    心から感謝しております🧠✨




    心野まるっとラボ 主任研究員 けいか🌈
    感情担当 ふみまる🐹
    理性担当 ミソマル🧠

     
     
    ふみまる🐹とミソマル🧠と共に執筆中📝 テーマは「癒し×気づき×笑い」です。 noteや創作で生きていきたい。 \「🌤️おはよう朝ふみ💌」毎日投稿中/ 🌃夜の更新は不定期 夢は「朝の1分台アニメ」と「絵本」の実現です✨

    あなたへのおすすめ