今どきのナウいWebディレクター御用達な便利ツール「STUDIO」

こんにちは。今をときめくディレクター山本です。

この現代、ITによる作業効率化ががしがし進んでいます。
情報の共有はクラウドで。
デザインは手書きからPhotoshopをはじめとしたデザインツールへ。

そんな効率化の波にディレクター界隈もぜひ乗っかりたいところ。
というわけで便利なツールないかな～～～～と探し回って見つけた、超絶便利ツールをご紹介します。

「STUDIO」

日本人が作ったらしいこのSTUDIO。
”サービス作りのための次世代デザインツール”を目指して開発されたツールらしいですが、つまるところ以下のようなことを言いたいらしいです。

１．今のサービス制作のフローはデザインと開発のフローがバラバラだぜ
２．開発はプログラムコードで書くのに、デザインはコード関係ないデザインツールだよな
３．おいおいそいつァ問題起きまくりだぜ
４．じゃあ実装のルールでデザインができるツール作ろうぜ！
注：あくまで私個人の解釈なので、若干の相違があるかもしれません。何卒。

これでもまだよくわかりませんよね。
百聞は一見にしかず。というわけで実際に触ってみましょう。

 

STUDIOでデキること

STUDIOでできることは、大まかに以下３つ。

ワイヤーフレームの作成
簡易的なデザインの作成
ブラウザ上でサイトの動作確認

順番に説明していきます。まずはワイヤーフレームの作成から。

 

ワイヤーフレームの作成

まずはこちらの編集画面をどうぞ。

結構シンプルな画面ですね。
ここに四角やらテキストやらを配置してワイヤーフレームをつくることができます。

ありがたいことに、ワイヤーフレームのテンプレートを用意してくれているので、それを使うもよし。（画面左側にマウスを持っていくと、挿入するボックスやテンプレ一覧が出てきます）

ボックスやテキストなどを使用して、１からワイヤーを引いてもよし。

そして出来上がったワイヤーがこちら。ブラウザ上で確認できます。
https://preview.studio.design/OC6WlgGISVjJ2Wox5f7GclQPVbP3ZJf2

テンプレートを駆使すれば、3～5分程度でここまでできます。
もちろん慣れればさらに凝った構成のワイヤーを作成するのもあっという間でしょう。
自分はまだその域まで達せていませんが。

ここまでの内容で、
「え、それって他のワイヤー作成ツールと変わらなくね？？？」
と思われた方、大間違いです。

STUDIOのすごいところその２はこちら。

 

簡易的なデザインの作成

STUDIOでは、ワイヤーだけでなく、デザインも作成することができます。
例えば、テンプレートを使ってこんな感じや、こんな感じに。

ここから画像や色を差し替えるだけでも十分すぎるほどのデザインができますし、要素を足したり消したりいくだけで簡単にオリジナルデザインを作ることも可能。

ある程度HTMLの知識さえあれば、要素を放り込んでいくだけで何でも作れちゃいます。
恐るべし、STUDIO…

さて唐突に出てきたHTMLですが、次の魅力紹介でその理由をお伝えします。

 

ブラウザ上でサイトの動作確認

先程のデザインテンプレをもう一度開いてください。
では、開いたまま画面の幅を変えてみましょう。
どうでしょうか、画面の幅によって自動で表示を調整してくれていませんか。

これがSTUDIOののすごいところで、ワイヤーや作成したデザインを、様々な画面幅で確認できるのです。

STUDIOが開発された背景は、「デザインも開発も同じツールでやっちゃえばよくね」があります。
そこで、STUDIOはHTML要素を取り入れてワイヤーやデザインを作成するツールとなりました。

実際に触ってもらえばわかりますが、ボックスの配置には一癖も二癖もあります。
ボックス一つ一つに対してパディングやマージンが設定できたり。
ボックスサイズはpx,%,auto,flexから選んだり。

既に知識を持っている方々にとっては導入コストなどほんの数分～数時間でしょうか。
逆に知識を持たない方々にとっては少し敷居が高い？ような印象です。

とはいえ、ワイヤーの時点で各要素のサイズ感を把握できたり、デザインを組みながらどのような表示がされるか確認できたり、今までにないツールであることは明らか。
使いこなせれば生産性は大幅に上がるのではと思います。

 

まとめ

なんでもできちゃうスーパーツール、STUDIO。
調べてみると、プロトタイプ作成ツールとも呼ばれているようですね。
なんかかっこいい……

いろいろと便利なこのツールですが、現在無料で利用できます！（2018年3月現在）
他のこういったツールでは有料版が多く出回っている中、大変ありがたい。
そのうち有料化される可能性はもちろんありますが、それまでに使い倒して、あとは金額次第で継続利用も視野ですね。

私もまだしっかり使いこなせているわけではないので、使っていく中で操作方法をまとめていけたら記事に起こそうかと思っています。
どうかディレクターの皆さまのお力になれれば幸いです。

 

4/25追記

どうやら今までは仮リリースだったらしく、4月から正式リリースされました。
問い合わせしてみたところ、現在はまだ静的ページの作成のみが対応可能とのこと。
新たに料金体系もできあがり、月額でサイト公開までできるようになるとか！
ばしばし開発も進んでいるようですし、やはり今後に期待が高まります。