EZO -いいぞ-

1分で考えたブログ名。特に、意味はない。

STUDIOを使ってみた話

自分のWebページを作っておきたいなあと言い始めて半年以上放置してしまったので、話題のSTUDIOを使ってゼロから作ってみました。 成果物はこちら↓

clank3140.studio.design

使う前にイメージしていたものとは少し違った部分もあったため、それについて書いていきます。

先に断っておきますが、あくまで「僕のイメージしていたものとは違った」だけで、STUDIOは非常に簡単にWebサイトを制作できる素敵なツールです。
とても使いやすいUIでヘルプやチュートリアルも充実しており、綺麗なWebサイトを手軽に公開できました。

「コードなしでWebサイト制作」とは?

STUDIOはコードを書かずに、完全なレスポンシブのサイトを作成、公開することができます。

STUDIO公式サイトのトップにはこのような一文があります。

僕がこの触れ込みを見たとき、最初に思い浮かべたのはWIXのビルダーでした。
ドラッグ&ドロップで要素を配置していき、まるでPhotoshopなどのグラフィックソフトのように直感的にWebサイトを制作できるおなじみのサービスです。
STUDIOを実際に使う前はこれと似たサービスなのかとイメージしていました。

また、以前のAdobe CCにMuseというソフトがあったことも思い出しました。

helpx.adobe.com

STUDIOもコードを書かずにGUIでパーツを置いていくことでページを作れます。……が、WIXとはターゲット・前提条件が違い、似て非なるサービスであると感じました。

WIX STUDIO
ターゲット これまで全くWebデザインに触れたことがない人 概念は理解している人
HTML/CSSの知識 無くても大丈夫 最低限(マージン、autoの意味、vwという単位など)は必要
省略できる部分 Webデザインの概念理解 コーディング時間

WIXは画像編集のように頭の中にあるビジュアルイメージをそのまま作ればいいのに対し、STUDIOでそれをやろうとするとある程度Webデザインの概念理解が求められるという印象を受けました。

概念を知らないと難しい場面

例えば、以下のようなビジュアルを作りたいと思ったときです。

f:id:clank0920:20190526205133p:plain
画像の上に白い四角+テキストを部分的に重ねたいとき

画像を作るやり方しか知らない場合、

  1. 画像を配置して
  2. 上に白い四角のレイヤーを重ねて
  3. 最後にテキストレイヤーを重ねる

という構成をイメージします。

一方、STUDIOではボックスレイアウトという手法を用いているそうです。

help.studio.design

STUDIOは、実際の開発に使用されるコードをベースにしたまったく新しいデザインツールです。
そのため、STUDIOのレイアウトデザインの手法は既存のデザインツールとは異なります。 STUDIOは実際のWebサイトやアプリケーション制作時に使われている、ボックスレイアウトを採用しています。

上の画像のようなレイアウトをするときは、以下のような構成になります。

f:id:clank0920:20190527133929p:plain
Boxの入れ子構造

こうした上で、白背景Boxの重ね順を1に(デフォルトは0)、右マージンを-350にしています。
ちなみにマージンをマイナスの値にするのはマウスのドラッグ操作ではできず、数値を手入力する必要があります。

重ね順はレイヤーの概念に似ていますが、マージンの値をマイナスにするというのはWebデザイン独特の考え方だと思います。

このようにちょっと変わった見た目を作りたいと考えた場合は、多少のWebデザインのテクニックを知っている必要がありそうです。

上手く使いたいサービス

他にも、hoverで色を変えるという処理をしたい時にテキストしかそれができない(と僕は解釈しました)点など、自分でCSSを書くほうが調整が効くであろう部分はいくつかあります。
※今回の成果物で言うと「CONTACT」欄にあるYoutubeなどのボタンでその影響があります。白い四角部分にマウスオーバーしただけではアイコンの色が変わらず、アイコンにマウスオーバーして初めて色を変化させられます(日本語が下手)

それでも僕の成果物は数時間で作れましたし、手軽にWebサイトを作って公開まで出来るというのは本当に凄いサービスだと感じました。
以前作った僕のWebサイトもどき(途中で投げていた)はこんな感じなのですが、STUDIOを利用したほうが遥かに効率よく美しいサイトができます。最初からそうすればよかったです……。

オチが思いつかない。おわり。