みなさんSTUDIOご存知ですか？😀💡
コードを書かなくても
直感的に要素を配置して
webサイトを作れる優れものです❤️🤭
gifではハンバーガーアイコンを作成しています。
要素をドラッグして配置できて
すごく簡単に作れることが分かると思います💃
非常に便利ですが
その分こまかいことが
できなかったりもします😖💦
STUDIOを使った案件を受けたので
始めるにあたっての注意事項や
最初にしっておくべきことを
自分のメモ的に残しておきます✍️(1日目)
https://studio.design/ja
公式ガイド：https://help.studio.design/ja/
公式youtube：https://www.youtube.com/c/STUDIOJapan/videos
できないこと＆注意事項
デザイン通りにやりたいけど
現実的に不可能だった…！
なんてことのないようにしたいですね。
要素の単体選択ができない
要素がたくさん重なっている時に
1つだけ選択したいことがありますよね❓💡
command推しながら選択などが
できれば良いのですがそれができません。
要素をドラックして移動させたい場合
拡大して頑張って要素を掴むしかないです。
ブレークポイントを任意に変更できない
レスポンシブ 対応で
任意に変更できたら便利ですが現在はできないようです。
基本的にwidthは%, heightはautoで対応しましょう。
各デバイスPC, タブレット, スマホそれぞれの
最小サイズから要素の%を割り出し
作成していくのが良いと思います💡
デザインから入る場合はこちらを考慮して
配置していくとスムーズです。
width, height以外で%指定ができない
position: absolute;top: 50%;
などの%指定ができません。
画像のようにcloseボタンを作る時
❌部分のdivはposition: absolute;top: 50%;
left: 50%;
にしたいですよね…！？
そしてtransform: translate(-50%, -50%);
にしたいですよね…！？
できないんです〜😭
上のタブBoxからMotionに変えるとtranslateの設定はあるんですけどね…
余白で%を使うことは基本的にないと思いますが、
これも同様に設定自体ができません。margin-right: 10%;
アニメーション系
スクロールアニメーションや
無限の繰り返しアニメーションもできません。
他できないことや有料との違いなど
感想
直感的で簡単…
ではあるものの
それゆえ全てを直感で操作しなければならない
という面も目立ちました🤔
とはいえ
デザインがシンプルな場合は
わざわざコードを書かずとも作れるのは
かなり効率的だと思います。
また、おしゃれなテンプレートもそろっているので
自分のポートフォリオ を載せたい！
早急につくりたい！
なんて場合には非常に頼りになりそう。
デザインによって
コードにするか
STUDIOを使うか
使い分けをすると良いかもしれません🎈🧸