Help us understand the problem. What is going on with this article?

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

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

STUDIOとは?

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

ちなみに、ブラウザは、

  • Chrome
  • Firefox
  • Safari
  • IE11

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

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

STUDIOでできること

  • WebデザインをGUIで作成
    • モーダル
    • ハンバーガーメニュー
    • iframe埋め込み
  • 各UIに適切なHTMLタグを指定
    • id属性も付与可能
    • ドラッグ・アンド・ドロップで入れ子にできる
  • titledescription等の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に変更したり、divarticleに変更したり。

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

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

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

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

独自ドメインの設定(有料)

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

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

参照:料金設定

STUDIOでできないこと

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

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

所感

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away