【初心者向け】SWELLのトップページはCanvaでイメージがカタチになる！

今回のブログでは、Canvaを活用して、SWELLでトップページのデザイン設計図を作る方法を、実例を交えてご紹介します。「どんなトップページがいいのかわからない」と迷っている方は、ぜひ最後までご覧ください。

SWELLで「トップページのデザイン、どんなイメージにする？」問題

WordPressテーマ「SWELL」は、シンプルで洗練されたデザインと高いカスタマイズ性が魅力です。
ですが、最初にトップページを作ろうとしたとき、こう感じる方も多いのではないでしょうか？

特に、初心者にとって、ページの全体像をイメージしながらブロックを配置するのはハードルが高いといえます。頭の中に「こんな感じがいいな」というぼんやりしたイメージがあっても、実際に手を動かすとなると手が止まってしまう…。とくに、見栄えするブログやホームページを作ろうとするなら、なおさら悩みますよね。

以前、私は紙に書いたり、Illustratorを使ったりしたこともあったのですが、なかなかしっくりこなかったんです。
スムーズに設計図ができて、クライアントさんに構成を説明するのに、もっと分かりやすくなるツールがないかな。

そう考えていたときに、思いついたのがCanvaの「Webサイト」機能を使ってトップページの設計図を作ることでした！

Canvaとは、手軽で万能なイメージ作成ツール

Canva（キャンバ）は、デザイン初心者でも手軽に使える無料のグラフィック作成ツールです。
Webブラウザやスマホアプリから簡単にアクセスでき、特別なソフトやスキルがなくても、プロのようなデザインがすぐに作れます。
Canvaでは以下のようなものを直感的な操作で作成できます。

• ブログやSNS用のアイキャッチ画像
• チラシや名刺などの印刷物
• プレゼン資料やPDF教材
• そして今回ご紹介する「Webサイトのレイアウト」など

数万点のテンプレートや素材が無料で用意されているので、画像を選んで、文字を入れて、並べるだけ。
時間がないママや副業ブロガーさんにもぴったりのツールです。
しかも、作ったデザインはそのまま画像として保存したり、リンクで共有したりできるので、クライアントとのやりとりや下書きの共有にもとても便利です。

【実例】クリニックのホームページをCanvaで設計した事例

実際に、私が制作させていただいた「天正堂クリニック」さんのWebサイトを制作したときの実例をご紹介します。

このとき私は、まずCanvaでトップページのレイアウトを組んでみることから始めました。

Canvaで作ったトップページ下書きレイアウト

PC表示

スマホ表示

Canvaには「Webサイト」というテンプレートが用意されており、ブロック単位で構成を考えるのにぴったりです。
写真や見出し、文章パーツをドラッグ＆ドロップで配置するだけで、頭の中のイメージを“見える化”できます。
打ち合わせでこの下書きを見せたところ、とてもスムーズにイメージ共有ができました。

SWELLでのトップページ完成形

先ほどのCanvaでトップページ設計図を作ったものを、SWELLにしたのがこちらのホームページです。

天正堂クリニック様ホームページ

その後、SWELLで実際にトップページを構築。
途中で修正や調整もありましたが、根幹のレイアウトはCanvaで作ったものをそのまま再現しています。

SWELLの前に！Canvaでトップページ設計図を作ろう

Canvaでトップページを“設計”する方法は、とてもシンプルです。

Canvaでの基本的な作業手順

1 Canvaの「デザインを作成」で「Webサイト」を開く

2 ヘッダー部分を作る（サイトタイトルやキャッチコピー）
3 サービス紹介・ブログ一覧・お問い合わせ導線など、順番に配置
4 写真やイラストを入れて、色味や雰囲気も確認

実際に手を動かしてみると、Canvaで並べていくだけで「こういうトップページにしたい」というビジュアルが完成します。

Canvaのテンプレートを上手に活用するコツ

どんな構成にするのか迷ったら、「テンプレート」機能を使いましょう。


1. 「テンプレート」から、気に入ったデザインのアイコンをクリックします。

2. 「すべてに適用」をクリック

3. キャンバスに構成がそのまま転機されます。

テンプレートがあると書く項目が決まるので、設計しやすくなります。

さらに見た目が整うと、「この部分はSWELLのリッチカラムで作ろう」など、WordPressテーマ「SWELL」で使うブロックも自然にイメージできるようになります。

実際にSWELLでトップページを作ってみよう

Canvaでイメージが固まったら、いよいよSWELLでの制作に移ります。
ここでは、SWELLで使える代表的なブロックをお伝えしますね！

SWELLで使える便利なブロック１：メディアとテキスト

画像と文章を横並びにしてくれるブロックです。

 メディアとテキスト例：

SWELLで使える便利なブロック２：ボックスメニュー

サービス一覧やカテゴリー案内に活用できます。

 ボックスメニュー例

SWELLで使える便利なブロック３：ステップブロック

流れや使い方の説明に最適です。ステップの表示方法も３パターンから選べて楽しい！

 ステップブロック例

SWELLで使える便利なブロック４：フルワイドブロック

トップにインパクトを出したいときに使います。
幅は「記事の幅」「サイト幅」「フルワイド」から選べます。

以下に、Canvaで作った構成をSWELLで再現するときに使える「対応ブロック」の表をまとめたので、参考にしてください。

SWELLでの再現ポイント【ブロック対応表】

Canvaでのパーツ例	SWELLで使えるブロック・機能	補足ポイント
ヘッダー＋キャッチコピー	カスタマイズ＞トップページ	背景画像と一緒に魅せられるキャッチコピー、ボタンもOK
横並びのサービス紹介	カラムブロック／ボックスメニュー	アイコン付きも素敵にできる！
写真＋文章の組み合わせ	リッチカラム	左画像・右テキストなど自在に組める
手順の説明や導線案内	ステップブロック	導線を目立たせるのに便利
お客様の声・口コミ	ふきだしブロック＋画像	写真やイラスト付きで信頼感アップ
よくある質問	FAQブロック	アコーディオン表示でスッキリ
お問い合わせボタン	ボタンブロック	色と大きさを調整して目立たせよう

私が以前作った「サイト型ホームページの簡単な作り方」記事があるので、参考にしてください。

まとめ｜SWELLのトップページ設計は「見える化」でラクになる！

SWELLはとても優れたテーマですが、最初のトップページづくりはつまずきやすいポイントです。
そんなときは、Canvaで“設計図”を作ってから進める方法を試してみてください。

• デザインに自信がなくてもイメージが作りやすくなる
• クライアントとの共有もスムーズになる
• 実際のトップページ作業が格段にラクになる

「見える化」されているだけで、迷いが減り、SWELLの機能も活かしやすくなります。
ぜひ、Canva×SWELLの組み合わせで、思い描いた通りのサイト作りを楽しんでくださいね。