無料ホームページ作成サイト「Wix」で知識0でのWebサイトの作り方

無料ホームページ作成サイト「Wix」で知識0でのWebサイトの作り方

普段、WordPressを触ることが多いですが、無料でホームページ作成ができる「Wix」を触る機会がありました。

Wixを使ってみて、HTMLやCSS、JavaScriptなどのプログラミング知識がない方でも簡単に、さらにハイクオリティのデザインでWebサイトが作成できるので、無料でサイト作成したい方にいいサービスだと思いました。商用利用も可ですので、ビジネスサイトにも使えます。もちろんスマホサイトにも対応しています。

初心者でもサイトが作れるように実際に「Wix」を使ってサンプルサイトを作りながら、いくつか操作や機能についてレビューしてみます。サイト作成のきっかけになれば幸いです。

Wixとは?

Wixとは、クラウドベースのホームページ作成ツールです。

もう少しわかりやすく言うと、オンライン上でホームページ(Webサイト)が作成できるWebサービスです。Wixを使う上で、プログラミング知識は必要ありません、サーバーを契約し、FTPソフトでファイルをアップロードするなど煩わしい作業も必要なくサイトが作成できます。

Wixには、数百種類を超えるテンプレートがあり、それをもとに編集し、公開すればオリジナルサイトの完成です。サイト作成から公開までは全て無料で提供されています。

設立は2006年10月、世界190カ国で6,800万人以上がWixを使っています。2013年11月上旬には米ナスダック市場に上場しています。

詳しくは下記リンク先を参照してください。

Wixの使用に向いている方

Wixはどなたでも簡単にすぐにWebサイトが作れるようになっています。主に以下の条件に合う方に向いているでしょう。

  • 個人・法人問わず、デザイン性の高いWebサイトを無料または低コストで持ちたい
  • Webサイトをすぐに作成・公開したい
  • プログラミング知識がなくても自身のWebサイトを作りたい

Wixで無料でホームページを作ってみよう

それでは実際に、架空のサイトを制作してみたいと思います。最終的な出来上がりは以下のようになります。ほとんどテンプレートのままですけどね

Wix Desktop

Wix に登録しよう

サイトを作成するには、Wixへの登録が必要です。下記リンク先から新規登録をしましょう。

新規登録の必要事項は2つです。

  • メールアドレス
  • パスワード

または、Facebook・Googleのソーシャルアカウントでログインする事もできます。

wix sign up

テンプレートを選ぼう

登録が済んだらカテゴリーを選ぶ画面へ遷移します。今回は「ビジネス」→「コンサルティング」を選んで「次へ」進みますね。
ここで選択した項目は後で「マイサイト」→「サイトを管理」→「サイト設定」→「ビジネス情報」から変更できます。

Wix Select category

カテゴリーを選択して次へ進むとテンプレートの選択画面へ遷移します。テンプレートは500種類以上あり、クオリティの高いデザインのテンプレートが多く揃ってるところがWixの魅力の一つだと思います。

テンプレートはそれぞれデザインが適したタイプに分類されていて、最初の遷移された画面では先ほど選択したカテゴリー向いたテンプレートを表示してくれます。作ろうとしているサイトがビジネスサイトなのか、ギャラリーサイトなのかによって適したテンプレートを選べば失敗は少ないでしょう。

今回はカテゴリー「健康&フィットネス向けテンプレート」内から「クリニック」を選び編集へ進みます。

エディタの使い方を基本を学ぼう

テンプレートを選んだらいよいよ編集画面です。まずは基本的な使い方紹介します。

エディタ画面のメニュー構成

編集するサイトのトップとサイドそれぞれ編集用のメニューが表示されます。

Wix edit tool

(1) トップバー :
編集画面に関わる設定を行えます。
(2) 左に並ぶボタン :
サイト全体に関わる編集や設定の変更を行えます。
(3) 右のツールバー :
セクションや追加したブロックのレイアウトに関わる設定を行えます。

サイトの組み立て方

サイトはそれぞれのセクションにブロックを配置し、ブロック個別に設定を追加していくことで作成していきます。

サイトには以下の3つのセクションがあります。

  • ヘッダー
  • ページ
  • フッター

このセクションの中にテキストや画像のブロックを配置します。ブロックは左側の「+」アイコンの追加からドラッグ&ドロップで配置できます。

wix How to edit

基本的にはテンプレートを使用するのでブロックは綺麗なレイアウトで配置されています。サイト作成はそれを編集する作業になると思います。配置されたブロックの削除や高さ、幅などレイアウトに関する編集は直感的に操作して変更できますし、デフォルトで右側にあるツールバーからも編集できます。

それぞれのテキストや画像、メニューブロックの個別の設定はブロックにフォーカスを当てると編集項目が出てきます。

編集画面はシンプルで編集したい箇所に必要な情報のみが表示されるので編集に集中でき、わかりやすく使いやすいエディタですね。

デスクトップエディタとモバイルエディタを切り替える

サイトはスマホサイトも同時進行で作ることができます。スマホサイト用の編集をするにはモバイルエディタに切り替えます。切り替えは「サイト」メニューまたは、トップバー右側のアイコンからできます。

Wix Change Mobile

テンプレートを編集してサイトを作ろう

サイト作成によく使われそうな編集をテンプレートをもとに説明します。今回は以下の4項目に焦点を当ててみました。

  • 背景
  • テキスト
  • 画像
  • メニュー

背景の編集

ページ全体、セクション、ブロックの背景の設定方法の説明です。

サイト全体の背景

ページ全体の背景はサイトを構成するセクション、ブロックから独立したものになっています。

背景を設定するには左側にあるアイコンの一番上を選択すると編集できます。背景の種類は単色画像動画の3つの中から選択することが出来ます。

背景におしゃれな画像や動画を自分で用意するのは大変だと思いますが、安心して下さい。おしゃれな画像や動画まで無料で使えるWixフリー素材があるのでサイトを華やかに演出できます。後に画像や動画を用意して差し替えるまでのダミーとして設定しておくのにも最適です。

さらに、不透明度やパララックスなどのエフェクトも簡単に「設定」から加える事が出来ます。

トップのホームページ以外にページを持っている場合「その他のページにも適用」からまとめて背景を変えることもできます。

セクションの背景

セクション毎にフォーカスが当たるとデザインの変更のボタンが表示されるのでそれをクリックして背景を変更することができます。ここでは単色の設定しか出来ないようです。

セクションにも動画や画像の背景を使いたい場合は、背景にしたい画像や動画をブロックで追加し最背面に配置し、前面にテキストなどのブロックを追加しレイアウトを整えることで実現できると思います。またスマホでは動画は非表示にしておくなどテクニックが必要だと思います。

ブロックの背景

ブロックに背景を個別に設定するには単色の場合「ボックス」ブロックを追加して最背面に配置します。その前面にテキストや画像を配置することで設定できます。

画像や動画は「セクションの背景」で説明したものと同様です。基本は背景にしたいものを背面に配置しレイアウトを整えれば実現できます。

テキストの編集

テキスト部分にカーソルをあわせると「テキスト」という文字が表示されるので、そこでクリックします。するとテキストブロックが選択されて「テキストを編集」のボタンが出現します。それをクリックするとテキストが編集できます。

テキストの設定ではスタイル・フォント・文字サイズ・エフェクトなど基本的な設定はここで設定できます。

「テキストを編集」の右のボタンをクリックするとアニメーション効果を追加できます。

画像の編集

テキストを編集するときと同じ要領で「画像の変更」ボタンが出現し、そこから画像を選択してサイトに配置することができます。

もっている画像をそのままアップロードしても「画像の編集」メニューからオンライン上で切り抜きや向きの変更、フレームを付けるなども行うことが出来ます。なので簡単な画像の編集ならWixのエディタ上でまかなえます。

メニューの編集

メニューの編集もテキストや画像と同じように編集項目が出現します。「メニューの管理」と「ページを追加」のボタンがありますが、今のところ表示される項目に特に違いがないように感じますね。

「メニューの管理」からはメニューに表示する項目が追加や削除、並び替えができます。

「メニュー」と「ページ」は連動しているようで、「ページを追加」すると自動的にメニューに表示され画面も追加したページの編集画面に変わります。

デザインの変更は「デザインの変更」ボタンをクリックして編集画面が出ます。メニューのデザインも基本的なものをいくつかWixが用意しているものがあるのでそれを使うと簡単にメニューのデザインを変えられます。また独自にカスタマイズすることもできます。慣れてきたらカスタマイズしたメニューを作ってみるといいでしょう。

デザインにあまり自信のない方はなるべくテンプレートのレイアウトを活かして、そこにコンテンツを当てはめていくようにすると綺麗なサイトができると思います。

プレビューを確認しよう

サイトの編集ができたら実際どのように表示されるかプレビューしてみましょう。

トップバーの右側に「プレビュー」のメニューがありますので、それをクリックしてください。プレビューでは無料プランで入る広告も表示されます。デスクトップとスマホサイトの両方のプレビューを確認し、気になる点があれば微調整し保存しましょう。

一つの編集が終わったら保存して編集履歴を残そう

編集は複数を同時進行で行わず、一つの作業に集中して行いできたら保存し、次に移るように癖をつけておくとよいでしょう。保存すると編集履歴が残るので、いつでも簡単に、以前に作成したサイトのバージョンを表示したり、復元したりすることができます。

保存を一つの作業の単位にしておくとサイト管理がしやすくなります。

サイトを公開しよう

サイトが作成できたら公開しましょう。右上の公開メニューから公開できます。公開する前に間違いがないかや任意のURLが設定できている確認してから行うとよいでしょう。

サイト作成に困ったら

エディター画面でそれぞれの編集項目に簡潔な説明や、「ヘルプ」が付いているので、初めて触る初心者でもヘルプに従い編集していくことができると思います。もし何かつまずいたことがあったらヘルプセンターを活用してみてください。

動画ガイドもあります。ただ情報が少し古いのと日本版の情報は少ないです。動画は現在のWixとは少し異なりますが、英語がわからなくても動画で操作を確認できるので参考にしてみてもいいと思います。

Wix公式ブログもサイト制作やマーケティング、スモールビジネスなどためになる情報が公開されているのでそちらもチェックしてみてください。サイト運営のヒントが得られるかもしれません。

Wixのおしいポイント、おすすめポイント

Wixでは、テンプレートの他にも画像や動画などのクオリティの高い素材が用意されていてそれらも無料で使うことができ驚きました。また、サイトには「お問い合わせ」「ブログ」「メールマガジン」「ネットショップ」などの機能を追加し拡張することもできます。サイト運営に必要なことは一通り揃っているので個人や小規模なサイトを持つにはWixだけでも十分だと思います。

おしいポイント

  • URLが綺麗じゃない
  • エクスポートできない
  • ソースが綺麗じゃない

URLやソースはサイト訪問者にとってはそれほど重要ではないかもしれないので、気持ちの問題かと思います。エクスポート出来ないのは他のサービスに移行したい時に苦労しますし、バックアップをとっておけないので惜しいですね。

おすすめポイント

  • Wixフリー素材
  • クオリティの高いデザイン
  • ヘルプが多く初心者に優しい
  • UIが綺麗でわかりやすく簡単
  • スマホ対応
  • ブログ機能
  • メールマガジン機能
  • ネットショップ機能
  • その他アプリを追加して拡張可能

Wixはどんなサイト作成に活用できるか

Wixではあらゆるサイトが作成できますが、現在のところエクスポートする機能がないので、ブログなどは外部サイトで運営するのが良さそうです。なので、以下のようなサイト作成に活用するのがおすすめです。

  • 会社情報サイト
  • 個人サイト
  • ランディングページ
  • ポートフォリオサイト

その他にもWixのテンプレートのカテゴリー分類で示されているタイプのサイト運営にてきしていると思います。なのでWixのテンプレートのカテゴリーも参考にしてみてください。

本格的にビジネスで使うには

個人や小規模サイトを運営するには無料プランでも十分だと思います。ですが、本格的にビジネスで使うにはURLは独自ドメインにしたり、広告を非表示にしたりしたくなると思います。

ビジネスに使うにはプレミアムプラン「コンボ」¥900/月をおすすめします。「ドメイン接続」¥450/月のプランもありますが、このプランでは広告は非表示にならないので注意してください。

まとめ

  • Wixは、プログラミング知識がなくても誰でもサイトが作れる
  • 操作は、わかりやすく初心者でも使える
  • デザインが綺麗
  • アプリを追加して拡張できる
  • Wixを活用できるサイトタイプはテンプレートのカテゴリーを参考にするといい
  • ビジネス利用は最低でもプレミアムプラン「コンボ」がおすすめ

最後に

Wixに今後、インポートやエクスポートの機能が追加されれば、他のサイトからの移行もしやすくなり、バックアップもとれるのでいいなと思います。

ページのURLに関して「#」記号などが入り、人によってはシンプルな形にしたいと思いますが、これはAjaxという技術を使っているので現在のところ変更はできないようです。Ajaxを使うことによって、ヘッダーやフッター部分をは変更しずコンテンツ部分のみを読み込むことができるので表示速度は早くなるかもしれません。なので、メッリトもデメッリトもある感じですね。

Wixをふれてみて、クラウドベースのホームページ作成ソフトの機能の充実度は、驚きました。今後のサイト作成ソフトはどのような進化をするの気になります。

無料でサイト作成から運営までカバーできるWixを、これからサイトを作りたい人は一度試してみるのはいかがでしょうか?