マークアップエンジニアから見た、デザインツール「STUDIO」

コードを書かずにWebサイトを作成できる、STUDIOを使ってみた所感です。
HTML、CSSのプロであるマークアップエンジニア目線で書いてみます。

STUDIOとは？

STUDIOとは、ノーコーディングでWebサイトのデザインから公開までを完結できるWeb制作ツールです。ブラウザ上で動作します。

ちなみに、ブラウザは、

• Chrome
• Firefox
• Safari
• IE11

に対応しているようです。

参照：STUDIOで作成されたWebサイトの対応環境

STUDIOでできること

• WebデザインをGUIで作成
  • モーダル
  • ハンバーガーメニュー
  • iframe埋め込み
• 各UIに適切なHTMLタグを指定
  • id属性も付与可能
  • ドラッグ・アンド・ドロップで入れ子にできる
• titleやdescription等のmeta情報の設定
  • OGイメージやファビコンも設定可能
• お問い合わせフォーム設置
• 独自ドメインの設定（有料）
• 公開

詳しくは、公式のチュートリアルをご確認ください。

いくつかピックアップして解説してみます。

WebデザインをGUIで作成

ドラッグ・アンド・ドロップで各セクションやテキスト、画像等を配置した後、細かい余白やボーダー等を調整していきます。調整の項目がCSSライクで、GUIでCSSを書いているような感覚になりました。

• display: flex;ライクなレイアウト
• CSSの単位はpx % vw (vh) auto flexで指定可能
• positonプロパティは、relative absolutefixedが指定可能
• background opacity border系（角丸とかも） box-shadowあたりを調整できる

疑似クラスは、:hover :focus :activeが使えました。

レスポンシブWebデザインに対応しいて、ブレークポイントごとにデザインを調整できます。（ブレークポイントは、SP・TB・PCの2箇所くらいあるみたい）

また、モーダルやハンバーガーメニュー、iframe埋め込みによるマップや動画も対応しています。

各UIに適切なHTMLタグを指定

各UIのHTMLタグをGUIで指定・変更できます。たとえば、見出しレベルをh2からh3に変更したり、divをarticleに変更したり。

id属性も指定できるので、アンカーリンクとかも対応できます（idを指定したUIパーツをコピペすると、id属性が重複してしまうので注意が必要という豆知識）。img要素のalt属性も指定できました。

ドラッグ・アンド・ドロップでUIパーツの中にUIパーツを入れると、HTMLが入れ子になりました。逆に、外に出すと兄弟要素になったりします。

お問い合わせフォーム設置

お問い合わせフォームのUIが用意されているので、ドラッグ・アンド・ドロップで配置し、配信先を設定するだけで使えます。楽。

独自ドメインの設定（有料）

独自ドメインの設定は有料です。無料版ですと、{subdomein}.studio.designになります。

また、無料版では左下に広告が表示されるようです。

参照：料金設定

STUDIOでできないこと

2020年1月の時点で、以下は未対応でした。

• 一部の擬似クラス、疑似要素の指定
• transitionやanimationでの、細かいマイクロインタラクションの設定
  • :hover時、transitionが設定されていますが、一律っぽいです
• JavaScript全般の操作
• Google Lighthouseでは、パフォーマンスにやや難あり

所感

JavaScriptや細かいマイクロインタラクションが使えない点がネックですが、提供されてるモーダルやフォームの範囲内で十分なWebサイトであれば、特に問題なく使えるツールだと思います。

マークアップの知識があるデザイナーさんと相性が良さそうです。

逆に、HTML・CSSが書けます程度のマークアップエンジニアは、このままでは淘汰されてしまいそうですね。。がんばりましょう(^^)