プログラミング

Wix(ノーコード)で実際にwebサイトを作ってみた

2021年1月19日

・最近ノーコードってよく聞くけど具体的に何のこと?
・Wixの広告をよく見るようになったけど、実際にサイトは作ったことない。
・サイト制作したいけどプログラミングの知識がないから敬遠してた。

今回はこのようなことをお考えの人に向けて解説します。

ノーコードとは?

まずみなさんノーコードを言う言葉を聞いたことがあるでしょうか?ノーコードとはその名の通り専門的なコードの知識不要でwebサービスやアプリ開発、サイト制作などができるツールのことを指します。

今までソフトウェアの開発は専門家に依頼するか、自身で知識を身につけて開発していくことがメインでしたがノーコードツールが出てきたことによりそれらが必要なく、誰でもサービスを作れるようになります。

※もちろんより機能性を持たせるためにカスタマイズするにはそれ用の知識が必要にはなります。

Wix (ノーコード)を使って無料サイトを立ち上げてみた

※制作時間5分の簡易サイトはこちら

今回はノーコードの中でも有名なWixについて実際に無料サイトを作成してみました。どのような流れでサイトができるのか、どれくらい難しく、いい点とそうでない点をまとめてみましたので、これを機にご自身のサイトを作ってみてはいかがでしょうか?

サイト立ち上げまでの具体的手順

以下、Wixのサイト公開までの手順です。

1、Wixサイト登録

まずは公式サイトよりメールアドレスの登録を行います。確認メールからWixサイトを作る管理画面に飛ぶことができます。

Wix公式サイトはこちら

2、管理画面より必要情報入力

Wixでは「AIによる自動生成」と「テンプレート使用して自身で作成」の2つの方法でサイト作成が可能です。今回は自分でテンプレを選んで作成してみます。

基本作成手順
  1. サイトの種類を選択
  2. Wix AIによる自動生成 or 自分で作成
  3. テンプレート選択
  4. 実際に編集
  5. 編集が完了したらサイト公開
1. サイトの種類を選択

サイト登録が完了したら作成に入っていきます。まず初めにどんなホームページを作成するかというサイトの目的を選択します。今回は試しにブログを選択してみます。

2. Wix AIによる自動生成 or 自分で作成

サイトの作り方はWix AIIによる自動生成か自身でエディター(編集機能)を駆使しながら作っていくかの2つのパターンから選ぶことができます。今回は自分で作る方を選択してみます。

3. テンプレート選択

次にブログサイトの中でどのようなイメージかをWixの中にあるテンプレートから選んでいきます。Wixのテンプレートはシンプルなデザインなものが多く、自分でカスタマイズする前からすでにおしゃれな作りのものが多いため最初はテンプレートで悩む必要がないところがいいですね。

4. 実際に編集

テンプレートを選択したら実際に編集をしてみます。

Wixの編集画面は、直感的に物を配置できるように設計されているため、コーディングなどの専門知識がない人でも手軽にサイト設計ができます。

テンプレの状態ですでにいい感じにサイトができてますが、ご自身でさらに自分用にカスタマイズが可能です。サイトを作る際は基本的にパソコンを使って編集しますが、必ずプレビューで確認する時はモバイルの方で問題なく表示されているかの確認を行いましょう。

今はほとんどスマホでネットを利用する人が多いためです。

5. 編集が完了したらサイト公開

編集が終わったら実際に公開してみましょう!このときパソコンで見ることはもちろん、スマホでも確認してUI(ユーザーインターフェース)を確認し、使いづらくないかなど利用する側の視点で確認しましょう。


いかがでしょうか?実際に登録からサイト公開までの具体的イメージができたと思います。Webサイトの制作となると
「専門知識が必要」
「圧倒的なデザイン力が必要」
「1人でつくらず複数人で時間かかけて制作」
といったイメージがあるかもしれません。

確かに本格的な企業サイトとなれば複数の専門の人たちで構築していくことが望ましいです。

しかし個人で作ってみるや、窓口として最低限サイトを持っておきたいなどの場合、Wixのようなノーコードツールを使うことで手軽に制作が可能です。

参考【超具体的】独学で始めるプログラミングの学習方法

続きを見る

Wix (ノーコード)のメリット

Wixを実際に扱ってみたメリットは下記になります。

  • 直感的でわかりやすい
  • テンプレートがおしゃれ
  • 短期間で制作ができる

まず直感的で初心者でも簡単に作ることができます。Windowsのパワーポイントのように画像や文章、その他フォント調整などぽちぽち選択しながら作成ができます。

そして用意されているテンプレートがとてもおしゃれです。自分でコーディングしていくとどうしても時間がかかり実際に動くかの検証も含めると大変なところが多いですが、Wixを使うことで簡単に実装ができるようになります。

テンプレートなどが用意されていたりエディターの操作が直感的でわかりやすいためとても短時間でサイト制作が可能です。先ほど掲載した制作時間5分のブログサイトは「見出し」「タイトル」の記入以外はほとんどノータッチでした。

それでもサイトの骨子がすでにできており、サンプルの記事などがあるためどのように掲載されるかのイメージがつきやすいです。それほどすでに用意されているテンプレートが優秀でした。

Wix (ノーコード)のデメリット

次にWixを使ってみたデメリットをお伝えします。

  • テンプレート以外の実装が困難
  • サイト読み込みの時間が遅い
  • 日本語のサポートが充実していない

先ほどテンプレートがおしゃれという話をしましたが、より凝ったデザインやサイト設計を検討してる人にするとWixでのカスタマイズ機能は少し物足りないかもしれません。カスタマイズの充実度はWordPressなどのツールが豊富でそれと比べるとどうしても見劣りするところがあります。

また、WIxでのサイトは少々サイトの読み込みが遅いです。サイトの読み込みはユーザーにとって離脱する大きな要因のためこの点は少し検討の余地があります。挿入する画像をあらかじめ圧縮サイズにしておく、余計な画像をたくさん入れないなど工夫が必要になります。

また、Wixは日本の会社ではないため日本語のサポートが他と比べると薄いです。サポート面を重視している人は問い合わせが自分が望むレベルのものか確認することが必要になります。

Wix (ノーコード)を使ってみての感想

今回実際にWixを使ってみて、サイトを作る上で「何をツールに求めているか?」によって使い分けが必要になることがわかりました。

  • 早くサイトを立ち上げたい
  • 経験としてノーコードツールを使ってサイトを立ち上げたい
  • ブログサイトを初めて利用したい

などライトな使用目的でサイト制作を検討の人には十分Wixはいいツールです。有料にした場合も月額数千円で利用が可能のためコストもそこまで大きくかかりません。

  • 逆にしっかり作り込んだサイトがいい
  • 自分の思い通りのサイトにしたい
  • わからなかった時のサポートが充実しておきたい

といった要望でサイト制作を検討してる人はWIxでのサイト制作は向いていないです。

個人的には、初心者はまずWixでサイト制作→公開の一連の流れを軽消して、そこでさらに凝ったサイトを作りたいとなったときにそれに対応したものに切り替えると言ったステップを踏むことがいいと感じました。

何事もやってみて気づくことがあるので気になった人はまず試しにサイトを作ってみてはいかがでしょうか?

Wix公式サイトはこちら

おすすめ図書


ノンデザイナーズ・デザインブック [第4版]

なるほどデザイン

  • この記事を書いた人
  • 最新記事

てん

今:Webエンジニア【経歴】新潟大学 ▶︎ web広告代理店マーケ / 営業 ▶︎ 独立 ▶︎ Uber ▶︎エンジニア ■福岡出身27歳 ■記録&アウトプットとしてブログ書いてますm

-プログラミング
-