WixCodeでさらに進化！無料ホームページ制作ツール『Wix』を使った格安ホームページ制作の裏側を公開！
2017年7月26日、無料ホームページ制作ツール『Wix.com（ウィックス）』から、『WIXCode（ウィックスコード）』のベータβ版が発表されました。WixデザイナーのTLWorksとしては、かなり興奮しながら使い倒し、当サイトのホームページ制作事例ページをさっそく動的ページにアップデートした次第です。
さて、日々進化を続けている無料ホームページ制作ツール『Wix』ですが、よくクライアントの皆様からこんな質問をいただきます。
『なぜそんなに安いのですか！？』 『ホームページ制作の相場って30万くらいと聞いてたけど、本当に10万で良いの！？』 『えぇ！逆に安すぎて大丈夫！？』 『えぇ！もう出来たの？なぜそんなに早くホームページが完成するの！？』
実はWixを使ったホームページ制作には、従来では考えられなかった”格安な制作費”と”圧倒的な制作スピード”が実現できる秘密があります。
ホームページをWixで自分で作ってみよう、ホームページ制作を依頼しようか迷っている、ホームページをなるべく安い維持費で格安で依頼したいとお考えの方など、とにかくホームページ制作はWixがオススメです。
なぜそこまでオススメするのか、Wixとはどうゆうサービスなのか、なぜ格安ホームページ制作が可能なのかなど、実際にWixを使ってホームページ制作のお仕事をさせていただいている現役のWixデザイナーのTLWorksが詳しくご説明いたします。
【無料ホームページ制作ツール『Wix.com（ウィックス）』とは】
Wix.com（ウィックス)とは、世界で1億人以上が利用するドラッグ＆ドロップのホームページ作成ツールです。 Webの専門知識が一切無くてもハイクオリティなホームぺージを制作出来ます。逆にWebの専門知識がある方が使うと鬼に金棒といったところです。基本は無料で使用できますが、無料プランではホームページのドメインが（wixsite.com）となり、Wixの広告も表示されますので、ビジネスで使用される際は公開時に有料プランに移行される事をお勧めします。
【とにかく簡単！素人でも簡単にホームページを制作出来る『Wix』】 無料でアカウントを作成後、インストール不要のWixエディタをWebブラウザで立ち上げ、パワーポイントを扱うかのように、テキストや画像をパーツ単位でページに挿入していく事でオリジナルのホームページが制作可能です。htmlやCSSの言語知識も必要なく、コーディングの知識も必要ありません。
お問い合わせフォーム、予約機能、決済機能などのシステム的な要素を実装したい場合は、Wixアプリを活用します。Wixアプリとは、Wixサイトに追加可能な無料や有料アプリです。
「WixってSEO対策は大丈夫？」と質問される事もありますが、有料（プレミアム）プランに移行し独自ドメインに接続すれば、SEO対策でデメリットになるような事は特にありません。基本的なSEO対策（メタ情報、h1,h2などの見出しタグ、画像alt、設定キーワードを意識したライティング）を行い、公開後にブログ機能でコンテンツSEOを強化していく事で、検索順位上位を目指せます。
従来に比べ圧倒的なスピード感で情報発信が可能で、さらに自社で運用できるので更新費などの余計な費用を払う必要がないという事！これは個人であっても企業であっても非常に大きなメリットです。
【Wixサイトに向いている業種は？Wixを使ったホームページ制作で出来る事、出来ない事】
先にお伝えしておきますが、複雑なシステムが組み合わさった大規模サイト、例えば...サイト会員のログイン情報の維持が必要で、複雑なデータベース連携があり、ユーザー同士のマッチング機能やチャット機能、ユーザーが使える独自UIの管理システムやアバターシステム、運営側の管理画面...こういった大規模サイトはWixでは作れません！逆に作れたら恐いです（笑）
ズバリ！「スタートアップや新規に立ち上げる中小企業のホームページや、店舗・教室等の個人事業主向けのホームページ」にWixは一番向いています！
では、Wixで出来る事を列記します（一部） ・画像/テキスト等の基本パーツを使った自由デザインのページ作成 ・CMSブログ機能（Wixブログ） ・予約・決済機能（Wixブッキング） ・ネットショップ機能（Wixストア） ・オンライン注文機能（Wixレストラン） ・音楽配信機能（Wixミュージック） ・動画（無料・有料）配信機能（Wixビデオ） ・お問い合わせフォーム ・Facebook、Instagram等の主要SNS連携 ・コメント、レビュー表示機能 ・ライブチャット機能 ・Googleマップ表示 ・Googleカレンダー同期表示 ・Googleスプレッドシート同期表示 ・Google AdSense広告の設置 ・Googleアナリティクス接続 + ・今回実装された★WixCode★の機能※詳細は後ほど
このように中小企業や個人事業主のホームページでは、大抵の目的は達成出来ます。
【Wixでのホームぺージ制作の流れ（TLWorksの場合）】
格安ホームページ制作の裏側公開！という事で、TLWorksが実際にWixを使ってホームページ制作をする際の一連の流れをご紹介します。
①サイト企画、素材確保 まずは企画です。この企画の段階でホームページのクオリティーが90％決まると言っても過言ではありません。 サイトの雰囲気やコンセプトカラーコード（2～3色）、サイトツリーとページ構成、ターゲットキーワード10個、クライアントがイメージする参考サイトがあればそのサイトもふまえて企画します。
同時にクライアントから会社概要（店舗基本情報）や、サービス内容などのテキスト素材を頂きます。テキスト素材が無ければ、打ち合わせ時にインタビュー形式で質問しテキストデータに落としていきます。写真素材も無ければその場でデジカメで撮影、遠方の場合は先方に撮影を依頼します。
企画が精査されたら実際にWixエディタ上でイメージを形にしていく作業に入ります。
②TOPページ（デスクトップ版）デザイン TOPページをデザインしながらサイトデザインの基本方針を決めていきます。サイズに統一感がある方が綺麗なサイトになるので、各ストリップサイズ、画像サイズ、h1/h2/h3/pのそれぞれのフォント種類とフォントサイズ、各パーツの間のスペースサイズ、このあたりの基本方針を慎重に決めていきます。 デザイン的にはここが一番深く時間をかけて考える段階で、様々なパターンを試し、試行錯誤をしながらイメージに一番近いものに決定していきます。
③下位ページ（デスクトップ版）デザイン TOPページが完成したら、下位ページは②の段階で決定した基本方針に従い、①で用意したテキストと画像データを流し込んでいく作業になります。各ページで伝えたい内容を意識しながらデザインしていきますが、基本方針が決まっていれば割とスムーズに作業は進みます。 この流れで全ページの作業が完了したら次はモバイル版のデザインに移ります。
④モバイル最適化（全ページモバイル版デザイン） Wixのモバイルエディタでは、それぞれのパーツをモバイル版に適したレイアウトやサイズに変更し最適化をしていきます。別途モバイル版のページを0から作る訳ではありません。あくまでデスクトップ版デザインで使用したパーツのサイズを変更し、最適化していく作業です。
この作業もTOPページで基本方針が決まれば、あとは全ページ流れ作業で進みます。
⑤アニメーションやSEO設定等詳細設定 デザイン作業を全て完了したら、最後の仕上げとして一部のパーツにアニメーション設定を行い動きをつけ、各ページSEO関連の設定を行っていきます。
①で決めたターゲットキーワードに基づきタイトル/ディスクリプションをライティングし、全ての画像パーツにaltテキスト（Google代替テキスト）を入れていきます。
管理画面でSNSシェア用画像などを設定すればホームページの完成です！
完成したらクライアントのWixアカウントへ”サイト移行”で納品、プレミアムアップグレードとドメイン接続のサポートをし、ホームページが公開されます。
公開と同時にGoogleアナリティクスの設定を行い、Googleにインデックス登録の申請をして完了です。ブログ機能を実装したホームページの場合、以前の記事で紹介したWixブログ更新マニュアルに従ってブログ更新方法を実際にレクチャーを行います。
【Wix Code登場で更なる進化！まだまだ広がるWixの可能性！】
Wixは世界的にユーザー数がまだまだ増え続けているサービスで、日々アップデートされ進化し続けています。より簡単に、より便利になっていくWixですが、念願の2017年7月26日『WixCode（ウィックスコード）』のベータβ版が発表されました！
以前まではクライアントから「Wixで会員データベースから各会員ページを作ったり出来ますか？」「Wixで100以上ある商品を動的ページで表示できますか？」「各サービスをタブ形式のアコーディオンで表示して欲しいのですが可能ですか？」などという要望を頂いた際は、残念ながらWixの現在の仕様では実装不可です。とお答えしていたのですが、
なんと！『WixCode（ウィックスコード）』により実現可能になったのです！！！
これは本当に凄いアップデートです。
WixCodeで出来る事を整理すると ・データベース連携の動的ページの自動生成 ・データベース連携のユーザー入力フォームの設置 ・JavaScriptでオンマウス、クリック時の動きを自由に指定できるページ演出 ・JavaScriptとWix Code APIで外部サービスとの連携など
早速TLWorksのホームページでも、ホームページ制作事例をデータベース化し、動的ページで自動生成されるようにしました。是非参考にしてみてください。今後はデータベース連携のホームページ制作も承ります。
TLWorks制作事例ページはこちら
Wix Code 公式βサイト
【圧倒的スピード！ハイクオリティな格安ホームページ制作が実現した理由】 ホームページ制作の相場は、昔に比べると安くなった方ですが20万円～30万円が相場です。
初期費用が無料！といったうたい文句の場合、だいたい月額5000円～30000円の高額な月額費+3年契約などで、結局総額でいうと30万円オーバーになります。
ホームページ制作の料金は基本的に「工数分の人件費」+「利益（法人の場合は会社の利益や税金など）」で算出されます。専門知識を持ったウェブデザイナーの人件費が高いから相場が高いというシンプルな話です。
TLWorksのホームページ制作は初期費用（制作代行費用）で10万円からご依頼可能です。
ホームページの新規制作やリニューアルのご相談など、お気軽にお問い合わせください。
TLWorksのホームページ制作詳細についてはこちら
