今回はWix.comを使ってホームページの作成方法をご紹介します。
実際に仮想店舗を例としてホームページを作成していきますので、あなたの制作の参考にしてください。
Wix.comとは
Wix.comは2006年にイスラエルでスタートし、2013年には米ナスダックに上場した業界最大手の企業です。日本ではイスラエルのことはよく知られていませんが、IT企業が乱立するスタートアップ大国で、まるで国全体がシリコンバレーのようだとも言われている国なんです。
そのような環境の中で急成長を遂げ、現在190カ国以上で利用されており、ユーザー数1億人以上の世界最大手の無料ホームページ作成サービスです。最大手だから安心感があります。
やはり世界中で利用されているホームページ作成サービスにはワケがあるはずです。
これからサンプルサイトを作りながら、やさしく機能をご紹介します。一緒に進めていきましょう！
今回作ってみたホームページです。参考にご覧ください。サンプルサイトをみる
手順
まずはWix.comに申し込みをします。無料版含め6つのプランがあります。その際には独自ドメインの設定ができ、ほとんどの機能を利用できる「無制限プラン」がおすすめです。予約管理、オンラインショップなどレストランに必要な機能を利用できます。Wix+レストランというプランがあり月額2,025円程度でアップグレードできます。今回は無料プランでの解説になります。
なおWix.comの基本操作の解説になりますので、レストラン以外の方でも役立つ内容になります。
Welcomeページが表示されます。こちらからスタートをクリックします。
実際に作ってみよう。
テンプレートの選択
まずはご自分の業種にピッタリなテンプレートを選択します。500種類以上あるので迷ってしまいますね。
左のメニューからご自分の業種を探してみましょう。様々な業種や用途別のメニューがあるので探しやすいと思います。また、白紙のテンプレートも用意されていることから非常に高いカスタマイズ性を備えていることも伺えます。
ホームページ作成初心者の方は、既存のテンプレートを編集することでスムーズにホームページ作成ができると思います。
今回はレストラン向けのテンプレートを選択してみました。
テンプレートを選択するとホームページの編集画面が表示されます。下の画像のように完全にビジュアルからほとんどすべての操作ができます。この画面のことをエディターといいます。
ここまでは苦労せずできたのではないでしょうか。
エディターの基本操作
では、実際に作りながら簡単に操作方法の説明をしていきます。
まずWix.comでホームページを作る場合に重要になるのがエディターの左側のメニューです。６つのボタンが並んでおり、それぞれのボタンからテキスト・背景・画像の挿入・スライド・ビデオ・申し込み等のボタンなどのコンテンツを追加することができます。
背景画像の追加・変更
デフォルトで様々な美しい素材が用意されています。
コンテンツの追加
プラスマークのボタンをクリックすると様々なコンテンツの追加ができます。テキスト・画像・ギャラリー・スライド・ボックス・スリップ・シェイプ・動画・音楽・ソーシャル・コンタクト・メニュー・リスト・ライトボックス・ブログ・ショップ・その他と実に多くのキノが揃っておりドラッグ&ドロップ自由な場所に配置することができるので、思いのままに制作できます。
アプリの追加
Wix.comはアプリによって機能追加ができるようになっており、Wixで開発しているものやサードパーティが開発しているものもあり豊富に揃っています。WordPressのように企業から個人の開発者までアプリ開発に参加できるエコシステムがあることが成長の理由の１つなんだと思います。
アップロード
動画・画像・音楽・文章のファイルをアップロードすることができます。画像であればマイイメージに保存されるため、いつでもホームページに追加することができます。
ブログの管理
ブログの管理ページへ移動する場合や、新規投稿を行うことができます。
オンライン予約
こちらのボタンからオンライン予約のアプリが起動し、機能追加ができるようになります。
※これらの機能はすでにデザインされ、配置されているテキストや画像をクリックすることですぐに呼び出すことができます。実際のホームページ作成時にはコンテンツを直接編集して行くことになります。
以上が基本機能です。デザインされたテンプレートを選択した場合はすでにコンテンツが配置されているので、テキストや画像を編集することですぐにかっこいいホームページが作れます。
既存のテンプレートを改良
基本機能がなんとなくわかったところで、実際に動かしてみましょう。
テキストを編集してみる
テキストの編集はテキストにカーソルを当てクリックすると①の編集ボタンが出てきますので、これを押すと右側の詳細設定メニューが表示されます。
テキストを追加すると好きな場所にドラッグ&ドロップで配置することができます。ドラッグすると罫線が表示されるので正確な位置に配置することができます。
Wixでの作業はこれ作業の繰り返しになります。動画でも画像でも配置されているコンテンツ上をクリックすることで編集して行くという流れになります。なんども行うとすぐに慣れてきますので、簡単さがすぐに実感できると思います。
画像のアップロード、編集
次にメニューのすぐ下にある、メインイメージ部分を変更してみます。この箇所をスリップ背景といいます。画像をクリックすると下のように編集ボタンが出てきますので、クリックし②の画像選択メニューから好きな画像を選ぶことができます。もしくはご自分で撮影したものをアップロードして使うこともできます。②メニュー内の「画像」「動画」ボタンを押すとアップロードのウィンドウが表示されます。
コンテンツ内に配置した画像の編集
今までと同じようにクリックするとメニューが出てきます。画像の変更・デザイン多数・アニメーション14種類・フィルター18種類・切り抜き・リンク設定ができます。
アニメーションに「カーブ」をフィルターに「ソルダック（少し暗くなる）」を適用してみました。デザインは適用していませんが、私はWebデザインの仕事もしているんですが、ホームページ上で写真を綺麗に見せる効果のほとんどが揃っています。カーソルを合わせただけで即反映されるので、めちゃくちゃ便利です。
ここはとても面白いので色々試してみてください。サンプルサイトにアニメーションなど入れましたので、ご確認ください。
また、テキストにもアニメーションを適用できます。複数のテキストにかける場合は対象の外側からマウスの左ボタンを押しながらドラッグすると選択範囲を作ることができます。この際に「グループ化する」ボタンが出てきますので、選択してからアニメー書を設定すればまとめて効果を適用することができます。
各ページの移動
テンプレートを選択するとすでにページが作られていますので、上部メニューから各ページに移動できます。ページの追加と削除もこのメニューで行うことができます。
ページの編集もここで行います。右の丸いボタンを押すと様々な設定ができます。ページの削除・ページ名の変更・レイアウト・アクセスの許可など。
グローバルナビゲーションからも同じ操作ができます。「メニュー管理」をクリックすると上のメニューが出てきます。ページの追加削除ができます。
レストラン情報の追加
メニューページでメニューのところをどこでもいいのでクリックすると下の画像のようになります。「メニューを編集」と「メニューページの追加」ができます。まずは「メニューを編集」ボタンをクリックしてください。
下のようなレストラン情報とメニューの専門ページが作られています。必要な情報を入力することで、メニューページに自動的に出力されます。
ブログを追加してみる
ブログを書きたいときも簡単ですね。「新規記事を追加」と「ブログの管理」ができます。
新規記事を追加を押すとこのようにシンプルなエディタが出てきます。
ブログの管理をクリックすると記事一覧の管理画面が現れ、一元管理することができます。
スマホアプリもあり、ブログの投稿が可能になっています。
モバイルエディターもある
モバイル版で確認してコンテンツの調整もでき、上メニューでPCと切り替えてデザイン調整が可能です。
以上駆け足でしたが、流れはつかめたのではないでしょうか。Wix.comで上達のコツはどこでもクリックできてカスタマイズできるので、シンプルな操作を繰り返すことでほとんどの機能を理解できることです。あの機能どこだっけ？ということがほとんどなく直感的操作でなんでもできるサービスでした。
Wix.comを使ってみた感想
高度なホームページが驚くほど簡単にできました。このレベルのホームページを作るにはかなりの技術力が必要になります。それをドラックアンドドロップと簡単な操作だけで作れることはすごいことです。初心者の方でも本当に簡単にできます。他の市販ソフトとは比べものにならないと思います。
操作性に関しても非常にスムーズに動作し、ストレスがありません。画像やテキストの位置も自由に変更できるためとても柔軟なデザインにすることが出来ます。
Wix.comの特徴を関節にまとめると。。。
- エディター上でどこでもクリックしてみる。→何ができるかすぐにわかる。
- どこにでも動かし配置できる。→高さや幅もカスタマイズ自由自在。
- 高度なデザイン性と操作性が両立している。→コンテンツに高度なデザインをワンクリックで適用。
これからのホームページ作成はWix.comのようにユーザーの負担をとことん減らしてくれるサービスが主流になってくるのではないでしょうか。
AI（人工知能）を導入した”WixADI”という新サービスも米国で開始されました。今まで以上に簡単にホームページが作れるようになると思います。現在のところWix.comのような先進的WEBサイトビルダーは他にないなというのが率直な感想です。
