ノーコードツール「STUDIO」を現役デザイナーが使ってみた

こんにちは、デザイナーの兼本です！

この度弊社ではノーコード開発ツールとして知られるSTUDIOを導入することになりました。

私はデザイナーとしてデザインから実装までを担当したのですが、実際に使ってみてどうだったのかSTUDIOを使ってみて、いいなと感じたポイントやちょっとネックに感じたポイントについて今回はお話しできればと思います。

STUDIO とは

STUDIOとは、STUDIO 株式会社が提供しているノーコードでWebサイトが制作できるツールです。

通常のWebサイト制作の工程では、デザイン→コーディングというフローになりますが、STUDIOは画面上でデザインしながらコーディングまで同時にできます。

コードを打ち込む必要がないためコーディングの知識がない人でも構築までできるという国内発のサービスです。

いいなと感じたポイント

噂に聞いていたSTUDIOですが、実際に使ってみると基本的にはいいなと感じることの方が多かったです。

簡単な操作感

まずとにかく操作が簡単です。私の場合だと操作感を習得するまである程度学習は必要でしたが、1サイト構築し終えた頃には大体の機能は習得出来ました。

デザイナーが使うことを意識して作られた、デザイナーにとって使いやすいツールだと思います。

Webデザインに特化したツールであるFigmaやXDの操作感とも似ているところがあるため、それらのツールを普段から使っている人にとっては尚更習得は早いでしょう。

制作時間を短縮できる

先述した通り、デザイン→コーディングの工程がデザイン＆コーディングの同時進行になるため、その分の作業時間は短縮となります。

ただ実際は、すべてのページをSTUDIO で1から制作するのでなく、いくつかのページは他のデザインツールで別途制作してからSTUDIO で構築というフローを取りました。

理由としては、STUDIO ではパスデータを扱うことができず結局外部ツールを使わないとできない状況が発生するからです。

しかし、その工程を取ったとしてもトータルしてみた時には、STUDIO を使わないでコーディングをする場合よりも早いということが分かりました。

TOPページなど最初に構築するページはそれなりに時間を要するのですが、一度作るとパーツをコンポーネント化でき、他のページで使い回しができるためスムーズに制作が進んでいきます。

CMSが簡単に実装&更新できる

STUDIO にはCMS機能が備わっていて、管理画面から必要な設定をした後、編集画面に移動してデザインを調整するだけで実装ができます。

さらに、ページの更新においても管理画面から簡単にできます。

WordPressの管理画面よりもシンプルで見やすい設計になっているため、はじめての方でも一度使えばすぐに覚えられると思いますよ。

Webフォントが使える

通常、モリサワなどが提供するWebフォントを使用する場合は別途料金が発生するため、今まではGoogleフォントなど無料のWebフォントを使ってきました。

しかし、STUDIO はモリサワが提供しているWebフォントサービス「TypeSquare」と提携しているため、実質無料でモリサワのフォントが利用可能です！

さらに、最近ではFontWorksのWebフォントサービスである「Font Plus」とも提携したため、使用できるフォント数はなんと7600書体以上（2024.4現在）だそうです！

これは革新的なことだと感じています。

高品質なフォントを使うことによりデザイン性が向上し、より企業の特徴や強みをデザインで表現しやすくなると思うからです。

今後のアップデートでさらに使用可能なフォント数は増えていきそうなので期待大です！

公式サイトにほとんどが載っている

STUDIOを操作していると当然分からないことが出てくるのですが、そのような時はSTUDIOの公式サイトのサポートページを見ればほとんど解決策が載っています。

一つのサイトに解決策がまとめてあるのは非常に便利で、見やすく分かりやすいです。

もちろん、すべての問題が解決できるというわけではなく解決策が載っていない場合もありますが、困ったらとりあえず公式サイトを見てみることをお勧めします！

ちょっとネックに感じたポイント

コードの知識が必要

STUDIOはデフォルトの機能だけ使用する場合はコードを書く必要はないのですが、構築するに当たり構造を考えたりタグなどの設定をする必要があるため基本的なコードの知識は必要だと感じました。

デザイナーしかいない環境だと自分で少し学習する必要がありそうです。

エンジニアが近くにいる環境であれば、教わりながら実践していけばすぐにその辺の知識は習得できると思います。

デフォルト機能には限度がある

今回STUDIOで実装する中で、デフォルトの機能ではできない！というような状況が何度か起こりました。

具体的に一つ挙げるならば、STUDIOでは画像の縦横比を維持したまま拡大縮小をすることができません。

この場合はカスタムコードを使用する必要があるためコードの知識がないと難しいです。

これに限らず他にもデフォルトで実装できないということが何度かあったので、デフォルト機能でできないことは予め知っておいた方が良いと思いました。

ただSTUDIOは定期的に改善を行なっているため、今後のアップデートに期待しています。

色などのスタイルを一括で変更ができない

STUDIOは一括でスタイルを変更するという機能がまだあまり備わっていません。

つい最近フォントの種類に関しては一括で変更できるようになりましたが、文字サイズや色、アニメーションなどのスタイルを一括で変更することが出来ないため、一つ一つに指定する必要があり結構な時間がかかってしまいます。

Figmaのように一括で指定&変更できるようになれば、かなり作業が効率化すると思うので、これもやはり今後のアップデートに期待です！

まとめ

以上がノーコードツールSTUDIOを実際に使ってみて感じたことになります。

基本的にとても使いやすく、早いツールだと思います。

あとはデザイナー自身がコードの知識をある程度学習することと、さらにアップデートが加われば、ますます便利なツールになること間違いなしです！

最後に、この度弊社はSTUDIO社の審査をクリアし、STUDIOエキスパートに認定されました。
サイト制作をご検討中の皆さま、STUDIOでのWeb制作はノベルティにお任せください！

上記リンク先よりお問い合わせいただけます。弊社のSTUDIOでの制作実績も掲載してありますのでぜひご覧ください。

↓ この記事をご覧の方へおすすめの記事はこちら ↓

業務システムのUIUXデザイントレンド5選！重要性と改善チェックポイントを解説

移り変わるUIデザイントレンドを追う！〜懐かしのから最新まで〜

【2024年版】スプレッドシートからメール送信！？　GASを使った自動返信メールの作り方！