開発ブログ

【日記】1日目:STUDIOはコーディング不要!だけど、できないこともある

みなさん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を使うか
使い分けをすると良いかもしれません🎈🧸

-開発ブログ

© 2020 aLiz Nuxt