どうも、まさとらん（@0310lan）です！
今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！
現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。
【 uizard 】
■「uizard」ってどんなサービス？
最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。
このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。
変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！
するとAIがスケッチを分析してワイヤーフレームに変換してくれます。
さらに、PCのブラウザからプロジェクト画面を開いて自由に編集できるようになっています。
コンテンツの追加・削除、画面遷移のフロー、アクションの追加、プレビュー＆シェアなど、さまざまな編集もできるのは便利な点でしょう。
「uizard」を使えば、手描きのスケッチから動くプロトタイプの作成まで簡単に誰でも作成できるようになります。
■スケッチの描き方について
スケッチの描き方には簡単なルールがあるので補足しておきます。
ルールと言っても難しくはなくて、以下の3点がポイントになります！
つまり、無地の紙を利用して四角の枠線で囲んだ中にスケッチを描きます。そして、スマホのカメラで撮影するときはスケッチだけが見える状態にしておくだけです。
ちょっとした光の反射や影などについては、AIがある程度まで考慮してくれるので安心です。
そして、テキスト・ボタン・画像・フォーム部品…などを以下のように描いていきます。
また、現時点で認識可能なアイコンも数十種類あります。
これらのパーツを組み合わせていきながら、自分のイメージするWebページを描いていくわけです。
さらに詳しいスケッチガイドについては、以下の公式マニュアルに詳しく掲載されているのでご興味ある方はチェックしてみてください。
＜参考リンク＞
■プロトタイプの作り方
それでは「uizard」を利用して、簡単なプロトタイプを1つ作成しながら基本的な使い方について解説をしていきます。
まず最初に「uizard」の専用URLをスマホのブラウザで開きます。
＜専用URL＞
https://app.uizard.io/
ログイン後、プロジェクト画面を開いて画像のアップロードボタンをタップします。
スマホのカメラから手描きのスケッチを撮影しましょう！
あとは待っているだけで、自動的に美しいワイヤーフレームに変換されます。
次に、PCのブラウザから同じプロジェクトを開くと、先ほど変換されたワイヤーフレームが表示されます。
このままでも問題はありませんが、画像やボタンの位置など細かい編集も可能です。
テキストに関しては文章を新しく入力したり、フォントやスタイルなどを細かく調整できます。
ボタンやアイコンのパーツも豊富に提供されているので、自分のイメージに合ったモノに差し替えることができます。
さらに、テキスト・画像・フォーム部品…などを新規追加できる機能も提供されています。
つまり、手描きのスケッチをスマホで撮影する以外にも、ゼロからワイヤーフレームを作成するオプションも用意されているというわけです。
もっとも簡単なのは手描きのスケッチを変換する方法ですが、じっくり作り込みたい場合はPCで編集作業ができます。
また、ワイヤーフレームの各パーツは「アクション」を追加できるようになっています。例えば、ボタンをタップしたときに別の画面に遷移させるようなことが可能です。
これはメニューにある【Prototype】タブに切り替えてから、各パーツと画面を線でつなげるだけなので簡単です。
画面遷移のアニメーションとして、フェードやスライドなども指定可能です。
これらの機能を活用しながら、実際に動くプロトタイプを手軽に作成できるようになっています。
■プレビューとシェアについて
プロトタイプが完成したら、実際の動きを確認するためにプレビューを使ってみましょう。
使い方は簡単で、画面上部にある【Play】ボタンをクリックするだけです。
画面全体がプレビュー表示になり、マウスでプロトタイプを操作できます。
ボタンをクリックして画面遷移が正しく動作しているかを確認しておきましょう。
問題なければ【Share】ボタンをクリックします。
公開用のURLが生成されているのでコピーします。
このURLをSNSやメールなどでシェアすれば、作成したプロトタイプを誰でも閲覧＆操作できるようになるわけです。
コメントも入力できるので、さまざまな意見を集めたい時にも有効活用できるでしょう。
また、2020年10月時点ではまだ実装されていませんが、将来的には作成したプロトタイプをSketchやFigmaなどで利用したり、ソースコードに変換できる機能も予定されています。
■クローズドベータに参加しよう！
「uizard」は現時点でクローズドベータの段階です。
そのため、利用するには招待を受ける必要があるのですが、メールアドレスを登録するだけで招待メールを受け取ることができます。
トップページの入力ボックスから自分のメールアドレスを登録しましょう。
以下の画面が表示されたら準備は完了です。
「uizard」から1週間以内に招待メールが届くはずなので、そのメールから自分のダッシュボードにログインできる仕組みになっています。
近いうちに一般公開されるはずなので、今のうちから操作に慣れておくといいかもしれません。
■まとめ
今回は手描きのスケッチから美しいワイヤーフレームに自動変換してプロトタイプを作成できるサービスをご紹介しました。
「uizard」は、まだまだ開発途中ではあるものの手描きスケッチからの変換技術はとても優秀であり、すでに実用的なサービスとして利用できます。PCブラウザで利用できる編集エディタも使いやすく、機能も豊富に提供されているのでプロトタイプ作りが楽しくできるようになるでしょう。
ぜひみなさんも自分がイメージしているWebサイトやアプリを、実際に動くプロトタイプとして公開しましょう！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
