Studioってどんな感じ？実際に使ってみてわかったこと
ノーコードツールSTUDIOに触れたことはあったものの、実際どんな感じなのか、実務で使えるのか？の観点で調べました。また、STUDIOで作られたサイトを実際にSTUDIOを使ってトレースしてみてわかったことをまとめました。
Studioとは
StudioとはノーコードでWebサイトをデザイン・構築できるツールです。「コードを書かずに高品質なデザインが作れる」ことをコンセプトとしており、Figmaのように要素をドラッグ＆ドロップで配置して視覚的に編集が可能です。デザイナーやディレクターが手軽にデザインや構成を決められるため、Webサイトの完成スピードを早めることが期待できます。
技術選定の参考情報
・クオリティの高いサイトの事例が多数！
Studioの公式サイトにはSTUDIOで制作されたサイトのギャラリーや「STUDIO DESIGN AWARD」もあり、クオリティの高い事例が豊富に見れます。著名な制作会社がStudioで制作した事例も多くみかけます。
Studioでどんなサイトがつくれるかわからない場合や、技術選定時の参考にできそうです。
・読み込み速度に注意
特にスマホの読み込み速度が遅い傾向があるようで、注意が必要のようです。
下記記事で、詳しく紹介されています。
記事にもありますが、スマホの読み込み速度を気にしなくて良いというケースはあまり考えられないので、技術選定時に考慮した方が良さそうです。
Studio公式による表示速度改善のためのヒント：
・Studio利用時にかかる可能性のある費用
・Starterプラン以上の費用: 月額980円～
・独自ドメインの取得・更新費用: ドメイン提供会社の料金による
・メールアドレスサービス（任意）: 独自ドメインに関連したメールを使う場合
・追加の外部ツール
・サーバーが必要ない
サーバーを持たなくて良いので、公開や管理がラクで速い。サーバーに詳しい人を置く必要もなく、コストやスピード、メンテナンス面でメリットになります。
・コンバージョン目的のサイトは注意
Google広告のコンバージョン計測に必要なgtag.js系の埋め込みができないようです。コンバージョンを目的としたサイトの場合は注意が必要です。
・カスタムコード機能もあり
Studioでは、特定コードをサイト内に埋め込む方法が提供されていますが、直接的なHTMLやCSSの編集機能はなく、あくまでカスタムコード機能やEmbedボックスを使っての埋め込みが中心です。
今回のトレースではカスタムコードを使用していないので、実際に使ってはいないのですが、有料版でカスタムコードの機能があります。サイト全体や特定ページの<head>や<body>タグ内にコードを追加することができ、JavaScriptや外部サービスとの連携などが可能になりますが、デザインエディタでは動作を確認できず、公開サイトでの確認が必要のようです。また、Embedボックスも利用でき、iframeを介して外部コンテンツ（ソーシャルメディア投稿やGoogleカレンダーなど）を埋め込むことが可能です。
実際に使ってみたレビュー 実装のポイントとコツ
・直感的な操作が可能
誰でも使いやすいと思いますが、Figmaに似た操作感のため、Figmaなどのデザインツールを使用されたことのある方には特に使いやすさを感じれて特におすすめできます。例えばCtrl＋スクロールでズームができるので、普段デザインツールで無意識にする操作がStudioでも使えます。動作も軽量のためとても使いやすいと感じました。
・洗練されたUI
基本的なサイトをつくるのには表示されてるすべての機能を使うのではと思うくらい無駄な機能がなく、かといって簡易的すぎて不足している機能があるわけでもないと感じました。
ブランド自体は2024年10月にリブランディングもされていて、ブランドとしてかなり洗練された印象で、そういった意味でもクオリティの高いサイトをつくれるということに説得力を感じます。
・簡単なプレビュー機能
画面右上のライブプレビューで、簡単にプレビューを確認しながら制作することが可能です。リアルタイムで反映されるのが有難いです。
・レイヤー構造で管理しやすい
Web制作はやはりレイヤーがわかりやすいです。
・誰でも使えるけど知識や経験があると有利
誰でも簡単に使えるツールではあるものの、やはりWeb制作の知識の有無や制作者などによってクオリティやスピードに違いがでてくると思うので、注意が必要だと感じました。例えば、左寄せ中央寄せとか、自動レイアウトは基本がflexboxの考え方なので、flexboxの知識がレイアウトを考える上で役に立ちました。
・レスポンシブは簡単だけど大変
「基準」「タブレット」「モバイル」でそれぞれの見た目を設定可能で、ブレイクポイントも変更できわかりやすいです。
ただ、余白や絶対位置の数値に%やvwを使用することができないため、固定値のpxを指定することもあります。固定値だと画面サイズが変わった際に可変で変わらないため、ある程度細かく設定する必要がありました。
レスポンシブについては下記の２点を抑えておくことがポイントです。
①レスポンシブを前提としてデザインを考える
②なるべく絶対位置を使わない
①については、例えば、横幅500pxの時と375pxの時、それぞれ崩れないよう細かく指定していくのではなく、500pxの時は両側に余白を持たせたデザインにして、そこから375pxまで縮めるとそのまま余白が小さくなるようにして、コンテンツエリアは変更しないようなデザインにするのがスマートだと思いました。
②については、通常のコーディング同様、絶対位置を使った方が意図したレイアウトが可能なことも少なくありませんが、単位として%などを使うこともできないので画面サイズを変えた時に崩れやすいです。
特に「top:600px right:-360px」みたいな基準から大きくずらすような使い方は、ズレやすいと思いました。
・大きいサイズから制作するようにする
大きいサイズで設定したものが小さいサイズにも共通で設定される仕様のため、大きいサイズから作成して画面サイズによって変更したい部分を都度設定していくのが良さそうです。
気付かないうちに別のサイズの調整をしていて、あとから二度手間で修正することになるということが何回かあったので、今どのサイズでつくってるか時々確認した方が良さそうです。
・背景動画はVimeo有料版を使う必要あり
- 動画はyoutubeかvimeoのコード埋め込み。
- 背景動画にしたい場合、現状Vimeoの有料版にしないとできないっぽいです。youtubeは無料ですが、ホバーでUIが表示されてしまうなどの制限があります。
- 動画を横幅いっぱいに敷くなどWebサイトではよくある使い方ですが、youtube、vimeo側に依存していて、Studio側で調整することはできませんでした。。vimeo有料だと細かい設定もできるようです。例えば、動画の再生ボタンとか、バナー表示のカスタマイズは、無料版ではできません。
- 自動再生はSP版ではそもそも制限があるので、背景で自動再生されているような動画を使用したい場合、いずれにしてもvimeo有料版が必要のようでした。
- Studioでの実装事例を見ると動画を使用しているサイトは少ない印象ですが、下記のサイトではStudioを使用していながらクオリティの高い動画を背景に使っているため、vimeo有料版を使えば柔軟な設定も可能と思われます。
https://arks-co.com/
参考：https://note.com/ytk141/n/nb1494e4309c0
・モーダル・ハンバーガーメニューも簡単
モーダル・ハンバーガーメニューが手軽に実装可能です。
参考：STUDIOでハンバーガーメニューを実装する方法を解説！ ｜NOROSHI Partners
トレースさせていただいたサイト
有限会社KKI製造部 有限会社KKI製造部は食品パッケージを製造する会社です。
静的で落ち着いた印象もありながら、オーソドックスさやノーコードっぽさ、制約を感じさせないクオリティの高いデザインだと感じました。Studioってこんなの作れちゃうの？って思えるようなサイトが良いと思いこちらのサイトを選びました。
制作は同グループのKKI DESIGN様。ノーコードツールの制作品質を認められたStudioエキスパートに加盟している制作チームで、STUDIO DESIGN AWARDも受賞されたことがあるようです。
作成したプレビューリンク：https://preview.studio.site/live/xmaZGK3dWR
作業省いた部分もあるので、実際のサイトをぜひご覧ください。
参考サイト
特に技術面でのメリットデメリットの詳細な説明があります。
Discussion
Studioによる初心者向け公式ガイド記事