Studioファーストインプレッション
こんにちは。だいちゃんです。
ボス の司令でStudioに触れてみました。
ちょこちょこと1時間強くらい触っただけの新鮮な気持ちをメモしておきます。
結論：8割これでいい
もちろん、細かい部分を作り込みたくなったら、カスタムコード（要・有料プラン）をゴリゴリ書いたり、今まで通りスクラッチでコーディングしたほうが作り込めるし楽な面もあると思います。
ただ、Studioの無料版で使える機能だけに割り切ることで、シンプルで（それでもアニメーションとかでリッチにできるけど）保守性の高いWebサイトを作れるんじゃないかなと思いました。
Webサイトごとに向き不向きはあるものの、副業でお受けした範囲だと基本Studioに乗り換えても耐えられそうな印象でした。
Studioが向いてるサイト
- ページ数が少ない
- 静的
- チラシやポスターくらいの位置づけで公開したいWebサイト
Studioが向いてないサイト
- ページ数が多い
- 動的（会員制サイト、SNSみたいなWebアプリ）
- インタラクティブなサイトを目指している
よかった点
Studioを使ってみて、この機能便利～と思った部分です。
やっぱりGUI最高
人間ってやっぱり視覚情報が大事ですね。GUI操作で公開できるWebサイトが制作できるのは直感的でいいなと感じました。
コードがわからない方でも編集できるのも利点になると思います。
リアルタイムプレビュー
公開前の制作中のページをリアルタイムでいろんなデバイスから確認できるのも魅力でした。
今までの開発方法だと、プレビュー用に別のサブドメインなりディレクトリを用意したり、使ってるフレームワークによっては数分待たされる generate が必要だったりするので、気軽にプレビューできるのはありがたいです。
フォームが標準搭載
contact form に何気に悩まされることがあったり、スクラッチでも設定が面倒だったりするので、ドラッグ・アンド・ドロップでフォームが作れるのはありがたい...
コンポーネント化が楽
ボックスを右クリックで簡単にコンポーネント化でき、文字などの変数は「プロパティ」として保持されます。
コンポーネントを追加して、レイヤー画面からプロパティを変更するだけで、同じ構成のパーツを量産できます。
コンポーネント化しておくことで、統一感も作業効率も爆上がりするので、マスト機能です！（最初はコンポーネントにできるのを知らず、ブロックをコピーして使ってました...）
ヘルプが豊富
機能ごとにヘルプがしっかり用意されてるので、基本操作で困ったら読むようにしています。画面キャプチャも多くてわかりやすい。
ただ、できる/できない系の判断には使いづらいので、そういうときはGoogle先生に聞くほうが早いです。機能名が分かってて使い方がわからない、ってときに役立つかな、と。
できないこと
基本的なページを作るなかで困ることはほぼなさそうだったものの、割り切らないといけない部分はありました。
Studioを使ったWebサイトを制作するうえで、デザイナー・ディレクターを含め、以下の「できないこと」だけはあらかじめ把握しておくとトラブルを回避できそうです。ちなみに、基本的に無料版を前提にしています。カスタムコード書けばどうにかなる部分も大いにあるので、どれくらい必要な機能かについては、案件ごとに予算や保守性の低下リスクと相談ですね。
スクロールイベント系は基本できない
要素が出現したときにアニメーションをかける、くらいのことはできます。
ただ、CSSの sticky のようなことができないので、画面上部に吸い付くような動作は別途コーディングが必要です。また、カスタムコードを書いたとしても、JavaScriptでスクロールイベントが取れない制約があるらしい？
margin: 0 auto; ができない
div などのブロック要素を中央に配置するときの常套手段が使えません。
代わりに、親を width: 100% で追加して、その子要素として中央に配置したい要素を置く必要があります。（子のブロック要素の配置は簡単に設定できます）
calc や rem 、min/max などは使えない
主にフォントサイズをレスポンシブ時にもいい感じに拡縮するようにしたいときに使っていたCSSの機能が使えないです。px 固定で指定する必要があります。
モバイルだけフォントサイズを変えたりはできるので、どうしても気になる部分はブレークポイントごとに固定値で指定することになりそうです。
Gitで管理できない
バージョン管理も弱い印象です。ちょっと前に戻る分には操作履歴から遡れますが、履歴に残るのはフリープランだと1日だけ。Businessプランでも360日までなので、1年前のバージョンを確認することはできないようです。
しかも、バージョンを戻す場合、サイト全体がその時点に戻るらしいです。
企画モノとかは別ページとして生かしておく必要がありそうです。
Firefoxやモバイルからページの編集ができない
大きなデメリットにはならないと思いますが、Firefoxで編集ページ開くと、Chromeを誘導してきます。普段Firefoxをメインで使ってる人はちょっと注意が必要かも。
app.studio.design/projects を開いた時点でアウトなので、CMSの記事編集とかもダメそう。
Safariは未検証。
直感的な操作でWebページが作れるので、デザインとコーディングを並行して進めてる感覚になりました。
とはいえ、HTML・CSSやデザインの知識が全く不要になる、ということはなく、できる/できないの判断や、破綻しないようなレイヤー構成などを考える上で、これまでの経験は活かされると感じました。
参考
