1. ManaのWebクリエイターカフェ
  2. #144 Mana的Webデザインニュー..
#144 Mana的Webデザインニュース7月号〜AI活用アプリ開発の挫折と学び、ドメイン知識の大切さ〜
2026-07-31 27:03

#144 Mana的Webデザインニュース7月号〜AI活用アプリ開発の挫折と学び、ドメイン知識の大切さ〜

spotify apple_podcasts

個人開発中のWebアプリ事例や失敗談、画像生成AIの高度なプロンプト設計ノウハウを共有。 制作の高速化が進む現代だからこそ重要となる「コンテンツの育成」や専門的な「ドメイン知識」の必要性について語ります!


<今回のトピック記事>

Webアプリ企画 第4弾

https://www.webcreatorbox.com/blog/teapair

Webアプリ企画 第6弾

https://www.webcreatorbox.com/blog/new-tab-countdown-timer

Webアプリ企画 第7弾

https://www.webcreatorbox.com/blog/gfonly


<番組へのメッセージはこちらから>

https://bit.ly/manawebcafe

Xハッシュタグは「#ウェブカフェ


<トークテーマ>

・2027年「ワールドマスターズゲームズ」に出場決定

・FP資格取得に向けた挑戦

・自身の声によるTTS(音声読み上げ)開発の挫折

・当事者目線から生まれたグルテンフリー店舗検索サイト

・ChatGPTを活用した最新Webデザイン&画像生成テクニック

・9月開催「Web Creator Podcast Day 2026」について

・半導体企業の巨額投資に見る、都市開発と経済の変化

・「ドメイン知識」と「プロダクトの育成」の重要性


<ManaさんX>

@chibimana

<Webクリエイターボックス>

https://www.webcreatorbox.com

<『CSSとJavaScriptで作る動くUIアイデアレシピ』>

https://amzn.asia/d/ei0g7Wp

<『1冊ですべて身につくPhotoshop入門講座』>

https://www.webcreatorbox.com/blog/wcb-book8

See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

感想

まだ感想はありません。最初の1件を書きましょう!

サマリー

今回のエピソードでは、Manaさんが自身の近況として、国際大会への出場決定やFP資格取得への挑戦について語ります。また、AIを活用したWebアプリ開発の進捗状況や、自身の声を使ったTTS(音声読み上げ)アプリ開発の挫折経験、そしてグルテンフリー店舗検索サイト「GFオンリー」の制作秘話が明かされます。さらに、ChatGPTを用いた画像生成の高度なテクニックや、制作の高速化が進む現代における「ドメイン知識」と「コンテンツの育成」の重要性についても深く掘り下げています。最後に、半導体企業の巨額投資がもたらす都市開発と経済の変化にも触れ、多岐にわたる話題でリスナーを魅了します。

近況報告:国際大会出場と資格取得への挑戦
ManaのWebクリエイターカフェ。
WebデザイナーでWebクリエイターBOXを運営しているManaです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、Mana的Webデザインニュース7月号です。
前回の収録から2ヶ月くらい経ってるんですかね。
なので、いろんなお伝えしたいことも増えているので、
ここでまとめていけたらなと思っております。
それではまず、私の近況についてお話ししていきましょう。
毎回冒頭で、何かしらの運動の話。
私、マラソンだったり、自転車に乗ったり、泳いだりとか、いろいろしているんですが、
そういうお話になりがちです。で、今回もそうです。
来年、2027年ですね、ワールドマスターズゲームスっていう国際大会が日本で開催されます。
これが4年に1回開催される国際大会なんですね。
30歳以上の方だったら参加できるというようなもので、そちらに私トライアスロンの種目で応募しまして、
で、1回抽選外れちゃったんですけど、また再募集があって、そちらの方で当選しましてですね、
来年徳島だったかな、徳島県で開催されるトライアスロン競技の方で出場することになりました。
トライアスロンはなんやかんやで毎年日本国内の大会には出てるんですが、
初めての国際大会ということですね。今からちょっとドキドキしながら練習しているところです。
よかったら皆さんもですね、ぜひチェックしてみてください。
あとはまたこちらですね、webとは関係ないお話だったりするんですが、新しくですね、資格を取ろうかなと。
FPというファイナンシャルプランニング技能士の資格をちょっと取ろうかなと、勉強しようかなと思っているところです。
年金、税金、不動産、相続などなど、いろんなお金に関する専門知識の勉強ですね。
私がweb系のお仕事だったり、執筆のお仕事だったりする中で、ちょっとまあお姉さんになってきましたので、
お金にまつわるお話も周りの方でもですね、結構聞くことになりましたので、
ちょっとしっかり勉強してみようかなと思っているところです。
もし私FPの資格持ってるよという方いらっしゃいましたら、勉強方法だったり、こういうふうに役立てますよというお話聞けたら嬉しいなと思います。
ぜひぜひ教えてください。
AIを活用したWebアプリ開発の進捗と挫折
次に最近の私のお仕事状況についてお話ししていきましょう。
以前もお話ししたかなと思うんですが、私今年ですね、2026年はwebサイトとかwebアプリを10個作ろうという試みをしているところです。
AIを使って一月に一つ何かしらリリースしたいなという感じで、結構爆速でですね、いろんなサイトを作っています。
前回お話ししたのがAIプランナーだったり、富士ヒルっていうロードバイクのですね、ヒルクライムのタイム表っていうのを開発したよってお話ししたかなと思うんですが、
その後今現在で全部で7つ作って6つリリースしたっていう感じですかね。
一つリリースできなかったものがありまして、それがTTS、text to speechという入力したテキストを音声読み上げしてくれる、そういうアプリを作ろうとしてたんですね。
自分の声、このポッドキャストで私が喋っている声を学習させて、何かこう入力したテキストを私の声で読ませるっていうものを作ろうとあれこれ試していたんですが、うまくいかずそのままリリースできなかったというものがあります。
それがWebクリエイターボックスのブログ、自分の声でのテキスト読み上げTTSを挫折した話という記事の中で紹介しています。
とあるAI音声技術を提供するプラットフォームを使いまして、自分の数分の声データ、音声データをアップロードして声のクローンを作るっていうのをしたんですが、
なんかテストでうまくいったりもしたんですが、ちょっと長い文章になってくると発音がすごく不自然。
なんかこう日本語ネイティブじゃないというか、日本語の方言ともまた違うすごく不自然なイントネーションになってしまうんですね。
何度もテストしたり色々設定を変えたりしてもちょっとどうしても解消できなかったので、さすがに難しいかなという感じでリリースに至りませんでした。
この挫折で開発して痛感したのが、人間の耳っていうのは身近な人間の声の不自然さにすごく敏感だなと思ったんですね。
例えば日本は昔から初音ミクみたいなボーカロイドとかあとゆっくり音声、レイムやマリサ、ズンダモンとかそういったキャラクターが喋ってるっていうのあったと思うんですが、
それはもうなんて言うんですかねロボットが喋ってる前提で聞き慣れてるから多少イントネーションの違和感があってもあまり気にならないというか、
むしろそれが普通だよねみたいな前提で聞けていると思うんですが、自分の声だったんですね。今回自分の声なので余計私にとってすごく不自然なある種の不気味の他人みたいな形でくっきりと違和感が浮き彫りになってしまったという形です。
もしかしたら他人が聞いたらそこまで気にならないよっていうところもあるかもしれないんですが、私だからこそ私の声がすごく不自然っていうのがすごくあったんですね。
なのでちょっとこれは気持ち悪いと思ってしまってリリースできませんでした。はいそれが一つですね。
それでせっかくなのでその音声を皆さんにも聞いていただこうと思います。それではどうぞ。
こんにちは。今日はティーパイアルという紅茶とお菓子のペアリングを提案してくれるウェブサイトの開発メーカーをお届けします。
このサイトでは紅茶の種類や飲み方、その日の気分に合わせてあなたにぴったりのスイーツを提案してくれるんです。
例えばダージリンにはアップルパイとかアイスティならプリンもいいかもといった定番からAIが新しい組み合わせも考えてくれます。
はいいかがでしたか。やっぱり違和感がないでしょうか。
このポッドキャストが完全自動化するのにはまだまだ技術の進歩が必要そうです。
リリースされたWebアプリ:ティーペア、カウントダウンタイマー、GFオンリー
であとリリースしたもので言うと紅茶とお菓子のペアリングを提案するティーペア。
私紅茶が好きなので紅茶関連の何か作りたいなということでそういったものを作ったり。
あとはChromeの拡張でカウントダウンタイマーですね。日付を設定してあと何日だよっていうのが全面に出てくるような拡張機能。
私結構カウントダウンするの好きなので例えば新曲リリースまであと3日と3時間12分みたいな感じでちょこちょことカウントダウンされていくの見たらわくわくするなーって感じで待てる子なんですね昔から。
なのでそれすごく簡単だったんですけど軽く作ってみました。実際にリリースしてインストールすることも可能です。
あとこの今収録しているこの日にですね公開したのがグルテンフリーのレストランとかカフェを集めたウェブサイトGFオンリーというものを作りました。
Webクリエイターボックスの記事ではグルテンフリーのお店を探せるGFオンリーというウェブサイトを公開しましたっていう記事を出しています。
これ作ろうと思ったのが私が小麦粉がちょっと食べれない体質になってしまったのでもっぱら小麦粉不使用の商品を選ばなきゃいけないとか外食するのがちょっと選択肢が狭まってしまってっていう体験が元なんですね。
私が困ってるってことはおそらく同じように困っている方もいるんだろうということで作ることにしました。
普通にグルテンフリーで検索すればいいじゃないかと思うかもしれないんですがそれがですねGoogleマップとかでグルテンフリーって検索してももう普通に普通のラーメン屋さんがヒットしたりとか
特にグルテンフリーでも何でもないカフェが出てくるとかあまりこう最適化されてないんですよね。
あとは米粉パンっていう風に売り出されている商品でも裏をよく見ると小麦粉普通に入っていたり米粉がもうちょっとだけ入ってます配合されてますよというものを大きく米粉パンって出されてたりして間違えて買ってしまいそうになったりっていうこともあるので
完全にグルテンフリーのお店だけを集めて安心して使えるウェブサイトを作りたいと自分のことっていうのもあってプロジェクトをスタートさせました。
構成としては今まで作ってきたウェブサイトと同じようにNext.js使ってバーセルでホスティングしてっていう形なんですが今回はCMSを使っているのでマイクロCMSを使ってデータを蓄積させていくというようなタイプですね。
あと新しい試みとしてはウェブサイトのデザインもChat GPT Images 2.0っていうのに試して使ってみたんですね。
今までは例えば配色を考えてもらうとかAIを使ってタイポグラフィーのサジェストしてもらうとか自分で考えたデザインのデザインMDファイルを作ってそれをコーディングに当てはめていくみたいな作業はしてたんですが
全くの最初から一枚絵からちょっとデザインのベースとしてデザインしてもらうというところも試してみました。
いろんなAIを使ってみたんですがChat GPTが一番綺麗に何て言うんですかね今っぽいモダンなデザインをしてくれたのはChat GPTですかね。
AdobeのFireflyとかGeminiもちょっと試してみたんですけどなんかちょっと可愛らしすぎたりごちゃごちゃしすぎたりっていうこともあってどうかなというところがありましたね。
あと生成してもらった画像で言うとWebクリエイターボックスのブログで使っているサムネイル画像先ほど言ったグルテンフリーのお店を探せるという記事でサムネイルとして大きく打ち出している画像もChat GPTで生成しています。
ChatGPTによる画像生成の進化と応用
これが今までだったら画像を生成してもらうときサムネイル画像とかですね生成してもらうときに本当にざっくりとこんな雰囲気でこんな人がこういうことをしている色のテイストはこんな感じのバナーを作ってねって言ったらやっぱりそれなりのものはできるんですね。
でもどこかAIだなって感じるそういう画像バナー画像が生成されてたんですが今回ちょっと気合を入れましてがっつり指示を入れたんですね。もう何十行100行近くあるのかなぐらいの指示を出したんですよ。
中身で言うと色とかタイプグラフィーはある程度昔からですね前から指示はしてたんですが大きく異なったところで言うと禁止事項が使えるようになったかな。
少し前までですね生成AIにこれは避けてねとかこういうことはしないでっていう禁止事項を伝えるとなんか逆にそちらに引っ張られるのか禁止事項を普通にやっちゃうっていうことがあったのでなるべく私は禁止事項は使わずに赤を使わないでって言ったら赤を使っちゃったりしてたので青を使ってくださいみたいな感じで禁止事項ではない言い回しで指示をしてたんですが。
今回ですね禁止事項が使えるようになったみたいなので避けるべき項目とか避けるべき雰囲気っていうことで暗い雰囲気はやめてくださいとかこういうファッションはさせないでくださいとかそういうやってほしくないことも入れるようになりました。
あとはすごく細かい指示もちゃんと理解できるようになって例えば写真の生成をしてもらう実写風のですね写真を生成してもらうときにライティングとかも入れるようになってますね。
今回のだったら女性がですね明るいところで食事をしているような雰囲気の画像なんですが午前中の明るい強い自然光を浴びているところとかライティングどっちの方向からモデルを照らしているとか。
今回は自然光にしたんですが他にも青みのかかったスタジオの光ライティングだったり青空の下で撮られた自然な日差しとかそういう感じでどこでどういう時間帯でどの方角からの光が当たっている様子なのかそういったことまで指示ができるようになってるんですね。
これまで多分書いても結構無視されてたかなと思いますね。今まで私も何度か光の当たる方角指示したんですけどなんかその方角をモデルが見るようになったりとかなんかちょっと違うなーっていうことがあったんですがそれはちゃんと理解できるようになったみたいです。
それからですね感情の指示もちゃんと理解できるようになったみたいですね。感情の指示っていうのがそのバナー広告を見ている人がどういう感情になるのかっていう指示。
例えばこの画像を見てターゲットユーザーこういうターゲットユーザーが憧れの気持ちを持ってほしいとか少し大人びていて見ている人が背伸びしたくなるような雰囲気とかちょっとなんて言うんですかね表現しづらいようなちょっとしたニュアンスでもとりあえず書いてみるとなんとなく拾ってくれる気がします。
で一つだけだと見ている人がワクワクするような感じだけだと弱いかもしれないので実際に本当にそのユーザーが見ている状態を考えて自分がどう思うのかっていうのを想像しながら3つ4つ。
今回私の場合はですね5個ぐらい書いてるかな5個ぐらい書いてせいせいっていうことができますのでそういった感情面も入れてみると面白い結果になるかなと思います。
今までは長い指示だからいいっていうことではなくて長ければ長いほど誤解も生まれやすかったり途中でなんかai の方が考えるのをやめて自分で勝手に作り出しちゃってっていうこともあったんですが今回結構長くしっかり書いたらその分反映されるようになった気がしますね。
なので一発でできるかって言ったらちょっと難しいかもしれないんですがひとまず思い浮かぶ状況だったり今まで通り配色タイプグラフィー全体の雰囲気に加えて禁止事項とか感情面とかそういうのも入れ込んでテンプレートを一つ作ってみると後使い回しができるような状態にもなると思うので少しそこね時間かかるかもしれませんが
やってみると面白いかなと思います
でそれさえできれば後コピペして生成する時間っていうの多分3分もかからなかったと思いますので一瞬でできるのがわーってびっくりするかなと思います
そのウェブクリエイターボックスの記事の方で使ってるサムネイル画像っていうのがこれ一発でできたかなと思いますね
リテイクもなしで作ったものです
ただこの画像の左下にロゴを掲載してるんですがロゴだけはちょっと歪んじゃったのでそこだけ後でですね自分で貼り直した感じはありますがそれ以外の文字の破綻とかもなかったですしすごくきれいにね生成できましたのでちょっと試しにやってみると面白いと思います
その他の活動と注目ニュース:ポッドキャストデイと半導体企業の投資
あとはその他のお仕事絡みで言うと前回お伝えした通りポッドキャストデイが開催されますね
ウェブクリエイターポッドキャストデイ2026かな9月に開催されます
こちら生放送でポッドキャストですね他のポッドキャストをやってる方と一緒に生放送でお送りする番組になっています
詳細はまだ出てないかなと思うんですがこちらこのポッドキャストでも何度か出演したことのあるかけだしちゃんも来てくれるかもねっていう状態なので皆さんよかったらちょっと続報ですねお待ちください
最後に最近注目のウェブ関連のニュースについてお話ししていきましょう
私ですね今広島に住んでいるということは何度かお話ししたかもしれないんですがその中でも広島県の東広島というところに住んでおります
東広島と聞いてピンときた方いるでしょうか
今実はですねブイブイ言ってる街なんですねこの街にマイクロンと呼ばれるマイクロンテクノロジーという会社が1兆5000億円の投資をしているというお話が出ているかなと金融業界とかですね半導体周りその辺でですねブイブイ言ってるような会社です
はいで都市開発みたいなのもすごく進んでいてマイクロンの会社周りあの辺に一つ街ができようとしてるんですねすごい急ピッチで工事が進んでいて一つの山を削って一つの街を作るみたいな感じでどんどんいろんな建物アパートだったりマンションだったり作ってたりそれ関連の仕事もすごく増えてるみたいですね
で実際にそちらで働いているマイクロンで働いている知人はそのストックオプションで新車を買ったとかそんな話も出ているみたいです
いやー面白いですねこういった企業の動きだったりっていうのがニュースでもよく流れているので耳にしたことある方はたくさんいらっしゃるかなと思うんですが実際にですねどういう風になってるのかっていうのを深掘りしてみると意外と面白くて
日本国内でも反動体が今すごくブイブイ言ってるとか逆に以前すごく儲かってるぜって言ってるような企業が最近はですねちょっとしょんぼりしてるとかそういう動きを見てたらなかなか面白いだなこの世界はと思って
でそれで私も株とかをちょっとですね勉強し始めているところで冒頭のfpの資格を取ろうかなというところにつながるわけですねこのお年頃になったので資産運用とかですね今後の先のお話将来のお金の話とかも考え出すとちょっとしっかり勉強しておかなきゃなーっていうのもありつつ
で私実はwebクレーターボックスって法人化してるのでその辺をずっと税理士に任せてたところを自分でも理解したいなって思ったのもありしっかりと学んでいこうかなと思っているところです
AI時代の制作における「コンテンツ育成」と「ドメイン知識」の重要性
大事ですよねきっと
あとはAI周りでいうと先ほどお話しした通りAIを使っていろんな開発をしているよっていうのはずっとお話ししてきているんですが
ちょっといろいろ作った結果思ったのが作るのはすごく簡単になったんですね何もないところからAIに指示をして言われた通りにやったらできました公開できましたっていうスピードはすごく早くなったんですがここからが難しいのかなと思いますね
完成リリースまでは楽になったけどそれをじゃあ実際に使ってもらう見つけてもらう使い続けてもらうっていうのはすごく難しいなっていうのを感じています
ただ完成しましたできましただけじゃなくて改良していくこと作り続けること育てていくことそのコンテンツ内容を育んでいくことっていうのが重要なんだなっていうのを最近感じてるんですね
そうしないと差別化にもならない初心者でも簡単にできるようになったのでじゃあ今まで制作に携わってた人がどこで差が出てくるかって言ったらそういう管理の面だったり
細かいところを言い出すとキリがないと思うんですが初心者でもできるんであれば初心者ではないこれまで続けてた人ができることは何なんだろうっていうのを最近はよく考えるようになりましたね
それと同時に感じるのがドメイン知識
ドメイン知識っていうのがサーバーとかそういうドメインネームとかっていう話ではなくて
ドメイン知識っていうのが特定の業界や専門分野における授業の知見業務手順習慣及び関連する専門用語などの深い理解ということですね
つまりさらっとなんとなくの気持ちで作った制作物とその業界にものすごく詳しくて
必要なものは何なのかユーザーがどういう時に必要としているのかっていうのを分かった上で作るものというのはやっぱり全然違うんですね
見た目とかの話ではなくて使い勝手だったり使い続けたいと思うような気持ちになれるかどうかっていうのは全然違ってくるので
すごく浅いものだったら誰でもできるけど本当に求めている人が使い続けたいなって思うものが何なのかっていうのはその業界の知識っていうのはすごく大切になってくるので
そういったものをどれだけ深くできるか
これまでは広く浅くでなんとなくできてたものをとにかく深掘りするフェーズに入ってきているのかなというのを感じてきています
私が今回ですねグルテンフリーのウェブサイトを作ってみましたがこれ多分小麦粉普通に食べれる人が作ったらもうちょっとざっくりした形になるんじゃないかなと思うんですね
私がこれ作ろうと思ったのは私自身が困っているからなのであってそうじゃない人が作るとまた視点も変わってくると思うんですね
なので自分事として捉えつつ育てていく使い続ける作り続けるそういったことが今からはですね大切になってくるんじゃないかなと思っているところです
今後もそういったウェブサイトウェブアプリを作っていこうと思うので
そのためには自分自身がウェブとかAIの使い方だけではなくて
実生活でも深いところまで踏み込みつついろんなことを体験したいなと思っているところですね
皆さんも私こういうものを作りたいけど知識はあるけどどうすればいいのかわからないとかいうものがあれば
AIに聞きつつ自分の深い自分だけの自分だけが使えればそれでいいと思えるようなニッチな作品でもいいので
ぜひ試していただければなと思いますきっと素晴らしいものができると思います
今後の展望と番組へのメッセージ募集
それでは今日のテーマはマナ的ウェブデザインニュース7月号でしたが
またまたAI関連の話が多かったかなと思いますが
今はですね制作にもAI必須かなと思うので今後もですね
AIウェブ制作絡みでいろいろお話できたらなと思います
あとは9月に行われるウェブクリエイターポッドキャストデーですね
こちらの方も着々と準備を進めておりますので
今のうちからですねこういうお話をしてほしいとか
こんなこと聞きたいよっていうのがあればぜひ教えてください
はい今から楽しみにしております
楽しみにはしているんですけど生放送なのでちょっともう考えたら緊張しちゃいますよね
まだまだ先なんですけど大丈夫かなーっていうのはちょっと不安ですね
しかもなんか多分前回と同じ感じなんであれば
youtubeで生放送されるんじゃないかなって思うんですよね
映像で音声だけじゃなくて映像でどうしようと思っております
じゃきっと喋れるといいなと思いますので心のどこかで応援していてください
さてこの番組では感想や質問リクエストなどお待ちしております
番組詳細欄にあるリンクよりお気軽にご投稿ください
Xではカタカナでハッシュタグウェブカフェをつけてポストしてください
そしてアップルポッドキャストやスポーティファイのポッドキャストではレビューもできますので
こちらにも感想を書いてもらえると嬉しいです
またお会いしましょう
webクリエイターボックスまなでした
27:03

コメント

スクロール