Canvaでスマホ特化型Webサイトが作れる?!
Canvaでスマホ特化型のウェブサイトが作れるのをご存知ですか？
現在、パソコンよりもスマホでウェブサイトを見る機会が増えており、スマホに特化したウェブサイトが増えています。
スマホ特化型サイトとは
スマホ特化型とは、パソコンでもスマホでも同じ表示がされることを言います。そのため、スマホ用のレイアウトを1つ作るだけで済むメリットがあります。
従来はパソコン、タブレット、スマホそれぞれのレイアウトを用意する必要がありましたが、スマホ特化型ならその手間が省けます。
WordPressやStudioなどで作ったスマホ特化型のサイトは、パソコンでもスマホ版で表示されるため、左右に大きな余白ができます。
しかし、Canvaで作ったスマホ特化型サイトは、PCでもスマホ版がそのまま表示されるため、写真や文字が大きく表示されることがあります。
スマホだけに綺麗に表示されれば問題ありませんが、パソコンでも綺麗に表示させたい場合は、レスポンシブデザインに対応する必要があります。
今回紹介するwebサイトのサンプルは、結婚式の招待状を友達や知人にLINEで送って参加してもらう想定なので、モバイルファーストで作っています。
webサイトの全体の構成を特徴を挙げながら紹介します!
電話やLINE送れる
Canvaにはリンク機能があります。リンクはwebサイトのurlだけではなく、電話をかけることも可能です。電話番号の前に「tel:」を入力すると電話がかけられるようになります。
また電話番号以外にも自分にLINEの連絡先urlを入力することで、LINEでもお祝いのメッセージが送ることができます。
動画でプロフィールムービーを掲載
プロフィールムービーを入れることで、より2人の思い出が伝わりやすくなります。
ちなみに動画もCanvaで作成できます。カット編集やトランジションが使えて、初心者でも簡単に編集できるのである程度Canvaの操作方法がわかる方は動画にチャレンジするのもスキルアップに繋がります。
動画の確認はこちら
フォームを埋め込み
Canvaではお問い合わせや応募のできるフォーム機能がないので、外部のツールを使う必要があります。一番馴染みのあるのはGoogleフォームですね。
一般的な方法としては、Canvaのページにボタンを設置し、そのリンクでフォームページに飛ばすことが多いです。
しかし、Canvaページ内にフォームを直接埋め込むこともできます。
Googleフォームも埋め込み可能ですが、設定によって埋め込みができない場合があるので、今回はJotformというサービスを紹介します。
こちらは無料で利用可能で、最大5個まで使えます。
作り方はとても簡単で、テンプレートも豊富にあるので、その中から選んで編集することもできます。
フォームが完成したら、リンクをコピーしてCanvaに貼り付けるだけで埋め込まれます
埋め込む際には「リンク」と「埋め込み」が選択できますが、「埋め込み」を選ぶことでページ内に表示させることができます。
フォームを入力して送信を押すと、メールで通知が届き、Jotformの管理画面からも一覧で確認できます。
フォームを入力して送信を押すとちゃんとメールにお知らせも届いて、Jotformの管理画面からも一覧で確認することができます。
いかがでしょうか？今回招待状を例にCanvaで連絡機能から動画、フォームまで実現することができます。
セミナーやイベント告知のランディングページを作成する際にフォームは必須ですが、この方法を使うとページから離れずに申し込みができるため、非常に便利ですね。
こちらの記事が参考になったら、
フォロー&スキをお願いします！
制作の励みになります(੭ु´･ω･`)੭ु⁾⁾
次回も裏技含んだ面白い企画で投稿しますので、
お楽しみに