千企画ホームページをポートフォリオサイトとして再開しました

canva AI でWebサイトデザイン

プロンプトに要件定義を入力するだけ

ビックリするぐらい簡単にCanvaでWebサイトのデザインができてしまいました。
自分でWebサイトを作成する時には、一つに何日もかかっていたのに。驚きです。

中で動いているコーディングAIは、claude(?)でしょうか。

canva AIにプロンプト入力するのですが、要件定義に自分のクセが出て全体のデザインが何となく似ています。
というよりも、今・世の中で公開されているサイトの一般的なデザインということなのかもしれませんね。

作成サンプル1

Canva おもちゃ箱デザインWeb

下に表示されるウェブサイトは Canva AI によって生成されました。

Canva おもちゃ箱デザインWeb

もう少し編集したかったのですが、公開してしまうとできなさそうです。
何度か試しましたが、コード入力のボックスが出ている間(公開前)は、細かな修正指示ができました。

作成サンプル2

ちょっとheroエリアの画像がさみしいので、こちらに画像生成して入れ込んでもらいました。
が、やはり何とも言えない感じです。
canva本体の方の素材が使えればよいのですが。

Canva おもちゃ箱デザインWeb Ver.2

下に表示されるウェブサイトは Canva AI によって生成されました。

Canva おもちゃ箱デザインWeb Ver.2

作成サンプル2-2

canvaの画像生成でタイトル画像を作成し、2ページ目(Webページなのに2ページ目とは???)にはめ込んでみました。

なるほど、2ページ目の扱いはこんな感じなのですね。百聞は一見に如かず。

そして、はめ込んだ画像はスクロールで置き去りになり、ハンバーガーメニューの上に表示されてしまいます。むむむ、これではレスポンシブにした意味が…。

Canva おもちゃ箱デザインWeb Ver.2-2

下に表示されるウェブサイトは Canva AI によって生成されました。

Canva おもちゃ箱デザインWeb Ver.2-2

現時点ではできないこと

どうやら以下は現時点(2025年5月時点)では、できないようです。
ですが進化めざましいAIですので、そのうちできるようになるのではないかと期待しています。

  1. 画像の直接差し替え
    プロンプトでcanva本家で生成したものをはめ込めると良いのですが。
  2. 外部画像の取り込み
    タイトル画像を、canvaで作った画像の共有リンク、自サイトから取り込めるかプロンプトに入れて試してみたのですが、これも現時点ではだめそうでした…。
  3. コードの直接編集
    ソースコードを見るだけでも、なんか無理そう…。
  4. html,css,jsなどのダウンロード
    ※これができると自分でコード編集したり、画像を編集したりドメインサイトで公開できたりするのですが、多分無理そう…。

では、この機能は何に使えるのか…?

実際のWebサイトとしては、まだもうひとつな感じですね。
今のところ使えるとしたら、サイトデザインの共有ぐらいでしょうか。

実際のコーディングは、やはり別にしないといけないようです。

AI生成する際のクレジットについて

canvaのAIサービスに関する利用規約

タイトルとURLをコピーしました