TayoriBlog

  • このエントリーをはてなブックマークに追加

【無料】Wixで作ったホームページにお問い合わせフォームを設置する方法

Tayori_blog_banner_wix

 

多くの中小企業、スモールビジネスを営んでいる方、アーティストの方などは、オンラインマーケティングの取り組みの1つとして、顧客との接点とプレゼンスを高めるために、ホームページが必要になっています。

ビジネスを立ち上げたばかりで、ホームページ作成にそこまでコストをかけられない人に、フリーでホームページを作れるCMSを使うというのは自然の流れになっています。

CMSプラットフォームの代表はWordPressで、インターネット上のサイトの1/4以上がWordPressで作成されています。WordPressは自由度が高く、デザインもカスタマイズが細かくできますし、プラグインも沢山あるので、機能追加などがしやすくなっています。

本記事では、CMSプラットフォームとして人気が急上昇しているWixについて、利用方法やお問い合わせフォームの設置方法について解説していきます。

Wixとは?

Wixとは、HTMLやCSSのようなWeb制作の専門知識が不要でWebサイトを制作できるCMSです。デザインテンプレートからベースとなるデザインを選び、ドラッグ&ドロップの操作だけで好みのデザインにカスタマイズできます。

また、標準でレスポンシブデザインに対応しているため、PCやスマートフォン、タブレットなど複数の端末の表示に対応しています。

デザインテンプレートは500種類以上、写真素材が2,000点以上が標準搭載されています。Webページごとにクリエイティブを制作したり、写真素材を用意したりする手間無く、雰囲気に合わせたカスタマイズができます。

プランは無料プランとプレミアムプラン(有料プラン)の2つから選べます。

プレミアムプランは利用できる機能にあわせて5種類用意されており、自社の利用状況によって選択できます。

独自ドメイン設定のみ可能な「ドメイン接続」や、コーポレートサイトのような法人利用に適した「無制限」、ECサイト(ネットショップ)向けの「eコマース」などがあります。

料金・プレミアムプラン Wix com

画像引用:https://ja.wix.com/upgrade/website

無料プランでは独自ドメインが取得できなかったり、ストレージ容量が500MBまでだったりと制限はあるものの、Webサイトの制作・運用自体は問題なく行えます。

Wixでホームページ作成するメリットは?

  1. 無料で手早くホームページを作成できる
  2. 専門技術がなくても問題なし
  3. コンテンツの入れ替えも簡単なので更新作業が楽

Wix利用のメリットは、なんと言っても「無料」で、「誰でも簡単に」ホームページを作成できる点にあります。
プログラミングやWebデザインの知識がなくても、テンプレートにコンテンツを当てはめるだけでホームページが完成します。
完成後も、画像やテキストなど自由に変更できるので、一般的なホームページに比べて更新作業の負担も軽いでしょう。
また、Wix App Marketでは、様々なタイプの拡張機能が揃っており、カスタマイズや外部連携にも対応しています。

総じて、ホームページを作成したいけど、時間もお金もかけられないという場合に最適です。
無料プランは制限が多いものの、機能的には十分です。まずは無料で作成して、うまく運用にのせられたらその段階で有料プランへの移行を検討してみましょう。

Wixでホームページを作成する前に知っておきたいこと

  1. 一度選択したデザインテンプレートは公開後変更できない
  2. 無料版は広告が表示される
  3. 日本語での電話サポートはなし
  4. バックアップ機能がない

Wixは早く、簡単に、お金をかけずにホームページを作成したいときに最適なツールです。
ただ、機能がシンプルな分、制限される部分も多いことは事前に理解しておきましょう。
まず、デザインテンプレートは、ホームページ公開後に変更できません。
プレビュー画面で、本当にそのデザインが最適化どうかを入念にチェックしましょう。

また、無料版の場合はホームページ上に広告が表示されます。ただ、Wixに限らず、一般的な無料サービスには広告表示がつきものなので、ある程度は許容できる方が多いかもしれません。
ブランディングに強いこだわりがあり、広告表示したくないという方であれば、有料プランか別のCMSを利用する方がいいでしょう。

Wixは日本語での電話サポートには対応していないので、緊急のトラブルが発生しても自力で解決しなくてはいけません。
しかし、日本のFAQが充実しているのに加え、メールであれば問い合わせが可能です。

バックアップ機能もないため、テキストや内容をコピーするなどして自身でバックアップを取得しておく必要があります。

Wixの登録方法

ホームページ作成 無料ホームページの作り方 WIX

会員登録するには、トップページ(https://ja.wix.com/)の画面右上にある「ログイン/新規登録」をクリックします。

※画面中央にある「今すぐはじめる」をクリックしても同様のページに遷移します。

ログイン Wix
ログイン画面が表示されるので、新たにアカウントを作成する場合は「無料新規登録はこちら」をクリックしましょう。

ログイン Wix2
新規登録ページでは、ご自身のメールアドレスと任意のパスワードを入力するだけでアカウント作成が完了します。

また、メールアドレス以外にも、FacebookやGoogleのアカウント認証による登録も可能です。既存のアカウントを利用できるため個人用Webサイトなどを作成する際に利用してみるのも良いでしょう。

Wixでホームページを作成してみよう

Webサイトのジャンルを決める

Wixジャンル選定

アカウントの新規登録が完了すると、Webサイトの大まかなジャンルを決めるページに遷移します。

この一連の操作はスキップする(飛ばす)こともできますが、後程テンプレートを選択する際にデザインの絞り込みができます。

Webサイト制作に慣れていない方は、ページ上のガイダンスに従って利用してみましょう。

wixガイダンス

サイトのジャンルを決めるガイダンスは、上記の画像のように文章に任意の言葉を選択していくだけで完了します。

今回はWix ADIを活用して、「自分用」「ビジネスサイト」「一度も作成した経験がありません。」を選択しました。

ビジネス HTML ホームページ テンプレート Wix

3つの質問に回答すると、500種類以上あるデザインテンプレートから、選択したジャンルの雰囲気にあったデザインに絞り込まれます。

上述のページで「ビジネスサイト」を選択しているため、ビジネス向けのデザインが一覧表示されています。そこからさらに業種ごとに絞り込むことも可能です。

ビジネス HTML ホームページ テンプレート Wix 2

作成したい雰囲気のテンプレートがあれば選択して「編集」ボタンをクリックします。

Webサイトとしてほぼ完成状態のテンプレートが表示されますが、デザインの配置や色、写真やテキストは自由に組み替えられますので、大まかなイメージで選択しても問題ありません。

文字や画像など装飾を編集する

s_Wix ホームページエディタ1

テンプレートの編集方法は非常に直感的です。

テキストを編集する場合、文章の上でクリックするだけで入力画面が表示されます。任意のタイトルや本文に書き換え、フォントの種類やサイズや色など装飾を変更できます。

新たに文章や画像をページ上に載せたい場合、画面左側のメニューにある「追加」から選択してください。

プログラミング言語は一切用いず編集できるため、Microsoft Wordのようなワープロソフトを編集する感覚で「見たまま」の状態をデザインに反映できます。サイト制作に不慣れな方でも簡単に編集できるでしょう。

画像・ボタンを設置する

s_Wix ホームページエディタ3

画像の変更もテキスト同様に簡単にできます。変更したい画像を左クリックすると「画像を変更」、無地の箇所をクリックすると「画像の追加・管理」というボタンが表示されます。

ボタンをクリックすると、ご自身で用意した画像素材をアップロードできるタブが最初に表示されます。

s_Wix ホームページエディタ4
もし、画像素材がない場合であれば「Wix フリー素材」「Shutterstock 素材」というタブをクリックしてみましょう。

「アート」「ビジネス」など様々なデザインテーマごとに画像素材が一覧で表示されます。
任意の画像を選択した後、右下の「画像を追加」をクリックするだけでページ上に反映されます。

Wix ホームページエディタ ボタン

「お問い合わせ」など、特定のページへの導線としてボタンリンクを設定しようと検討している方もいるのではないでしょうか。Wixでは、画像素材と同じくボタンに関してもあらかじめ複数のデザインが用意されています。

左側のメニュー「追加」から、ボタンを選択してみましょう。複数のボタンのパターンが表示されるので、任意のボタンをクリックすることでページに挿入できます。

ボタンの位置は、Microsoft PowerPointのようにドラッグ&ドロップで位置を指定できます。

ページ上に設置したボタンを左クリックすると、テキストの編集、色、サイズ、リンクの設定ができます。CTAボタンとして設置するのであれば、CV率など成果指標の状況にあわせて改善してみるのも良いでしょう。

プレビューを確認して公開

Wix ホームページエディタ プレビュー

一通りのサイト制作が完了したら、公開前にプレビューを確認しましょう。編集画面の右上に「プレビュー」というボタンがあるので、そちらをクリックしてください。

公開時のレイアウトで作成したページが表示されます。

Wix ホームページエディタ スマホ
プレビュー時、画面左上にPCとスマートフォンのアイコンが表示されており、それぞれのプレビューを表示できます。上記の画像は、スマートフォン版の表示です。

公開前の段階で、文字や画像、ボタンのサイズは問題ないか、不自然な改行やレイアウト崩れが起きていないかを確認しておきましょう。

Wix ホームページエディタ hozon
プレビューの確認が終わったら、画面右上にある「保存」をクリックします。

2Wix ホームページエディタドメイン
初回の「保存」の際、サイトのドメイン設定を行います。

無料プランでは独自ドメインは利用できませんが、「http:アカウント名.wixsite.com/任意の文言」でドメイン設定できます。

社名やサービス名など任意の文字列を入力してみましょう。

Wix ホームページエディタ 公開
保存とドメイン設定が完了したら最後に、画面右上の「公開」をクリックしてください。
先ほど設定したドメインをブラウザのアドレスバーに入力すると、Webサイトが表示されます。

Wix上にお問い合わせフォームを設置する

WixでWebサイトを作成したら、「お問合せフォーム」を設置してみましょう。

お問い合わせフォームを設置することで、顧客との関係性を強化できる

個人事業主やクリエイターが顧客との接点となるお問い合わせフォームをWebサイトに設置することで、顧客からの問合せに対応して顧客との良好なリレーションを築けます。営業時間外でも手軽に連絡がとれるようになるので、顧客の安心感につながります。

お問い合わせフォーム設置のステップ

Wix_contact_form
Wixでは、コンタクトフォームもドラッグ&ドロップで簡単にページ上に設置することができます。
送信後のメッセージ表示や、フォーム入力枠線の色や、フォントの設定などデザインも細かく設定できます。

Wix_mobile_optimized
より多くのサイト訪問者が読みやすいように、スマートフォン対応もしています!モバイル最適化を行うにチェックを入れるだけと簡単です。

Wix_form_animation
フォームを表示したタイミングでフェードインアニメーションをつけたり、エフェクトの時間設定など細かく設定することができ、サイトのルック&フィールに合わせたフォームを作ることができるようになっています。

Wix_app_market
Wixの良い点の1つにApp Marketがあります。WordPressプラグインのように、役に立つ機能が沢山用意されています。Wixアプリにもフォームを作れるアプリがいくつかあり、お問い合わせフォームやイベント用フォーム、レストラン予約フォームなど様々なニーズに対応したフォームを作ることができます。

WixでTayoriのお問合せフォームを設置する

Wixには様々なお問い合わせフォームが用意されているのですが、フォームの記入項目を増やせない、ラジオボタンやプルダウンメニューを設置できないなど細かな機能は実装されていません。入力フォームでは、顧客が回答しやすい設問と、いかにストレスなく情報を入力してもらうかが大変重要になります。

顧客が使いやすいお問い合わせフォームを設置したい場合は「Tayori」を使ってみましょう。問い合わせフォーム、アンケート、申し込みフォーム、注文フォームなど、さまざまなニーズに対応したフォームを作成できます。

フォーム受信箱
受け付けたお問い合わせはメールではなく、Tayoriの受信ボックスで管理します。お問い合わせに対応したのか、未対応なのか一目でわかるようになっていますので、対応漏れも防ぐことができます。

スクリーンショット 2020-08-12 17.16.26

今回の記事では、ヘアーサロンの予約フォームを作成し、Wixに設置してみます。
新規フォーム作成からフォーム名を入れ、テンプレートを使用すると、予め質問項目が設定されているためスピーディーに進められます。

フォームを作成したら、フォームの「設置」ページに移動し、「iframe」タブをクリックします。

スクリーンショット 2020-08-12 17.17.24

iframeの枠の高さを指定し、その後黒い枠内の埋め込みコードをコピーします。

iframe

次に、フォームを埋めこみたいあなたのWixウェブサイトのページに行きます。サイドバーの+から、その他を選択し、HTMLコードをクリックします。コード入力から、先程コピーしたTayoriの埋め込みコードを貼り付けて「更新」ボタンをクリックします。

Wix_form_height
フォームの高さを調整したい場合は、埋め込みコードの height:px の箇所を変更して高さを調整してください。

Wix_form_scrollbar
スクロールバーを消したいときは、scrolling=“no”をタグにいれるとスクロールバーはでなくなります。

まとめ

今回は無料でホームページを作れるWixを使ったWebサイト制作方法とTayoriを使ったお問い合わせフォームの設置方法をご紹介しました。

Tayori」は、無料からフォーム、FAQ(Q&A)ページが簡単に作成できるツールです。これまでに、40,000アカウントの導入実績があります。お問い合わせ管理など、チームで顧客対応を見える化して、様々な業務の効率化を支援してきました。無料で登録後にすぐに利用可能で、最短1分で導入が可能です。

まずは無料版からお試しください。

Tayori 公式サイトはこちら

>>Tayoriサービス紹介資料のダウンロード【無料】はこちら

関連記事

3分で読める !
カスタマーサポートお役立ち資料

無料ダウンロード

閉じる