AIやCanvaでLPデザインを作ったあと、どうやってWebページとして公開する?

CanvaやAIを使ってLPのデザインは完成したものの、
「これをどうやってWebページとして公開するの?」
「URLはどうやって作るの?」
と、
その先で困っていませんか?

実は、LPはデザイン画像を作っただけでは、

一般的なWebページとして完成したとは限りません。

この記事では、CanvaやAIなどで作ったLPデザインを公開する方法と、
画像・PDF・スクリーンショットしかない場合でも WordPressで実際のWebページにする方法を、
Webに詳しくない方にもわかりやすくご紹介します。

デザインはできた。
でも、このあとどうする?

CanvaやAI、Photoshopなどを使えば、
専門的なコーディングをしなくてもLPのデザインを作れるようになりました。

ところが、デザインが完成したあとに

「これをどうやってWeb上で見てもらうの?」

というところで止まってしまうことがあります。

「画像をそのまま載せればいいの?」

「URLはどうやって作るの?」

「ボタンを押せるようにするには?」

「スマホでもちゃんと見られるようにしたい」

完成したデザインを公開する方法は
ひとつではありません。

目的や今後の使い方に合わせて
選ぶことができます。

01
デザイン完成 Canva・AI・画像・PDFなど
02
公開方法を選ぶ 目的に合った方法を考えます
03
Webで公開 URLから見られる状態へ

LPデザインを
公開する主な3つの方法

完成したLPデザインをWeb上で見られるようにする方法はいくつかあります。
ここでは代表的な3つの方法を見ていきます。

01
手軽に公開したい

Canvaでそのまま公開

Canvaには、作成したデザインをWebサイトとして公開できる機能があります。 Canva内で制作から公開まで進められるため、 まずは手軽にWeb上で見られる状態にしたい場合に便利です。

こんな場合に まずは手軽にURLを作って公開したい
02
完成画像を活用したい

画像としてWeb上に掲載

完成したLPをJPGやPNGなどの画像として書き出し、 Webサイト上に掲載する方法もあります。

ただし画像内の文字は通常のWebテキストとは異なり、 ボタンやリンクなども別途設定する必要があります。
こんな場合に 完成したデザインをそのまま見せたい
03
更新・運用も考えたい

WordPressでWebページ化

CanvaやAI、画像、PDFなどのデザインをもとに、 WordPress上で実際のWebページとして組み立てる方法です。

文章や画像、ボタンなどをWeb上の要素として作ることで、 スマホ表示への調整や公開後の変更もしやすくなります。

こんな場合に 公開後もLPを使い続けたり更新したりしたい

Canvaで公開する場合

Canvaで作ったデザインは、
CanvaのWebサイト公開機能を利用してURLを作ることができます。

サーバーやWordPressを準備しなくても公開できるため、

「まずはWeb上で見られる状態にしたい」

という場合には使いやすい方法です。

こんな使い方に向いています

イベントのお知らせや期間限定ページなど、
まずはシンプルに公開したい場合。

一方で、今後内容を増やしたり、WordPressサイトの一部として運用したりしたい場合は、
最初からWebページとして制作する方法もあります。

1枚の画像として
公開する場合の注意点

LPデザインを1枚の長い画像にして掲載する方法は、
完成したデザインをそのまま見せられるというメリットがあります。

ただし、見た目はWebページのようでも、

画像とWebページでは仕組みが違います。

01

画像内の文字を通常のWebテキストとして扱えない

02

ボタンやリンクを付けたい場所には別途設定が必要

03

PCとスマホで読みやすくするための調整が難しい場合がある

04

文章だけ変更したい場合でも画像自体の修正が必要になる

「デザインを見せること」が目的なら画像でも十分な場合があります。
一方、集客やお問い合わせにつなげるLPとして長く使うなら、
Webページとして組み立てる方法も検討してみましょう。

WordPressでWebページ化すると何ができる?

WordPressでLPを作る場合、完成したデザインを参考にしながら、
文章・画像・ボタンなどをWebページとして組み立てていきます。

TEXT 文章を変更できる

公開後でも文章や料金などを修正しやすくなります。

LINK ボタンを設定できる

お問い合わせやLINE、予約ページなどへつなげられます。

RESPONSIVE スマホに合わせられる

画面幅に合わせてレイアウトや文字サイズを調整できます。

UPDATE 公開後も更新できる

写真や文章など、必要な部分をあとから変更できます。

画像・PDF・スクショしかなくてもWebページにできる?

元のデザインデータがなくても、

画像・PDF・スクリーンショットなどを見本にして
Webページとして制作できる場合があります。

見本となるデザインを確認しながら、
WordPress上で文章・画像・ボタンなどを組み直していきます。

STEP 01 デザイン

AI・Canva・画像
PDF・スクショ

→
STEP 02 Web実装

HTML・CSSなどで
ページを組み立て

→
STEP 03 WordPress

PC・スマホに
合わせて調整

→
STEP 04 URLで公開

実際に使える
Webページへ

「デザインまでは作ったけれど、その先が分からない」

そんな状態からでもWebページ化することはできます。

実際のWebページ制作例

こちらは、実際に制作した

トラブルフットケアサロン「t-nailfoot by glycine」様のLPです。

PCとスマートフォン、それぞれの画面幅で
見やすく操作しやすいように調整しています。

t-nailfoot by glycine LPのPC・スマートフォン表示
PC・スマートフォンに対応したLP制作例

スマートフォンでは、小さな画面でも内容を順番に読み進めやすいように
レイアウトを調整します。

t-nailfoot by glycine LPのスマートフォン全体デザイン
スマートフォンで見たLP全体のデザイン
見た目を再現するだけではありません。

文章・画像・ボタンなどをWeb上の要素として組み立てることで、
実際に操作できるLPとして制作していきます。

こんな方はWebページ化を
検討してみてください

✓

CanvaでLPデザインを作ったけれど、公開方法が分からない

✓

AIで作ったLPデザインを実際に使えるページにしたい

✓

手元に画像やPDF、スクリーンショットしか残っていない

✓

スマートフォンでも読みやすいLPにしたい

✓

LINEやお問い合わせページへつながるボタンを設置したい

✓

公開後は自分でも文章や画像を変更できるようにしたい

まとめ|
デザインの「そのあと」まで考える

AIやCanvaなどのツールによって、
LPのデザインを作ることは以前より身近になりました。

でも、LPはデザインを完成させることがゴールではありません。

見てもらえるURLを作る

スマートフォンでも読みやすくする

ボタンからお問い合わせや予約につなげる

必要になったときに内容を更新する

どこまで必要なのかを考えて、
自分の目的に合った公開方法を選んでみてください。

WEB DESIGN SUPPORT

デザインはあるけれど、
Webページにする方法が
分からない方へ

Canva・AI・画像・PDF・スクリーンショットなどをもとに、
WordPressで実際に使えるWebページとして制作しています。

「このデータでもできる?」という段階でも大丈夫です。
内容を確認しながら、公開まで一緒に進めていきます。

LET’S WORK TOGETHER
Have a project
in mind?

LP・Webサイトのデザインから
WordPress制作まで。

ゼロからのデザイン制作はもちろん、
お持ちのデザイン・画像・PDFなどをもとにした
Webページ制作にも対応しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webデザイナーとして、個人事業主・教室・サロンなどのLP・Webサイト制作を行っています。
WordPressを中心に、デザインからWeb実装まで対応。画像・PDF・スクリーンショットなどをもとにしたWebページ化も承っています。