今回は、ホームページ（ウェブサイト）作成ツールの「Wix」について解説します。「どんなツールなのか」というところから、具体的な使い方まで詳しく説明していきたいと思います。
Wixとは？
Wix（読み方はウィックス）は、簡単にホームページが作成できるツールです。パーツをドラッグ＆ドロップするだけでオシャレなホームページが作れちゃうのです。
まずはWixの紹介動画を観てみよう
Wix公式の紹介動画（1分ほど）を見ると、どんなものかサクッと分かるかと思います。
Wixって人気なの？
世界的に人気があります。日本では知名度がそれほど高くないのかもしれませんが、利用者は世界で1億人を超えているそうです。
日本語でも使える？
はい。バッチリ日本語対応しています。
知識がなくてもホームページは作れる？
作れます。HTMLやCSSなどの専門知識は必要ありません。パーツをドラッグ＆ドロップしていくだけで立派なホームページが出来上がります。
どんな流れでホームページを作る？
たくさんのおしゃれなテンプレートの中から「気に入ったもの」「目的に合ったもの」を選び…
あとはパーツのドラッグ＆ドロップや、文字の打ち直しだけでホームページを作ることができます。
テンプレートがよく出来ているので、センスが無くても比較的おしゃれなホームページを作ることができます。
無料で使える？
Wixには無料プランと有料プラン（プレミアムプラン）があります。無料プランのまま使い続けることもできますが、以下の点に注意しましょう。
無料プランだと…
Wixの広告がホームページに表示されてしまいます。また、ドメイン（saruwakakun.comのようなサイトURL）にwixという文字が入ってしまいます。また、画像などの保存容量が500MBまで、などの制限もあります。
有料プランの内容は？
有料プランにはいくつか種類があります。
こちら2018年1月時点のプランの一例です。
独自ドメイン*を使うには月数百円のプラン、広告を非表示にするには月千円前後のプランを選ぶ必要があります。*独自ドメイン：wixという文字無しのオリジナルサイトURL。saruwakakun.comとかですね。これとは別にドメイン契約代がかかる場合があるので注意しましょう。
値段は変動があるため、詳しくはWixのプレミアムプランをチェックしてみてください。分かりやすくまとめられています。
どんなホームページが作れるの？
作成するホームページはスマホ対応している？
しています。スマホ、タブレット、パソコン、様々な端末から見てもデザインが崩れないようなホームページを作ることができます。
このような様々な端末のサイズに応じて、見た目が調整されるようなデザインは「レスポンシブデザイン」と言われたりします。
【中級者向け】他のホームページへ移転できる？
有料プランに入り、独自ドメインを持っている場合には、Wixを辞めてWordpressなど他サイトに同ドメインで移転することができます。無料プランだとwixのドメインを使用することになるので、移転はできません。
Wixの使い方
それでは、ここからWixの使い方を見ていきましょう。今回の例では、無料プランでできる範囲でおしゃれなホームページを作っていきたいと思います。手順を大まかに説明すると以下のようになります。
- Wixに会員登録
- テンプレートを選ぶ
- デザインカスタマイズ
- ドメインを設定
- ホームページを公開
Wixに会員登録しよう
Wixをはじめるために会員登録します。今回の例では無料プランに登録します。
Wixのウェブサイトにアクセスしよう
まずは上のボタンからWixに飛びましょう。
登録する
「今すぐはじめる」というようなボタンをクリックすると、右上に［ログイン/新規登録］と表示されるので、ここをクリックします。
[無料新規登録はこちら]をクリックします。
登録方法は2パターンあります。
(1)メールアドレスとパスワードで登録
(2)FacebookかGoogleのアカウントで登録
GoogleやFacebookのアカウントを持っているのであれば(2)がおすすめです。本当に一瞬で登録が完了します。※ 勝手にSNSに投稿されるようなことは無いので、ご安心ください。
今回の例では、Googleアカウントを使うことにします。［Googleでログイン］をクリックした後にGoogleアカウントを選択します。
作成するホームページの種類を選ぶ
どんなホームページを作る予定かを選択します。後から選び直すことができるので、とりあえずテキトウに選んでしまってもOKです。
今回の例では［飲食店＆グルメ］をクリックしました。
テンプレートの選択画面が開きました。
ここまで来たら会員登録は完了です。
ホームページのテンプレートを選ぼう
次にホームページの土台となるテンプレートを選びます。土台を基にして、必要な部分を自由に変えていくわけですね。※ テンプレート一覧ページを見失った方はこちらから
さきほど［飲食店＆グルメ］を選択したので、それに合いそうなテンプレートが表示されています。
サイドバーからテンプレの種類が選べる
サイドバーから飲食店系向け以外のテンプレートも探すことができます。
とはいえ、このカテゴリーはあくまでも「目的別のおすすめテンプレート」です。例えばビジネス用のテンプレートを使って、飲食店用のホームページを作ることもできます。色々と探してみると良いでしょう。
例えば［イベント］というカテゴリーを選ぶと、結婚式やパーティー用のテンプレートがずらっと表示されます。
参考までにどんなカテゴリーがあるのか、一例を紹介します。
ホームページ・カテゴリー例
- ビジネスサイト企業、法律事務所、会計事務所など
- イベント告知ページなど。問い合わせフォームの設置も可。
- デザインポートフォリオサイトなど。
- 飲食店・グルメレストラン用のサイトなど。
- ホテルホテルや旅館、キャンプ場用のサイトなど。
- 音楽バンドやミュージシャン、DJ用のページなど。動画の埋め込みも可能。
- シングルページ告知ページやランディングページなど。
目的別にテンプレートがたくさん用意されているのが、Wixの良いところですね。
表示を確認する
良さげなデザインがあったら、表示イメージを確認してみましょう。
例として「コーヒーショップ」というテンプレートを選んでみます。※ グルメ・飲食店カテゴリーで見つかるかと思います。
テンプレート画像の上にマウスカーソルをのせると、［編集］と［表示］というボタンが表れます。この中の［表示］をクリックします。
ちなみに左上に「価格：無料」と載っていれば、無料で使うことができます。
ホームページのデザインイメージが表示されました。スクロールしたり、メニューをクリックしたりして、どんなホームページが作れるのかをチェックしましょう。
スマホ表示のデザインまでチェック
最近では、ジャンルに関わらず、スマホからホームページを見る人がたくさんいます。そこで、スマホ表示のデザインまでチェックしたうえで、テンプレートを決めるのがおすすめです。
画面左上にあるをクリックしましょう。すると、スマホ画面での表示がチェックできます。
テンプレートが決まったら［編集］をクリック
「このテンプレートを使おう」と決まったら［編集］をクリックしましょう。
ホームページのデザインエディタ（編集画面）が開きました。この画面で、デザインを必要に応じて変えていくわけですね。
次のセクションでは、デザインの変更方法を見ていきたいと思います。
Wixのエディタ画面の見方
まずは、エディタのおおまかな見方を押さえましょう。
よく使う部分は後ほど詳しく説明するので、とりあえず「こんなものがあるんだな」程度に見て頂ければOKです。
ヘッダーメニュー
まずは画面のいちばん上にあるヘッダーメニューから。少し長いので２つの画像に分けて解説します。
▼ 左半分
この図の通りですね。一番左の［ページ:Home］というをクリックすれば、デザインをカスタマイズするページを変えることができます。はじめは「トップページの編集」となっています。その他の部分は始めは気にしなくても良いかと思います。
▼ 右半分
次にヘッダーメニューの右半分です。［］をクリックすると、ウェブページの全体像を確認できます。パーツを大きく動かしたいときにはここをクリックしましょう。
スマホのデザインを変えたいときには［］をクリックします。［保存］と［プレビュー］はよく使うので、後ほど少し触れることにします。
パーツ挿入ツール
画面左側に円形のアイコンが並んでいるかと思います。ホームページに何かを追加したいときはここから行います。それぞれの機能はこの図の通りですが、後でも触れることにします。
エディタツールバー
画面右側には縦長の「エディタツールバー」と呼ばれるものがあります。ここでは「クリックで選んだツール」をコピペしたり削除することができます。また、パーツの「重なり順の変更」もここから行います。
Wixのエディタの使い方
ここからは文字や画像、レイアウトなどなどを変更する方法を紹介します。
文字を変更する
変更したいテキストはダブルクリックして変えることができます。
テキストの真上をダブルクリックします。
テキスト編集モードになるので、好きな文章を入力しましょう。
文字のいろいろな設定をする
テキストのダブルクリックにより編集モードになっているときには、このようなテキスト設定のウィンドウが開きます。
ここから、フォント種類やサイズ、太字、エフェクト（文字に影や縁取り線をつけたりする）などなどの設定ができます。
フォント種類を変える
フォント種類を変えるときには、変えたいテキストを①ダブルクリックで選択したうえで ②フォントをクリックします。
③するとずらっとフォント種類一覧が表示されるので、好きなものを選びます。
テキストが選択されていないと、変更が反映されないので注意しましょう。
日本語フォントを使う
Wixの初期設定では日本語フォントが表示されていません。英語のフォントを選んだままでも、日本語文は問題なく使えるのですが、日本語フォントを追加する場合には以下の手順で行います。
①フォントの一覧を表示して ②一番下にある［言語を追加］をクリックします。
言語を追加するウィンドウが開くので［日本語］にチェックを入れ、［保存］をクリックします。
これでフォント種類一覧に日本語が表示されるようになります。ただし、現状では日本語フォントはかなり少なめです…。というよりWindowsでのみ表示できるフォントしか指定ができません。
繰り返しになりますが、英語フォントを指定したままでも日本語を入力することができます（その場合には初期設定の日本語フォントで表示されます）。そのため、上の手順で日本語フォントを設定する必要はさほど無いのかもしれません。
これは英語フォントのまま、日本語を入力した例です。ごくフツウな文字になるわけですね。
ドラッグで位置を変える
画像や文字、ボタンなどなど様々なパーツは、ドラッグにより位置を変えることができます。スッキリと見えるように、パーツの位置を動かしましょう。
画像のど真ん中に文字を配置してみました。このあたりはお好みで。
画像を変更する
次にテンプレートの画像を、自分の画像に変更してみましょう。
①画像のどこかをクリックします。②すると画像が選択され、画像設定のメニューボタンが表示されます。この中の［画像を追加・管理］をクリックしましょう。
画像の管理ウィンドウが表示されます。今回クリックしたのは画像が自動的に切り替わる「スライドショー形式」のものです。そのためスライドショーに使われる3枚の写真が表示されています。
スライドショーに使われる画像のうち、変えたいものをクリックします。
詳細が開くと思うので、次に［画像を変更］をクリックします。
自分のフォルダーから画面上に画像をドラッグすれば、画像が追加されます。
これでアップロードは完了です。表示される［画像を選択］をクリックすれば、アップロードした画像が使用されるようになります。
自分の写真に切り替わりました。同じ手順で、スライドショーの別画像も変えていきましょう。
スライドショーの設定をする
画像をダブルクリックすると表示されるメニューのうち①歯車マークをクリックすると、②スライドショーの設定ができます。ここから「次の画像に切り替わる時間」などを変えることができます。
画像の明るさを調整する
「画像が明るくて、上にのっている文字が見えづらくなってしまった」というときには、画像を暗くしましょう。
画像をダブルクリックして選択し［画像を変更］をクリックします 。
次に正方形の画像にカーソルを当てると表示されるブラシマーク（画像を編集）をクリックします。
すると、画像のサイズや明るさなどなどを調整できる画面が開きます。
[Lighting]というところから、明るさを変えることができます。
表示されるつまみを左に動かせば、画像を暗くすることができます。
画像の切り抜きをする
Lightingと同様に「切り抜き」をクリックすれば、画像サイズの変更ができるようになります。
変更ができたら［保存］をクリックします。これで変更が反映されるはずです。
データを保存する
このあたりで一旦編集データを保存しておきましょう。いつブラウザが落ちるかわからないので、こまめに保存することをおすすめします。
編集画面の右上にある［保存］をクリックします。
（初回だけ）サイトのドメインを選択
はじめて保存するときには、サイトのドメインを決める画面が開きます。
サイトのURLとなる文字列を入力します。URLの前半部分の変更方法は、のちほど解説します。
入力ができたら［保存して続行］をクリックします。これで保存が完了しました。
ボタンを配置する
次にホームページ上の好きな位置にリンクボタンを配置してみましょう。
画面左側にある追加をクリックします。
様々なパーツを追加することができますが、今回は［ボタン］を選びます。するとボタンのデザイン一覧がずらっと表示されます。
ボタンの色は後から変えることができるので、形を見て選ぶのが良いでしょう。使いたいボタンはドラッグもしくはクリックで画面に配置できます。
ボタンの色を変える
①追加されたボタンをクリックし、②ブラシのアイコンを選びます。次に③表示される［デザインをカスタマイズ］を選びましょう。
ボタンデザインの設定ウィンドウが開きます。［不透明度・色］からはボタンの背景色、［枠線］からは線の太さや色、［テキスト］からは文字色を変えることができます。
今回は文字と枠線をそれぞれ白にしてみました。
ボタン内の文字を変える
次に「カートに追加」というテキストを変えたいと思います。
①ボタンをダブルクリックすると設定が開きます。②この上側にあるテキストを変更すればOKですね。
リンクを貼る
次に「ボタンを押したらどこに飛ぶか」というリンク先の設定をしましょう。
①先程の設定画面の下側にある［リンク先を選択］をクリックします。②［ウェブアドレス］を選び、③リンク先にしたいURLを入力します。
今回は例としてサルワカのトップページ（https://saruwakakun.com/）をリンク先としました。②のところで［ページ］選べば、ホームページ内の別ページを簡単に指定できます。
最終的にこのようになりました。［SARUWAKA］をクリックすると、サルワカのトップページに飛ぶわけですね。
プレビューを見る
ある程度、ホームページが出来上がってきたら、一旦「実際にどのように表示されるのか」を見てみましょう。
画面右上にある［プレビュー］をクリックします。
すると、パソコンから見た場合のデザインが表示されます。
画面右上にあるをクリックすれば、スマホから見た場合のデザインもチェックできます。［エディタに戻る］をクリックすれば、プレビューが終了してエディタに戻ります。
スマホデザインを変える
ここまで、パソコン表示のデザインを変えてきました。スマホ表示時のデザインも調整しておきましょう。
エディタで①画面右上にあるをクリックし、②［モバイルエディタ］を選びます。
画面にスマホ用デザインが表示されます。さきほどと同様に、ドラッグやダブルクリックでデザインを変えていくことができます。
スマホデザインの変更は、デスクトップ表示（パソコン表示）には影響しません。言い換えると「パソコン表示のデザインが崩れないかな」と心配する必要はないわけですね。
内容はパソコン表示のものが使われる
スマホ表示の文字や画像などの内容は、パソコン表示と同じものが使われます。つまり、スマホ用に変更できるのは「デザイン」だけなのです（文字の大きさを変えたり、配置を変えたり、などですね）。「文字や画像をスマホ表示だけ違うものにする」ということはできないので注意しましょう。
別のページのデザインを変える
例えば飲食店のホームページであれば「メニューをチェックできるページ」があると良いでしょう。トップページ以外のページを編集するには以下のようにします。
画面左上にある［ページ：Home］をクリックします。これは「今はHomeというページにいるんですよ」ということを表示しているのですね。
ページを変更するウィンドウが開きます。［Our Shops］や［Menus］などは既に作成済みのページです。Wixにより「飲食店用のサイトだったら、こういうページがあると良いかな」というものがあらかじめ作られているわけですね。
新しくページを作るときには［+新しいページ］をクリックします。
ちなみに一番下の［ページ変換：アウトイン］というのは、ページが遷移するとき（切り替わるとき）にどのようなアニメーションをつけるか、という設定になります。
例えば［Menus］を選ぶと、メニュー用のページが開きます。このページのデザインも先程と同じようにクリックやドラッグ＆ドロップで変更することができます。
Wixでの編集を終了・再開する
編集を一旦終了するときには、画面一番上にある［サイト］メニューをクリックして［エディタを終了］を選びます。
保存を忘れないように！
デザイン編集を再開する
上のボタンからサイト管理ページに飛ぶことができます。このページはよく使うので、ブックマークしておきましょう。
画面の左側に表示される［サイトを管理］をクリックします。
こちらのページでは、サイト名の変更などなど様々な設定ができます。デザインカスタマイズを再開したいときは［サイトを編集］をクリックします。
これで、エディタが開くのでデザインカスタマイズを再開しましょう。
（無料の）ドメインを変更する
Wixでは、ホームページのドメインは以下のようになっています。
https://ユーザー名.wixsite.com/サイト名
サイト名は、さきほど保存するときに決めた文字列です。
ユーザー名には、初期設定ではWix登録時のユーザー名が使われるようになっています。つまりユーザー名を変えれば、サイトのドメインも変わるわけですね。
ユーザー名の変更手順
ユーザー名を変更するときには、デザインエディタ以外のページで、①画面右上にある丸いアイコンをクリックし、②［アカウント設定］をクリックします。
パスワードが求められるので、パスワードを入力します。Googleのアカウントで登録した方は「Googleのパスワード」を入力しましょう。
ユーザー名を書き変えて［変更内容を保存］をクリックします。
例えば、saruwakaというユーザー名にすれば、サイトのドメインはsaruwaka.wixsite.com/~となります。
独自ドメインにするためには
ユーザー名を変えても、wixsite.comという文字列はどうしても入ってしまいます。saruwakakun.comのような独自ドメインを使うためには、プレミアム会員になる必要があります。詳しくはこちらをご覧ください。
Wixで作ったホームページを公開する
デザインが出来上がったら、ホームページを公開しましょう。
デザインエディタの右上にある［公開］をクリックします。
これでホームページがインターネット上に公開されるようになりました。
このURLをブラウザに打ち込めば、世界中の誰でも作成したホームページにアクセスができるわけですね。もちろん友達や同僚にLINEやメッセージでURLを送っても、このホームページを見てもらうことができます。
作成したホームページを見るために［サイトを見る］をクリックしましょう。
ホームページが出来上がっています。このページはあなたのWebサイトのトップページになるので、ブックマークしておきましょう。
なお公開後もデザインは全く同じように変更できます。どんどんと良いものにしていけば良いわけですね。
広告はどこに表示される？
ちなみに広告は右上と下側に固定表示されています。これを削除するためには、この記事の前半で説明したようにプレミアム会員になる必要があるわけですね。
最後に
ここまでWixの使い方を見てきました。分からない部分があれば、Wixヘルプセンターを見てみてください。かなり情報豊富なので、解決策が見つかることも多いはず。もしくはGoogleで「Wix ◯◯する方法」などと検索しても良いですね。
色々と困ることもあるかと思いますが、楽しみながらホームページを作りましょう！
なお、こちらの記事でWix以外のツールを使ったホームページの作り方も紹介しています。
