![見出し画像](https://assets.st-note.com/production/uploads/images/26374367/rectangle_large_type_2_20f4f7e7b4a8a144dbdb6b964c77c88e.jpeg?width=1200)
Webデザインツール STUDIOをCo-LABO MAKERで使えるか検証してみました
Co-LABO MAKERで開発のお仕事をしています。
Co-LABO MAKER では、毎週社内勉強会を開催し、自ら学び成長する文化の形成を進めています。
この記事では、勉強会で調べた STUDIOについての検証結果を紹介します。
検証の目的
・STUDIOでWebシステムのデザインを作成し、プロトタイプ、コンポーネントカタログとしての利用ができるか検証する
・LP作成ツールとして、ペライチの代替えになりえるかの検証もあわせて行う
検証した項目と結果
サイト全体のデザインを作成するのに、過不足はないか?
・テンプレートから作っていくのが基本。テンプレートの使い方
・CSSと同じように上下左右相対配置して、追加でマージンなどで調整なので、WEBデザインには馴染んで作りやすく壊れにくい
・サイズ調整した際に、オブジェクトが移動しないのは地味に作業が楽
・オブジェクトを重ねると自動でセンターに合わせて配置してくれるのもいい
プロトタイプとして使えるか?プロトタイプとして使えるか?
・ライブプレビューを使えばできる。ハンドオフツール(マージンなど)としても使えるかもしれないコンポーネントカタログとして使えるか?
・使えない。コンポーネント機能がない
ペライチとして使えるか?
・とても良さそう。すぐに公開できるのがいい
・ペライチと比較して、スキルが少し必要だがサイト品質はすごく向上する。手間に対する効果は余りある
・一括選択・編集機能がないので、ページが大きい・多いとメンテナンスがつらくなる
まとめ
Co-LABO MAKER でのWEBサイトデザインとハンドオフツールとして使うのは難しいと感じました。
以前はWEBデザインツールと理解していましたが、どちらかというとペライチよりのツールの印象になりました。
WEBサイトデザイン・ハンドオフツールは、今も使っているFigmaをより使いこなす方向で検討したいと思います。
ペライチとして、今から新規でページ作るのには選択肢になりますが、既に他ツールで実装済み・頻繁な更新もない状況だと動機が薄く感じます。
これに対しては、インポート/エクスポート機能や自作テンプレート機能がでてくると状況が変わってくるので、対応を期待しています。
STUDIO 使ってみた。個人的キラー機能:
— 村野真軌 @ Webエンジニア・サービス開発 (@samemuramura) May 11, 2020
・インポート/エクスポート
・テンプレート自作
これができれば爆発的に普及しそう。
STUDIO | コードを書かずに、Webサイト制作を完結。 https://t.co/kSBrXFNXwe
その他雑感
チュートリアルがとてもわかり易かった。WEBサービスのオンボーディングとして参考になる
プロパティ編集するパネルが上段のメニューバー下にあるのは最初に斬新で戸惑うが、すぐ慣れるし操作性もとても良い
サポートではなくても、有意義な内容と感じて頂けましたらスキやシェアをしてもらえると嬉しいです!