Globee Advent Calendar 18日目の記事です。
こんにちは。再びの登場失礼します、Globee２人目のデザイナー苗村です。
(前回記事はこちらです)
これまでデザインの領域でグラフィック・イラスト・動画等を具体化してきましたが、WEBデザイナーと名乗ったことは一度もありません。Globeeにジョインする前に2度、LPデザインをした経験がある程度。WordPress・HTML等の知見はないに等しいです。そんな私がSTUDIOを使ったお話しです。
STUDIO
「WEB制作を、ノーコードで。」のコピーの通り、コーディング不要でドラック＆ドロップで簡単にWEB制作ができるツールです。
STUDIO ▶️ https://studio.design/ja
公開されたLP
abceed法人サービス
ABCEED ENGLISH
導入の目的
開発部としてサービス(プロダクト)の開発にリソースを確保したいという点に尽きます。リソースの確保は多くの企業が悩む点ではないでしょうか。
STUDIOを使う
❶Figmaでデザイン
今回はFigmaでデザイン作業を進めました。この段階でSTUDIOからデザインするパターンも少なくないと思いますが、今回はデザインが概ねOKとなってからSTUDIOで制作しました。
❷Figma to STUDIO
ざっくり言うと、Figmaのデザインデータをコピー&ペーストでSTUDIOへ持っていくプラグイン。Beta版で利用しましたが、現在は正式版がリリースされています。
Figma to STUDIO
ある程度崩れないようにグループ化しておく等、コツはありますが、ペースト時にタブレット・モバイルの表示崩れは起こります。Beta版だからと言うわけでもなさそうです。
Figma to STUDIOは今後も更新されていくと思うので、更なる進化に期待します。
❸STUDIO
３ステップ目でSTUDIOで調整していきました。この段階でFigmaは素材書き出し用の下請けになります。作業のしやすさは冗談抜きで感動したのを覚えています。ほぼリアルタイムでプレビューに反映されるので、トライ&エラーがとにかく速いです。イメージしていたWEB制作のコミュニケーションコストがごっそりカットされます。
調子に乗ってアニメーションをつけ(空気感や印象はとても良い反面、表示速度や遅れがネックでした。特にモバイル)最終的に削除したのはここだけの話です。
ただ、全てが直感的に分かり、最も簡単に作業ができたわけではありません。チュートリアルや解説してくれているサイト等を参考に進めたのは事実です。
運用・課題
まだ公開されたばかりなので、様子を見ながら課題等に向き合っていくことになります。現状は一部STUDIOで運用できていないので、全てをSTUDIOで完結できる事が１つのゴールです。
個人的な楽しみと期待・まとめ
先日、LottieFilesからアニメーションをSTUDIOのWebサイトに埋め込めるようになったとの発表がありました。Lottie × STUDIO
使い方次第で表現の幅は間違いなく広くなりそうですし、アニメーターの活躍の場もまた１つ増えたのかなと明るく捉えています。
より効果的、かつポジティブなビジュアルコミュニケーションが活発になるといいですね。
手軽に素早くWEB制作ができてしまうノーコードツールSTUDIOに感謝し、結びとさせていただきます。
採用情報
株式会社Globeeでは、現在エンジニア採用を積極的に行っています。まずはカジュアル面談にて弊社の「教育」にかける思いや「ものづくり」の考え方についてお話できればと思います。お気軽にご応募ください。
株式会社Globee 採用ページ