CanvaとWORDPRESSどう違うの?

記事
IT・テクノロジー
みなさん、こんにちは!デザイナーをやっているNanamiです。

Canvaが登場して、とても話題になっていますよね?AI機能も備わっているからオリジナルでロゴを制作したり、背景も一瞬で消したり、痒いところに手が届く画期的なデザインツールですよね(^^♪

私の場合、AIとCanvaを使ってプレゼン資料を作っていて、もうパワポを使う事はないかな・・・という感じです!素材もデザインも、テキストも豊富で使い方もパワポより簡単だから、上司から「あ、資料だしといて!」って言われてもすぐに対応できるのは本当にありがたいです!

◆「じゃあ、サイト制作はどうなの???」

そう!ここが今日のポイントです!


Canvaはデザインに強く、WORDPRESSは機能に強い!

そんな感じです・・・(簡単すぎてすみません( ノД`)
デザイン素材がとにかく豊富で、簡単に素材を使い分けてかっこいい・美しいデザインを作れてしまうのが魅力なのです。

Canvaの仕様変更で子ページが作れるじゃないか!

Canvaは今まで「子ページ」を作るのが苦手だったのですが、2025年4月の仕様変更で、メニューに分けて別のページを作成することが簡単にできるようになりました。

ですので、「LPのみ対応可能です」としていたCanvaですが、現在は「ホームページ制作可能」という大きなメリットが出てきました。

ちょっと細かい話にはなってしまうのですが・・・Canvaの「子ページ」はちょっと特殊です・・・

親ページ=トップページ=crossact.com
子ページ=crossact.com/◎◎◎

上記のように、たとえばcrossact.comがトップページの場合、それが親ページとなりますよね。

子ページは、そのトップページを基に下に連なるページの事で、たとえば、お問い合わせフォームなら、crossact.com/contactのように/の後に子ページのタイトル(id)が設置されます。

しかし、Canvaで子ページを使うと、タイトルの前に必ず「#」が入ってしまいます。
本来この#とはトップページ内で関連するセクション(各章)に移動したい場合のリンクとして使用されるものです。例えば・・・・

crossact.comのトップページ内、下の方に「お問い合わせフォーム」を設置した場合、一般的には下までスクロールして「お問い合わせフォーム」にたどり着きますよね?

でも、実は「ジャンプ」という指定したところまでジャンプしてくれる
(クリックすることで自動スクロールして、その場所まで移動してくれる)
HTMLコードがあるのです。

それを記載するときには#を使い、指定した箇所にidを振って、#とidで
その場所まで移動させることができます(ここはHTMLの知識が必要なので分からなくても大丈夫💦)

要は、こういったジャンプ機能を利用する場合、そのリンクURLは必ず「#」がついてしまいます。だから、結果として

crossact.com/#contact

のように#がついてしまうのです。

そして、Canvaの仕様は「2025年に仕様変更されてLPだけでなく別ページが作れる!」となったのは事実なのですが、なぜか、内部リンクではないのに
「#」がついてしまうのです。

ということは・・・・これは推測になるのですが、恐らく仕様そのものはやはりLPベースであり、トップページ(LP)を単純に切り分けて、本来はやはりLPそのものなんだけど、切り分けて、子ページであるかのように見せている・・・・
というのが実態なのかもしれません。

「そんなURLの変化は関係ないよ!#がついても大丈夫!」

という方は、Canvaでホームページ制作は全然ありだと思います(^^♪

それならワードプレスよりCanvaがいいじゃん!!!
とはなりません・・・・

ワードプレスの強み


それは「カスタマイズが柔軟」であること
ブログが簡単に、カテゴリー化して書ける事

この2点が強いのです!

◆「いやいや・・・大したことないでしょ・・・」

いえ、「大したことあるのです!」

カスタマイズが柔軟とは、ワードプレスには様々なプラグイン(ソフトみたいのもの)が存在し、そのプラグインをダウンロードすることで新しい機能を持つことができるのです。

例えば、予約フォームを作りたい!とか、インスタのフィード画面をページに掲載したい!などのニーズに応えてくれるわけです。

もちろん、Canvaにも「アプリ」という機能があり、様々な機能を追加できるのですが・・・やはりワードプレスほど痒いところに手が届く状態ではありません。むしろAIの方にCanvaのアプリは強い傾向にあり、サイトそのものに影響をあたえるものは少ないと思います。

そして、「ブログ」です。
ブログを簡単に書ける!ということは、そのサイトが随時更新されて、アップデートされるという事になります。そういう状況はSEOとしても効果があり、より、「見られるサイト」になりやすくなります。

もちろん、「ブログなんて・・・面倒だから書かないよ・・・」という方は不要ですが、ブログに限らず、それを「NEWS」として、新しいサービスや賞品をリリースした際に紹介することもできるので、とても便利な機能といえます。

サイトが「見られるサイト」に成長するには、記事のアップデート(サイトのボリュームが増えていく。大事なキーワードが自然と増えていく)が重要です。

ワードプレスはSEOに強い!というのは、実はこのポイントが一番大きいと言えます。


ワードプレス長所とCanvaの長所を活かせる?

◆「いやぁ・・・それは分かったけど・・・俺はCanvaをどうしても使いたいんだよ!かっこいいメインビジュアルにしてほしいんだ!ワードプレスってなんかブログっぽくて嫌なんだよ・・・でもなぁ・・・SEOも重要だし、今後長く続けていくならワードプレスだよなぁ・・・」

ワードプレスのデザインはそんな悪くないですよ。
確かにフォントに関して言えば、Canvaのほうがネオン・袋文字などスタイルを自由に変えられるので、どうしてもワードプレスは負けてしまうかもしれません。

でも、ミニマルデザイン・・という意味では、今も主流ですし、CSSで補助したりテーマの機能で十分に良いデザインに仕上げることは可能ですよ。

ただ、もうひとつお勧めな方法も実は・・・あるんです。

◆「え?なになに?」

Canvaとワードプレスを連携させよう!

Canvaには「埋め込み機能」があるんです。この埋め込み機能を使うと、ワードプレスの「カスタムHTML」という機能を使って、Canvaで作った素材を表示できちゃう機能があります。

◆「は?わかんねーよ!もっとちゃんと説明してよ!」

はい・・・すみません。。簡単に言ってしまいますと、皆さんよく、
Google MapやYoutube動画が見れてしまうサイトを見かけませんか?

あれ・・実は埋め込まれてるんです。WEBサイトにプログラマーが一生懸命コードを記入して作っているものではないんですよ(^^♪
鏡のように映して、さらに再生や停止などボタンを触ることもできるんです。

それと同じようにして、Canvaを映し出すわけです。そうすると・・・どんないい事があるのでしょうか?

もし、画像を入れるだけだったら、皆さんがその画像を修正したいとき困りますよね?Canvaの強みは何と言っても、自分で簡単にデザインやテキストを修正できるから良いわけですよね。

でも、この技術なら、修正したいときにCanva側でそのデザインを編集すると

なんと、自動でワードプレス側に埋め込んだデザインも修正されているんです!


だからすごいんです!Canvaとワードプレスの併用は、これが一番良い方法となります。

さらに、これは最もシンプルな方法なんですが、Canvaで素材を作ってしまい、画像にして、ワードプレスに貼り付けるという方法もあります。

◆「いやぁ・・・それだとテキストも画像化されてるから、SEOとしてはNGでしょ」

確かに、その通りです。でも、SEOでは重要なキーワードと文章があればグーグルは十分認識してくれます。また、タイトルとディスクリプションはHTMLに直接書けるので、そこまで神経質にSEOを意識する必要はないのです。

◆「え?そうなの?じゃあ、重要なメッセージ部分をワードプレスで作って、あとは画像化しても問題ないってこと?」

その通り!実際に弊社では、ココナラユーザー様にそうやって提供したデザインもあるんですよ(^^)/

どの部分を画像化して、その部分をテキスト化するのか?その点は私たちがプロですのでお任せください。しっかりと構成は考えますので。

◆「なるほど~、それはいいね!」

◆「でもさ、そもそも、こういうサイトならワードプレスがいいですよ、とか、そういうアドバイスもらえると嬉しいなぁ」

分かりました!あくまで私の経験上ですが、お答えしますね。

Canvaでデザインを組んだ方がよいケース

・日程による限定セミナー募集ページ
・サービス系(英語教室・リラクゼーションなど)
・1商品の紹介

ワードプレスでデザインを組んだ方がよいケース

・情報更新の多いもの
・ブログやNEWSがあるもの
・紹介する商品点数が複数あるもの
・企業用HP
・サービス系でもメニュープランが多いもの
・長期的に活用していくもの

こんな感じですかね(*´▽`*)参考になればうれしいです。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら