ホームページ制作ツール 2015.12.17（公開）

【簡単ホームページ作成】Wixについて調べてみました

無料でホームページが制作できる『Wix』について調べてみたので、分かったことやメリット・デメリットなどをメモしておきます。

Wixとは？

Wixとは、従来のHTMLやFTPといったホームページ制作のための専用の知識を持っていなくても、誰でも簡単にホームページを制作できる『CMS』というツールです。

ほかのCMSでは共通パーツやスタイルを編集するにはある程度の知識が必要ですが、Wixは初心者でもそういったレイアウト部分を編集できるのが特徴です。

豊富なテンプレートやアプリが特徴で、多言語に対応しており、日本語でのサポートも充実しています。

Wixサポートセンター

導入方法

Wixの新規登録からホームページの公開までの流れを説明します。

新規登録

まず新規登録についてですが、メールアドレスとパスワードだけで新規登録ができます。FacebookやGoogleのアカウントでも登録できるようです。

またこの際に入力したメールアドレスが自動的にユーザー名となりますが、このユーザー名がホームページのドメイン名となります。（ユーザー名は後で変更可能）

ドメインを独自のものに変更したい場合は有料プランを申し込む必要があります。

テンプレートを選択

続いてテンプレートの選択を勧められるのですが、ここではホームページの形態に合ったテンプレートを選びます。

テンプレートを使用すれば、最悪、テキストや画像を変更するだけでもオリジナルのホームページが出来上がってしまいます。

また、下記のような仮の画像やテキストが配置されている白紙テンプレートというものもあります。

『編集』を選ぶと編集画面が立ち上がります。

使いたいテンプレートが決まったら編集画面に移り内容を更新していきます。

編集画面について

編集画面は上記のようにペイントソフトのような作りになっています。

要素はペイントソフトの要領でマウスで動かせます。また、キーボードでも操作可能です。

ちなみに自動で保存してくれる機能はないようなので細かく保存したほうがいいです。保存ボタンは右上にあります。コントロール + sでも保存できます。

メニューがいっぱいあるので簡単に説明します。

①.ページメニュー	現在編集しているサイトの場所が表示されています。別のページの編集をしたいときはここから選択します。ページを増やす場合もここです。
②.サイト	『サイトの設定』、『編集履歴』といった基本的な項目です。
③.ツール	ガイド線の表示・非表示や、パネルの表示・非表示のようにツールの表示設定の項目です。
④.ヘルプ	ヘルプです。
⑤.アップグレード	有料のプランにアップグレードします。
⑥.戻る	編集を一つ前に戻します。
⑦.進む	編集を一つ後に進めます。
⑧.スマホ用エディタに切り替え	スマホで閲覧する場合のモバイルビューでの編集を行います。
⑨.保存	編集を保存します。（公開には反映されません）
⑩.プレビュー	プレビュー画面に切り替えをします。
⑪.公開	編集内容を公開します。保存をしてもここを押さないとWEBには反映されません。
⑫.背景	ページの背景を変更します。ここで変更できる背景は全体の背景のみです。
⑬.追加	ホームページに追加したいパーツはここから選びます。
⑭.アプリ	フォームやカレンダーといったアプリを追加します。
⑮.アップロード	画像・文章・音楽ファイルのアップロードをします。
⑯.ブログ	ブログの管理画面が開きます。まら、ブログを始めたい場合はここをクリックします。ブログページは自動で生成されます。
⑰.編集画面	ここにホームページのパーツを配置していきます。
⑱.ツールバー	エディターです。左上にヘルプボタンがあります。ツールバーは画面内なら移動可能。

公開

編集が終わったらサイトを保存し、公開します。

右上の公開ボタンを押すと、下記のようにメッセージとサイトのURLが表示されます。

料金

Wixは無料でホームページを作れますが、無料のプランだと、

Wixの広告が強制的に表示される。
googleアナリティクスやファビコンなどの機能が制限される。
ドメインがWix指定のものしか使用できない。

など制限があり、特にWixの広告は邪魔です。

有料プランに申し込むとこういった問題は解消されるのですが、料金を安くするには年間プランで申し込まなければいけないので、よく考えて申し込みましょう。

ちなみに支払いはカードのみです。

2015年12月での料金はこちら。

プレミアムプラン

名称	こんな人向け	広告表示	月額料金（年額プラン）	月額料金
eコマース	ショッピングカートの機能が使えるようになるので、ネットショップをやりたい人向け。また、すべての機能が使用できる。	✕	¥1,700	¥2,618
無制限	ひとつ下のプランであるコンボに比べて、ストレージが大幅に増え、また帯域幅が無制限になっているのでサイトを速く表示させたい企業サイト向け。	✕	¥1,300	¥2,398
コンボ	このプランから広告が非表示になる。個人サイトを開設したい人向け。	✕	¥900	¥1,407
ドメイン接続	独自ドメインが使えるようになるというだけで、他は無料プランとあまり変わらないので、とりあえず独自ドメインだけ使いたいという人向け。広告は表示される。	○	¥450	¥450

Wixの機能メモ

使いそうな機能についてメモしておきます。

サイトは無制限に作成可能。
しかし、プレミアムプランに申し込んでいる場合、プレミアム機能を使えるサイトは一つまでのようです。
サイトタイトル・メタデータはメニューのサイト→サイト設定で編集可能。
メタデータはSEOのSEO詳細設定というところにあります。
英語フォントは充実しています。
日本語フォントは5種。メイリオあり。
パーツにコンタクトフォーム有り。
難しい設定は特にありません。
CSSは一切編集できませんが、HTMLは少し編集できます。
追加→その他から選びます。
サイト設定にFacebookの設定あり。
Facebookシェア用の画像や、いいね！数カウント用アカウントの登録をします。
スマホサイトは自動で生成されますが、クオリティが低いのでスマホサイトが不要な場合は、スマホサイトを無効にしておきましょう。
スマホサイトを無効にするには、エディタ切り替え→モバイル最適化を行うをOFFにします。
公開したサイトのソースを見るには、URLの末尾に『?_escaped_fragment_=』を加えて読み込みます。
ページにパスワードを設定したい場合は、下記のようにページメニュー→『…』というボタン→アクセス許可から設定します。

Wixの注意点メモ

Wixは操作が簡単な一方で、ある操作に癖があったり、どうしてもできないことがあります。

widthは980px固定で変えられません。なので幅980pxベースでのデザインをする必要がありそうです。
メニュー内の[追加]→[その他]から選択できるHTMLコードの埋め込みは、追加した要素の内側に8pxのmarginが空きます。
なので例えばwidth100px、height100pxの要素を追加したい場合は、width116px、height116pxで設定します。
この8pxという大きさはブラウザによって異なる可能性があります。
ブラウザ間で見た目を揃えるのは難しいと思われます。
ページのソースコードを見ようとしてもスクリプトのみが記述してあるだけで見る意味がありませんが、URLの末尾に『?_escaped_fragment_=』を加えて読み込んだ場合、ソースコードが閲覧可能になります。
画像をマウス操作で動かしていると、画像の大きさが数ピクセル変わってしまう場合があります。