ノーコードWebデザインツール「WiX」と「STUDIO」をデザイナー目線で比較してみた

こんにちは、IT+ デザイナーの溝口です。

サイトを作る時に考える必要があるのが、何で作るか？という部分ですよね。

CMSの中で世界的にも圧倒的なシェアを誇るWordPressはもちろんのこと、最近ではノーコードによるWeb制作ツールも選択肢に入ってきました。リリースまでのスピード感やお客様側での編集・更新のしやすさなどからノーコードを提案したり、またお客様から要望されることも少しずつ増えてきています。

ノーコードツールをいくつか試してみた中でも最近使っているのが、世界で1億ユーザーを超えている、最も有名なイスラエル発の「WiX（ウィックス）」と日本発のノーコードWebデザインツールである「STUDIO（スタジオ）」の2つです。

今回はこの2つのノーコードツールの比較と私なりの使い分けについて紹介してみたいと思います。

※WordPressからSTUDIOへの乗り換え・サイト移行については コーポレートサイトをWordPressからSTUDIOに移行したワケ という記事をご覧ください。

ノーコードで作ると何がいい？

（まず、ブログやメディアサイトとして本格的に集客をしたい、SEOが重要だ！という場合はWordPressに優位性があるため、今回はそうでない場合を前提とします。）

ノーコードツールでサイトを作ると何がいいのか、デザイナーの観点からすると大きく下記の2つがあげられるのではないでしょうか。

1.コードを書かなくても自由にデザインができる

WordPressやフルスクラッチで作る場合にはデザインだけでなく、コーディングなどの専門的な知識が必要となってきますが、ノーコードツールの場合は全くそういった知識を必要とすることなく、自由にデザインすることが可能です。

ブログの更新はもちろん、通常のページの変更や更新、新規ページの作成なども専門的な知識を必要としないからとてもスムーズ。

2.セキュリティやサーバなどについて気にしなくていい

ノーコードツールの場合はサーバもセットとなっており、更にハッキングなどの攻撃についても気にする必要がありません。
アップデートをしてどこか不具合が出たらどうしよう、バックアップは常に取っておかないと、などそういった心配をしなくてもよくなるのは、めちゃくちゃありがたいですよね。

WordPressの場合には、自社でサーバーを用意してそこにWordPressのインストールを行い、セキュリティを高めるために本体・プラグインを定期的にアップデートする必要があります。（中小企業のサイトを中心にサーバーのセキュリティ設定やWordPressのアップデート作業を行っていない、放置しているサイトが多いですが。。）

まずはざっくり機能比較

それぞれ目的や用途によって使い分けが必要ですが、まずはまずはざっくりと機能について比較してみましょう。

※利用料はオススメプランの料金を載せています。詳細は下記をご覧ください。

WiXの料金プラン（https://ja.wix.com/upgrade/website）

STUDIOの料金プラン（https://studio.design/ja/pricing）

※WiXは基本のWiXエディタで比較をしています。新しい「Editor X」を使用すれば完全レスポンシブ、デザインの自由度も圧倒的に高くなりますが、私にはハードルが高かったため、少し触って途中で挫折していますw

WiXのメリット・デメリット

【 メリット 】

1.様々な機能がとにかく豊富

PDFなどの文書ファイルのアップロードやフォトギャラリー、スライドショー、コンテンツマネージャーを使用した動的ページの作成などとにかく細かいところまで行き届いています。

また、機能を追加することができる250以上ものWixアプリを使えば、イベント予約、多言語対応、ネットショップ機能など大抵のものはカバーできるのはさすがです。

2.デザインレイアウトがものすごく簡単

パワーポイントに配置するように本当に自由に画像やテキストをレイアウトすることが可能です。

PCはPC、スマホはスマホと入れる要素は同じでもレイアウトは完全に別に作成することができるので、ツールを使いこなす勉強時間もほとんど必要ありません。

クライアント側で頻繁に更新をする必要があっても何の問題もなく変更が行えるはずです。

3.多言語やネットショップにも対応

最近ではニーズが増えてきているこの2つの機能もWixアプリを使えば対応することが可能です。

【 デメリット 】

1.完全なレスポンシブではない

レイアウトを行う画面がPCとスマホで完全に分かれているため、ブラウザサイズに合わせた調整や完全なレスポンシブ対応をすることができません。

PCでブラウザを縮小した場合は右側からコンテンツが見切れていってしまいます。

また、グローバルナビなどはフォーマットに則る必要があり、自由にデザインすることはできません。

2.ブログ機能は一つしか使えない（複数利用不可）

ブログ機能を使って、ブログ、お知らせ、ポートフォリオを運用したい。と考えた時にブログ機能を3つ使ってそれぞれを管理することはできません。全て一つのブログの中でカテゴリを3つに分けて運用をする必要があります。

全てを分けて運用をする必要がある場合は「コンテンツマネージャー」という機能を使って一からデザイン設計をする必要があります。

3.日本語フォントが少ない

筑紫ゴシックやロダン、ニューセザンヌなど18書体ほどの日本語Webフォントは使用できますが、かっこいい日本語フォントがあまりありません。これはつらい。。

手持ちのフォントのアップロードはできますが、次に説明するSTUDIOのようにモリサワとの提携を望むばかりです。

STUDIOのメリット・デメリット

【 メリット 】

1.デザインやフォントの自由度がものすごく高い

完全レスポンシブ、グローバルナビもアニメーションも全て自由にデザインすることが可能です。

しかもモリサワと提携しているから日本語のWebフォントが豊富！デザイナーとしてはこれはとにかく嬉しいポイントですよね。

2.CMS機能が充実している

記事のタイプを分けることによって、同じ管理画面からそれぞれ複数のコンテンツを運用することが可能です。

例えばブログ、お知らせ、ポートフォリオの3つを運用する場合、それぞれデザインを分けたり、カテゴリを分けて使用したい場合でも自由に設定をすることが可能です。

3.アニメーション設定が豊富でモーダル画面も作れる

画像やテキストに動きをつける際に、速さや角度、位置などを自由に設定することが可能です。

また、マウスオーバー時のデザインもデザインの自由度が高いのも嬉しいポイント。

【 デメリット 】

1.機能面が不足している

正式リリースが2018年とまだリリースされて間もないため、WiXと比べると足りない機能が多くあります。

PDFのアップロードができなかったり、自動スライドショーはCMS機能でしか使えなかったり、その他細かい部分でも作る上で気にするポイントは出てきます。今後のアップデートに期待。

（2023/2/9 追記）
ついにカルーセルで自動再生が可能になりました！！！https://blog.studio.design/ja/posts/carousel-autoplay

2.使い方を覚えるのに少しコツがいる

デザイナーが使いやすいノーコードツールということもあり、一般の方が使いこなすには少し時間がかかります。

ブログやお知らせなどCMS部分での更新だけなら全く問題はありませんが、通常ページに関してもクライアント側での編集が必要な場合はハードルが少し高くなります。

テキストの変更や画像の差し替えは簡単でも、レイアウトを変更する際は使い方を覚える必要があります。

3.CMSのページャーがない

ブログやお知らせ、ポートフォリオなどの投稿数が増え、コンテンツが増えていってもページャーによってページ分けすることができません。カテゴリ分けをすることで小分けにはできても一つのページにどんどん溜まっていき、さらに読み込んでスクロールをしていく形が基本となります。

※STUDIOの内容についてもっと詳しく知りたい方は コーポレートサイトをWordPressからSTUDIOに移行したワケ というこちらの記事をご覧ください。

それぞれの使い分け

さて、結局どんな時にどっちを使えばいいの？と思われる方もいらっしゃるかと思うので、私の場合の使い分けをお伝えしたいと思います。

どちらも今後益々機能や内容が充実していくはずなので、一旦今のところの感想です。

【 こんな時は「WiX」がオススメ 】

サイト規模に関わらず、必要な機能が多く、通常ページについてもクライアント自身で変更更新が頻繁に行われる場合はWiXがオススメです。

例えば

• PDFファイルなど文書ファイルのアップロード・ダウンロードが必要

• イベント予約受付やフォトギャラリーの管理運用が必要

• クライアントが頻繁に通常ページを変更・更新する予定がある

• 多言語やネットショップの対応予定がある

など

【 こんな時は「STUDIO」がオススメ 】

機能はそんなに必要ではなく、とにかくデザインにこだわりたい場合はSTUDIOがオススメです。

LPやシンプルな小規模サイト・ポートフォリオサイトなどにはもってこいです。

（弊社はその点も踏まえつつコーポレートサイトにSTUDIOを利用しています。）

例えば

• LPだから見た目が大事

• ナビゲーションや動き、モーダル画面などにもこだわりたい

• クライアントはブログやお知らせの更新だけする予定

• 多言語やネットショップなどの対応予定がない（力技での多言語は可能w）

など

まとめ

いかがでしたでしょうか？

今回は私の場合、ノーコードツールを使う際にどう使い分けているのか、「WiX（ウィックス）」と「STUDIO（スタジオ）」の比較についてご紹介させていただきました。
以前ならほとんどのサイトをWordPressで作っていましたが、最近ではお客様側からの要望としてもノーコードツールを使うことが増えてきました。
気になった方は試しにノーコードツールに触ってみて、サイトを作ってみてはいかがでしょうか。
予想以上に簡単に作れて驚くこともあるかもしれません。

それでは最後までお読みいただき、ありがとうございました。

※WordPressからSTUDIOへの乗り換え・サイト移行については コーポレートサイトをWordPressからSTUDIOに移行したワケ という記事をご覧ください。

また、弊社ではWebサイトの戦略策定からデザイン、コンサルティングの支援も行っておりますので、気になる方は是非お気軽にご相談ください。

お問い合わせはこちらから