こんにちは、のっちです。

先日、STUDIOのワークショップに参加しました。
STUDIOは、日本発のデザインツールで、最近色々なところで使用されて話題になっています。今回は、そのワークショップの内容と、参加して感じたSTUDIOの特徴について書きたいと思います。

STUDIOとは

STUDIOは「コードを書かずに、あなただけのサイトを。」をコンセプトにしたデザインツール。ポイントとしては以下の点です。

①コーディング不要
sketchやPhotoshopのようにデザインしたものがそのまま公開できる。コードは1行も書かない。

②自由にレイアウトできる
wixなどのようにGUIで作ったものをそのまま公開できるツールはこれまでにもあったが、STUDIOは完全に自由にレイアウトできるところがポイント。思い通りのデザインを作ることができる。

ワークショップでは出てませんが、STUDIOで作ったサイトをいくつかご紹介。

designshipのイベントサイト

ハルカナさんのポートフォリオサイト

それでは、早速作成開始。今回は、こちらのサイトを例として作成します。

公開までのロードマップがわかる

アカウントを作成してページ名をつけると、このような画面に移動します。（ちょっと縮小しています）

項目は5つのみ。上ふたつがデザインに関すること（デザイン編集とメンバーの招待）、3つ目が公開設定となっていて、全体が見通しやすい。OGPの設定や外部サービスとの連携もこの中に含まれており、公開までがとても近く、見通しやすい印象です。

ボックスレイアウトの考え方を理解する

デザイン画面を開くとこんな感じ。

sketchやPhotoshopなどと似ていますが、左右両端にカーソルを持っていくと、中に入れるコンテンツやページ名が出てくるのが違い。（この画面ではピン留めしています）画面いっぱいまでデザインに使うことができます。

STUDIOではコーディングしない分、レイアウトの段階から、コーディングと同じようにレイアウトしてデザインする必要があります。それはボックスレイアウトの考え方です。

ボックスレイアウトは簡単に言うと、箱を敷き詰めて、その中にテキストや画像などを入れていくやり方。それぞれの箱や要素の並べ方を定義することで、幅広い種類の画面に対応することができます。

それぞれの要素（箱）の間隔であるmarginと、要素（箱）の中の余白であるpaddingの知識が必要になります。
例えばヘッダーだと、こんな感じで箱を敷き詰めて、その中にロゴやテキストを埋め込んでいきます。

参加者の中では、この考え方を元々知っている人と知らない人で、その後の進捗スピードが大きく違っていたように感じます。

ヘッダーを作る

それでは実際にヘッダーを作ります。
まずボックスを敷き詰める必要があるので、左からboxをドラッグして上に置きます。そしてそれを広げるイメージ。この幅が実際の画面での幅になります。

幅の単位はもちろんpxもありますが、% / auto（自動調整）、flex（残りの幅を使う）があります。

そしてその中にさらにボックスを敷き詰めるので、boxを先ほどのboxの中に入れます。（きちんとホールドしないと、すでにあるboxの上や下にレイアウトされてしまうので注意）
これが、boxのなかにboxを入れて、その中にboxを入れた図。

この中でboxの大きさの調整を行います。そして左側にロゴ、右側にテキストをそれぞれ入力します。
要素が複数ある場合は、その並べ方を上から順、左から順、そして幅まできたら折り返す並べ方などがあり、要素の揃え方は上下左右で揃える方法があり、画面幅が変わってもレイアウトできるように設定されています。
こんな感じで選択します。これはふたつの要素を上下でどのように配置するか。デザインがかわいい。

今回は左から順で右揃えに設定。marginを調整してヘッダーの出来上がりです。

何か困ったら、下のヘルプを参照して、動画を見ることができる仕様になっています。

リソースが数多く用意されている

次にヒーローヘッダーの部分。

同じ要領で、boxを入れていき、中に要素を詰めていきます。こんな感じ。

馴染みがない考え方だと最初は慣れるのは大変ですが、わかると作っていけます。
画像に関しては、STUDIO内にunsplashなどのサイトから多くのリソースが用意されており、検索や利用がスムーズに行えます。

また、アイコンについても、material iconやfont awesomeからアイコンがあらかじめ用意されているので、STUDIOの中で検索して使えます。

アイコンの色もそのまま変更することができるので、かなり使い勝手が良いです。

簡単にレスポンシブ対応

そのようにして、ヘッダーからフッターまでを作成していきました。ここまで2時間弱くらいだったでしょうか。

今はPCサイズのレイアウトを作ったので、次はモバイルサイズのレイアウトを作り、レスポンシブ対応する必要があります。

レスポンシブ対応の基本的な考え方は、
対象の要素それぞれにルールを設定するのではなく、
画面サイズを指定し、その幅で実際にレイアウトを作成するイメージです。

例えばiPhone対応したいとなれば、画面上でiPhoneサイズ375pxを選びます。するとこんな画面になります。だいぶ変な感じ。

この幅で、それぞれのboxや要素の大きさを変更します。ベースとなるboxの幅を375px、その上のそれぞれのboxの幅を100%に指定（つまり1行にひとつ）し、それぞれの要素が回り込むように並べます。

すると、このようにレスポンシブ対応できます。

基本的には作成した画面幅より小さいものは同様の対応をする、ということになるので、メインで対象とする機種を中心に数画面デザインするといいと思います。

作り方としては、小さいものを大きくしようとすると、どうしてもレイアウトが崩れてしまうことが多いので、まずPCサイズを作り、そのあとモバイル対応していく流れが作りやすいそうです。

公開設定

通常はデザインが出来上がったらコーディング...となるところですが、STUDIOの場合は、この後すぐに公開設定。

もう公開できちゃうってやばいです。結構テンション上がります。現在は無料でも14日間の公開ができます。

最後に質疑応答。質疑応答では、主に以下の内容の質問がありました。

「作ったサイトのコードを出すことはできるのか（それを編集することができるのか）？」

→現状はコードを吐き出す仕様にはしていないので、STUDIOで作成したものを他者がコードで編集することはできない。

ハンバーガーメニューなどは出る？

→来月に大きくアップデートするので、そのタイミングでリリースします。エンジニア頑張ります。

とのことでした。これからのアップデートに期待です！

静的なページに使わない手はない！

これで、ワークショップのメイン部分は終了。時間にして2時間程度だったと思いますが、これだけでもう公開できてしまうのは本当に頼もしいです。

慣れてしまえばsketchなどとそれほど変わらない速さでデザインでき、そのまま公開できるので、イベントページやティザーサイトなど、静的なページを作るのに最適という印象です。

さらに、CEOである石井さんやCPOである甲斐さんはデザイナーとしてUIに妥協しない方々なので、そのデザイン性もお気に入りポイントです。

もちろん僕のようなデザイナーにとって嬉しいものですが、ともするとエンジニアの仕事を奪うことになるのでは？という懸念があり、来ていたエンジニアさんに懇親会の時に話を聞いてみました。
すると、「余計な工数を簡略化でき、力を割きたいところに注力できる」ということで、エンジニアからしても効率よく仕事を進めていくために使いやすいツールになりそうでした。

来月くらい？に大幅なアップデートをするということで、これからも楽しみなツール。日本を代表するデザインツールとして、世界に羽ばたいて欲しいです！