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 使ってみた。個人的キラー機能：
・インポート／エクスポート
・テンプレート自作
これができれば爆発的に普及しそう。

STUDIO | コードを書かずに、Webサイト制作を完結。 https://t.co/kSBrXFNXwe

— 村野真軌 @ Webエンジニア・サービス開発 (@samemuramura) May 11, 2020

その他雑感

チュートリアルがとてもわかり易かった。WEBサービスのオンボーディングとして参考になる

プロパティ編集するパネルが上段のメニューバー下にあるのは最初に斬新で戸惑うが、すぐ慣れるし操作性もとても良い