InVisionだけじゃない!国内産デザインツール「Studio」はモックアップもWeb・スマホサイトも簡単に作成できる
Post on:2018年4月5日
海外ではInVisionが注目されていますが、国内産のデザインツールも負けていません。
Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。
こういったツールは英語だからと敬遠していた方は、是非試してみてください!
ようやく正式版としてリリースされ、以前紹介した時からさらに進化しています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040504.png)
Studioの特徴
Studioは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
![Studioの特徴](http://coliss.com/wp-content/uploads-201802/2018040506-01.png)
HTMLやCSSの知識は必要ありません。積み木感覚で簡単にデザインを作成できます。もちろん、すべてがレスポンシブ対応で、作成できるページは無制限です。
![Studioの特徴](http://coliss.com/wp-content/uploads-201802/2018040506-02.png)
作業途中のデザインをデスクトップやスマホなど、さまざまなデバイスでプレビューすることもできます。また、有料機能ですが、サーバーにアップロードするなどの作業なしで、制作したサイトやアプリを公開することもできます。独自ドメインも可能です。
![Studioの特徴](http://coliss.com/wp-content/uploads-201802/2018040506-03.png)
有料のオプションでは、サイトデータのバージョン管理、分析機能なども利用できます。
Studioを使ってみた
さっそく、Studioを使用してみました。
利用するには登録(無料)が必要で、メール・パスワードを入力するか、Facebookで登録できます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-01.png)
Studio 登録ページ
※英語で表示される場合は、左下で言語を変更できます。
登録はすぐに完了し、ようこそが表示されます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-02.png)
ようこそページ
何もない状態なので、「新規プロジェクト作成」をクリックします。
Webサイトとスマホアプリが選択できるので、今回はWebサイトにしてみました。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-03.png)
新規プロジェクトの作成
プロジェクト名を入力して、「作成」をクリックします。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-04.png)
Webサイトでプロジェクトの作成
「デザインをはじめよう」をクリックして、進めます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-05.png)
プロジェクトのダッシュボード
Studioでは、デザインをゼロから作ることも、テンプレートを利用してカスタマイズすることもできます。今回はテンプレートを利用して作成してみます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-06.png)
デザインの選択
ポートフォリオ用のテンプレートを選択してみました。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-07.png)
ポートフォリオ用のテンプレート
デザインをカスタマイズしてみます。
まずは、上部からページを選択します。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-08.png)
ページの選択
その下のバーをクリックすると、スマホ・タブレット・デスクトップのサイズで表示を確認できます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-09.gif)
各デバイスのサイズで表示
スマホのサイズで、デザインしてみます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-10.png)
スマホのサイズで表示
用意されている要素をクリックすると、その要素をカスタマイズする情報が表示されます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-11.png)
要素のカスタマイズ
このカスタマイズ機能が非常に高機能で、操作も快適です。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-12.png)
左寄せに変更
左寄せにしたので、パディングの値を調整してみます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-13.png)
パディングを調整
デザインを実機で確認したい時は、右上の「ライブプレビュー」をクリックします。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-14.png)
ライブプレビュー
「スタート」をクリックすると、一時的なURLが発行されるので、デスクトップやスマホなどでアクセスできます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-15.png)
実機でプレビュー
最後にもう少し、デザインの画面を見てましょう。左のパネルには、簡単に利用できるさまざまなデザイン要素が用意されています。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-17.png)
画像素材
画像やアイコンはCC0やオープンソースなので、商用でも無料で利用できます。もちろん、自分で用意した画像やアイコンを利用することもできます。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-18.png)
アイコン素材
ボックスには、さまざまなコンポーネントが用意されています。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-19.png)
コンポーネント
操作が分からない時は、右下をクリックします。
![Studioのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018040507-20.png)
ヘルプ
sponsors