IT

Wixでフォーラム(掲示板)サイトの作り方を解説

誰でも簡単に無料でホームページが作れるというWix

実際にどれほど簡単に作成できるのか?
今回は、このツールの紹介とともに、実際にこのツールを使って、フォーラム(掲示板)サイトを作ってみたいと思います。
機能がたくさんあるので、すべては書ききれませんが、どのような操作感で、どういったレベルのものが仕上がるのかを掴んでもらえたらと思っています。

ホームページ作成ツールもたくさんあるので、どれにしようか迷ってるという方は、ぜひ参考にしてみてくださいね。

Wix(ウィックス)とは?

Wixは、世界で1億人以上が利用するイスラエル製ホームページ作成ツールです。

クラウド型CMSサービスとして提供されていて、サーバーを自前で用意する必要はありません。

ブラウザ上の操作だけで、無料でホームページを作成することができます。(一部機能は有料)

特徴

  • 直感的な操作で簡単にホームページ作成が可能(ドラッグ&ドロップでテキストや画像の配置ができる)
  • デザイン性の高さが評判
  • アプリによる機能拡張が可能
  • 利用できるテンプレートが豊富(約500種類)
  • 日本語対応
  • スマホ表示に対応

料金プラン

無料版は、作成したホームページに、Wixの広告が表示され、独自ドメインも利用できないので、ビジネス利用を考えるなら、有料プラン(コンボ以上)のいづれかを選択することになると思います。

ビジネス用で、とりあえず、簡単なホームページを開設したいというなら、コンボプランでいいと思います。(ドメイン接続プランだと、Wixの広告は消えませんので)

ネットショップを開設したいなら、eコマース以上を選択する必要があるのでご注意を。

Wixのホームページに掲載されている料金プランを添付しておきます。

今回作るフォーラムサイト

では、フォーラムサイトを作っていきたいと思いますが、その前に、このサイトを作ることになった経緯と、どういったサイトを作るのかを具体化しておこうと思います。

フォーラムサイトを作ることになった経緯

今回作成するフォーラムサイトは、Sousourire(ススリレ)代表の奥村さん中心に、コミュニティメンバーが互いに情報交換、相談・アドバイスし合えるフォーラムサイトです。

奥村さんは、低出生体重児向けの肌着や医療的ケアグッズを製作されていますが、彼女自身も低体重で出産したという経験から、小さいサイズの肌着の必要性を感じ、かわいらしい機能性に富んだ肌着やグッズを製作されています。

これまでは、個人で製作し、病院に寄贈したり、一部販売もされていましたが、利用者からはとても喜ばれていて、今後は、これらグッズをより多くの人の元に届けたいということで、僕もサポートさせていただくことになりました。

低体重で出産したお母さん達は、やはり不安を抱えておられている方も多く、奥村さんもよく話を聞いてあげていたそうです。

「寄り添い、励まし合える、心の拠り所となるようなコミュニティの場を提供したい」との思いから、フォーラムサイトの起ち上げを行うことになりました。

今回は、Wixの検証が目的ですが、最終的には、正式にSousourire(ススリレ)のコミュニティの場を提供するサイトを作る予定です。

このサイトは、もちろん販売戦略の一つという側面もあります。
悩みの解決であったり、不安の解消ができれば、信頼関係の構築に繋がります。
信頼関係が深まれば、Sousourire(ススリレ)のお客様になっていただけることも期待できますし、このサイトを友人、知人に紹介してもらえる可能性も高まり、Sousourire(ススリレ)を知ってもらう機会が増えるということですね。

このフォーラムサイトに活気が出てくればそれだけ、コミュニティメンバーにとって有益なものとなるはずなので、今後、アクセスアップのための施策も実施していきます。
当ブログでは、施策とその効果についても検証し、随時、状況をシェアしていきたいと思っています。

フォーラムサイトの要件

  • フォーラムのテーマは以下の3つとします
  • 【テーマ】
    情報交換
    相談、アドバイス
    ススリレフォトライブラリー

    ⇒将来的には追加変更できるようにしたい
    ⇒テーマの追加変更は、管理者のみができるようにしたい

  • 各テーマごとにユーザーは、トピックを投稿できて、トピックに対してコメントを付けることができる
  • ⇒トピック、コメントの投稿は、会員ユーザーのみ可能とする
    ⇒トピック、コメントの閲覧は、誰でも可能とする(会員登録の必要なし)

  • 会員登録は、メールおよびSNSで登録可能とする
  • 気になる投稿にコメントがあればメールでお知らせする
  • ⇒送信されたリンクをクリックすると閲覧可能
    ⇒メールでお知らせするかどうかは、ユーザーが選択可能

フォーラムサイトの作成

ユーザー登録

Wixのページにアクセスし、「今すぐはじめる」をクリック。

SNSで登録かメールアドレスで登録するか、お好みで登録してください。
今回は、Googleで登録しました。
SNSなら、これでユーザー登録は完了です。
メールアドレスで登録の場合には、Wixからメールが届くので、送られてきたメールの「メールアドレスを確認」ボタンを押すと認証完了となります。

ホームページ作成

ユーザー登録が完了すると、すぐに以下の質問ページが表示されますので、この質問に答えます。
AIで作成するのか、エディタを使って作成するのかどちらをお勧めかを判定するためのものと思われますが、あまり深く考えずに答えればよいと思います。

今回は、Wixエディタでホームページを作成を選択。

ちなみに、AIが自動作成してくれるなんて、面白そうと思ったので、「Wix ADIで自動作成」の方ほうも少し試してみましたが、

どんなページにしたいか
追加したい機能
スタイル
などを選択するだけで、自動的にホームページを生成してくれます。

自動生成された後は、デザインの変更やフォントの変更など自動で行ってくれたり、やりたいことをアシストしてくれたりしますが、基本は自分で変更をする必要があります。

Wixエディタにくらべて機能が制限されている分、とっつきやすいとは思いますが、いづれやりたいことができないという壁にぶつかると思います。

Wix ADIからWixエディタに切り替えることもできるので、最初はWix ADIで作成し、慣れてきたらWixエディタに切り替えてもよいかもしれません。
ただし、一度Wixエディタに切り替えるとWix ADIには戻れないので、ご注意を。

次にテンプレートを選択します。
沢山のテンプレートがありますが、カテゴリ分けされて整理されているので、分かりやすいと思います。
好みのテンプレートを選択し、「編集」ボタンを押すと、Wixエディタが表示されます。

今回は、「育児グループ」というテンプレートがイメージと合っていたので、これを選択しました。

Wixエディタで編集

Wixエディタの構成

まずは、Wixエディタの構成を見てみましょう。

①はサイトにあるページが一覧表示されています。
ここで選択したページが②に表示されます。

②内の画像やテキストをクリックすると、下記のようなボタンがホワっとでてきますが、このボタンから各種設定を行っていきます。

Wixエディタの④は、配置した画像やテキストの大きさ変更や位置調整、コピー、削除などの操作を行うためのボタンが並んでいます。
②の画像やテキストを選択し、④のボタンで操作するイメージです。

②には、
メニュー、ページに関する設定
ぺージ背景画像の設定
ページの追加やテキスト、画像、ボタン、動画、音声の追加
アプリの追加
を行うためのボタンがづらりと並んでいます。

このボタンは、アプリを追加することによって、そのアプリで必要な設定を行うためのボタンが追加されるようです。

ヘッダー画像、テキストを変更

デフォルトでは、ヘッダ部分が「Moms & Babies」となっていますので、この画像をススリレのロゴに変更します。

「Moms & Babies」の画像を選択し、ホワっと出てきた「画像を変更」ボタンを押すと下の「画像を選択」画面がでてきます。
ここに、挿入したい画像をドラッグ&ドロップで持っていくと、画像がアップロードされます。
アップロードしたススリレのロゴファイルを選択し、右下の「画像を選択」ボタンを押すと、画像を設定することができます。

次に、「育児・ファミリーセンター」というテキストも同じ要領で「コミュニティフォーラム」に変更し文字の大きさ、フォントを調整します。

このような感じで、ヘッダ部分の変更ができました。

フォーラム機能の追加

次にフォーラム機能を追加しましょう。
②のアプリから「Wix フォーラム」を探して、「追加する」ボタンを押すと、アプリケーションが追加されます。

アプリの追加が完了すると、①のサイト構成にフォーラム関連のページがいくつか追加されているのが確認できます。
「フォーラム」を選択すると、②がフォーラムのページに切り替わると思います。


フォーラムには、下記3つのテーマをカテゴリとして作成します。
情報交換
相談、アドバイス
ススリレフォトライブラリー

②のメインフォーラムをクリックするとでてくる「設定」ボタンを押すと「フォーラム」の設定画面がでてくるので、「カテゴリーを追加」ボタンを押して、ここから上記3つのカテゴリーを追加します。

追加したカテゴリーにカーソルを当てると「・・・」ボタンがでてくるので、クリックして「編集」を選択すると、カテゴリヘッダー画像や、説明等の設定ができると思いますので、必要な設定を行います。

あとは、メインページの表示設定、記事のレイアウトを調整します。

すでに、フォーラム機能は有効になっているので、Wixエディタの右上にある「プレビュー」ボタンを押し、実際のサイトのイメージを確認してみましょう。
投稿、コメントもできるようになっているので、いくつか投稿してみると、以下のような感じになりました。

フォーラムに関する設定は以上です。
以上で、先にあげた要件はすべて満たすことができています。

めちゃくちゃ簡単ですねw
しかも、評判どおりデザインがすばらしい!

権限に関しては、今回はデフォルトのままで要件を満たせましたが、
より詳細に、例えば、「ススリレフォトライブラリ」は一般公開せず、会員ユーザーのみ閲覧可能にするといったことも可能です。
その他にも新しく「有料会員」というグループを作って、有料会員のみアクセス可能なページを作ることもできます。

メールでお知らせ機能

自分が投稿したトピックやコメントに対して、別のユーザーがいいね(♡をクリック)すると、以下のようなメールが送信されます。

また、記事をフォローすることで、そのトピックにコメントがつけば、その都度メールでお知らせしてくれます。

これらお知らせ機能を有効にするか無効にするかは、各ユーザーが自分で設定できるようにもなっています。

メニューの変更

先ほど作成したフォーラムがメニューに表示されるように設定しましょう。
これもとても簡単です。
②のメニュー&ページからサイトメニューを開くと、「フォーラム」が追加されているので、ドラッグ&ドロップで前に持っていけば完成です。

スマホ対応

スマホで表示したときにヘッダ部分がちょっとみだれていたので、スマホ用にヘッダ部分を調整します。

Wixエディタの上部にツールバーがありますが、ここでPC画面かスマホ画面かを切り替えることができます。

スマホ画面に切り替えてみると、

このように、ヘッダ部分がごちゃごちゃしています。
スマホ用にはPC画面のヘッダで使用しているイメージ画像を非表示にしてヘッダ全体をスッキリさせたいと思います。

操作は簡単で、非表示にしたい画像を選択して出てくるボタンのうち、目のようなマークをクリックすると非表示になります。
スマホで非表示になるだけで、PC画面ではこれまで通り表示されますのでご安心を。

この要領で、どんどん不要な画像を非表示にし、必要な画像、テキストの大きさ、位置を調整するとこんな感じに大分スッキリしました!

サイトの保存

サイトの保存は、右上のバーに保存ボタンを押すことで保存できますが、定期的に自動保存されます。
「保存済み」と表示されていれば、最新が保存されています。

作業終了し、後日続きの作業を行うには、
Wixのページにアクセスし、ログインすると以下のような管理画面がでてくるので、左下の「サイトを編集」ボタンを押すと、Wixエディタの画面が出てきます。

サイトの公開

サイトの公開は、Wixエディタの右上にある「公開」ボタンを押すと、サイトの公開ができます。
「公開」ボタンを押すとでてくる下記の画面のURLが今回作成したサイトのURLです。

感想&まとめ

HTMLやcss,Javascriptを一切使用することなく、ここまでのことができるのは驚きです。

特に、Webサイトで、テキストや画像をドラッグ&ドロップで好きな位置に配置できるなんて、嬉しすぎます^^

今回作ったフォーラム機能ですが、実はWordpressでもBBPressというプラグインを利用すれば、機能的には同等のことが実現できます。
しかし、WordpressのテーマとBBPressが合っていないところがあるので、cssを使って調整が必要だったりします。

cssを使って画面調整するのとかって、結構手間かかりますからね。

機能が豊富なので、やりたいことを実現するにはどこを触ればいいんだ?と思うこともあるかもしれませんが、この辺りは使ってみて慣れるしかないですね。

ホームページを自分で作れれば、その後の変更も自分でできるわけですし、勉強してみる価値あるんじゃないでしょうか?

もうホームページを作るだけの会社はいらなくなりますね。

価格についてですが、Wordpressなら使用料は無料ですが、レンタルサーバー代は必要になります。
レンタルサーバーの価格は性能にもよりますが、だいたい月々1,000円前後くらいと考えるとWixのコンボプランまたは無制限プランと同等と考えることもできますね。

あと、Wixエディタでできないようなカスタマイズをする方法として、Wix codeが提供されています。
これはプログラミングでカスタマイズすることが可能ということで、可能性が一気に広がります。
もちろん、プログラミング知識が必要なので、簡単には利用できないと思いますが、カスタマイズ可能ということを知っておけば、やりたいことを諦める必要はなく、ピンポイントでプログラミングを業者に依頼するということも可能なわけです。

最後に、Wixのメリット、デメリットをまとめておきます。

Wixメリット

メリットは、これまで述べてきた通りなので、さらりと。

専門知識がなくても作成可能

プログラミング一切なしで、このレベルの仕上がりは素晴らしい!
特に、ドラッグ&ドロップで直感的に配置変更、サイズ変更できるのは嬉しすぎる!!

デザイン性に優れている

今回はあまり紹介できませんでしたが、利用できる素材(画像、ボタン、ボックスなど)がかなりあり、どれもかっこいいです。
アニメーションや画像のスライドショー、パララックススクロールも簡単に設置できるようで、作ってて楽しくなりそうです。

豊富なテンプレートを利用できる

WordPressは、一応テーマを後から変更することもできますが、Wixは、テンプレートは最初に選んだら、後からは変更できないのでご注意を。

いろいろな機能を組み込むことができる

今回追加したWixフォーラムもかなり高機能ですが、他にも気になる機能がいくつかあります。
オンライン予約機能
イベント管理機能
ネットショップ機能
オンライン決済機能
チャット機能
などなど

Wixデメリット

サイトの表示速度が遅い

特にスマホでの表示速度が遅いという印象です。
フォーラムであれば、投稿が増えてきたときに耐えうる程度のスピードかどうか非常に気になるところです。
しかも、レンタルサーバーであれば、高スペックなプランに変更したり、サーバー移設など手は打てますが、Wixだと手の打ちようがありません。
これは結構、致命的になる可能性がありますね。

Wixの方でも認識はしているようで、対策は施しているようですが、体感速度的にはやはり遅いと感じました。
画像や動画を大量に扱うサイトの場合は、慎重に考えた方がよさそうです。

Wixのサービスに依存

これはクラウド型のサービス全般にいえることですが、Wixがサービス打ち切りとなった場合、頑張って作成したサイトは使用不可能になってしまうリスクがあるということです。
Wordpressならそんな心配はありません。
サイトを構成しているプログラム、データはすべて契約しているレンタルサーバー内にあるわけですから、仮にWordpressのバージョンアップが打ち切りになったとしても、既存のバージョンで永遠に使用することは可能です。

サイトで使用しているコンテンツ(文章や画像など)を自身のPCにバックアップをとっておくくらいのことはしておいたほうがよさそうですね。
Wix codeを使用すれば、定期的にバックアップを自動でとっておくくらいのことはできるかもしれません。

しかし、データをバックアップとっておけば、他の環境で元通りになるかというとそう簡単な話でもありません。
Wixのプラットフォームがない環境で、サイトを一から作りなおす必要があるわけですが、その際にバックアップしておいた、コンテンツを部分的に利用できるという程度です。

SEOが弱い?

WixにもSEO用の設定項目はありますし、SEOをアシストしてくれる機能もあります。

ネットの評判を見るとWixはSEOに弱いという記事を見かけますが、定かではありません。

Googleで検索したときにはWixで作られたサイトが上位に表示されているのはあまり見かけないというのも実際のところですが、だからWixはSEOに弱いというのはほんとにそうか?と思うわけです。

Googleからすると何のツールで作られたかなんてのは、どうだってよくて、内部SEOができていればツールとしては問題ないはずです。
専門的になりますが、WixはAjaxという技術を多用しているようなので、このあたりSEO的にどうなのかなと思いましたが、Wixは問題ないと言っています。

https://ja.wix.com/blog/2015/12/wixのseoにまつわる9つの誤解/

Googleが目指しているのは、検索するユーザーを満足させること。
それは、検索するユーザーの悩みを解決することなのです。

ホームページより情報量や更新頻度が多いブログは、ユーザーの悩みを解決するのに適していて、SEO的に有利と言えます。
ブログだと、やはりWordpressの方が使い勝手もよく利用ユーザーも多いので、検索結果にはWordpressで作成されたサイトが多いというだけのことではないかと。

SEOについては、また別記事に書きたいと思いますので、WixがSEO的にデメリットなのかどうかは?(はてな)としておきます。

以上、Wixについて具体的にサイトを制作しポイントとなるところを解説してきましたが、どうだったでしょうか?
なんだか自分にでもできそう!と思ってもらえたら幸いです^^

今回作成したサイトは、こちらに公開しておきます。
フォーラム検証用サイト

実際、動きを確かめてみるのが早いと思いますので、自由に投稿してもらって構いません。

検証用のため、今後変更する可能性はありますが、このあたりはご了承ください。