はじめてのWixの使い方|簡単なホームページ作成手順

wixでゼロからホームページを作る方法
サルワカくんの顔(通常)
サルワカくん

今回は、ホームページ(ウェブサイト)作成ツールの「Wix」について解説します。「どんなツールなのか」というところから、具体的な使い方まで詳しく説明していきたいと思います。


Wixとは?

wixとは

Wix(読み方はウィックス)は、簡単にホームページが作成できるツールです。パーツをドラッグ&ドロップするだけでオシャレなホームページが作れちゃうのです。

Wixの紹介動画(1分)

Wix公式の紹介動画を見るとどんなものかサクッと分かるかと思います。

Wixって人気なの?

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

日本では知名度がそれほど高くありませんが、利用者は世界で1億人を超えているそうです。

日本語でも使える?

サルワカくんの顔(喜)
サルワカくん

はい。バッチリ日本語対応しています。

知識がなくてもホームページは作れる?

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

作れます。プログラミングなどの専門知識は必要ありません。パーツをドラッグ&ドロップしていくだけで立派なホームページが出来上がります。

テンプレートを選ぶ

たくさんのおしゃれなテンプレートの中から「気に入ったもの」「目的に合ったもの」を選び…

ドラッグ&ドロップ

あとはパーツのドラッグ&ドロップや、文字の打ち直しだけでホームページを作ることができます。

テンプレートがよく出来ているので、センスが無くても比較的おしゃれなホームページを作ることができます。

無料で使える?

サルワカくんの顔(喜)
サルワカくん

Wixには無料プラン有料プラン(プレミアムプラン)があります。無料プランのまま使い続けることもできますが、以下の点に注意しましょう。

無料プランだと…

Wixの広告がホームページに表示されてしまいます。また、ドメイン(saruwakakun.comのようなサイトURL)にwixという文字が入ってしまいます。また、画像などの保存容量が500MBまで、などの制限もあります。

有料プランの内容は?

有料プランには4種類あります。金額は一番低いプランで950円/月ほど、高いプランで2,500円/月ほどとまちまちです。

wix料金プラン

これはプランの一例です。
独自ドメイン*を使うには¥925/月のプラン、広告を非表示にするには¥1,233/月以上のプランを選ぶ必要があります。*独自ドメイン:wixという文字無しのオリジナルサイトURL。saruwakakun.comとかですね。これとは別にドメイン契約代がかかる場合があるので注意しましょう。

詳しくはWixのプレミアムプランをチェックしてみてください。

どんなホームページが作れるの?

ホームページ作成例

知識がなくても、おしゃれでプロっぽいホームページを作ることができます。一度作成事例(日本)を見てみると良いかもしれません。海外の作成事例はこちらから。

作成するホームページはスマホ対応している?

wixスマホ対応

しています。スマホ、タブレット、パソコン、様々な端末から見てもデザインが崩れないようなホームページを作ることができます。

このような様々な端末のサイズに応じて、見た目が調整されるようなデザインは「レスポンシブデザイン」と言われたりします。

【中級者向け】他のホームページへ移転できる?

有料プランに入り、独自ドメインを持っている場合には、Wixを辞めてWordpressなど他サイトに同ドメインで移転することができます。無料プランだとwixのドメインを使用することになるので、移転はできません。

Wixでホームページを作成する手順

それでは、ここからWixの使い方を見ていきましょう。今回の例では、無料プランでできる範囲でおしゃれなホームページを作っていきたいと思います。手順を大まかに説明すると以下のようになります。

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

会員登録しよう

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

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

Wixのウェブサイトにアクセスしよう

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

登録する

[ログイン/新規登録]

右上に[ログイン/新規登録]というようなボタンがあるかと思うので、ここをクリックします。

無料新規登録はこちら

[無料新規登録はこちら]をクリックします。

新規登録

登録方法は2パターンあります。
(1)メールアドレスとパスワードで登録
(2)FacebookかGoogleのアカウントで登録

GoogleやFacebookのアカウントを持っているのであれば(2)がおすすめです。本当に一瞬で登録が完了します。※ 勝手にSNSに投稿されるようなことは無いので、ご安心ください。

アカウントを選ぶ

今回の例では、Googleアカウントを使うことにします。[Googleでログイン]をクリックした後にGoogleアカウントを選択します。

作成するホームページの種類を選ぶ

作りたいホームページを選ぶ

どんなホームページを作る予定かを選択します。後から選び直すことができるので、とりあえずテキトウに選んでしまってもOKです。

今回の例では[飲食店&グルメ]をクリックしました。

テンプレートを選ぶ

テンプレートの選択画面が開きました。

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

ホームページのテンプレートを選ぼう

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

次にホームページの土台となるテンプレートを選びます。土台を基にして、必要な部分を自由に変えていくわけですね。※ テンプレート一覧ページを見失った方はこちらから

テンプレートを選ぶ

さきほど[飲食店&グルメ]を選択したので、それに合いそうなテンプレートが表示されています。

サイドバーからテンプレの種類が選べる

サイドバーがカテゴリを探す

サイドバーから飲食店系向け以外のテンプレートも探すことができます。
とはいえ、このカテゴリーはあくまでも「目的別のおすすめテンプレート」です。例えばビジネス用のテンプレートを使って、飲食店用のホームページを作ることもできます。色々と探してみると良いでしょう。

イベント向けテンプレート

例えば[イベント]というカテゴリーを選ぶと、結婚式やパーティー用のテンプレートがずらっと表示されます。

参考までにどんなカテゴリーがあるのか、一例を紹介します。

ホームページ・カテゴリー例

  • ビジネスサイト企業、法律事務所、会計事務所など
  • イベント告知ページなど。問い合わせフォームの設置も可。
  • デザインポートフォリオサイトなど。
  • 飲食店・グルメレストラン用のサイトなど。
  • ホテルホテルや旅館、キャンプ場用のサイトなど。
  • 音楽バンドやミュージシャン、DJ用のページなど。動画の埋め込みも可能。
  • シングルページ告知ページやランディングページなど。

目的別にテンプレートがたくさん用意されているのが、Wixの良いところですね。

表示を確認する

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

コーヒーショップ

例として「コーヒーショップ」というテンプレートを選んでみます。※ グルメ・飲食店カテゴリーで見つかるかと思います。

表示をクリック

テンプレート画像の上にマウスカーソルをのせると、[編集]と[表示]というボタンが表れます。この中の[表示]をクリックします。
ちなみに左上に「価格:無料」と載っていれば、無料で使うことができます。

サンプルが表示される

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

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

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

スマホ表示を確認

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

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

編集をクリック

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

編集ページが開く

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

次のセクションでは、デザインの変更方法を見ていきたいと思います。

エディタ画面の見方

カスタマイズ画面

まずは、エディタのおおまかな見方を押さえましょう。

よく使う部分は後ほど詳しく説明するので、とりあえず「こんなものがあるんだな」程度に見て頂ければOKです。

ヘッダーメニュー

まずは画面のいちばん上にあるヘッダーメニューから。少し長いので2つの画像に分けて解説します。

▼ 左半分

ヘッダーメニューの見方

この図の通りですね。一番左の[ページ:Home]というをクリックすれば、デザインをカスタマイズするページを変えることができます。はじめは「トップページの編集」となっています。その他の部分は始めは気にしなくても良いかと思います。

▼ 右半分

ヘッダーメニューの見方その2

次にヘッダーメニューの右半分です。[]をクリックすると、ウェブページの全体像を確認できます。パーツを大きく動かしたいときにはここをクリックしましょう。
スマホのデザインを変えたいときには[]をクリックします。[保存]と[プレビュー]はよく使うので、後ほど少し触れることにします。

パーツ挿入ツール

サイドバーの見方

画面左側に円形のアイコンが並んでいるかと思います。ホームページに何かを追加したいときはここから行います。それぞれの機能はこの図の通りですが、後でも触れることにします。

エディタツールバー

エディタツールバー

画面右側には縦長の「エディタツールバー」と呼ばれるものがあります。ここでは「クリックで選んだツール」をコピペしたり削除することができます。また、パーツの「重なり順の変更」もここから行います。

Wixのエディタの使い方

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

文字を変更する

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

ダブルクリックで文字を変更

テキストの真上をダブルクリックします。

文字を変更

テキスト編集モードになるので、好きな文章を入力しましょう。

文字のいろいろな設定をする

テキスト設定

テキストのダブルクリックにより編集モードになっているときには、このようなテキスト設定のウィンドウが開きます。
ここから、フォント種類やサイズ、太字、エフェクト(文字に影や縁取り線をつけたりする)などなどの設定ができます。

フォント種類を変える

フォント種類を変える

フォント種類を変えるときには、変えたいテキストを①ダブルクリックで選択したうえで ②フォントをクリックします。
③するとずらっとフォント種類一覧が表示されるので、好きなものを選びます。

テキストが変わる

テキストが選択されていないと、変更が反映されないので注意しましょう。

日本語フォントを使う

Wixの初期設定では日本語フォントが表示されていません。英語のフォントを選んだままでも、日本語文は問題なく使えるのですが、日本語フォントを追加する場合には以下の手順で行います。

言語を追加をクリック

①フォントの一覧を表示して ②一番下にある[言語を追加]をクリックします。

日本語フォントを追加

言語を追加するウィンドウが開くので[日本語]にチェックを入れ、[保存]をクリックします。

wix日本語フォント

これでフォント種類一覧に日本語が表示されるようになります。ただし、現状では日本語フォントはかなり少なめです…。というよりWindowsでのみ表示できるフォントしか指定ができません。

繰り返しになりますが、英語フォントを指定したままでも日本語を入力することができます(その場合には初期設定の日本語フォントで表示されます)。そのため、上の手順で日本語フォントを設定する必要はさほど無いのかもしれません。

日本語フォント

これは英語フォントのまま、日本語を入力した例です。ごくフツウな文字になるわけですね。

ドラッグで位置を変える

ドラッグで位置を変える

画像や文字、ボタンなどなど様々なパーツは、ドラッグにより位置を変えることができます。スッキリと見えるように、パーツの位置を動かしましょう。

文字をど真ん中に配置

画像のど真ん中に文字を配置してみました。このあたりはお好みで。

画像を変更する

次にテンプレートの画像を、自分の画像に変更してみましょう。

画像を変更する

①画像のどこかをクリックします。②すると画像が選択され、画像設定のメニューボタンが表示されます。この中の[画像を追加・管理]をクリックしましょう。

画像を変更

画像の管理ウィンドウが表示されます。今回クリックしたのは画像が自動的に切り替わる「スライドショー形式」のものです。そのためスライドショーに使われる3枚の写真が表示されています。

画像を選ぶ

スライドショーに使われる画像のうち、変えたいものをクリックします。

画像を変更をクリック

詳細が開くと思うので、次に[画像を変更]をクリックします。

写真をドラッグして追加

自分のフォルダーから画面上に画像をドラッグすれば、画像が追加されます。

これでアップロードは完了です。表示される[画像を選択]をクリックすれば、アップロードした画像が使用されるようになります。

画像が入れ替わった

自分の写真に切り替わりました。同じ手順で、スライドショーの別画像も変えていきましょう。

スライドショーの設定をする

画像のスライドショーの設定

画像をダブルクリックすると表示されるメニューのうち①歯車マークをクリックすると、②スライドショーの設定ができます。ここから「次の画像に切り替わる時間」などを変えることができます。

画像の明るさを調整する

画像が入れ替わった

「画像が明るくて、上にのっている文字が見えづらくなってしまった」というときには、画像を暗くしましょう。

画像の明るさを調整

画像をダブルクリックして選択し[画像を変更]をクリックします 。

画像を編集をクリック

次に正方形の画像にカーソルを当てると表示されるブラシマーク(画像を編集)をクリックします。

画像の色調補正やサイズ変更ができる

すると、画像のサイズや明るさなどなどを調整できる画面が開きます。

lightingをクリック

[Lighting]というところから、明るさを変えることができます。

つまみを動かす

表示されるつまみを左に動かせば、画像を暗くすることができます。

画像の切り抜きをする

画像の切り抜き

Lightingと同様に「切り抜き」をクリックすれば、画像サイズの変更ができるようになります。

変更ができたら[保存]をクリックします。これで変更が反映されるはずです。

データを保存する

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

データを保存する

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

(初回だけ)サイトのドメインを選択

サイトのドメインを選択する

はじめて保存するときには、サイトのドメインを決める画面が開きます。

サイトのURLを入力

サイトのURLとなる文字列を入力します。URLの前半部分の変更方法は、のちほど解説します。

保存して続行

入力ができたら[保存して続行]をクリックします。これで保存が完了しました。

ボタンを配置する

次にホームページ上の好きな位置にリンクボタンを配置してみましょう。

追加をクリック

画面左側にある追加をクリックします。

ボタン一覧がずらっと表示される

様々なパーツを追加することができますが、今回は[ボタン]を選びます。するとボタンのデザイン一覧がずらっと表示されます。

ボタンの色は後から変えることができるので、形を見て選ぶのが良いでしょう。使いたいボタンはドラッグもしくはクリックで画面に配置できます。

ボタンの色を変える

ボタンデザインをカスタマイズ

①追加されたボタンをクリックし、②ブラシのアイコンを選びます。次に③表示される[デザインをカスタマイズ]を選びましょう。

ボタンデザインの設定

ボタンデザインの設定ウィンドウが開きます。[不透明度・色]からはボタンの背景色、[枠線]からは線の太さや色、[テキスト]からは文字色を変えることができます。

枠線と文字を白に

今回は文字と枠線をそれぞれ白にしてみました。

ボタン内の文字を変える

次に「カートに追加」というテキストを変えたいと思います。

テキストラベルを変更

①ボタンをダブルクリックすると設定が開きます。②この上側にあるテキストを変更すればOKですね。

リンクを貼る

次に「ボタンを押したらどこに飛ぶか」というリンク先の設定をしましょう。

リンクを貼る

①先程の設定画面の下側にある[リンク先を選択]をクリックします。②[ウェブアドレス]を選び、③リンク先にしたいURLを入力します。

今回は例としてサルワカのトップページ(https://saruwakakun.com/)をリンク先としました。②のところで[ページ]選べば、ホームページ内の別ページを簡単に指定できます。

リンクボタンが完成

最終的にこのようになりました。[SARUWAKA]をクリックすると、サルワカのトップページに飛ぶわけですね。

プレビューを見る

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

プレビューを見る

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

プレビューを見る

すると、パソコンから見た場合のデザインが表示されます。

画面右上にあるをクリックすれば、スマホから見た場合のデザインもチェックできます。[エディタに戻る]をクリックすれば、プレビューが終了してエディタに戻ります。

スマホデザインを変える

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

スマホデザインを変える

エディタで①画面右上にあるをクリックし、②[モバイルエディタ]を選びます。

スマホデザインを変える

画面にスマホ用デザインが表示されます。さきほどと同様に、ドラッグやダブルクリックでデザインを変えていくことができます。

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

内容はパソコン表示のものが使われる

スマホ表示の文字や画像などの内容は、パソコン表示と同じものが使われます。つまり、スマホ用に変更できるのは「デザイン」だけなのです(文字の大きさを変えたり、配置を変えたり、などですね)。「文字や画像をスマホ表示だけ違うものにする」ということはできないので注意しましょう。

別のページのデザインを変える

例えば飲食店のホームページであれば「メニューをチェックできるページ」があると良いでしょう。トップページ以外のページを編集するには以下のようにします。

ページ:homeをクリック

画面左上にある[ページ:Home]をクリックします。これは「今はHomeというページにいるんですよ」ということを表示しているのですね。

別ページのデザインをする

ページを変更するウィンドウが開きます。[Our Shops]や[Menus]などは既に作成済みのページです。Wixにより「飲食店用のサイトだったら、こういうページがあると良いかな」というものがあらかじめ作られているわけですね。
新しくページを作るときには[+新しいページ]をクリックします。

ちなみに一番下の[ページ変換:アウトイン]というのは、ページが遷移するとき(切り替わるとき)にどのようなアニメーションをつけるか、という設定になります。

選択したページが表示される

例えば[Menus]を選ぶと、メニュー用のページが開きます。このページのデザインも先程と同じようにクリックやドラッグ&ドロップで変更することができます。

編集を終了・再開する

編集を一旦終了するときには、画面一番上にある[サイト]メニューをクリックして[エディタを終了]を選びます。
保存を忘れないように!

デザイン編集を再開する

上のボタンからサイト管理ページに飛ぶことができます。このページはよく使うので、ブックマークしておきましょう。

「サイトを管理」をクリック

画面の左側に表示される[サイトを管理]をクリックします。

サイトの管理画面へ

こちらのページでは、サイト名の変更などなど様々な設定ができます。デザインカスタマイズを再開したいときは[サイトを編集]をクリックします。

これで、エディタが開くのでデザインカスタマイズを再開しましょう。

(無料の)ドメインを変更する

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

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

サイト名は、さきほど保存するときに決めた文字列です。
ユーザー名には、初期設定ではWix登録時のユーザー名が使われるようになっています。つまりユーザー名を変えれば、サイトのドメインも変わるわけですね。

ユーザー名の変更手順

アカウント設定をクリック

ユーザー名を変更するときには、デザインエディタ以外のページで、①画面右上にある丸いアイコンをクリックし、②[アカウント設定]をクリックします。

パスワードが求められるので、パスワードを入力します。Googleのアカウントで登録した方は「Googleのパスワード」を入力しましょう。

ユーザー名を書き換えて保存

ユーザー名を書き変えて[変更内容を保存]をクリックします。

例えば、saruwakaというユーザー名にすれば、サイトのドメインはsaruwaka.wixsite.com/~となります。

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

ユーザー名を変えても、wixsite.comという文字列はどうしても入ってしまいます。saruwakakun.comのような独自ドメインを使うためには、プレミアム会員になる必要があります。詳しくはこちらをご覧ください。

ホームページを公開する

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

公開をクリック

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

サイトが公開された

これでホームページがインターネット上に公開されるようになりました。

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

サイトを見る

作成したホームページを見るために[サイトを見る]をクリックしましょう。

ホームページが表示あれる

ホームページが出来上がっています。このページはあなたのWebサイトのトップページになるので、ブックマークしておきましょう。

なお公開後もデザインは全く同じように変更できます。どんどんと良いものにしていけば良いわけですね。

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

広告が表示される

ちなみに広告は右上と下側に固定表示されています。これを削除するためには、この記事の前半で説明したようにプレミアム会員になる必要があるわけですね。

最後に

ここまでWixの使い方を見てきました。分からない部分があれば、Wixヘルプセンターを見てみてください。かなり情報豊富なので、解決策が見つかることも多いはず。もしくはGoogleで「Wix ◯◯する方法」などと検索しても良いですね。
色々と困ることもあるかと思いますが、楽しみながらホームページを作りましょう!

サルワカ