Wixの使い方を総まとめ!基本を習得できる超簡単なホームページ作成方法

wixでゼロからホームページを作る方法

記事内に商品プロモーションが含まれる場合があります

Wixの使い方の、初心者向けの解説です。

Wixの会員登録からテンプレートの探し方、編集方法や基本的な操作、ホームページを公開する方法までわかりやすく説明します。

これを読みながら操作すれば、自分でホームページを完成させることができます。ぜひWixを開いて、一緒に操作してホームページを作ってみましょう。

サルワカくん
サルワカくん
「Wixについてよくわからない…」という方は、「Wixとは?」の記事を読んでみてください。メリットや注意点などまとめています。

1.Wixでのホームページ作成手順

Wixで自分でホームページを作るための手順を、まずはざっくり紹介します。

ホームページ公開までの手順
  • Wixに会員登録
  • テンプレートを選ぶ
  • デザインカスタマイズ
  • ドメインを設定
  • ホームページを公開

最初にWixに会員登録したら、Wix内にたくさんあるテンプレートから、自分の作りたいホームページにしっくりくるテンプレートを選びます。

あとはテンプレートを編集したら、「ドメイン」というホームページの住所を設定し、公開ボタンをクリックするだけです。

無料でもできる?

できます!今回の解説は、無料プランの範囲内の機能で行います。

サルワカくん
サルワカくん
ただ、無料プランだとWixの広告が表示されてしまったり、使える機能に制限があったりします。ちょっと操作してみて気に入ったら、有料プランに変更するのもよいでしょう。

Wixはテンプレートを使わないといけないの?

そんなことはありません。もちろん、イチから自分でホームページを自由に作成することもできます

サルワカくん
サルワカくん
最初は「操作に慣れる」という目的で、テンプレートを編集したほうがスムーズです。なので今回はテンプレートを編集していきます。

ここから登録方法や使い方を解説していくので、ぜひ無料で会員登録して、一緒に操作してWixの基本を身につけ、ホームページを作ってみましょう!

2.Wixの登録方法とダッシュボードの操作方法

Wixの会員登録方法

サルワカくんの顔(通常)
サルワカくん

Wixをはじめるために会員登録します。今回の例では無料プランに登録します。

Wixの公式サイトにアクセスしよう

まずは上のボタンからWixに飛びましょう。

登録する

wixのページで「今すぐはじめる」をクリック

このような画面が開くので、「今すぐはじめる」のボタンをクリックします。(メールアドレスは後でもOK)

パスワードを入力するか、アカウント連携で登録

メールアドレスとパスワードを設定して、下の「新規登録」をクリックします。もしくは、GoogleアカウントかFacebookアカウントでも登録可能です。

GoogleやFacebookのアカウントで登録した場合でも、勝手にSNSに投稿されるようなことはないのでご安心ください。

アンケート、スキップも可能

アンケート的にいろいろ聞かれますが、右下で「スキップ」しましょう。(選択肢は後から選び直すことができるので、とりあえずテキトウに選んでしまってもOKです)

AIチャットボットへの回答はどっちでもよい

「AIチャットボット」の利用を聞かれますが、どちらでもよいです。今回は「利用しない」にします。

利用する場合、「何のサイトを作るのか」「ターゲットは」「ほしい項目・機能は」等聞かれます。答えていくとダッシュボード(管理画面)が目的にあわせてカスタマイズされます。

サルワカくん
サルワカくん
手間の割に、「ものすごく便利になる!」とかそういうことはなく、正直そこまでメリットは感じないので、現時点では利用しなくても大丈夫かと…。

あとで選べるのでスキップでもよい

このあたりの質問も、スキップでOKです。

とりあえずとじる

こういった画面もバツで閉じてOKです。

wixのダッシュボードが開けた

これで、ダッシュボード(管理画面)が開きました。

ここまできたら会員登録は完了です。

Wixのダッシュボードの使い方

Wixでは、ホームページ(Webサイト)ごとにダッシュボードが作成されます。

左上でサイトを切り替え

現在開いているダッシュボードがどのホームページのものなのかは、左上から確認できます。(新しいサイトもここから作成可能)

会員登録直後も、デフォルト状態のホームページがすでにひとつ作成されているような状態です。なので、「現在ダッシュボードで開いているホームページを編集していく」という形になります。

サルワカくん
サルワカくん
初回は少しわかりづらいですが、「作成したホームページごとにダッシュボードがある」と覚えておけばOKです。

アカウント設定を変更しておく

セキュリティ対策と、もうひとつ大事な設定があるので、最初にアカウント設定をいじっておきましょう。

アカウント設定は右上

アカウント設定は右上にあります。

初回のみパスワードを入力

Googleアカウントでログインしている場合は、初回でWix用のパスワード設定を求められます。新しく設定しておきましょう。

サイトURLプレフィックスを変更

あと、「サイトURLプレフィックス」を変更しておきましょう。

これは、ホームページのURLの一部になる文字列です。デフォルトがほぼメールアドレスになっているので、変えておくことをおすすめします。

ホームページを編集する

サイトをデザインで編集

ホームページを新しく編集していく場合や、前回の続きから編集する場合は、右上の「サイトをデザイン」をクリックします。

サルワカくん
サルワカくん
他にもいろいろありますが、とりあえずはこの辺を覚えておけばOKです。

3.テンプレートをWixで探して選ぶ

Wixのホームページテンプレートを選ぶ

サルワカくんの顔(通常)
サルワカくん

次にホームページの土台となるテンプレートを選びます。土台を基にして、必要な部分を自由に変えていくわけですね。

wixのダッシュボードで新規作成する

まずはダッシュボード右上の「サイトをデザイン」をクリックしましょう。

テンプレートを選択をクリック

するとこのような選択になるので、「テンプレートを選択する」をクリックします。

AIの方を選ぶと、質問に答えていくとサイトが作成されますが、正直いまの段階では、テンプレートを編集したほうがクオリティの高いものを作れる印象でした…。

なので今回は、「好みのテンプレートを探して、そのテンプレートを編集していく」という方法にします。

カテゴリーで絞り込むことも可能

テンプレートを探していきます。 上の方にカテゴリがあるので、作りたいサイトのカテゴリをクリックして開き、探してみましょう。

サルワカくん
サルワカくん
キーワード検索してもよいですが、別業種のおしゃれなものを作り変える、というのもおすすめです。分野にとらわれず、いろいろ探してみましょう。

実際の表示を確認する

良さげなデザインがあったら、表示イメージを確認してみましょう。

wixのパンやのテンプレート

例として「パン屋」のテンプレートを選んでみます。※ 後ほど編集してカフェのサイトに作り変えていきます

表示で確かめ、編集で編集開始

テンプレートにマウスカーソルをのせると「編集」と「表示」のボタンが出るので、「表示」をクリックしましょう。

サルワカくん
サルワカくん
見つからない場合はこのテンプレートです!

wixテンプレートの実際の表示を見てみる

ホームページのデザインイメージが表示されました。スクロールしたり、メニューをクリックしたりして、どんなホームページが作れるのかをチェックしましょう。

スマホ表示のデザインまでチェック

最近では、ジャンルに関わらず、スマホからホームページを見る人がたくさんいます。そこで、スマホ表示のデザインまでチェックしたうえで、テンプレートを決めるのがおすすめです。

実際の表示を確認

画面の上にあるをクリックしましょう。すると、スマホ画面での表示がチェックできます。

テンプレートが決まったら[編集]をクリック

スマホ表示の確認も可能

「このテンプレートを使おう」と決まったら[編集]をクリックしましょう。

wixのエディタが開いた

ホームページのデザインエディタ(編集画面)が開きました。この画面で、デザインを必要に応じて変えていくわけですね。

4.Wixの使い方の超基本

編集方法の解説に入る前に、「把握しておくと操作がスムーズになる基礎知識」を説明します。

テンプレートのページ構造

今回選んだテンプレートが、どのようなページの構造になっているのかを確認してみましょう。

wixテンプレートの構造

ホームページを開くと最初に「ホーム」の画面が表示され、上のメニューをクリックするとそれぞれのページ(商品一覧、当店について、問い合わせ)が表示される形になっています。

ただ、カフェのホームページなどはサラッと見る人が多いと思います。なので、なるべく1ページ(ホーム)にまとめて縦スクロールで全情報を確認できるようにし、商品情報だけ長くなってしまうので別ページにする、という構造がおすすめです。

編集後の構造

ざっくりですが、こんなイメージですね。

ホームページに来た人が「なんか面倒だな」と離脱しないよう、情報を簡潔にするのも大事です!

パーツの名称

編集画面で「ページ」「セクション」「パーツ」という名称が出てくるので、どれが何を指しているのか覚えておきましょう。

wixのページとは

クリックして開く画面それぞれが「ページ」です。

wixのセクションとは

「当店について」「商品一覧」などの、ページ内のある程度のまとまりが「セクション」です。

wixのパーツとは

テキストや画像など、セクション内のひとつひとつの部品が「パーツ」です。

5.Wixでテンプレートを編集する方法

Wixの編集画面の使い方

まずは、編集画面の見方をざっくりおさえましょう。よく使う部分は後ほど詳しく説明するので、とりあえず「こんなものがあるんだな」程度に見て頂ければOKです。

ヘッダーメニュー

wixの編集画面の上メニュー

まずは上のヘッダーメニューから見ていきましょう。

ページの切り替え・管理

一番左側に、「ページの切り替え・管理」をできる項目があります。「ホーム」や「商品一覧」などのページをそれぞれ編集したいときや、ページを削除・追加したいときに触ります。

ビューの切り替え

隣は「スマホ画面」「PC画面」の切り替えボタンです。スマホ画面用のデザインを変更したいときに触ります。

上部メニュー右側

右側はこんなかんじ。主に使うのは「保存」や「プレビュー」でしょうか。最後にホームページを公開するときのボタンもここにあります。

左メニュー

wixの左メニュー

続いて、こちらの左メニューです。

wixの左メニューの詳細

主にパーツやセクションを追加したり、アップロードした写真を管理したりします。「アプリ」は予約機能等をつけたり、「CMS」はお知らせや簡単なブログ機能ですが、ややこしくなるので今回は割愛します。

右メニュー

wixの右メニューの詳細

右側にも小さいメニューがあります。セクションを並べ替えたり、テンプレート編集時に便利な「クイック編集」という機能もあります。その他、よりホームページをおしゃれに見せるための機能もあります。

とりあえずは、初心者向けの基本的な操作のみ使って、テンプレートの編集方法を解説していきますね。

サルワカくん
サルワカくん
このテンプレートを開いて一緒に操作してみましょう。困ったら「戻る」ボタンで操作を戻して、ゆっくりやっていきましょうね。

文字を編集する

ここからは文字や画像、レイアウトなどを変更する方法を紹介します。

文字を変更する

変更したいテキストはダブルクリックして変えることができます。

ダブルクリックで文字を編集

テキストの真上をダブルクリックします。すると右側にパネルが表示されますが、いったん放置しておきます。

バックスペースで消して新しく入力

Backspaceキー(Deleteキー)で文字を消して、好きな文字を打って入力します。

文字の色を変える

文字をダブルクリックして右側に表示されるパネルから、フォント(文字の種類)などの装飾も変更できます。

まずは文字の色を変えてみましょう。

選択された状態でデザインを変更する

ダブルクリックして文字が選択された状態で、パネルの「文字色」のボタンをクリックします。

なお、文字が選択された状態(薄い青で覆われた状態)でなければ、装飾の変更はできません。もし選択が外れた場合は、文字をドラッグして選択された状態にしましょう。

テキストの色を選ぶ

表示されたカラーパネルから、好きな色をクリックして選べば、色変更されます。

好きな色を追加したいとき

もし好みの色がない場合は、自由に設定できます。このプラスマークをクリックしましょう。

色を調節できる

開いた画面で、丸2つを動かして、好きな色を設定します。色が決まったら、右下の「適用」をクリックすればOKです。

文字の大きさを変える

Wixで文字の大きさを変える

文字の大きさを変えたいときはとても簡単で、ここの右端の数値を変えるか、つまみ(丸)を左右に動かせばOKです。

フォントを変える

文字の種類を変更

フォント種類(文字の種類)を変えるときには、変えたいテキストを①ダブルクリックで選択したうえで ②フォントをクリックします。

すると下にずらっとフォント一覧が表示されるので、好きなものをクリックします。一番下のほうにスクロールすると、日本語フォントが出てくるので、日本語文章はその中からフォントを選びましょう。

サルワカくん
サルワカくん
ちなみにWixでは、「モリサワフォント」というプロ愛用のフォント(本来なら年数万円かかる有料フォント)が、なんと200種類も無料で使えます…!

画像を変更する

Wixで背景画像を変更する

続いて、この背景画像(パンの画像)を、自分で用意した画像に変更してみましょう。

背景をクリックして背景を変更

どこでもいいので背景画像をクリックして、表示された「背景を変更」のボタンをクリックします。

画像をクリック

表示されたメニューで、「画像」をクリックしましょう。

メディアをアップロードをクリック

左側に「メディアをアップロード」のボタンがあるので、それをクリックします。

使う画像をアップロード

するとこのような画面が開くので、自分のパソコンのフォルダ内の画像を選ぶか、薄い水色の部分に画像をドラッグ&ドロップします。

背景を変更をクリック

画像が小さく表示されていればOKです。右下の「背景を変更」をクリックします。

これで背景画像の変更は完了しましたが、Wixでは、アップロードした画像の編集・加工が簡単にできます。

画像を編集する

wixなら設定や調整で画像を編集できる

画像をクリック→「背景を変更」で開くメニューで、「設定」のボタンと、その右隣に調整のボタンがあります。

画像の透明度や表示位置を設定できる

「設定」は画像の透明度や、表示位置を調節できます。

wixなら設定や調整で画像を編集できる

右側の調整バーのアイコンをクリックすると、画像加工のメニューが開きます。

画像の編集も可能

明るさや色温度など調節できます。調節したら右上の「保存」をクリックしましょう。

他にも、ちょっと面白い加工が簡単にできたりします。

オーバーレイでボケを追加して位置調整もできる

例えば、「オーバーレイ」の「ぼけ」を選ぶと、このようなボケた光を画像に重ねることができます。(位置や強度も調節できます)

「画像を入れ替えたらなんだかデザインがしっくりこなくなった」というときは、明るさや色のトーンなど、画像を少し加工してみるといいかもしれません。

サルワカくん
サルワカくん
他にも、AIを利用した便利な画像加工機能があります。

Wixで画像の背景拡張ができる

「写真の横幅が足りなくて余白ができてしまう」等で困ったら、「クロップ・画像拡張」→「拡張」→横幅指定→「画像を拡大」で、足りない背景を自動で生成してくれます。

Wixで画像の不要なものを消せる

生成された背景に不要なものが入っていたら、「オブジェクト消しゴム」→消したい物をドラッグで選択→「オブジェクトを消す」をクリックしましょう。

画像編集後は保存をクリック

背景が拡張されて写真の横幅が十分になり、不要なものも消せました!右上の「保存」をクリックすれば完了です。

パーツの位置変更や削除・追加

パーツの削除

テンプレートには、自分のホームページには不要なパーツも含まれているので、それを削除しましょう。

Wixでパーツを削除する

削除したいパーツ(今回はテキスト)をクリックして選択し、この状態でキーボードのバックスペースキーを押せば、削除できます。

パーツ位置を変える

「画像を差し替えたらテキストが見づらい…」というときは、テキストの位置を動かしましょう。現在は中央にあるので、右に寄せたいと思います。

Wixでパーツを移動する

テキストをクリックしたら、そのまま右へドラッグします。(カーソルが十字キーになっていれば移動できます)

このときに、端のほうにある線からパーツがはみ出ないようにすると後々楽です。

パーツの幅を縮める

パーツの端をクリックしたまま左へ動かして、テキストの周りに無駄にできていた余白を縮め、線の内側に収まるようにしましょう。

線の外側にはみ出てしまうと、スマホ表示の際にうまく表示されないといったことが起こります。

サルワカくん
サルワカくん
最後にスマホ表示を確認し、修正しますが、あらかじめ気をつけて編集しておくことで、あとあとの手間を減らすことができますよ。

文字が見えづらいので色を変えておく

ついでに、文字がやっぱり見えづらいので、色を白に変更しておきますね。

パーツを追加する

パーツは新しく追加することもできます。試しにテキストを追加してみましょう。

パーツを選んでドラッグ

左メニューの+マークをクリックして、テキストのカテゴリーの中から「テキストです。ここを〜」というパーツを選び、クリックしたまま動かしてデザイン上に移動します。

置きたい場所でドロップ

マウスを離すとデザイン上に追加できるので、ダブルクリックして文章を編集しましょう。

文字やサイズ、色やフォントを変更

他にも、文字色やフォント種類、サイズなども変更しましょう。

横幅を縮めておく

最後に、外枠の幅を縮めておきましょうね。

データを保存する

このあたりで一旦編集データを保存しておきましょう。いつブラウザが落ちるかわからないので、自動保存もあるとはいえ、こまめに保存することをおすすめします。

右上の保存をクリックして保存

編集画面の右上にある[保存]をクリックします。

(何回でもOK)サイトのドメインを選択

Wixで作ったホームページのURLを決められる

保存時に、「編集」でドメイン(ホームページのURL)を設定できます。公開するまでいつでも変更できるので、デザイン完成後でも大丈夫です。変更がなければ「閉じる」をクリックしましょう。

ボタンのデザインを変更する

パーツで新しく追加したボタンや、テンプレート上のボタンのデザインを変えてみましょう。

パーツでボタンを追加できる

Wixには、「パーツ」として様々なデザインのボタンが用意されています。新しく追加したいときは、この中から選んでデザイン上にドラッグ&ドロップします。

ボタンのデザインを変更

テンプレート上にすでに配置されているボタンのデザインを変えたいときは、ボタンをクリックしてから「デザイン」を選択しましょう。

ボタンデザインを自由に変更することも可能

すでに完成しているボタンデザインをクリックして選択することもできますし、一番下の「カスタマイズする」のボタンをクリックすれば、自分で好きなデザインに変更できます。

通常時とホバー時をそれぞれ設定できる

角の丸みや色、影など、いろいろ設定できます。「ホバー」というのは、マウスがのった状態のときのデザインで、通常時のデザインとは別で設定できます。

通常時とホバー時でデザインを変えることにより、マウスをのせるとボタンが押されるようなデザインや、色が変化するデザインなど、細部をおしゃれにできますよ。

ボタンのリンク先を設定する

ボタンをクリックしたときにどのページへ移動するか?をリンクで設定できます。

ボタンのリンク先を設定する

ボタンをクリックしたら、リンクのマークをクリックします。

リンク先を選んで、タブの設定をしたら完了

あとは「リンク先を何にするか」のカテゴリを選び、「具体的なページ」を設定して、「タブをどうするか」を選択し、下の「完了」をクリックします。

セクションの削除や移動・追加

テンプレートだと、どうしても不要なセクション(パーツのある程度のまとまり)があったり、「ここの順番を変えたいな」ということが生じると思います。

wixでセクションを削除する

不要なセクションを削除するときは、セクションをクリックして選択した状態にし、バックスペースキーを押すだけでOKです。

Wixでセクションを移動させる

セクションを移動させるときは、右メニューの矢印キーをクリックすればOKです。移動したい場所に来るまで何回でも押せます。

Wixではフッターは単体で消せない

なお、「フッター」という一番下のパーツは、バックスペースキーで削除できません。左下に注意表示が出るので、そこの「レイアウト設定」をクリックしてみてください。

Wixでのヘッダーの表示・非表示を選択

右側の「レイアウト」で「シンプル」を選べば、フッター(と一番上のヘッダー)は非表示になります。

ただ、ヘッダーのメニューはあった方が、ユーザーさんはホームページで情報を探しやすいです。フッターも、「ここでホームページはお終いです」とわかりやすくなるので、消さなくてもよいでしょう。

サルワカくん
サルワカくん
フッターには問い合わせ先やSNSのリンク先などや、またよく見る「Copyright©️」のテキストなどを入れておけばよいでしょう。

サクッとフッターを編集してみましょう。

メルマガ配信中を書き換え

「メルマガ配信中」をダブルクリックして、「Follow me!」に書き換えます。

パーツの削除と移動

メルマガのフォームや「特定商取引〜」のパーツを削除して、ほかの残したいパーツをドラッグで上に移動させて詰めます。

下の端の矢印をクリックして移動

フッターの背景が無駄に長いので、縮めたいですね。下端の矢印を上方向にずずず〜っとドラッグしましょう。

幅が狭くなった

ちょうどいいところでマウスを離して、幅がいいかんじに狭くなりましたね。

ちなみに、セクションの高さを縮めたい場合は上記のように手動でもできますが、矢印マークをダブルクリックすると、無駄な余白なく自動で高さ調節できて便利です。

セクションの追加

たとえば、営業時間などの「店舗情報」のセクションを追加してみます。

店舗情報のセクションを追加

左メニューで「セクション」をクリック、「問い合わせ」内の地図付きのセクションをドラッグ&ドロップします。

地図やソーシャルバーはクリックして設定

真ん中の項目を消して左右のパーツをドラッグして中央のほうに詰めました。地図やSNSはクリックすると設定を変更できます。

ページを削除する

編集後の構造

テンプレートは多めのページ構成ですが、今回はシンプルに「商品一覧」のみ別ページにしたいので、不要なページを削除して整理したいと思います。

ページを管理

まず、左上の「ページ」の部分をクリックして、開いたメニューの一番下の「ページを管理」をクリックします。

ページを削除

ページ一覧が表示されるので、消したいページ名の右にあるメニューボタンをクリックして開き、一番下の「削除」をクリックします。

削除を選択

削除の確認画面が出るので、「削除」をクリックします。

これで不要なページを削除できます。

他の不要なページも削除

同じように、ほかの「問い合わせ」と「特定商取引法〜」のページも削除しておきましょう。

サルワカくん
サルワカくん
「特定商取引法の表記」は、サイト上でなにかを販売する場合のみ必要です。今回は特になにも販売しないので(お店の情報掲載のみ)、削除してOKです。

「ホーム」のページのデザインを整える

ここまで解説してきた操作(テキスト編集、画像の差し替え・編集、パーツの移動等)を駆使して、上のメニューバー以外の「ホーム」のページデザインを編集していきましょう。

サルワカくん
サルワカくん
見本サイトと、練習用画像集を使って、真似して作ってみてください。

編集時のちょっとしたワザ

高さを揃えるときは線を目安にする

ドラッグでパーツを移動する際、ちょこちょこいろんな線が表示されたり消えたりすると思います。この線は高さを揃える目安になるので、活用しましょう。

また、画像を編集しようとして画像をクリックしたときに、「画像の編集メニューが表示されない」ことがあると思います。

一回クリックしただけだと画像編集メニューが出ないことがある

これは、パーツが「グループ化」されているためです。複数のパーツをまとめてあるんですね。テンプレートでよくあります。

もう一度クリックすればOK

特に気にせず、もう一度クリックすれば、画像用メニューが表示されますよ。

画像はフレームをつけることもできる

また、画像用メニューの「デザイン」で、「フレーム」を選択すると、画像を丸くしたりフレームをつけたりできます。

それから便利なのが、複数選択の機能です。

Shiftキーを押したままクリックすると複数選択

Shiftキーを押したままクリックしていくと、複数のパーツをまとめて選択することができます。

パーツを一気に移動できて時短になるので、覚えておきましょう。

Wixはクイック編集も便利

また、Wixではクイック編集という機能も便利です。セクションを選択した状態で、左上か右メニューにボタンがあります。

右側からまとめて編集できる

セクションごとに、テキストや背景などを右画面からまとめて編集できて便利です。

背景色も変更できる

背景色なんかも設定できます。(グラデーションカラーなどにもできますよ)

ヘッダーのメニューを編集する

ヘッダーのメニューを編集する

続いて、最上部(ヘッダー)のメニューを編集していきます。

「商品説明」ではなく「メニュー」にしたいですし、「こだわり」や「店舗情報」にもサッと飛べるようにしたいですね。

左メニューから、ダブルクリックでメニュー名を変更

まずは左メニューから「サイトページとメニュー」をクリックします。「商品説明」となっているところをダブルクリックして、「メニュー」と入力し、名前を変更します。

メニューアイテムを追加

続いて、下の「メニューアイテムを追加」をクリックします。開いたメニューから「セクション」を選択しましょう。

リンク先のセクションを選択する

ここでは上から順に、配置したセクションが並んでいます。お店のこだわり紹介は「プロモーション2」のセクションに該当するので、それをクリックします。

名前がわかりづらいので、並んでいる順番から「どれがどのセクションか」を把握しましょう。

名前を変更しておく

クリックするとメニューとして追加されるので、ダブルクリックして名前を「こだわり」に変更しておきます。

ドラッグすれば順番を変えられる

なお、ドラッグして順番を入れ替えることができます。

同じように「店舗情報」もメニューに追加します。

メニューを作れた

完了すると、ヘッダーのメニューも自動的にテキストが追加されています。

メニューを右へ移動してタイトルを追加し、幅を狭める

あとは、このメニューを右へドラッグして寄せ、「h1」のパーツを追加してデザインを整えて左へ配置、最後にヘッダーの幅をオレンジの矢印をドラッグして縮めればOKです。

別ページを編集する

ここまで編集していたのは、メインの「ホーム」のページです。「メニュー一覧」は違うページになるので、別で編集することになります。

メニューページを編集

別のページを編集したいときは、左上のメニューから切り替えます。「ページ」をクリックして、開いたメニューから「メニュー」を選択します。

今回使用しているテンプレートでは、Wix公式が出している「レストランアプリ」を使っているようですね。

その場合、ダッシュボードのアプリ内でメニュー画像や説明文の編集をして、通常の編集画面でデザインを編集していくことになります。

メニューを管理を選択

メニューをどこでもいいのでクリックしたら、「メニューを管理」というボタンが出るので、それをクリックしましょう。

アプリの編集メニューで編集していく

すると画面が切り替わり、メニューの内容を編集できるようになります。

あとは画像や説明文を差し替えたりしていけばメニュー一覧が完成します。

サルワカくん
サルワカくん
ここを解説すると長くなるので、また後日、別記事で使い方を解説しますね。

プレビューを見る

ある程度、ホームページが出来上がってきたら、一旦「実際にどのように表示されるのか」を見てみましょう。

右上のプレビューをクリック

画面右上にある「プレビュー」をクリックします。

左上でスマホとPCを切り替え

すると、パソコンから見た場合のデザインが表示されます。画面左上にあるをクリックすれば、スマホから見た場合のデザインもチェックできます。

サルワカくん
サルワカくん
スマホ画面表示だとデザインがめちゃくちゃ崩れていますよね。これをこの後修正していきます!

右上の「エディタに戻る」をクリックすれば、プレビューが終了して編集画面に戻ります。

6.Wixのスマホ表示の編集方法(レスポンシブ設定

ここまで、パソコン表示のデザインを変えてきました。スマホ表示時のデザインも調整しておきましょう。

編集画面でも切り替えできる

左上のここからも、パソコン画面とスマホ画面を切り替えできます。

パーツをドラッグ&ドロップで追加したり、ドラッグで移動させたりできるという基本的な操作は変わりませんが、スマホ画面独自のメニューもあります。

スマホ画面編集で特徴的なメニュー

左メニューバーにあるこのメニューは、「トップに戻るボタン」などを設定できます。

スマホ画面で非表示になっているものリスト

また、「PC画面では表示されているのにスマホ画面では表示されないもの」はここに一覧になっています。

具体的には、PC画面編集のときに端っこに配置したものや、横長すぎるものなどですね。ただ、それでもモノによっては表示されたりするので、一概には言えません。

また、非表示リストに載っていても実際は表示されている…ということもあるので(グループの外枠のみが非表示など)、参考程度にすればよいかと思います。

サルワカくん
サルワカくん
スマホ表示で画面を確認して、非表示になってしまっているものは表示できるようにするorスマホ用にデザインし直す、という形で大丈夫です。

モバイル画面で非表示

また、小さい右メニューの「スマホ非表示」のボタンをクリックすると、「PC画面では表示して、スマホ画面でのみ非表示」にすることができます。

「横長の大きな画像はスマホ画面には不要だな」と思ったら、この機能を使えばOKですね。

スマホデザイン編集時の注意点

編集内容はPCデザインに影響しない

スマホデザインの変更は、パソコン表示には影響しません。言い換えると「パソコン表示のデザインが崩れないかな」と心配する必要はないわけですね。

スマホ用に文字や画像を追加できない

スマホ表示の文字や画像などの内容は、パソコン表示と同じものが使われます。新しくスマホ用に画像を追加したり、テキスト内容の変更などができません。

つまり、スマホ用に変更できるのは「デザイン」だけなのです(文字の大きさを変えたり、配置を変えたり、などですね)。

サルワカくん
サルワカくん
「文字や画像をスマホ表示だけ違うものにする」ということはできないので注意しましょう。(スマホ画面で非表示、というのは可能です)

スマホ用メニューの編集

Wixのスマホ表示のメニュー

スマホ表示のときは、メニューが折りたたまれた状態になります。よくみる3本線のやつですね。

Wixのスマホ表示のメニューを開いたとき

クリックするとメニューが開きます。この開いたメニューのデザインも、ある程度変更できますよ。

スマホ用デザインの修正

基本的に、プレビューや編集画面を見て「ここ変だな〜」というところを修正していくだけです。

画像をドラッグして動かしたり、テキストの位置を修正したり、フォントサイズをいいかんじに変更していきます。

サルワカくん
サルワカくん
ざっくりとどのような修正をしたか紹介しますね。

メニューの位置や、タイトルサイズの変更、ヘッダーの幅を変更

まず、タイトルのフォントサイズを小さくし、スマホ用メニューの位置を調整、さらにヘッダーの幅を小さくしました。

フォントサイズの変更と位置の変更

続いて、タイトルと装飾の順番の逆になっていたので、それを修正します。

余白を狭めると画像サイズが自動でいいかんじになった、切り抜き位置の変更はダブルクリック

ついでに、画像の高さを狭くしました。画像の切り抜き位置も自動で調節されます。

アンカーテキストを削除

こちらは「アンカー」という、もともとテンプレート内にあった「ページ内の位置指定に使うパーツ」ですが、不要なので削除します。

画像の並びを変更して、ボタンの位置やサイズを調整

こちらは画像の並びやサイズを変更して、ボタンの位置やサイズも調節しました。

余白をつめる

無駄な余白ができているので、縮めて調節します。

改行が変

続いて、この文章が半端なところで改行になってしまっているので、修正したいと思います。

なお、スマホ画面の編集では、改行も含めて文章の編集はできません。なので、一度パソコン画面の編集に戻ります。

PCに戻って改行

パソコン画面に切り替え、テキストをダブルクリックして、ちょうどいいところで改行します。(ついでに配置も微調整)

フォントサイズを調整して、幅を狭めると画像も自動で調整

スマホ画面に戻って確認すると、テキストがきれいに改行されていますね。背景画像の高さも調節しておきます。

こんなかんじで、「スマホ用デザインを整えるために、パソコン用デザインを修正する」といった方法もうまく活用しましょう。

画像を一度ずらして文字を下へ

続いてこのセクションは、画像とテキストの順番を変えたいので、一度画像を避けてから、テキストを移動させ、画像の位置も調節します。

画像を横長にする

画像の枠上の丸をドラッグして、画像の形を変えます。

何回かダブルクリックすると位置調整できる

画像をダブルクリックして、表示位置の調節をします。すぐ下の「cafeについて」も同様にしましょう。

ちなみに、目視では画像のサイズを完璧に揃えたりするのは難しいですよね。そんな時は「ツールバー」を利用するのがオススメです。

ツールバーを使う

右上の「ツール」をクリックして、ツールバーにチェックを入れます。

画像のサイズや位置を数値で設定

画像をクリックした後、ツールバーの中の「サイズ」で画像の縦と横を、「位置」で左端や上端からの距離を数値で指定できます。

これにより、画像のサイズや位置を正確に揃えられるので、ホームページの見た目をきれいに整えることができます

位置をドラッグで変更

営業時間等のテキストのパーツも位置がおかしいので、ドラッグして移動し、修正していきます。

それから、スマホでスクロール時に、メニューが常に上部に表示されるようにしてみましょう。

ヘッダーを固定する

ヘッダーの横の「・・・」をクリックして、「ヘッダーのスクロールの変更」を選択します。

ヘッダーを固定に設定

スクロール時の動きを設定できるので、「固定」をクリックして選択すれば、常に上部に表示されるようになります。

ヘッダーをスクロール時に半透明にする

ちなみに、ヘッダーデザインを編集し、「スクロール」のタブで「不透明度」を「50%」などにしておけば、スクロールしたときに半透明になるようなデザインにもできます。

こんなかんじで、ざっくりと修正してみました。「これが100%の正解!」というのは無いので、ホームページを見に来る人が見やすい・わかりやすいのはどんなのかな?と考えながらやってみてくださいね。

7. (無料)ドメインを設定する

Wixでは、ホームページのドメインは以下のようになっています。

https://ユーザー名.wixsite.com/サイト名

サイト名は、デザインを保存するときに決められる文字列です。

保存を押してドメインを編集

編集画面右上の「保存」をクリックすると開くこの画面ですね。「編集」をクリックして文字列を変更できます。

ユーザー名には、初期設定ではWix登録時のユーザー名が使われるようになっています。

サルワカくん
サルワカくん
このユーザー名部分の変更方法は、最初に解説した「アカウント設定を変更しておく」を見てみてくださいね。

独自ドメインにするためには

ユーザー名を変えても、wixsite.comという文字列はどうしても入ってしまいます。saruwakakun.comのような独自ドメインを使うためには、Wixの有料プランにする必要があります。

サルワカくん
サルワカくん
なお、Wixでは有料プランにすると、Wixで取得できる独自ドメインが1年間無料になってお得です。

ドメインについてよくわからない!という場合は、こちらのWix公式ページの解説をご覧ください。

8. Wixで作ったホームページを公開する方法

デザインが出来上がったら、ホームページを公開しましょう。

公開をクリックしてサイトを公開

デザインエディタの右上にある[公開]をクリックします。

ホームページが公開された

これでホームページがインターネット上に公開されるようになりました。「サイトを見る」をクリックすると、ホームページを開くことができます。

このURLをブラウザに打ち込めば、世界中の誰でも作成したホームページにアクセスができるわけですね。もちろん友達や同僚にLINEやメッセージでURLを送っても、このホームページを見てもらうことができます。

サルワカくん
サルワカくん
なお、公開後もデザインはこれまでと同様の操作で、簡単に変更できます。どんどんと良いものにしていけば良いわけですね。

インデックスの設定変更

実は、ただ「公開」しただけでは、Googleで検索してもホームページは出てきません

「検索結果にホームページを表示させるかどうか」の「インデックス設定」が、オフになっているためです。なので、例えば店名で検索した結果にホームページを表示させたければ、インデックスをオンにしましょう。

設定のSEO設定をクリック

ダッシュボードの左メニューの「設定」→「SEO設定」をクリックします。

ホームページをインデックスさせる

「検索エンジンにサイトをインデックスさせる」を、オンにしましょう。

SEO対策は?

サルワカくん
サルワカくん
Googleなどの検索エンジンの検索結果で上位表示を狙う対策を、「SEO対策」といいます。

Wixでは、公式がSEO対策のための設定方法などを解説してくれたり、ダッシュボードからいろいろ設定できる(解説付き)ので、基本的なSEO対策は可能です。

WixのSEO設定

ダッシュボード左メニューの「サイト・モバイルアプリ」→「SEO」から、ガイドにしたがって設定していけば、初心者さんでも簡単にSEO対策の設定ができると思います。

また、Wix公式の「SEO設定をカスタマイズする」のページにも設定方法が書いてあるので、参考にしてみてくださいね。

9. 広告はどこに表示される?

Wixの広告表示

ちなみに広告は最上部に固定表示されています。これを削除するためには、この記事の前半で説明したように、Wixの有料プランにする必要があるわけですね。

最後に

ここまでWixの使い方を見てきました。分からない部分があれば、Wix公式ヘルプセンターを見てみてください。かなり情報豊富なので、解決策が見つかることも多いはず。
色々と困ることもあるかと思いますが、楽しみながらホームページを作りましょう!
なお、こちらの記事でWix以外のツールを使ったホームページの作り方も紹介しています。


同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ