構築スキルほぼゼロでノーコードツールSTUDIOをさわって思ったこと
こんにちは。
都内の制作会社、NO DEZAINでデザインをしているnaoです。
ふと思い立ち、ノーコードツールSTUDIOの勉強を始めました。
目指せスキルアップ↗
弊社のWeb制作は、デザインと構築の分業制です。
さらに私は紙媒体のデザインが長かったため、構築の知識はほぼゼロ。
ノーコードって言うんだから、そのあたりわからなくてもできるでしょ？ って思ったら結構つまずきます。。
xdやfigmaのようなデザインツールのように自由に配置ができるのではなく、ノーコードではあるものの構築ツールなので、まず基本の操作を覚えるのにひと苦労。
「なんで要素が横に並ばないの？」
「画像のトリミングできないの？」
「画面幅変えるとアスペクト比変わっちゃうんだけど？」
…最初はこんなのばっかり😂
よく考えたら、構築ツールなのでデザインツールとは考え方が違うから当たり前なんだよなぁ。コーディングの知識があるとないとではスタートに差がつくのは仕方ないなと。
そこに気づいたあとは、面白さを感じたこともあり（アニメーションをつけてみて、動いたときは感動✨）割とすんなり基本操作を覚えられたように思います。基本操作を終えたあとは、リファレンスを見ずに仮想LPを作るところまでたどり着きました。
◎何日かさわってみて思ったこと
▶バージョン管理
無料で24時間、有料で最大1年間できるとのことだが、
修正→クライアント確認→やっぱり元にもどす
...のようなことはやりづらそう
▶画像のトリミング
できないのはやっぱりちょっとつらい
▶フォントスタイルの登録
使用しているフォントの登録はできるけど、
サイズ・行間・ウェイトなど細かな設定は登録できない？
但し、合成フォントが作れるのは嬉しい◎
▶コンポーネント化リスト化とシンボル化で使い分けるのが慣れるまで複雑そう
（画像やテキストを書き換えたい場合はリスト化！）
▽2023.08.02追記
コンポーネント機能が実装されたそうです。
神アプデ！！
https://blog.studio.design/ja/posts/component
▶パス
自由なパスは書けない
複雑な形は画像のトリミングと同様、フォトショやイラレ、figmaで作るしかなさそう
（流体シェイプや、ボタンの中につかう→や>など…）
▶CMS情報の登録を先にしておかないと、▽2023.12.01追記
後からできたデザインには紐づけできない？
ちょっと調べてみたい
これはできました。わたしの勉強不足！
ページを増やすときに動的ページを選択すればok。
▶メニュー1ページものにハンバーガーメニューを作っても
アンカーリンクを設定できない？
▽2023.12.01追記
これもできた！
以前にできなかった原因は不明。。。
▶複雑な動きやデザイン
これはまだ、STUDIOではなく自分たちで進めた方がクオリティ良いものができそう。ただ、プランによってはコードを埋め込むこともできるようになったようなので、今後もアンテナをはりづつけたい
https://blog.studio.design/ja/posts/customcode
トリミングできない/パスを書けない部分、また入れ子の構造を作るときにゼロからだとかなり悩むので、xdやfigmaでざっくりでもいいので、デザインラフを作ってからの方が良いのかな…
少なくとも私はそのやり方がフィットしそう。
実際に、デザインを先に作ってからSTUDIOで実装するというやり方をしている人も多いようです👀
◎やってよかった部分
▶簡易的なページ、複雑な動きが必要ないページであれば、実務でも十分使えそうなことがわかった
▶構築の際の入れ子の構造など、理解を深められた
▶コーダーさんの苦労に気づくことができた（スクロールトリガーのアニメーションだけでも、こんなに設定が複雑だなんて…）
考え方が構築よりなので、自ずとWeb制作において大切なデータの構造などを理解を深めることができました。
xdやfigmaでデザインデータを作る際に、細かな部分での意識も変化しそうです。
また、選択肢として持っておくべきスキルでもあると改めて感じ、基本操作がスムーズに出来るようになったことで、この先お仕事として使う場面にも柔軟な対応が可能になったと思います✌
以上、学びの多かったSTUDIO練習についてでした。
ここまで読んでいただきありがとうございました☕
NO DEZAINはWebサイト制作を中心としたデザイン会社です。
Webサイト制作/グラフィックデザインのご相談がございましたら、お気軽にお問い合わせください☺
▼NO DEZAIN
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？