記事内に商品プロモーションが含まれる場合があります
この記事は従来のWixエディタでパン屋テンプレートを編集する手順です。Wix HarmonyやWix Studioでは画面・操作が異なります。画像は記事制作時のものです。現在の画面では名称・配置・利用できる機能が変わっている場合があります。
Wixの使い方の、初心者向けの解説です。
Wixの会員登録からテンプレートの探し方、編集方法や基本的な操作、ホームページを公開する方法までわかりやすく説明します。
これを読みながら操作すれば、自分でホームページを完成させることができます。ぜひWixを開いて、一緒に操作してホームページを作ってみましょう。
1.Wixでのホームページ作成手順
Wixで自分でホームページを作るための手順を、まずはざっくり紹介します。
- Wixに会員登録
- テンプレートを選ぶ
- デザインカスタマイズ
- ドメインを設定
- ホームページを公開
最初にWixに会員登録したら、Wix内にたくさんあるテンプレートから、自分の作りたいホームページにしっくりくるテンプレートを選びます。
あとはテンプレートを編集したら、「ドメイン」というホームページの住所を設定し、公開ボタンをクリックするだけです。
無料でもできる？
できます！今回の解説は、無料プランの範囲内の機能で行います。
有料プランではWixの広告を非表示にしたり、独自ドメインを接続したりできます。予約の受付やオンライン決済に必要なプランは機能ごとに異なります。プランを上げるだけで表示速度が直接速くなるわけではありません。（料金はこちらの公式ページから確認できます）
Wixはテンプレートを使わないといけないの？
そんなことはありません。もちろん、イチから自分でホームページを自由に作成することもできます。
ここから登録方法や使い方を解説していくので、ぜひ無料で会員登録して、一緒に操作してWixの基本を身につけ、ホームページを作ってみましょう！
2.Wixの登録方法とダッシュボードの操作方法
Wixの会員登録方法
Wixの公式サイトにアクセスしよう
まずは上のボタンからWixに飛びましょう。
登録する
このような画面が開くので、「今すぐはじめる」のボタンをクリックします。(メールアドレスは後でもOK)
メールアドレスとパスワードを設定して、下の「新規登録」をクリックします。もしくは、GoogleアカウントかFacebookアカウントでも登録可能です。
GoogleやFacebookのアカウントで登録した場合でも、勝手にSNSに投稿されるようなことはないのでご安心ください。
アンケート的にいろいろ聞かれますが、右下で「スキップ」しましょう。（選択肢は後から選び直すことができるので、とりあえずテキトウに選んでしまってもOKです)
「AIチャットボット」の利用を聞かれますが、どちらでもよいです。今回は「利用しない」にします。
利用する場合、「何のサイトを作るのか」「ターゲットは」「ほしい項目・機能は」等聞かれます。答えていくとダッシュボード（管理画面）が目的にあわせてカスタマイズされます。
このあたりの質問も、スキップでOKです。
こういった画面もバツで閉じてOKです。
これで、ダッシュボード（管理画面）が開きました。
ここまできたら会員登録は完了です。
Wixのダッシュボードの使い方
Wixでは、ホームページ（Webサイト)ごとにダッシュボードが作成されます。
現在開いているダッシュボードがどのホームページのものなのかは、左上から確認できます。（新しいサイトもここから作成可能）
会員登録直後も、デフォルト状態のホームページがすでにひとつ作成されているような状態です。なので、「現在ダッシュボードで開いているホームページを編集していく」という形になります。
アカウント設定を変更しておく
セキュリティ対策と、もうひとつ大事な設定があるので、最初にアカウント設定をいじっておきましょう。
アカウント設定は右上にあります。
Googleアカウントでログインしている場合は、初回でWix用のパスワード設定を求められます。新しく設定しておきましょう。
あと、「サイトURLプレフィックス」を変更しておきましょう。
これは、ホームページのURLの一部になる文字列です。デフォルトがほぼメールアドレスになっているので、変えておくことをおすすめします。
ホームページを編集する
ホームページを新しく編集していく場合や、前回の続きから編集する場合は、右上の「サイトをデザイン」をクリックします。
3.テンプレートをWixで探して選ぶ
Wixのホームページテンプレートを選ぶ
まずはダッシュボード右上の「サイトをデザイン」をクリックしましょう。
するとこのような選択になるので、「テンプレートを選択する」をクリックします。
AIの方を選ぶと、質問への回答を基にサイトを作成できます。以下は、記事作成当時に筆者が選んだテンプレートを使って編集する例です。
なので今回は、「好みのテンプレートを探して、そのテンプレートを編集していく」という方法にします。
テンプレートを探していきます。 上の方にカテゴリがあるので、作りたいサイトのカテゴリをクリックして開き、探してみましょう。
実際の表示を確認する
良さげなデザインがあったら、表示イメージを確認してみましょう。
例として「パン屋」のテンプレートを選んでみます。※ 後ほど編集してカフェのサイトに作り変えていきます
テンプレートにマウスカーソルをのせると「編集」と「表示」のボタンが出るので、「表示」をクリックしましょう。
ホームページのデザインイメージが表示されました。スクロールしたり、メニューをクリックしたりして、どんなホームページが作れるのかをチェックしましょう。
スマホ表示のデザインまでチェック
最近では、ジャンルに関わらず、スマホからホームページを見る人がたくさんいます。そこで、スマホ表示のデザインまでチェックしたうえで、テンプレートを決めるのがおすすめです。
画面の上にあるをクリックしましょう。すると、スマホ画面での表示がチェックできます。
テンプレートが決まったら［編集］をクリック
「このテンプレートを使おう」と決まったら［編集］をクリックしましょう。
ホームページのデザインエディタ（編集画面）が開きました。この画面で、デザインを必要に応じて変えていくわけですね。
4.Wixの使い方の超基本
編集方法の解説に入る前に、「把握しておくと操作がスムーズになる基礎知識」を説明します。
テンプレートのページ構造
今回選んだテンプレートが、どのようなページの構造になっているのかを確認してみましょう。
ホームページを開くと最初に「ホーム」の画面が表示され、上のメニューをクリックするとそれぞれのページ（商品一覧、当店について、問い合わせ）が表示される形になっています。
ただ、カフェのホームページなどはサラッと見る人が多いと思います。なので、なるべく１ページ（ホーム）にまとめて縦スクロールで全情報を確認できるようにし、商品情報だけ長くなってしまうので別ページにする、という構造がおすすめです。
ざっくりですが、こんなイメージですね。
ホームページに来た人が「なんか面倒だな」と離脱しないよう、情報を簡潔にするのも大事です！
パーツの名称
編集画面で「ページ」「セクション」「パーツ」という名称が出てくるので、どれが何を指しているのか覚えておきましょう。
クリックして開く画面それぞれが「ページ」です。
「当店について」「商品一覧」などの、ページ内のある程度のまとまりが「セクション」です。
テキストや画像など、セクション内のひとつひとつの部品が「パーツ」です。
5.Wixでテンプレートを編集する方法
Wixの編集画面の使い方
まずは、編集画面の見方をざっくりおさえましょう。よく使う部分は後ほど詳しく説明するので、とりあえず「こんなものがあるんだな」程度に見て頂ければOKです。
ヘッダーメニュー
まずは上のヘッダーメニューから見ていきましょう。
一番左側に、「ページの切り替え・管理」をできる項目があります。「ホーム」や「商品一覧」などのページをそれぞれ編集したいときや、ページを削除・追加したいときに触ります。
隣は「スマホ画面」「PC画面」の切り替えボタンです。スマホ画面用のデザインを変更したいときに触ります。
右側はこんなかんじ。主に使うのは「保存」や「プレビュー」でしょうか。最後にホームページを公開するときのボタンもここにあります。
左メニュー
続いて、こちらの左メニューです。
主にパーツやセクションを追加したり、アップロードした写真を管理したりします。「アプリ」は予約機能等をつけたり、「CMS」はサイトのコンテンツを管理する機能ですが、ややこしくなるので今回は割愛します。
右メニュー
右側にも小さいメニューがあります。セクションを並べ替えたり、テンプレート編集時に便利な「クイック編集」という機能もあります。その他、よりホームページをおしゃれに見せるための機能もあります。
とりあえずは、初心者向けの基本的な操作のみ使って、テンプレートの編集方法を解説していきますね。
文字を編集する
ここからは文字や画像、レイアウトなどを変更する方法を紹介します。
文字を変更する
変更したいテキストはダブルクリックして変えることができます。
テキストの真上をダブルクリックします。すると右側にパネルが表示されますが、いったん放置しておきます。
Backspaceキー(Deleteキー）で文字を消して、好きな文字を打って入力します。
文字の色を変える
文字をダブルクリックして右側に表示されるパネルから、フォント（文字の種類）や色などの装飾も変更できます。
まずは文字の色を変えてみましょう。
ダブルクリックして文字が選択された状態で、パネルの「文字色」のボタンをクリックします。
なお、文字が選択された状態(薄い青で覆われた状態)でなければ、装飾の変更はできません。もし選択が外れた場合は、文字をドラッグして選択された状態にしましょう。
表示されたカラーパネルから、好きな色をクリックして選べば、色変更されます。
もし好みの色がない場合は、自由に設定できます。このプラスマークをクリックしましょう。
開いた画面で、丸２つを動かして、好きな色を設定します。色が決まったら、右下の「適用」をクリックすればOKです。
文字の大きさを変える
文字の大きさを変えたいときはとても簡単で、ここの右端の数値を変えるか、つまみ（丸）を左右に動かせばOKです。
フォントを変える
フォント種類(文字の種類)を変えるときには、変えたいテキストを①ダブルクリックで選択したうえで ②フォントをクリックします。
すると下にずらっとフォント一覧が表示されるので、好きなものをクリックします。一番下のほうにスクロールすると、日本語フォントが出てくるので、日本語文章はその中からフォントを選びましょう。
画像を変更する
続いて、この背景画像（パンの画像）を、自分で用意した画像に変更してみましょう。
どこでもいいので背景画像をクリックして、表示された「背景を変更」のボタンをクリックします。
表示されたメニューで、「画像」をクリックしましょう。
左側に「メディアをアップロード」のボタンがあるので、それをクリックします。
するとこのような画面が開くので、自分のパソコンのフォルダ内の画像を選ぶか、薄い水色の部分に画像をドラッグ＆ドロップします。
画像が小さく表示されていればOKです。右下の「背景を変更」をクリックします。
これで背景画像の変更は完了しましたが、Wixでは、アップロードした画像の編集・加工が簡単にできます。
画像を編集する
画像をクリック→「背景を変更」で開くメニューで、「設定」のボタンと、その右隣に調整のボタンがあります。
「設定」は画像の透明度や、表示位置を調節できます。
右側の調整バーのアイコンをクリックすると、画像加工のメニューが開きます。
明るさや色温度など調節できます。調節したら右上の「保存」をクリックしましょう。
他にも、ちょっと面白い加工が簡単にできたりします。
例えば、「オーバーレイ」の「ぼけ」を選ぶと、このようなボケた光を画像に重ねることができます。（位置や強度も調節できます）
「画像を入れ替えたらなんだかデザインがしっくりこなくなった」というときは、明るさや色のトーンなど、画像を少し加工してみるといいかもしれません。
「写真の横幅が足りなくて余白ができてしまう」等で困ったら、「クロップ・画像拡張」→「拡張」→横幅指定→「画像を拡大」で、足りない背景を自動で生成してくれます。
生成された背景に不要なものが入っていたら、「オブジェクト消しゴム」→消したい物をドラッグで選択→「オブジェクトを消す」をクリックしましょう。
背景が拡張されて写真の横幅が十分になり、不要なものも消せました！右上の「保存」をクリックすれば完了です。
パーツの位置変更や削除・追加
パーツの削除
テンプレートには、自分のホームページには不要なパーツも含まれているので、それを削除しましょう。
削除したいパーツ（今回はテキスト）をクリックして選択し、この状態でキーボードのバックスペースキーを押せば、削除できます。
パーツ位置を変える
「画像を差し替えたらテキストが見づらい…」というときは、テキストの位置を動かしましょう。現在は中央にあるので、右に寄せたいと思います。
テキストをクリックしたら、そのまま右へドラッグします。（カーソルが十字キーになっていれば移動できます）
このときに、端のほうにある線からパーツがはみ出ないようにすると後々楽です。
パーツの端をクリックしたまま左へ動かして、テキストの周りに無駄にできていた余白を縮め、線の内側に収まるようにしましょう。
線の外側にはみ出てしまうと、スマホ表示の際にうまく表示されないといったことが起こります。
ついでに、文字がやっぱり見えづらいので、色を白に変更しておきますね。
パーツを追加する
パーツは新しく追加することもできます。試しにテキストを追加してみましょう。
左メニューの＋マークをクリックして、テキストのカテゴリーの中から「テキストです。ここを〜」というパーツを選び、クリックしたまま動かしてデザイン上に移動します。
マウスを離すとデザイン上に追加できるので、ダブルクリックして文章を編集しましょう。
他にも、文字色やフォント種類、サイズなども変更しましょう。
最後に、外枠の幅を縮めておきましょうね。
データを保存する
このあたりで一旦編集データを保存しておきましょう。いつブラウザが落ちるかわからないので、自動保存もあるとはいえ、こまめに保存することをおすすめします。
編集画面の右上にある［保存］をクリックします。
無料サイトのURLを設定
この画面の「編集」で無料サイトのURLを設定できます。公開前に決めておきましょう。公開後に変更すると共有済みのURLに影響します。変更がなければ「閉じる」をクリックします。
ボタンのデザインを変更する
パーツで新しく追加したボタンや、テンプレート上のボタンのデザインを変えてみましょう。
Wixには、「パーツ」として様々なデザインのボタンが用意されています。新しく追加したいときは、この中から選んでデザイン上にドラッグ＆ドロップします。
テンプレート上にすでに配置されているボタンのデザインを変えたいときは、ボタンをクリックしてから「デザイン」を選択しましょう。
すでに完成しているボタンデザインをクリックして選択することもできますし、一番下の「カスタマイズする」のボタンをクリックすれば、自分で好きなデザインに変更できます。
角の丸みや色、影など、いろいろ設定できます。「ホバー」というのは、マウスがのった状態のときのデザインで、通常時のデザインとは別で設定できます。
通常時とホバー時でデザインを変えることにより、マウスをのせるとボタンが押されるようなデザインや、色が変化するデザインなど、細部をおしゃれにできますよ。
ボタンのリンク先を設定する
ボタンをクリックしたときにどのページへ移動するか？をリンクで設定できます。
ボタンをクリックしたら、リンクのマークをクリックします。
あとは「リンク先を何にするか」のカテゴリを選び、「具体的なページ」を設定して、「タブをどうするか」を選択し、下の「完了」をクリックします。
セクションの削除や移動・追加
テンプレートだと、どうしても不要なセクション（パーツのある程度のまとまり）があったり、「ここの順番を変えたいな」ということが生じると思います。
不要なセクションを削除するときは、セクションをクリックして選択した状態にし、バックスペースキーを押すだけでOKです。
セクションを移動させるときは、右メニューの矢印キーをクリックすればOKです。移動したい場所に来るまで何回でも押せます。
なお、「フッター」という一番下のパーツは、バックスペースキーで削除できません。左下に注意表示が出るので、そこの「レイアウト設定」をクリックしてみてください。
右側の「レイアウト」で「シンプル」を選べば、フッター（と一番上のヘッダー）は非表示になります。
ただ、ヘッダーのメニューはあった方が、ユーザーさんはホームページで情報を探しやすいです。フッターも、「ここでホームページはお終いです」とわかりやすくなるので、消さなくてもよいでしょう。
サクッとフッターを編集してみましょう。
「メルマガ配信中」をダブルクリックして、「Follow me!」に書き換えます。
この作例は販売や申込みを受け付けない練習用サイトなので、メルマガのフォームや「特定商取引〜」のパーツを整理し、残したいパーツをドラッグで上に移動させて詰めます。実際の通信販売サイトでは、取引内容に応じた法定表示を削除しないでください。
フッターの背景が無駄に長いので、縮めたいですね。下端の矢印を上方向にずずず〜っとドラッグしましょう。
ちょうどいいところでマウスを離して、幅がいいかんじに狭くなりましたね。
ちなみに、セクションの高さを縮めたい場合は上記のように手動でもできますが、矢印マークをダブルクリックすると、無駄な余白なく自動で高さ調節できて便利です。
セクションの追加
たとえば、営業時間などの「店舗情報」のセクションを追加してみます。
左メニューで「セクション」をクリック、「問い合わせ」内の地図付きのセクションをドラッグ＆ドロップします。
真ん中の項目を消して左右のパーツをドラッグして中央のほうに詰めました。地図やSNSはクリックすると設定を変更できます。
ページを削除する
テンプレートは多めのページ構成ですが、今回はシンプルに「商品一覧」のみ別ページにしたいので、不要なページを削除して整理したいと思います。
まず、左上の「ページ」の部分をクリックして、開いたメニューの一番下の「ページを管理」をクリックします。
ページ一覧が表示されるので、消したいページ名の右にあるメニューボタンをクリックして開き、一番下の「削除」をクリックします。
削除の確認画面が出るので、「削除」をクリックします。
これで不要なページを削除できます。
この練習用サイトでは、使わない「問い合わせ」と「特定商取引法〜」のページも整理します。実際に販売や申込みを受け付けるサイトでは、必要なページや表示を残してください。
「ホーム」のページのデザインを整える
ここまで解説してきた操作（テキスト編集、画像の差し替え・編集、パーツの移動等）を駆使して、上のメニューバー以外の「ホーム」のページデザインを編集していきましょう。
編集時のちょっとしたワザ
ドラッグでパーツを移動する際、ちょこちょこいろんな線が表示されたり消えたりすると思います。この線は高さを揃える目安になるので、活用しましょう。
また、画像を編集しようとして画像をクリックしたときに、「画像の編集メニューが表示されない」ことがあると思います。
これは、パーツが「グループ化」されているためです。複数のパーツをまとめてあるんですね。テンプレートでよくあります。
特に気にせず、もう一度クリックすれば、画像用メニューが表示されますよ。
また、画像用メニューの「デザイン」で、「フレーム」を選択すると、画像を丸くしたりフレームをつけたりできます。
それから便利なのが、複数選択の機能です。
Shiftキーを押したままクリックしていくと、複数のパーツをまとめて選択することができます。
パーツを一気に移動できて時短になるので、覚えておきましょう。
また、Wixではクイック編集という機能も便利です。セクションを選択した状態で、左上か右メニューにボタンがあります。
セクションごとに、テキストや背景などを右画面からまとめて編集できて便利です。
背景色なんかも設定できます。（グラデーションカラーなどにもできますよ）
ヘッダーのメニューを編集する
続いて、最上部（ヘッダー）のメニューを編集していきます。
「商品説明」ではなく「メニュー」にしたいですし、「こだわり」や「店舗情報」にもサッと飛べるようにしたいですね。
まずは左メニューから「サイトページとメニュー」をクリックします。「商品説明」となっているところをダブルクリックして、「メニュー」と入力し、名前を変更します。
続いて、下の「メニューアイテムを追加」をクリックします。開いたメニューから「セクション」を選択しましょう。
ここでは上から順に、配置したセクションが並んでいます。お店のこだわり紹介は「プロモーション２」のセクションに該当するので、それをクリックします。
名前がわかりづらいので、並んでいる順番から「どれがどのセクションか」を把握しましょう。
クリックするとメニューとして追加されるので、ダブルクリックして名前を「こだわり」に変更しておきます。
なお、ドラッグして順番を入れ替えることができます。
同じように「店舗情報」もメニューに追加します。
完了すると、ヘッダーのメニューも自動的にテキストが追加されています。
あとは、このメニューを右へドラッグして寄せ、「h1」のパーツを追加してデザインを整えて左へ配置、最後にヘッダーの幅をオレンジの矢印をドラッグして縮めればOKです。
別ページを編集する
ここまで編集していたのは、メインの「ホーム」のページです。「メニュー一覧」は違うページになるので、別で編集することになります。
別のページを編集したいときは、左上のメニューから切り替えます。「ページ」をクリックして、開いたメニューから「メニュー」を選択します。
今回使用しているテンプレートでは、Wix公式が出している「レストランアプリ」を使っているようですね。
その場合、ダッシュボードのアプリ内でメニュー画像や説明文の編集をして、通常の編集画面でデザインを編集していくことになります。
メニューをどこでもいいのでクリックしたら、「メニューを管理」というボタンが出るので、それをクリックしましょう。
すると画面が切り替わり、メニューの内容を編集できるようになります。
あとは画像や説明文を差し替えたりしていけばメニュー一覧が完成します。
プレビューを見る
ある程度、ホームページが出来上がってきたら、一旦「実際にどのように表示されるのか」を見てみましょう。
画面右上にある「プレビュー」をクリックします。
すると、パソコンから見た場合のデザインが表示されます。画面左上にあるをクリックすれば、スマホから見た場合のデザインもチェックできます。
右上の「エディタに戻る」をクリックすれば、プレビューが終了して編集画面に戻ります。
6.Wixのスマホ表示の編集方法（レスポンシブ設定）
ここまで、パソコン表示のデザインを変えてきました。スマホ表示時のデザインも調整しておきましょう。
左上のここからも、パソコン画面とスマホ画面を切り替えできます。
パーツをドラッグ＆ドロップで追加したり、ドラッグで移動させたりできるという基本的な操作は変わりませんが、スマホ画面独自のメニューもあります。
左メニューバーにあるこのメニューは、「トップに戻るボタン」などを設定できます。
また、「PC画面では表示されているのにスマホ画面では表示されないもの」はここに一覧になっています。
具体的には、PC画面編集のときに端っこに配置したものや、横長すぎるものなどですね。ただ、それでもモノによっては表示されたりするので、一概には言えません。
また、非表示リストに載っていても実際は表示されている…ということもあるので（グループの外枠のみが非表示など）、参考程度にすればよいかと思います。
また、小さい右メニューの「スマホ非表示」のボタンをクリックすると、「PC画面では表示して、スマホ画面でのみ非表示」にすることができます。
「横長の大きな画像はスマホ画面には不要だな」と思ったら、この機能を使えばOKですね。
スマホデザイン編集時の注意点
編集内容はPCデザインに影響しない
スマホデザインの変更は、パソコン表示には影響しません。言い換えると「パソコン表示のデザインが崩れないかな」と心配する必要はないわけですね。
PC由来の要素とスマホ専用の要素
PCで追加したテキストや画像はモバイルにも引き継がれます。モバイル専用のテキスト・画像・ボタンも追加でき、PCには表示されません。
PC由来のテキスト内容の変更はPC側で行います。モバイル側では文字の大きさや配置などを調整できます。
スマホ用メニューの編集
スマホ表示のときは、メニューが折りたたまれた状態になります。よくみる３本線のやつですね。
クリックするとメニューが開きます。この開いたメニューのデザインも、ある程度変更できますよ。
スマホ用デザインの修正
基本的に、プレビューや編集画面を見て「ここ変だな〜」というところを修正していくだけです。
画像をドラッグして動かしたり、テキストの位置を修正したり、フォントサイズをいいかんじに変更していきます。
まず、タイトルのフォントサイズを小さくし、スマホ用メニューの位置を調整、さらにヘッダーの幅を小さくしました。
続いて、タイトルと装飾の順番の逆になっていたので、それを修正します。
ついでに、画像の高さを狭くしました。画像の切り抜き位置も自動で調節されます。
こちらは「アンカー」という、もともとテンプレート内にあった「ページ内の位置指定に使うパーツ」ですが、不要なので削除します。
こちらは画像の並びやサイズを変更して、ボタンの位置やサイズも調節しました。
無駄な余白ができているので、縮めて調節します。
続いて、この文章が半端なところで改行になってしまっているので、修正したいと思います。
この例のPC側で追加したテキストは、本文や改行をPC側で編集します。一度パソコン画面の編集に戻りましょう。
パソコン画面に切り替え、テキストをダブルクリックして、ちょうどいいところで改行します。（ついでに配置も微調整）
スマホ画面に戻って確認すると、テキストがきれいに改行されていますね。背景画像の高さも調節しておきます。
こんなかんじで、「スマホ用デザインを整えるために、パソコン用デザインを修正する」といった方法もうまく活用しましょう。
続いてこのセクションは、画像とテキストの順番を変えたいので、一度画像を避けてから、テキストを移動させ、画像の位置も調節します。
画像の枠上の丸をドラッグして、画像の形を変えます。
画像をダブルクリックして、表示位置の調節をします。すぐ下の「cafeについて」も同様にしましょう。
ちなみに、目視では画像のサイズを完璧に揃えたりするのは難しいですよね。そんな時は「ツールバー」を利用するのがオススメです。
右上の「ツール」をクリックして、ツールバーにチェックを入れます。
画像をクリックした後、ツールバーの中の「サイズ」で画像の縦と横を、「位置」で左端や上端からの距離を数値で指定できます。
これにより、画像のサイズや位置を正確に揃えられるので、ホームページの見た目をきれいに整えることができます。
営業時間等のテキストのパーツも位置がおかしいので、ドラッグして移動し、修正していきます。
それから、スマホでスクロール時に、メニューが常に上部に表示されるようにしてみましょう。
ヘッダーの横の「・・・」をクリックして、「ヘッダーのスクロールの変更」を選択します。
スクロール時の動きを設定できるので、「固定」をクリックして選択すれば、常に上部に表示されるようになります。
ちなみに、ヘッダーデザインを編集し、「スクロール」のタブで「不透明度」を「50%」などにしておけば、スクロールしたときに半透明になるようなデザインにもできます。
こんなかんじで、ざっくりと修正してみました。「これが100%の正解！」というのは無いので、ホームページを見に来る人が見やすい・わかりやすいのはどんなのかな？と考えながらやってみてくださいね。
7. 無料サイトのURLを設定する
Wixでは、無料サイトのURLは以下の形式になっています。
https://ユーザー名.wixsite.com/サイト名
サイト名は、デザインを保存するときに決められる文字列です。
編集画面右上の「保存」をクリックすると開くこの画面ですね。「編集」をクリックして文字列を変更できます。
ユーザー名には、初期設定ではWix登録時のユーザー名が使われるようになっています。
独自ドメインにするためには
ユーザー名を変えても、wixsite.comという文字列はどうしても入ってしまいます。saruwakakun.comのような独自ドメインを使うためには、Wixの有料プランにする必要があります。
ドメインについてよくわからない！という場合は、こちらのWix公式ページの解説をご覧ください。
8. Wixで作ったホームページを公開する方法
デザインが出来上がったら、ホームページを公開しましょう。
デザインエディタの右上にある［公開］をクリックします。
これでホームページがインターネット上に公開されるようになりました。「サイトを見る」をクリックすると、ホームページを開くことができます。
このURLをブラウザに打ち込めば、世界中の誰でも作成したホームページにアクセスができるわけですね。もちろん友達や同僚にLINEやメッセージでURLを送っても、このホームページを見てもらうことができます。
インデックスの設定変更
公開しても検索結果への掲載には時間がかかり、必ず掲載されるとは限りません。
検索に表示したい場合は、サイトと対象ページのインデックス許可が有効か確認しましょう。
ダッシュボードの左メニューの「設定」→「SEO設定」をクリックします。
「検索エンジンにサイトをインデックスさせる」がオフの場合はオンにします。
SEO対策は？
Wixでは、公式がSEO対策のための設定方法などを解説してくれたり、ダッシュボードからいろいろ設定できる（解説付き）ので、基本的なSEO対策は可能です。
ダッシュボード左メニューの「サイト・モバイルアプリ」→「SEO」から、ガイドにしたがって設定していけば、初心者さんでも簡単にSEO対策の設定ができると思います。
また、Wix公式の「SEO設定をカスタマイズする」のページにも設定方法が書いてあるので、参考にしてみてくださいね。
9. 広告はどこに表示される？
最後に
ここまでWixの使い方を見てきました。分からない部分があれば、Wix公式ヘルプセンターを見てみてください。かなり情報豊富なので、解決策が見つかることも多いはず。
色々と困ることもあるかと思いますが、楽しみながらホームページを作りましょう！
なお、こちらの記事でWix以外のツールを使ったホームページの作り方も紹介しています。