ノーコードツール「STUDIO」を使ってみた①基本機能・一般サイト編
今回から何回かに分け、ノーコードツール「STUDIO」の使ってみた感触について投稿していこうと思います。
基本機能
一般的なサイトはもちろん、CMSの構築やお問い合わせフォームの設計も可能です。
■料金プラン
無料から作成可能です。動作検証など基本的な機能は網羅できるイメージですが、ブログなどのCMSとして運営する場合は記事数がかなり限られるため有料プランか別ツールの検討が必要そうです。
https://studio.design/ja/pricing
■管理画面
アカウントを作りログイン後、プロジェクトリストが表示されます。
画面のようにリストアップされるのですが、各プロジェクトをマウスオーバーしたときに表示される「Dashboard」からプロジェクトの基本情報設定、「Editor」からページ構成の設定ができるようになっています。
https://gyazo.com/caab5125ecefc99ee162c9b288574473
各画面の編集内容
■Dashboard
プロジェクトの基本情報の設定画面。
サイト名やサブドメインの設定、CMS記事の編集、問い合わせ内容の管理などが可能です。
https://gyazo.com/16484526b39465e6e0a447b5f3962fec
■Editor
サイト内構成ページのレイアウト、デザイン編集画面。今回は適当にテンプレートから作ったものをご紹介します。
https://gyazo.com/2dc4cb1bcac08a97b2cabab556c05221
①ページリスト
プロジェクトのページ構成を編集。グロナビの構成に合わせるのがいいみたい。
②ページダッシュボード
編集中のページリストが表示されます。用途はPhotoshopのタブ形式に似ている。
③選択中コンテンツのメタ情報
選択していないときはページ名やパス、ページコピーや新規ページなどのメタ情報。コンテンツ選択時は余白やサイズなどのスタイル情報を編集できます。
また画面内の左右アイコンをクリックするとコンテンツの追加、各コンテンツのメタ情報編集ができます。
https://gyazo.com/0c14e797e49bf807318f3cdf869eca38
④コンテンツ追加
ボックスやイメージなど色々なコンテンツのテンプレートがあり、クリックやドラッグで任意の位置に配置できます。
配置した後はテキストの編集や配置レイアウト、リンクの設定などができるようになります。特にボックスコンテンツは複数並んでいるものを一気に編集できるので使いやすいです。
⑤コンテンツ構成、詳細編集
配置中コンテンツのレイヤーを参照したり、各コンテンツのタグ構成、ID名の付与などができます。これを使ってページ内リンクなどの設定ができるようになります。
使ってみたまとめ
UIがフラットな構成になっているので初めは編集するのにどこを触ればいいのかなど戸惑いもありましたが、各種テンプレートも充実していてメインのデバイスでのプレビューもできるのでシンプルなサイトであれば無料プランでも概ね良いものは作れそうな感触でした。
おおよその作成イメージとしては一般的なサイトの作成フローと同じく、
①共通パーツ（ヘッダー、フッターなど）を作りこむ
②トップページをベースに下層ページをコピペ
③下層ページを作り込み
という流れで作れると思うので、非エンジニアの方がフローを学ぶのにも良いかなと思いました。
反面、ECサイトなどの高度なサイトは厳しそうなイメージで、デザイン特化のサイトもどこまで実装できるかは要検証なのかなといったところです。
※細部のTipsなどは公式Youtubeも合わせて参考にしてみてください。
https://www.youtube.com/channel/UCh4_wCvICgiHg0utNFziOoQ