これは何
初めてノーコードツールであるSTUDIOでサイトを作ってみたので、つまづいた点や気づきなどをまとめてみました。
便利ポイント
まずはSTUDIOを使ってみてめちゃくちゃ便利だと思ったところを紹介します。
無料でサクッとサイトの公開ができる
なんといってもこれが楽です。
サーバーとかドメインとかお金とか色々と面倒なことを考えなくても、STUDIO上でぽちぽち作って「公開」を押せばサイトの公開ができちゃいます。
Webの制作に詳しくなくても、OGPやtitleやDescriptionを入れる場所が用意されているので、こういう部分も忘れづらいです。
もちろん無料プランだと使える機能は制限されているので、この辺は必要に応じてプランを確認してください。
Figmaからインポートできるプラグインが便利
Figma to STUDIO というプラグインを使うと、FigmaのデータをSTUDIOにインポートできます。
特に私はSTUDIOの操作に慣れていなかったので、STUDIOでデザインを再現していくのが結構大変でした。
このプラグインを使うとそこをサクッとできるのでかなり時短になります。
Figmaのデータを作るときに「Auto layout」を使っておけば、だいたい狙い通りに生成されてくれます。
また、ページを丸ごとインポートすると重くなったり崩れたりするので、セクションごとなどに分割してインポートするとうまくいきやすいです。
作りながらデザインを調整できる
STUDIOはノーコードツールなので「作りながらデザインする」みたいなことがしやすく、簡単めのデザイン調整ならFigmaを挟まずできたのが楽でした。
もちろんデザインツールではないのでデザインするならFigmaの方が楽なんですが、「実際のデータを反映しみたらちょっと変」みたいなときにSTUDIOでサクッとデザインの調整ができるのが便利でした。
とはいえ便利だからといってなんでもSTUDIO上でやりすぎると、「先にFigmaでちゃんと考えてから反映した方が早かったな」になるので、ラインは注意が必要です。
速い
ここまでのポイントを踏まえて、サイトをとにかくスピーディに作るとができました。
1枚もののページとかだとすごく便利な感じがします。
アクセシビリティへの取り組み
代替テキストやaria-labelとaria-hiddenを設定できたり、見出しやリストなど必要なタグをきちんと設定できる点も良かったです。
また、STUDIOがアクセシビリティの取り組みを公開・発信しているので安心して使うことができました。
STUDIO Communityが便利
STUIDIOに関する機能改善のQ&Aが投稿されていて、STUDIOを使っていて詰まったところの答えが見つけやすくて助かりました。
「この機能ないのかな？」とかも大体欲しいと思うやつは要望がすでに出ているので、「まだない機能なんだな」というのがわかりやすくて沼にハマらずすみました。
個人的に使いづらかったところ
逆に使ってみて使いづらいと感じた点をまとめます。
diffが見づらい
当たり前ですがノーコードツールなので、diffが見づらいと感じることがありました。
STUDIOはbreak pointを設定してレスポンシブデザインができるのですが、「どの要素をどのブレイクポイントで変更してるんだっけ？」がパッとわからないのがちょっと面倒でした。
また、公開済みのサイトを更新するときも、diffが見れないので「間違えていらないところ触っちゃってないかな..」と不安でした。
この辺はうまいコツとか知ってる方いたら教えて欲しいです...
詰まったところ
最後にちょっと詰まったところをメモしておきます
画像のサイズが auto にできない
画像のサイズにautoを指定したかったのですが、どこからするのかわからなくて少し詰まりました。
以下のヘルプ記事を参考に、autoを設定したい辺をダブルクリックすることでautoにできました
「ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません」
Figma to STUDIOを使ってFigmaからデータをインポートしたところ、「ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません」というエラーが出てしまいました。
このエラーが出た時はデータが保存できてないので、リロードとかすると変更が消えます
私の場合原因はFigmaで余白をRectangleで作っていたり、下線をつけるためにFrame増やしたり、Figma上で見た目を実現するために増やしたレイヤーでした。
Figma to STUDIOを使うときは、なるべく小さい単位でインポートしてエラーが出たら丁寧に造りを直していけば基本大丈夫です。