コードを書かずにWebサイトを作成できる、STUDIOを使ってみた所感です。
HTML、CSSのプロであるマークアップエンジニア目線で書いてみます。
STUDIOとは？
STUDIOとは、ノーコーディングでWebサイトのデザインから公開までを完結できるWeb制作ツールです。ブラウザ上で動作します。
ちなみに、ブラウザは、
- Chrome
- Firefox
- Safari
- IE11
に対応しているようです。
STUDIOでできること
- WebデザインをGUIで作成
- モーダル
- ハンバーガーメニュー
iframe埋め込み
- 各UIに適切なHTMLタグを指定
- id属性も付与可能
- ドラッグ・アンド・ドロップで入れ子にできる
titleやdescription等のmeta情報の設定- OGイメージやファビコンも設定可能
- お問い合わせフォーム設置
- 独自ドメインの設定（有料）
- 公開
詳しくは、公式のチュートリアルをご確認ください。
いくつかピックアップして解説してみます。
WebデザインをGUIで作成
ドラッグ・アンド・ドロップで各セクションやテキスト、画像等を配置した後、細かい余白やボーダー等を調整していきます。調整の項目がCSSライクで、GUIでCSSを書いているような感覚になりました。
display: flex;ライクなレイアウト- CSSの単位は
px%vw (vh)autoflexで指定可能 positonプロパティは、relativeabsolutefixedが指定可能backgroundopacityborder系（角丸とかも）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が書けます程度のマークアップエンジニアは、このままでは淘汰されてしまいそうですね。。がんばりましょう(^^)