見出し画像

デザイナーによるノーコードツールの比較

Timers Designer Team

こんにちは、Timersデザイナーのtomoです。

Timersでは、広告LPの一部をSquareSpaceというノーコードツールで制作しています。ノーコードツールを使っている理由は、エンジニアに頼まなくてもデザイナーやビジネスサイドでサクッと作れるスピードを重視しているからです。
約4年ほど前からSquareSpaceを運用してきたのですが、使い始めた時期から事業も多角化してきて管理しているページ数、求められることが増え課題が増えてきたので、他のノーコードツールの導入を検討しました。

世に様々なノーコードツールがある中で、TimersのサービスやWeb制作のスタイルにぴったりなものを探すため、比較検討しました。
ノーコードツールの導入を考えていたり、乗り換えを考えている方たちへ、何かのお役にたてば…！という気持ちで筆を取ります🖌

SquareSpaceで抱えている課題😢

機能面での課題

1番大きな課題は、ページの表示速度です。これは様々な要因があるのですが、大きくは管理しているページ数が大量にありすぎるということです。あとはデータベースを使って同じような内容を複製しまくっているので、ページ表示の際に読み込みに時間がかかるという点もあります。
これらについては運用面の見直しで改善ができるかもしれません。

ただ他にも求められる機能が多くあり、この際ゼロベースで考えた方が早いのではとなりました。

管理しているページは400ページ以上😅

その他に以下さまざまな事業部から求められる機能…（一部）

  • LP上でチャットボットを表示したい

  • 各都道府県やエリアごとにLPを作成したい

    • ->たくさんのページを作る

  • 同じ内容を掲載するが、運用管理のコストを下げるため、データベースで管理したい。（Figmaで言うコンポーネントのような管理）

    • ->SquareSpaceのブログ機能を使って、各ページにブログサマリーを呼び出す。内容を変更したい場合はブログを編集する


運用面での課題

運用面では以下のような課題を抱えています。

  • CSSはエンジニアやデザイナーしか書けない

  • たくさんページを作ると、管理コストがかかるが管理しきれていない

  • 知識が必要なコーディングは一部の人間しか出来ず属人化の一途をたどる

  • SquareSpaceの仕様上、ページが400を超えると表示速度が遅くなる

  • 新しいガイドラインを作っても、全てに反映できない

  • 本番適用しかなかったり、バージョン管理ができなかったりで怖い

などなど課題だらけ…これはつらいぞ…🥺という感じでした。

新規ノーコードツールに求めたこと

  • 表示速度が現状より速くなる

  • デザインガイドラインを反映できる

  • DB管理が管理しやすい

  • GTMで広告の管理ができる

検討したノーコードツールサービス

どう検討したのか

まずは良さげなノーコードツールを洗い出し、月一回のデザイナー合宿の時間を使ってデザイナー全員でそれぞれ別のツールを触ってみる！

とにかく触ってみないと判断出来ないということで、実際にLPをみんなで実装してみました！

⚠️注意⚠️
TimersのデザイナーのHTML/CSSの記述力は低めです。サイト制作をHTML/CSSで書き切るスキルや経験を持っていません。
「さまざま触ってきた私たちがわからないものはみんなわからない！」という己の偏った基準を持っていることをご了承ください！
そして5時間程度触って感じたことなので、ちゃんとしっかり理解できていない部分もあります。間違っている箇所があったら教えていただきたいです🙏


そうして出した答え（個人の意見となります✋）

こちらです👇

Webflow

UIがムズイ！各パーツのパディングを変えられたり、テキストのスタイルをそれぞれ変えられるなど自由度が高いため、みんなが作るLPには向かないかも…


Notion

NotionはそもそもWebサイトをがっつり作るためのツールではありません。
ただ、The Super Builderというツールを使うとNotionで作成したページをWebっぽくデザインできると知り、合わせて使ってみました。

  • よかったところ

    • テキストの記述がかんたんで、誰でも綺麗に作れそう

    • ファイル構造がわかりやすいので管理しやすそう

  • 惜しかったところ

    • デザインの自由度が低い。Hタグのフォントサイズ指定などはできなさそう

    • データベース機能を利用すると遷移してしまう


WordPress

  • よかったところ

    • アップグレードすればCSSやテーマのカスタムもできるので、綺麗なサイトを運用できそう。（デザイナーが初期にしっかりUI guidelineに合わせればの前提）

    • バージョン管理やユーザー管理もできる

    • 「シンボル」という機能があり、よく使うパーツを使い回すことができる

  • 惜しかったところ

    • 画像の拡大縮小に癖あり（左端固定で大きさが変わる仕様…）

    • コード書けばなんでもできるが、ノーコードツールを求めてる我々にはハードルが高い！😱


STUDIO

テキストのスタイルを全テキスト、全ページで共通させることが難しそうでした。
そのため、運用でみんなが同じテキストスタイルを使うことができなさそうです。

  • よかったところ

    • 共同編集できるのちょっとイイと思った

    • UIがキレイ✨

    • 日本語サポートで学習コストが低い

    • 「シンボル」の登録ができる

  • 惜しかったところ

    • 「シンボル」を呼び出してテキストを編集すると、同じシンボルの全てのテキストが変わる（Figmaのマスターコンポーネントを編集しているような感じ）

    • Webflowと似て逆に自由度が高すぎました

    • 全ページ共通のHTML/CSSを書くことができない

    • HやPタグのフォントサイズを指定することができない


Wix

  • よかったところ

    • UIがキレイ✨

    • 日本語で情報がたくさん出てくるところ

    • マイデザインの利便性

  • 惜しかったところ

    • データベースの呼び出し方が理解しないとむずかしい

    • コードでオブジェクトを追加した際に、Wix側の制御が影響を及ぼしやすい（例：モバイルでのプライマリーボタンフロート化など）

    • オブジェクト同士のマージン間が数値で認識できない

    • 管理画面へのログイン時結構時間かかる


結論

我々のわがまま要望に一番答えてくれそうなのはWixではないか！となりました。理由としては、パッと触ってみた感じがまずわかりやすかった！複数の人間がLPの制作・管理する上で触ることに対してのハードルが低いのはまず大きな評価ポイントでした。その上でマイデザインという機能でフォントやボタンのスタイルを登録できて（下の添付画像のように）デザインガイドラインに合わせやすい。

しかも日本語で情報がいっぱい出てくる！サポート体制も日本語対応されているので何かあったときにサポートに確認できるという点はとてもありがたいポイントです。


さいごに

今回Wix導入検証していこうと意思決定したので、まずは試してみます！という段階です。
今のところLPの作りやすさに対しては好印象なのですが、やはりもっとこうだといいのになみたいなポイントは既にいくつか出ています。この辺りは運用してみてさらに理解が深まったら改めて記事にしようかと思います。

ここまでこの記事を読んでいただいて、ありがとうございます。

この記事が気に入ったらサポートをしてみませんか？