WIXを使ったホームページ作成

全世界で1億人以上が利用する、オンラインで簡単にホームページ制作が可能なWIXというツールの使い方をご案内いたします。WIX(ウィックス)は無料版と有料版があり、有料版では独自ドメインの設定やオンラインサービスのタグ差し込みなど色々なサービスを受けることが可能です。なお、triplaのチャットボット・ホテルブッキングを利用するには有料版の登録が必要となります。

①WIXに新規アカウントを登録

https://ja.wix.com/ にアクセスし「新規登録」ボタンから必要な情報を入力して、会員登録をしてください。

②エディタを選択

WIXには自動作成とエディタでデザインを自由にカスタマイズできる2種類の方法があります。 今回はエディタでの作成方法をご紹介いたしますので「テンプレートを選択」ボタンをクリックしてください。

③テンプレートの選択

デザインテンプレートが多数存在し、その中から自分に合ったものを選択してカスタマイズすることが可能です。 今回は左のメニューの「旅行&観光」の中から、「B&B」というテンプレートを使って編集方法をご説明いたします。

テンプレートの中からB&Bというテンプレートを見つけたら、画像の上にマウスを当て、「編集」ボタンをクリックしてください。

④テキストを編集1

テンプレートは初期に設定されているテキストや画像が表示されていますので、その内容を修正していきます。 まずはタイトルとなる施設名のテキストを修正します。「ANTON&LILY」と表示されている箇所をクリックすると「テキストを編集」というボタンが表示されるので、そちらをクリックしてください。

⑤テキストを編集2

テキストの編集をクリックすると文字が直せるようになりますので、文字にカーソルを合わせて自館の名前を入力してください。 「テキスト設定」という窓が同時に開き、その中でフォントや文字サイズなどの変更もできます。

ページ内に他にも多数のテキストがありますが、同じ要領で修正が可能です。

⑥画像を編集1

次に画像を編集します。テキストと同じように画像をクリックすると「ストリップ背景を編集」や「画像を変更」といったボタンが表示されますので、そちらをクリック。 すると画像を設定する窓が表示されますので、「画像」というボタンをクリックしてください。

⑦画像を編集2

パソコンに保存している画像を設定する場合には、「アップロードボタン」をクリックして、表示させたい画像を選択してください。

⑧パーツの削除

テンプレートに設定された不要なパーツを削除します。 WIXのテンプレートに予め設定されている検索窓は不要のため、マウスのカーソルを合わせて右クリックでウィンドウを開き、削除を指定していしてください。

⑨パーツの移動

検索窓を削除すると隙間が空いてしまいます。その隙間を埋めるために下にあるパーツを移動させることが可能です。 移動させたいパーツ(テキストなど)をクリックしたまま上下に動かしましょう。パワーポイントに近い動作イメージとなります。

⑩パーツの追加1

テキストや画像・ボタンなどを新たに追加するには、左メニューの+マーク「追加」からパーツを選択します。 ここでは画像の追加方法として、「追加」>「画像」>「画像のアップロード」をクリックし、画像変更と同様にパソコン内の画像を選択して表示させます。

⑪パーツの追加2

画像が表示されたら、左クリックしたまま画像を移動させます。 縮小は四つ角のポイントを左クリックしたまま動かして縮小拡大が可能です。

⑫リンクの編集1

テキストや画像にリンクを設定したい場合は、それぞれのパーツをクリックし、クリップの形をしたリンクマークをクリックして設定します。 以下の図ではテキストの編集方法となりますが、「テキストの編集」ボタンを押すとウィンドウが開き、その中にリンクボタンが表示されますので、そこをクリックし編集してください。画像の場合は「画像の編集」ボタンの並びにリンクボタンが表示されます。

⑬リンクの編集2

このテンプレートには「宿泊予約」というボタンが設定されており、クリックするとWIXの検索窓が開いてしまいます。 triplaの検索窓が開くようにリンクの設定変更が必要です。 「宿泊予約」のボタンをクリックすると「テキストの編集」ボタンが表示されますので、そのボタンをクリックしリンクの追加ボタンをクリックしてください。次に「リンク先を選択」というウィンドウが開きますので、「ウェブアドレス」を選択し、「ウェブアドレス(URL)」にtriplaの検索窓が表示されるURLを設定してください。

なお、URLは施設毎に異なるため、tripla管理画面で確認するか、営業担当までお問い合わせくださいませ。

⑭リンクの編集3

他にページ内で宿泊予約へのリンクが無いか確認し、ある場合はそれぞれ修正を行ってください。

⑮ヘッダーメニューの編集

ヘッダーのメニューは、同一ページ内の各項目へジャンプするリンクとなります。 削除や追加をしたい場合は、左メニューの一番上にある「サイトメニュー」をクリックしてください。 サイトメニューの中に、ヘッダーに設定されているメニューがありますので、削除する場合はその項目の右側のボタンから削除を選択。 追加する場合は「ページの追加」を押して名前や表示させる場所などを選択してください。

⑯スマートフォンでの表示設定

今まではパソコンでの表示設定を行いましたが、スマートフォンの場合はサイズが異なるので個別の編集が必要です。 上部メニューにモバイルマークがありますので、そちらをクリックすると、現時点でのスマートフォンでの表示状態が確認できます。 ここで、ボタンや画像のサイズ変更や場所移動などを行うと、スマートフォンの場合のみ反映されます。例えば、パソコンの場合では画像を表示させるが、スマートフォンの場合は場所を取るので削除するということも可能です。

⑰サイトを公開する

ある程度編集が完了したらサイトを公開します。 右上にある「公開」ボタンをクリックするとインターネットへ公開が可能となります。

⑱URLの確認

公開が完了するとサイトのURLが表示されます。 最初はWIX側で指定したURLとなりますが、後で変更が可能です。一度作ったサイトを「サイトを見る」をクリックして確認してみましょう。

⑲各種設定へ

サイトの公開以外に必要な設定を行うため、上部メニューの「サイト」から「エディタを終了」をクリックし、設定画面へ移動します。

⑳アップグレードを行う1

現状は無料プランとなっており、triplaの検索窓を設置できません。 「アップグレード」ボタンをクリックして、有料版の登録へ進みましょう。

㉑アップグレードを行う2

2020年6月時点でのプレミアムプランです。 triplaの検索窓を設置するには、ホームページプラン内だと「ベーシック」「アドバンス」「VIP」いずれかのプランへのアップグレードが必要となります。 月・年払いや、キャンペーンなどによっても料金が変わりますので、ご自身の都合にてプランの申し込みをしてください。

㉒ドメインの設定

既にホームページ用のドメインを取得している場合、または新規にドメインを取得する場合はこちらから設定が可能です。 ドメイン移行についてはサーバー管理元へご確認ください。

㉓サイト名の変更

デフォルトはサイト名が「Mysite」となっているので、「【公式】鈴木旅館/隅田川温泉」など、ページのタイトルを設定しましょう。このタイトルがGoogleで検索した際の名前となります。 また、ウェブアドレスも同時に変更することが可能です。独自ドメインでない場合は、ここのウェブアドレスをなるべくわかりやすいアルファベットに修正しましょう。

㉔triplaのJavascriptタグを設定する1

triplaの検索窓やチャットボットを表示するには、ホームページにJavascriptを設定する必要があります。 左メニューの「設定」をクリックし、上級設定の「カスタムコード」を選択してください。(申し込まれたプレミアムプランにより若干画面が異なります)

㉕triplaのJavascriptタグを設定する2

tripla管理画面で発行したJavascriptコード(不明の場合は営業担当にご確認ください)を、「こちらにコードをペーストしてください」という欄に書き込んでください。 ツール名は後でわかるように「tripla」と記載してください。 最後に「適用」を押して保存してください。

triplaのサービス表示がONになっていれば、この設定だけで検索窓やチャットボットなど契約しているサービスがサイトに表示されます。

㉖多言語サイトの設定1

WIXのページを日本語のみ・英語のみで作る場合は問題ありませんが、多言語サイトで作る場合の設定をご説明します。 サイトの編集画面に戻って、上部メニューの「設定」から「多言語サイト」をクリックしてください。

㉗多言語サイトの設定2

次の画面で「言語を追加」をクリックしてください。

㉘多言語サイトの設定3

デフォルトが日本語になっていますので、追加したい言語を設定して「言語を追加」ボタンをクリックしてください。 英語の1言語だけでなく、韓国語や中国語など、複数の言語を追加できます。

㉙多言語サイトの設定4

他言語の設定をすると、設定画面にマルチリンガルというメニューが表示されます。 このマルチリンガルダッシュボードにて、設定した言語の「表示」ボタンをONにすると、作ったサイトでその言語表示が可能となります。

㉚多言語サイトの設定5

編集画面に戻ると左上のロゴ横に言語の国旗マークが表示されます。 例えば英語を設定した場合に、日本語から英語に変更すると、英語版のサイトが表示されます。 但し、できた段階では日本語サイトがコピーされた状態なので、言語を英語化する必要があります。

㉛多言語サイトの設定6

まずタイトルの文字を変更します。タイトルのテキストをクリックすると「Googleで翻訳する」というボタンが表示されますので、そこをクリックすると自動的Google翻訳でテキストを英訳してくれます。同じ要領で他のテキストも翻訳しましょう。 訳に自身のある方は、直接テキストの変更も可能です。

以上が基本的な設定となります。

他にも様々な設定が可能ですので、詳しくはヘルプセンター | Wix.comにてご確認ください。お疲れさまでした。

最終更新