STUDIOとは
「コードを書かずに、Webサイト制作を完結」 できるという国産デザインツール。
「デザインの後のコーディング作業や、サーバーのセットアップは必要ありません。」
「STUDIOでデザインした画面は、瞬時にコードに変換されそのまま公開が可能です。」
という素晴らしさ！！
そして弊社no plan inc.の案件でもよく使うようになりとても便利に使わせてもらっていました。(no plan株式会社の技術スペック）
今回は
おかむー個人のポートフォリオサイトをSTUDIOに変更することにしました。
STUDIOを使う前
そういえばSTUDIOを使う前は、HTMLを生成してホスティングしていました。
フロント
gulp
sass
babelify
pug
サーバー
Route53
Cloudfront
S3
という、よく見る構成ｗ
そろそろ別の技術使いたいなーとも思っていましたが、
ポートフォリオサイトに多くの時間をかけるのももったいないないなぁとも
STUDIOを使う前で大変だったこと
- 久しぶりに触るとjsが動かないのでしんどい
- おかむー自身HTMLが苦手なので結局、うねうねするアニメーションとかかけてない
- おかむー自身HTMLが苦手なので思ったように配置できない
- レスポンシブ対応もしたくない
- 有料のbootstrap的なやつも買って編集していた
STUDIOで書き換えた
とりあえず大枠はそのままにしつつ、見にくいところだけ変更する作戦
以前の構成も、たった並べるだけ
- あれだけかかってたサイトも数時間でできた
- まじで並べるだけなので超ラク
- テンプレートも充実してて、デザインがおかしくならない
- レスポンシブ対応のテンプレートも充実
- modalや遷移、配置のガイドもわかりやすい！
HTML苦手なので、まじで最高です。
作り直したサイト
これだけの見かけのサイトを簡単に作成できてしまった!!レスポンシブも完璧(なはずw)
まじで感謝！！
その他良いところ
- チュートリアルも丁寧でわかりやすい
- svg,gifもいける
- 簡単なモーダルもできる
- idが設定できるので、スムーススクロールも実現できる
- フォームまで用意されていて、指定したメールアドレスに通知される
- 独自ドメインもいける
- Googleアナリティクスもいける
- 将来CMSの導入が予定されている
気をつけたほうがいいかもしれない点
- jsのコードは入れれません
- mp4などは入れれませんのでmovieタグがありません
- 動画はYoutubeとかVimeoのiframeで埋め込みができます
- 戻ると進むが時々バグる
- もちろんgit管理できないので、定期的にページのコピーを取りながらやったりしてました
もしかしたら役に立つかもしれないTips!
-
ヘッダー固定もできる (no plan inc.で使用)
-
動画を流す (ポートフォリオで使用)
- iframeだとYoutubeのヘッダーが出てしまったり、Vimeoの有料会員にならないといけなそうだったので、gifに変換して設定
- ffmpegでとにかく綺麗なGIFを作りたい
まとめ
- みんな、とりあえず、STUDIO、さわっとこう!!!!!
- できないこともあるので、案件によっては用件を確かめたほうがいい!!!!!
- 学習コストは極めて低いです!!!!!
- 開発速度は極めて早いです!!!!!!!
最後に
- もっとTwitterとかでも発信していこうと思っています!!!(宣言駆動開発)
- Twitter: @okamu_ro