NoCodeツール『STUDIO』と『note』に完全移行してわかったこと
こんばんわ。タイトルが少し長くなってしまいました。また、この記事を書こうと思って2週間経過してしまったこともお詫びします。
丁寧に綴ったので少しだけお時間いただければ幸いです。
【執筆者】
Twitter：@YoinDesign
-2018 WEBエンジニア
2019-2020 グラフィックデザイナー
2020.5 活かすグラフィックデザインWEBマガジン『NineCe』を開始
はじめに
2024年10月18日追記
記事の内容が少し古くなってきたので、参考になりそうな他のサイトを見つけて以下に掲載しておきます。Studioでできないことやプランの変更情報、選び方などの参考になると思いますので、ぜひこちらを参照くださいませ。
グラフィックデザイナーとして働いている傍、デザインはもっといろんなところに活かせることを少しでも知ってもらえたらいいなと思い、「デザイン」にまつわるTIPSや自身の経験などを更新しています。
立ち上げ当初、このWebマガジンは「独自ドメイン＋Wordpress」で構築して運営していました。
WordPress（ワードプレス）は、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している（後述のプラグインよりSQLiteでの使用も可能）。単なるブログではなくコンテンツ管理システム (CMS) としてもしばしば利用されている。
とまあ要するにオープンソースでブログなどによく利用されているCMSを利用したのですが、少し前にSNSで
「NoCodeツール」
というものが話題になっていることを目にしました。
NoCodeツールとはなんなのか
NoCodeツールというのはその名の通り、「コーディングが発生しないツール」のことで、プログラミングをせず（意識せず）Webサイトを構築できるもの。
有名なものだと、WixやWebflowなんかもこれに含まれると思います。
名前くらいは知っていたものの、「まだまだカスタマイズ性が希薄で、痒いところに手が届かないでしょ」というイメージが強く、オリジナリティのあるサイトをきちんと作るにはやはりコーディングが必須なのではと思っていたのが正直なところです。
ただ今回出会ったNoCodeツールは僕が想像していたものとは違っていて、すぐに情報をかたっぱしから調べました。
次世代のNoCodeツール「STUDIO」
僕が今回使ったのは、完全国産のNoCodeツール『STUDIO』といいます。「Webflow」もかなり高いカスタマイズ性を持ったNoCodeツールと聞きますが、日本語サポートがあまりされていないこともあり国内での利用はまだまだ限られているようです。
それに比べると、完全国産の魅力は日本語でのチュートリアルやサポート体制がしっかりしていることだと思います。
見出しで「次世代の」と書きましたが、これは僕が感じた正直な感情です。
マゼンタの斜め線がトレードマークの『STUDIO』。
完全ブラウザで動作（FireFoxはサポートしていないかも？Chromeなら問題なさそう）、HTMLとCSSのコーディング規則に則って自由にオブジェクトや写真などを配置できます。開発者が元々デザイナー畑出身なこともあってか、操作性はAdobeに若干寄せてくれているのもとてもありがたいです。
テンプレートからデザインを選択してそれを編集することも可能ですし、全くのゼロベースからデザインを起していくことも可能です。色や透明度の変更、Web制作で使用頻度の高いアニメーションまでかなり細かく編集でき、例えるなら少し大袈裟ですが、XDでデザインをしているような感覚でWebサイトを構築できるのが最大の魅力です。編集したデザインはコーディング不要（裏側で自動コーディング）でそのままボタン一つ押せば公開する事ができます。しかもここまでやっても基本利用は完全無料というのも驚きです。
どうせ細かいところまで手が届かないんでしょ？
そう思っていました。僕も全く同じで、疑い半分で使い始めてみました。でも最終的には、「Wordpress」で構築していたサイトを「STUDIO＋note」に完全移行する事に決めました。
ここからは僕がWebマガジンを公開するサイトのプラットフォームとして『STUDIO』を採用するまでに気にしていたことを書いていこうと思います。
『STUDIO』を採用するにあたって
元々Wordpressで運用していたサイトを『STUDIO』を使ってリニューアルする際、僕が気にしたことは次の項目です。
⚫︎独自ドメインで運用ができるか？
⚫︎カスタマイズ性がどの程度あるのか？
⚫︎問い合わせフォームは設置可能か？
⚫︎レスポンシブに対応できるか？
⚫︎SEO的にはどうか？
⚫︎不具合はどの程度あるのか？
⚫︎サポート体制は？サービス終了の懸念は？
⚫︎分析ツール（Google Analytics）の導入は可能か？
他にも細かい点はいくつかあったかも。
ひとまず、上記について一つづつ自分なりの使用感を綴ってみます。
1.独自ドメインで運用ができるか？
結論から言うとこれはもちろんできます。独自ドメインを利用するには、1ドメインごとにBasicプラン（月額約1000円）に加入する必要はありますが、サーバー管理などを考えるとそこまで高いとは思いませんでした。
但し『STUDIO』サービス内ではドメインの管理はまだできないので、お名前.comやXdomainなど、ドメイン管理サービスで独自ドメインを取得し、DNS設定のAレコードを変更して『STUDIO』で構築し公開したいサイトと繋ぎ込むことで、独自ドメインでのサイト公開が可能になります。
仕組み上ネイティブドメインでもサブドメインでも同じ方法で設定が可能で、1度やってしまえば2度目からは迷うこともないほどUIも綺麗、わかりやすいです。
繋ぎ込み自体は、STUDIOサポート内で公開している記事もあるので、特につまづく箇所はなく、1分もかからずに完了できました。また、不明点などあればサービス内右下に表示されるチャットボットからサポートに直接繋げられるので便利です。今のところドメイン周りに関して不具合は特になく、問題なくサイトが公開できています。
2.カスタマイズ性がどの程度あるのか？
僕個人としての感想から言うと、複雑なアニメーションを含まない思いつく限りのデザインやレイアウトはほぼほぼ実装が可能です。もちろん例外はありますが、Web規則であるマージンとパディングという考え方をベースに設計されているので、コーディングを少しかじったことがある人であればすぐに慣れるとおもいます。
オブジェクトの配置設定も、相対配置か絶対配置を個々に選択できるので、うまく使うことでパララックス効果や固定ヘッダーなども容易にデザインすることができます。
また、ホバーアニメーションやスクロールアニメーションも、使用頻度の高いものはデフォルトで用意されていて、アニメーション時間やディレイも細かく設定が可能です。
もちろん、主にJavascriptを使って構築するようなサイト要素に関しては、やや痒いところが残りますが、よっぽどの理由がない限り動画や画像にしてしまったりすればあまり問題にはならないのかなとか。
また、スライダーなどいくつかのよく使う要素については、Google Tag Managerとの連携機能を使うことによりjavascriptを用いた実装も一部可能になっています。但し細かいデザイン要素は変更不可の場合があるので注意です。
3.問い合わせフォームは設置可能か？
こちらも設置可能でした。デフォルトでフォームのテンプレートが用意されているため、そちらを利用してもいいですし、項目を増やしたり減らすことも可能になっています。
お問い合わせフォームならメールの送信先を設定しておけば、自身のメールアドレスに直接送信されるように一瞬で設定ができます。
PDF等のファイルを送信できるようにすることや、必須項目の追加などはまだ試せていないので、後日追記してみます。
4.レスポンシブに対応できるか？
個人的にこれはかなり驚きましたが、かなり細かく対応できます。
仕組みとしては、オブジェクトごとにPC、タブレット、スマホで表示／非表示の切り替えが可能なので、オブジェクトがスマホ版のレイアウトで表示崩れするようなら非表示にし、スマホ版だけ表示する設定にした同じ調整オブジェクトを配置することで、対応が可能になっています。
この仕組みを使ってスマホ版のみのハンバーガーメニューなども構築可能で、オブジェクトの高さなどは単位をpixelからvhにするなど、容易に最適化することができます。
デザインをしながら各デバイス幅をワンクリックで切り替えられるので、表示崩れを確認しながらリアルタイムにデザインができるのもかなり嬉しいです。
5.SEO的にはどうか？
この点に関しては引き続き検証中ですが、特にサイト掲載順位がSTUDIOにしてから大きく変動したという印象はありません。ディスクリプションなどのSEOに大きく関わりそうなメタ要素は個別に設定できるようになっているし、サービスサイト内でもSEOで不利になるようなことは書かれていないので、もう少し様子を見てみようと思っています。
STUDIOで構築されたサイトの実績として、今この記事を綴っているnoteや株式会社LIGなどのサイトも既に運用されているようなので、おそらくクリティカルな問題はでなさそうな印象ではあります。
6.不具合はどの程度あるのか？
ブラウザ上でデザインをしている時、たまにオブジェクトを選択できなくなったり、指定外の場所に動いてしまうことがありましたが、リロードすることですぐに元に戻りました（再現不可能なので原因は不明）。
公開ボタンを押すまで本番環境には反映されないため、事故にはつながりづらい程度の細かいバグは散見されますが、どれも頻発すると言うレベルではなく、使用感的にはほとんど慣れれば気にならない程度かと思っています。
プレビューではみられるのに本番環境にアップすると再現されない、その反対にプレビューだと確認できないなども、条件が揃うとたまに起こるようですが、多くはjavascriptを含む実装不備なのかなと感じました。公式コミュニティSlack内で報告されている物に関しては現在進行形で改善中の動きがみられるのでアップデート待ちかと思います。
但しこちらも少し乱暴なデザインをしない限り起こらないものばかりで、回避しながらデザインすることももちろん可能なので僕としてはあまり気になりません。
7.サポート体制は？サービス終了の懸念は？
サポート体制については上述したとおり、サービス内のチャットボットから問い合わせが可能になっており、僕が独自ドメインの設定をした際はリアルタイムで返信がきました。
公式コミュニテイSlack内で質問を投げることもでき、公式のサポートが回答をくれることもあります。
STUDIOと言うサービス内で構築して公開したサイトは、コードレベルでダウンロードして保管するということができないため、サービスが終了してしまうと移行するのがちと大変。こちらに関しては、いくつもの企業がコーポレートサイトやサービスサイトの公開にすでにSTUDIOを使っているという実績や、プラットフォームという囲い込みができる構造上、気にしすぎないという結論に至りました。
STUDIOでのサイト制作代行を行っている制作会社も存在するため、リスクを取ってでもSTUDIOを事業に組み込む価値があると判断した方が他にもいるという事実にも少し安心しました。まあ最悪サービスが終了する時が来たら、きちんと告知もされると思いますし、そうなったときに移行などの対応措置を考えればいいと思っています。
8.分析ツール（Google Analytics）の導入は可能か？
Webサイトを運用する上で分析ツールは斬っても切り離せない存在かと思います。独自ドメインを導入できるBasicプラン以上であれば簡単にGoogle Analyticsを導入が可能でした。実際にNineCeの場合も正常に動作していて、きちんと集計が行われています。
Proプランであれば独自の分析ツールも使用可能なようです。
Web制作で大事な要素をちゃんとおさえている
ここまで読んだ方はわかっていただけたと思いますが、Web制作をやったことがある方なら誰もがこれは最低必要でしょ？という要素はほとんどおさえているなと感じました。ここでは詳しく書きませんが、CMS機能で独自のブログを構築することも可能ですし、僕がNineCeでやったようにRSS連携機能を使ってnoteから記事を参照することも可能です。
RSSが読み込めるので、独自にDBを構築してRSSを吐き出す仕組みを作れる方は、動的なサイトもかなりシームレスに実現が可能なことがわかるかと思います。
静的なサイトは本当にこれで充分
説明してきた通り、jsを使って実装することが想定されるようなレイアウトやデザイン以外であれば、考えうるかなりの範囲を『STUDIO』でもカバーできると思います。
webデザインをやったことがない方やグラフィックデザイナーの方でも容易に扱えるので、まさに『STUDIO』が目指しているデザインの民主化を推し進めてくれそうだと感じました。ツール自体の直感的な操作性のおかげで、学習コストも相当低いと思います。
LPやサービスサイトとの相性が抜群
独自ドメイン公開で月額課金という特性なども含め、LPやサービスサイトを構築するにあたっての相性はやはり抜群にいいと思います。また、個人のポートフォリオサイトや企業のコーポレートサイトにも活用できることを実際に利用してみて改めて認識しました。
多少のデメリットもあるけれど
やはり最大のデメリットとしてはサービス終了の可能性とサポート体制の部分かと思いますが、何か新しいものを始めるときにはつきものなので、その少しの不安とうまく付き合いながら、サービスを応援し、成長してくれることを願っています。
僕が運営している、活かすグラフィックデザインWebマガジン「NineCe」は「STUDIO」と「note」のRSS連携によって構築しているので、もし興味あれば参考までに覗いてみてください。
より良いサービスになるように日々アップデートに精を出してくれているエンジニア、デザイナーなど、関わっている方全員に敬意を評して、この記事のくくりとさせていただきます。
【運営会社】 合同会社meno
：https://www.meno-inc.com/
この記事が気に入ったらサポートをしてみませんか？