ノーコードツール「STUDIO」のすごいところとクセ

2022年3月23日 11:49

みなさん、webサイトのデザインやってますか！？
そしてやってる人はご存知ですか？きっとご存知でしょう。
今回はみなさんご存知、ノーコードでWebサイトが作れる「STUDIO」についてです。

Da Vinci Studioは開発・デザインのお仕事をweb中心に幅広く行なっていますが、そのほとんどが自社での開発・コーディングです。
しかし実際のところ仕事内容として軽めのページを作ることもそれなりにあり、「これはノーコードツールでやってみてもいいんじゃないか？」という場面もたまにありました。仕事でデフォルトツールとしていなくとも気になるよね、というメンバーも多かったです。

そんな中今回は個人的にSTUDIOに触り、「実際に仕事で使うときはどんなサイトデザインだとより真価を発揮できそうか・STUDIO初心者が仕事として使い始めるときに気をつけた方が良さそうなのはどこか」を探ってみました。

STUDIOってステキだけどどういう場面で導入してみよう…と思っている皆さんの参考にでもなれば幸いです。
特に"デザインもマークアップもある程度できるけどSTUDIO初心者"目線で書いてあるので、「自分も触り始めたら最初ここが気になるかも」という点が明確になりやすいかと思います。
（運用まではやっていないのでカバーできてませんが…😂）

できること・すごいところ

まずはSTUDIOでできること、また特に「これってすごいのでは…」と思ったポイントのまとめです。

複数のページを持つサイト

まずはシンプルにどんな構成のサイトが作れるのか？です。
結論から言うとページ数に関しては2022年3月10日現在は特に上限なく、複数のページを保有するサイトを作成できます。特に後述するようにCMSも搭載できるのでかなりすごいです。
ただし管理に関してはかなり手作業な感じなので、あまりに膨大なページ数を有する・頻繁な更新があるサービスを作る場合は、保守運用のコストを考慮する必要がありそうです。

CMS

前述の通り、なんとCMS機能がフリープランから利用できるため、ある程度のブログ・お知らせ機能などを搭載することができます。
プランごとに投稿の上限が決まっていて、現在はフリーで1,000件までのようです。これでもコーポレートサイトくらいの規模なら十分満たせそうな数ですよね…。

詳細については公式の価格ページをご確認ください。
https://studio.design/ja/pricing

フォーム

CMSだけでなくフォームも用意できます。
テキスト・email・ラジオ・チェックボックスなど汎用的なinputhは用意されているので、大抵のフォームであれば収集したい情報を十分に取得できそうです。
さらに結果はスプレッドシートで管理できるらしく、運用面でもかなり心強そうですね。
CMSと同じく、こちらも有料プランでないと受信保存数などに上限がありそうです。

モーダルダイアログ

個人的に驚いたのが「モーダルダイアログ」が非常に簡単に作れること・その作られ方でした。
STUDIOではページを増やすのと同じ感覚でモーダルダイアログを作成することができ、これを応用することでハンバーガーメニューなどを作るような形になっています。
そしてモーションもそれなりに用意されているので、秒で"いい感じのモーダルダイアログ"を設置できます。ユーザーに注意が必要なポイントにちゃんと訴えかけることができそうです。

webフォント

なんとモリサワのタイプスクエアが使えます。すごすぎる…！！
webフォントは利用できるものがあまり多くない、色々使おうと思うとその分コストがかかることもあるので案件によっては諦めざるを得ない…というシーンがあると思いますが、STUDIOではフリープランからタイプスクエアのすべてを利用できるようです。
特に雰囲気重視・文字にこだわりたいときは非常に強力なツールになりそうです。

デザインを作るときにコツが必要そうなこと

上記のように基本的なことはほとんどできるので、今度は「デザインを作るときのSTUDIOのクセ」のようなものにフォーカスしていきます。
が、だいたいは「普段コードを自力で書く人から見た作るときのクセであり代替手段はSTUDIO上で用意されている」ものになっています。

marginに%使えない・フォントサイズにemが使えずpxのみ

STUDIOでの単位指定は結構制限があり、「widthやheightは%があるけどmarginにはなし」「フォントサイズはpxだけ」「calcは使えない」など、マークアップができる人にとっても最初『表現したいこの動き、どう設定しようかな…』と頭を悩ませる場面が多いです。
flexを活用したり、spacingとしてのdivを用意することで一定幅必ずアキを持たせたり……というように、他の手段で実装を考えてみましょう。

また文字サイズについては、そもそもemを使う理由が「端末に合わせて適切な文字サイズを表示する」であることが多いことから、「ブレイクポイントを細かく設定してそれぞれに適切な文字サイズを設定する」のように対処することができそうでした。

max-heightやmin-heightは使えない

高さの設定として最低値・最大値を決めるようなものは特に用意されていません。
少なくともmin-heightは「固定したい要素に親要素を作ってそれを固定サイズにする」とかで解決できそうなので、大きく悩む場面は少ないと思われます。

まとめ

ここまででなんとなく分かったと思いますが、最後にざっと向いていそう/いなさそうなサイトの傾向をまとめてみます。

特に向いていそうなサイト

LP
コーポレートサイト
ポートフォリオサイト

あまり向いていない・検討が必要そうなサイト

システム要件が複雑なサイト
ページ数が多く、更新頻度が高いなど保守が大変なサイト

公式で用意されている事例集などを参照してみると、どんなサイトが作れるのか、もっとイメージがつきやすいかもしれません。
たまに眺めてはすご〜い…となってます。

また、マークアップができる人間から見ての「GUIでのマークアップ実装」についてですが、一言で言うと「結構クセ強いけど楽なとこは楽」です。
たとえばクセが強いな、と思うところは上記のように数値等の設定に関してプラットフォームでの縛りがあるため、普段とは異なる実装状態を設計する必要があるあたりです。
逆に楽なところは「配置やサイズ感等わざわざ数値で指定するのが面倒なものが直感的操作で完結できる」とこかな〜と思いました。たとえばテキストの揃え1つとっても『GUIでポチッとするだけ』と『text-align: center; と書く』だと前者の方が楽なんですよね。（人によって違うかも）
あと私はjsに明るくないため、モーダルダイアログ等のよくあるインタラクションについて最初から用意されているのは圧倒的に楽でした😂

しかしコツさえわかれば非常に心強いですし、学習コストもあまり高くなく（触っていればなんとなくわかったり公式ドキュメントが充実したりしている等）本当に素敵なサービスです。
仕事で必要とされるものが明確な場合はぜひ利用を検討してみるのはいかがでしょうか。

🪐　　🪐　　🪐

Da Vinci Studioデザイン部ではデザインにまつわるゆるいnoteを定期的にお届けしています。
よかったらぜひご覧ください！

また、一緒にはたらく仲間も大募集中です！
デザイナー、エンジニアともに積極採用中なので、どうぞよろしくお願いします！