UXデザインツール「STUDIO」でのプロトタイプ作成が最高という話

ブログ書くぞーー!! と取り急ぎのブログを立ち上げた のが 1 ヶ月前。 月日が経つのって早いですね(思わず目が遠くなる)。

その内ビルド方法を忘れて記事の更新できなくなりそうな未来が見えるわぁ…と思っていたら、 テンション上がるプロトタイピングツール「STUDIO」を見つけたので、 勢いに任せてその感想を書き散らしてみようと思います。

目次

作成したデモ

百聞は一見に如かず。とにかくどんなプロトタイプが作れるのか見たい!!という方は、 以下からデモで作成したプロトタイプのライブプレビューがご覧いただけます。

  • iPhone 版 ※ 1 ページのみ
  • Web 版 ※ 1 ページのみ
  • sizucca.com(iPhone 版) ※ グローバルナビゲーション部分は遷移可能 (ヘッダーの固定を擬似的に行っているため、デバイスによっては縦領域が少しおかしくなると思います)

※ Web 版はつい先日リリースされたばかりのためか、 デフォルトの表示領域など、ちょいちょいおかしな箇所があります(Web 版なのに WiFi 情報出てたり)。

「でも、このくらいなら他のプロトタイピングツールでも作れますけど…?」と思われた方は、 右上にある表示デバイスの切り替えを行ってみてください (スマートフォンからご覧の方は、画面を回転ロックを外して、画面を回転してみてください)。

▼ こんな感じになる(ハズ)!

どうですか!興奮しませんか!!(しなかったらすいません)

私が「STUDIO スゲーー!!」となったのは

  • 作成の学習コストは無いに等しい
  • なのに、プロトタイプが 1 枚画像ではなくある程度コーディングされたものが生成される

ここなのです!

プロトタイピングツールの使い所

Web 制作の現場において、もはや必須と言っても過言ではないプロトタイピングツール。

Prott が出てきた時もテンションが上がりましたが、それは一瞬で消え去り(私がデザイナーというよりはコーダー寄りのスキルセットだった故イマイチ肌に合わなかっただけで、Web デザイナーにはいいアプリだと思っています)。

Adobe XD の登場で、求めていたものはコレだーー!! と思い実務でも使っていましたが、ここ数ヶ月はリリース情報が Windows 一辺倒で心が離れ気味になり(割とマストで欲している機能が 1 年くらい開発中ステータスから動かないので)。

ここ数カ月間は、もっといいプロトタイピングツールはないのかー、何がいいんじゃー、とプロトタイピングツール難民と化していました。

一言でプロトタイプといっても、私の場合はその目的によって求めるものが違います。

1. アイデア検証用のプロトタイプ

  • デザインスプリントなどで、とにかくアイデアを誰もが分かるように具体化するプロトタイプ
  • 目的はアイデアの見える化(具体化)なので、緻密性は求めていない(求めることができない)
  • 基本、壊す前提のモノ。作って壊してを繰り返し、アイデアの検証を行いたい
  • なので、とにかく手早く形にできるツールがいい

適していると思うプロトタイピングツール

  • ペーパープロトタイプ
  • Keynote などのプレゼンテーションツール
  • Adobe XD

2. UI デザイン用のプロトタイプ

  • 実際のプロダクトの UI デザインをどうするか決めるプロトタイプ
  • 色やマージン、文言など、ある程度の緻密性を求める
  • なので、ページ遷移やコンテンツ要素など、実際のプロダクトに近いモノが作れるツールがいい

適していると思うプロトタイピングツール

  • Adobe XD
  • Photoshop ✕ Prott, inVision, Marvel など
  • Sketch ✕ Prott, inVision, Marvel など
  • 仮のコーディング

3. 開発コミュニケーション用のプロトタイプ

  • インタラクションを考える人と作る人が別人の場合、コミュニケーションの役割をするプロトタイプ
  • 動き以外(ページ遷移やコンテンツ要素)は、多少融通がきかない状態でも構わない場合が多い
  • 実際のプロダクトの動きを再現できるツールがいい

適していると思うプロトタイピングツール

  • Sketch ✕ Framer Studio
  • Sketch ✕ Origami Studio
  • 仮のコーディング

以前はこれらすべてのプロトタイプを一度に作ろうとしていたのですが、Web デザイナー歴十数年にして「一度に作ると失敗できるタイミングが少なく、トータルのコストが大きいので用途ごとに別作成した方が良い」ということに気付きました。

「2. UI デザイン用のプロトタイプ」と「3. 開発コミュニケーション用のプロトタイプ」は、「プロジェクトの目的」が決まったあとの話なので、多少コストをかけてプロトタイプを作成しても(アイデアからひっくり返ることはないので)そこまで問題はないかもしれないのですが。

「1. アイデア検証用のプロトタイプ」の段階では、アイデアの具体化と検証を繰り返して最適な案を決めたい。逆に言うと、アイデアの具体化と検証を気軽に繰り返せるように、気軽にプロトタイプを作成したい。

要は、以下の要件を満たすプロトタイピングツールを求めていました。

  • 低い学習コストで作れる
  • 作る、壊す、が行いやすい(時間的にも心理的にも)
  • 本物のプロダクトと体感がかけ離れていると課題発見ができないので、課題発見できるレベルの完成度のものが作れる

上記にも挙げた

  • ペーパープロトタイプ
  • Keynote などのプレゼンテーションツール
  • Adobe XD

は、どれも一長一短があるので、非常に歯痒い思いをしていた所、以下の記事を発見しました。

日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか

前置きが長くなりましたが、この日本製UIデザインツール「STUDIO」が私の悩みを解決してくれる救世主となるような予感がしたので、見つけて 10 秒後には試用を開始していました。

STUDIO の感想

一言で言うと 最高(になる)かもしれない!!

多少説明していきます。

  • 日本製(!!)
  • 操作が直感的で分かりやすい
  • HTML、CSS をある程度知っていれば、びっくりするほど使いやすい
  • Web アプリなのに画像処理系アプリのショートカットキーがかなり動く。 「元に戻す(⌘+Z)」とか「やり直し(⌘+Shift+Z)」とか。 (あまりに動くので「⌘+S」で保存しようとしてしまうけどそれはできない w)
  • 用意されているコンポーネントや画像のクオリティが高い
  • マテリアルアイコンも標準装備

▼ プロトタイプ作成画面イメージ(2017/08/04 時点)

面白いのは、各ボックスに margin や padding の概念があること。 これは他のプロトタイピングツールには無い概念だと思います(まともに使用経験があるのが Adobe XD しか無いので違ったらスイマセン)。

width と height も、px 以外に %、 auto、 flex という単位が指定できます。 ※ この記事を執筆時点では、単位を変更するには少しコツが必要です(簡単に単位を変更する機能は実装中とのこと)。

ボックス同士の並び替えや上下を揃える(レイアウト)方法も独特です。

▼ 横方向の並び替え

▼ 上下揃え

▼ 動きのイメージ

なんというか、ボックス(HTML でいうノード)に他のプロトタイピングツールの様な位置指定の自由度が無いのです。 位置に関する制御は、margin や padding の指定、並び替えの設定でしか行なえません。

STUDIO を数分触ると、コーダーなら「あれ?これって…」となると思います。

これって、HTML(CSS)じゃん!!

ここが面白いというかすごいと思いました。 プロトタイプの作成方法を、Photoshop や PowerPoint などの「誰でも使えるビジュアル作成アプリ」と同じ操作感にしようと頑張った(自由度を持たせた)結果、それが後の開発の足枷となっている(完全なる予測)他のプロトタイピングツールの反省点を活かすかのような作りというか。

「HTML や CSS が分からない人でもプロトタイプを作れるツールにするために頑張る」のではなく、「求められているプロトタイプを作成する為にはどんなツールにするのがベターなのか」を考えて設計されたのではないかと(全然違うかもしれませんが)。

使用経験が無いので違うかもしれませんが、操作感は Dreamweaver に近いのかも?(Dreamweaver の UI を直感でも使えるようにして、吐き出すコードも子孫地獄とかにならないようにした感じ?(どこまでも憶測))

最適なプロトタイプ(将来的にはそのままコードまで吐き出せちゃう。多分 Adobe もこれ目指して四苦八苦している)にする為は、 「HTML と CSS が分からない人には学習コストが高い」「けれども、目指すべきツールを考えると、開発者にとっても利用者にとってもベターなアプローチ」だなぁ、と。

こうやって完成形を見ると「なるほどなぁ」と思えるのですが、この視点を自分が思いつけるかというと、できないと思います。

なので、冒頭では「作成の学習コストは無いに等しい」と書きましたが、正確には「フロントエンド 少しデキル」の人なら作成の学習コストは無いに等しい、です。 ベータ版ということもあり、ちょいちょいクセ(操作のしにくさ)はありますが、80% くらいは改善されていくクセだという所感です。特に、レイアウトは、CSS3 の flex などが分からないと「全然思う通りにいかねぇ!!」となるんじゃないかと思います。

やー、でもいいっすよ。 個人的にはプロトタイプ作成時に、空白の調整を上下左右キーを叩きながら己の感覚で調整したり、 子要素の内容ボリュームが変わる度に親要素のサイズ調整をしたり、という地獄から抜け出せただけでもヘブンが見えました。

あとはこれができれば最高!!な要望

明日にでも欲しい

  • position: fixed;(現在も、擬似的にやろうと思えばできるけど結構面倒)
  • checkbox の checked の操作
  • input type=“text” の フォーカス(文字入力できると最高)
  • 右のノードツリーで、ノードのドラッグ & ドロップ
  • 作業エリアでの単位変更

必須ではないけどあると神

  • :hover 擬似クラス
  • text-overflow: ellipsis; 的なの
  • 完全にフレキシブルなコンポーネントの種類が増える(カレンダーとか)
  • selectbox の 操作
  • border のデザイン(こだわると box-sizing も必要になりそうな予感)

多分実装中

  • API でダミー文とかの値をぶっこめる

UI デザイン目的で使うなら…

  • 遷移方法をもっと使いやすく
  • 遷移時のアニメーション
  • コンポーネントの意匠デザインの多様化
  • SPA的な挙動(好き勝手)
  • コンポーネントのインスタンス化(でもこれ一長一短な気もする)

現在できなくて地味に困ること(注意点)

(というほどではないけど。なんとなく、削除機能は後回し気味なのかな…と。いいけど)

  • 自分で追加したアセットの削除ができない(多分)
  • ライブプレビューの URL を消さずにプロジェクトを消してしまうと、ライブプレビューが永遠に残る(?)
  • 長時間使っていると保存されなくなる(メモリとかの問題かな…(適当)解決難しそう) ※リロードすれば直る。ブランク間の作業消えるけど…

敢えての懸念点

憶測ですが、STUDIO はかなりちゃんとした開発計画と設計の元、 現状は裏側がかなり作りやすくなっているのではないかと思うのですが。

是非ともその設計を保ったままスケールして行って欲しい…!と思います(人数増やす時とか大変そう<ものすごく余計なお世話)。

あと、STUDIO が仕事で使えるレベルになったら、 得意スキルが HTML と CSS を書くことしかない人は仕事なくなるのでは…という震えも感じたので (設計者は必要ですが、本当にただ機械的コーディングだけができる人) コーディング力は趣味として維持しつつ、他のスキルの勉強に励まねばと思いました。

まとめ

という感じで、本当に最高(になるのではないかと思われる)サービスなのですが、 仕事(会社)ではまだ使えない、というのが正直なところです。

  • クラウド(STUDIO)のセキュリティ保証
  • プライベートモード(パスワード設定など)

この辺が実装されないと、仕事で使うのは厳しい(稟議が通らない)なぁ、と。 この辺は Enterprise 版的なことを考えていらっしゃると思うので、気短にそわそわしながら待ちたいと思います(おいくらになるのかしら)。

個人ワークではガンガン使っていこうと思っているので、中の人、頑張ってください!!