CanvaのAIツールでウェブサイトとアプリを簡単に作成！初心者でもプロ級の成果を
ねえ、みんな！久しぶりにブログ書くよ。
今日はね、最近ハマってるデザインツールの「Canva」について話したいんだ。Canvaって知ってる？
オーストラリアで生まれた超便利なツールなんだけど、最近AI機能が追加されて、デザインだけじゃなくて、ウェブサイトやアプリまで作れちゃうんだって！
しかも、AIが勝手にコーディングしてくれるから、初心者でもプロみたいに作れるらしい。数年前じゃ考えられないよね？
実は俺もこのCanvaのAIツールを1週間使い倒して、ランディングページやアプリをサクッと、世界に向けて公開できちゃいました！
成功も失敗もあったけど、その経験をこの記事でシェアするから、最後まで読んでくれると嬉しいな。Canvaは今キャンペーン中で30日間無料。きっと「自分もやってみようかな」って思うはず！
CanvaのAIツールって何？
まず、CanvaのAIツールについて簡単に説明するね。
Canvaは元々、誰でも簡単にインターネット上でデザインできるツールとして有名だったんだけど、最近はAIの力でさらに進化してるんだ。
例えば、「Magic Design」っていう機能があるんだけど、これを使えば、AIがデザインのアイデアを出してくれたり、自動でレイアウトを整えてくれたりする。
そして、すごいのが、デザインしたものをそのままウェブサイトやアプリにできるってこと。AIがコーディングまでやってくれるから、プログラミングの知識がなくても大丈夫ってわけ！
これって、デザインを民主化したCanvaが、今度は開発まで民主化してるって感じだよね。初心者でもプロ級のものが作れる時代が来たんだよ！
ランディングページ作成 実体験
ランディングページとは
そもそもランディングページって何？って思う人が多いと思う。早速xAIが開発したGrokに確認してみたら、以下の結果が返ってきました。
ランディングページとは、ウェブサイトに訪れた人が最初にたどり着くページのことです。目的は、訪問者を引きつけて、商品購入や登録、問い合わせなどの行動を促すこと。例えば、広告をクリックして飛んだ先のページがランディングページです。シンプルで分かりやすいデザインにして、必要な情報（商品の魅力や申し込みボタンなど）をすぐ見せることが大切です。
化粧品でも、ハチの駆除でも、「お問い合わせはこちらへ」みたいな縦長のホームページあるよね？あれが正にランディングページ。
要は商売に直結するとても大事なページで、クラウドソーシングサイトではこのランディングページの開発案件が結構ある。お金の匂いがするでしょ？
ランディングページ開発の相場
大手クラウドソーシングサイトのクラウドワークスで案件を実際に確認すると分かるけど、ランディングページの開発案件は多くて、報酬はおおむね1件3万円～30万円。
CanvaAIでこの業界に参入する素人コーディング集団は当然3万円レベルの案件からスタートすると思うけど、最下層の３万円でも、結構高いよね？
素人は効率が悪くて四苦八苦すると思うけど、仮に20時間で制作したと仮定しても、時給計算だと1,500円。時給1,500円でデスクワークが受注できるなら、スーパーのバイトよりよほど待遇良いよね。
お金の匂いがするって言った意味、分かって貰えたかな？
ランディングページの開発手順
実際のランディングページ
取り合えず、俺が実際に1時間で制作してインターネットに爆速公開した作品を見て貰った方が良いと思う。こちらを見てみて。
素人っぽいとか、デザインに統一感がないとか、色々と突っ込み所があると思う。でもさ、これ1時間で素人が作ったって凄くない？
いや、俺がすごいんじゃなくて、誰でもサクッと開発できる機能を備えたCanvaが、だよ。
じゃあ、実際に俺がCanvaでランディングページを作った手順を教えるね。めっちゃ簡単だったから、きっとみんなもできるよ！
1)テンプレートを選ぶ
俺は黒を基調とした、かっこいい感じのテンプレートを選んだよ。男性受けしそうなやつ。Canvaにはたくさんのテンプレートがあるから、好みのものを選べばOK。
2)写真をはめ込む
写真はね、MidjourneyっていうAIツールで作ったものを使ったんだ。自分のイメージに合った写真を簡単に作れるから、超便利！
顔出しNGの俺としては、自分のイメージに合った自画像？をMidjourneyで生成して、Canvaへアップロード。あとは、動画のように写真をドラッグして放り込めば、綺麗にランディングページにピタッとはまる！
3)テキストを追加
テキストは、生成AIのGrokやPerplexityっていうツールを使って、セールストークを作ったよ。自分で考えるのが苦手な人でも、AIが助けてくれるから安心。
あとは、このセールストークをコピペでCanvaに貼り付けるだけで、ランディングページが完成！
公開の設定
サクッとランディングページ完成までは行けたんだけど、ウェブ上にこれを公開するための初期設定が必要なんだ。
俺がインターネット検索しても全然過去の事例が載ってなくて困ったんだけど、みんなは大丈夫。今回俺が試行錯誤した一部始終を、ここに載せておくので、参考にして！
1)ウェブ公開方法
Canvaで作ったランディングページ（ウェブサイト）は、次の方法でインターネット上に公開できる。
- Canvaが用意したドメインで一般公開する
- Canvaにお金を払って独自ドメインを購入する
- 自分が既に保有するドメインに公開する
１を選択した場合、URLに「my.canva.site」が入るので、見た目が良くない。canvaの無料ツールでウェブサイトを作ったのが、閲覧者から丸わかりだからね。
２を選択した場合、Canvaにお金を払えば好きなドメインを購入することができる。けど、俺は既にさくらインターネットで独自ドメイン(ai-drivenlife)を購入済みだったので、こちらも却下。
結局、3をやりたかったんだけど、インターネット上に全然情報が掲載されていなかった。悪戦苦闘の結果を以下に書いておくね。
2)ドメインを理解する
俺のドメイン(ai-drivenlife.com)とCanvaの関係性を図解したものを添付しておいた。ドメインとかサブドメインと言うと分かり辛いけど、図にしてしまうとスッと頭に入ると思う。
インターネット上にランディングページを公開するには、自分が保有するドメインとCanvaを接続すればOK。
一度接続さえしてしまえば、あとは何個ウェブサイトを作っても同じドメインに公開するだけだから、初期設定は必要ない。なので、苦労するのは初めだけってこと。
で、重要なのは、必ずサブドメインを作って、サブドメインとCanvaを接続するってこと。何故なら、メインのドメイン（俺の例だとai-drivenlife.com）は今まで書き足して来たブログ記事が沢山掲載されていて、ここにCanvaを接続したら、ブログデータが消えるリスクあるでしょ。
なので、必ずサブドメインを作るんだ。俺はAIと対話しつつ、さくらインターネットのウェブサイトを見つつ、苦労しながら約40分でサブドメインを作れました。
3)サブドメインの設定方法
3.1)コントロールパネルパネルへアクセス
さくらインターネットへログイン後、画面左にあるメニューバーより「契約情報」→「契約中のサービス一覧」をクリックする。
すると、コントロールパネルへ接続するボタンがあるので、これを押下する。
3.2)ドメイン/SSLへアクセスする
コントロールパネルへアクセスしたら、左側のメニューボタンより「ドメイン/SSL」→「ドメイン/SSL」を押下する。
3.3)ドメインを新規追加する
「ドメイン新規追加」ボタンを押下する。
3.4)新規ドメインを設定する
既に取得済みのドメイン(俺の場合はai-drivenlife.com)の下にサブドメインを設定しよう。
「サブドメインを指定する」ボックスにチェックを入れ、その下のテキスト欄に好きな文字を入れる。以下の例では、「test」を入力し、「test.ai-drivenlife.com」と言うサブドメインの設定を行っている。
「test」の箇所は、自分の好みの文字を入れてね。
問題なければ「追加」を押下しよう。
3.5)DNS設定をする
最後に、DNSレコード設定と言う一番ややこしい設定をする。さっき取得したサブドメイン(test.ai-drivenlife.com)がドメイン一覧に表示されている。
サブドメイン内にある「設定」→「DNSレコード設定」を押下しよう。
3.6)レコードを書き換える
AレコードとTXTレコードには、現在別の値が入っているとはず。勇気を出してこれを削除し、キャンバから指定された文字で上書きして保存しよう。
これで、全ての処理が完了だ。あとは祈りながら数時間待とう。
問題なくCanvaとサブドメインが接続されると、Canva上で公開設定ができるようになる。
3.7)公開設定をする
あとは、Canva側の公開設定をすれば自分の作品が世界に向けて発信できる。
Canvaの制作画面に戻って、右上にある「Webサイトを公開」を押下しよう。
そして、「WebサイトURL」欄からCanvaと接続した自分のドメインを選択する。
最後に、スラッグと呼ばれるURLの最後につく言葉を決めたら、「公開」を選択して完了！
アプリ開発に挑戦！成功と挫折のリアル
ランディングページがサクッと完成したので、調子に乗ってアプリ開発にも挑戦してみた。結論から言うと、合計４のアプリ制作にトライして、3つは成功、1つは失敗でした。
つまり、３つはウェブ上に公開できる品質のものができたけど、１つは品質が低すぎて、ボツになったってわけ。
一応、ボツにしたものも参考までにURLを貼っておくので、参考に見てみて。
素人がAIコーディングで開発したアプリ一覧
1.ライフプラン・シミュレーター
自分の年齢や年収等の基本情報を入れ、将来の受け取り年金額や転職した場合の想定年収を入力すると、生活費との計算を自動で行い、キャッシュフローの推移をグラフ化してくれるアプリ。
俺は将来、脱サラしてフリーランスになって、ディズニーでバイトして生計を立てたり、海外に住んだりしたいと思ってて、日頃から金銭的なシミュレーションを結構するんだよね。
「あと何年働いたら、仕事辞められるかな？」とか、「まずは妻を仕事から解放しなきゃだけど、それは何年後かな？」みたいな。
そんな時に、このアプリを使えば90歳までの将来キャッシュフローが分かるので、いちいちExcelで手動計算しなくてよい。自分が使いたいアプリを開発したってわけ。
URLはこちらです。ご参考までに。
2.体脂肪計算アプリ
体重、身長、性別、年齢を入力すると、BMIや体脂肪を計算してくれるアプリ。表示結果によってオススメの運動とかオススメの健康食品を表示してくれる。
女性をターゲットにしたアプリで、サクッと自分の美的数値を知りたいってニーズを意識しました。将来的にこんなアプリに広告を張り付けて、アフィリエイト収入を稼ぐこともできるかもと思い、ダミーで広告欄を設けている。
AI副業を意識して開発したアプリで、リンクはこちら。
3.オセロゲーム
昔からあるオセロを、現代風なデザインにアップデートしてみた。石の色も白黒ではなく、赤青にして、AIのレベルも選択可能に。
AIは放っておくと一瞬で石を置いてくるんだけど、あたかもAIが考えているかのように、1秒くらい間をおいて、ボードを光らせて置く位置を考えているような印象を与えてみた。
この辺のテクニックも、CanvaのAIチャットに要望を伝えるだけで実装できたので、満足です。
失敗したアプリ
点つなぎゲーム
本屋さんの雑誌コーナーで点をつなぐと絵が浮かび上がる本を見つけて、「これだ！」と思って即開発に着手したゲーム。
結論から言うと、これが想定外に難しくて、最終的に開発をあきらめました。みんなが参考に見れるように、ネット上に公開しているので、是非使い勝手を試してほしい。
点つなぎゲーム（TraceArt）はこちら。
失敗した原因は何点からあると思うけど、
- そもそも線をつないで描いた絵って、質が悪くて、正解の絵を見ても100％納得できない。（え？これが犬の絵？？？みたいな印象をユーザーが受ける）
- 線の座標を決めるのが難しい。PC画面に合わせて作ったらスマホ画面では点が見えなくなってしまったり、座標を決めるのが難航した。
- AIが線をつないで作る絵を生成する能力が低すぎた。山の絵なら生成できるけど、犬の絵は全く犬に見えなかった。AIは万能ではなかった。
この辺が敗因かな。
この失敗から学んだのは、CanvaのAIツールはすごいけど、完璧じゃないってこと。特に、スマホとパソコンの表示の違いに対応するのが難しいんだよね。
Canvaの限界とこれから
CanvaのAIツール、めっちゃ便利なんだけど、限界もあるんだ。一番のネックは、AIが書いたコードを、自分が確認できないこと。正直、これが致命的だと思う。
俺はコーディングのド素人なので、コードを見たって全く意味が分からない。でも、そのコードをChatGPTやGeminiにコピペして、どこがおかしいか質問することはできる。
質問できれば解決策が見つかるはずなので、CanvaのAIでは、生成したコードをユーザーが閲覧することができないんだ。
なので、アプリが失敗だってことはプレイしてすぐ分かるんだけど、そのコードを分析して対策を立てる事が出来ない。
こうなると、不具合の症状をCanvaに都度説明して、「修復して！」と伝えて祈るのみ。上手くCanvaがコードを綺麗に修復してくれたら良いんだけど、酷い時は依頼前より更に酷い画面になったり・・・
しかも、コードの修正をお願いすると1行目から1000行目まで、全てのコードを書き直すので、待ち時間が5分くらい発生する。
修正依頼→5分待つ→修正されていなことを確認→修正依頼→5分待つ・・・
と言うエンドレス・ループにはまって、TraceArtでは21回修正作業をしました。そして、最終的にあきらめた。
複雑なアプリを作りたいなら、Canvaじゃなくて、BoltとかCursorみたいな本格的なコーディングツールを使う方が良いね。Canvaもアップデートでこの辺が改善されることを期待してます。
まとめ
CanvaのAIツールを使えば、初心者でも簡単にウェブサイトやアプリが作れる時代が来たんだ。俺の場合、ランディングページは1時間半で公開できたし、アプリ開発も3つ成功した。
失敗もあったけど、それも含めて楽しい経験だったよ。
Canvaで作ったアプリにアフィリエイト広告を載せたり、クラウドソーシングでランディングページ制作の案件を受注したりすれば、一発で数万円単位の収益化も夢じゃない。
ランディングページ1件で5万～30万円くらいもらえることもあるから、スキルアップすれば結構いい副業になるかも！
本日現在、Canvaは30日間無料でCanvaProが使えるから、まずは試してみて。ランディングページやアプリを作ってみた感想を、Xやコメントで教えてくれると嬉しいよ！
