InVisionだけじゃない!国内産デザインツール「Studio」はモックアップもWeb・スマホサイトも簡単に作成できる

海外ではInVisionが注目されていますが、国内産のデザインツールも負けていません。
Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。
こういったツールは英語だからと敬遠していた方は、是非試してみてください!

ようやく正式版としてリリースされ、以前紹介した時からさらに進化しています。

サイトのキャプチャ

Studio

Studioの特徴

Studioは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。

Studioの特徴

HTMLやCSSの知識は必要ありません。積み木感覚で簡単にデザインを作成できます。もちろん、すべてがレスポンシブ対応で、作成できるページは無制限です。

Studioの特徴

作業途中のデザインをデスクトップやスマホなど、さまざまなデバイスでプレビューすることもできます。また、有料機能ですが、サーバーにアップロードするなどの作業なしで、制作したサイトやアプリを公開することもできます。独自ドメインも可能です。

Studioの特徴

有料のオプションでは、サイトデータのバージョン管理、分析機能なども利用できます。

Studioを使ってみた

さっそく、Studioを使用してみました。
利用するには登録(無料)が必要で、メール・パスワードを入力するか、Facebookで登録できます。

Studioのキャプチャ

Studio 登録ページ
※英語で表示される場合は、左下で言語を変更できます。

登録はすぐに完了し、ようこそが表示されます。

Studioのキャプチャ

ようこそページ

何もない状態なので、「新規プロジェクト作成」をクリックします。
Webサイトとスマホアプリが選択できるので、今回はWebサイトにしてみました。

Studioのキャプチャ

新規プロジェクトの作成

プロジェクト名を入力して、「作成」をクリックします。

Studioのキャプチャ

Webサイトでプロジェクトの作成

「デザインをはじめよう」をクリックして、進めます。

Studioのキャプチャ

プロジェクトのダッシュボード

Studioでは、デザインをゼロから作ることも、テンプレートを利用してカスタマイズすることもできます。今回はテンプレートを利用して作成してみます。

Studioのキャプチャ

デザインの選択

ポートフォリオ用のテンプレートを選択してみました。

Studioのキャプチャ

ポートフォリオ用のテンプレート

デザインをカスタマイズしてみます。
まずは、上部からページを選択します。

Studioのキャプチャ

ページの選択

その下のバーをクリックすると、スマホ・タブレット・デスクトップのサイズで表示を確認できます。

Studioのキャプチャ

各デバイスのサイズで表示

スマホのサイズで、デザインしてみます。

Studioのキャプチャ

スマホのサイズで表示

用意されている要素をクリックすると、その要素をカスタマイズする情報が表示されます。

Studioのキャプチャ

要素のカスタマイズ

このカスタマイズ機能が非常に高機能で、操作も快適です。

Studioのキャプチャ

左寄せに変更

左寄せにしたので、パディングの値を調整してみます。

Studioのキャプチャ

パディングを調整

デザインを実機で確認したい時は、右上の「ライブプレビュー」をクリックします。

Studioのキャプチャ

ライブプレビュー

「スタート」をクリックすると、一時的なURLが発行されるので、デスクトップやスマホなどでアクセスできます。

Studioのキャプチャ

実機でプレビュー

最後にもう少し、デザインの画面を見てましょう。左のパネルには、簡単に利用できるさまざまなデザイン要素が用意されています。

Studioのキャプチャ

画像素材

画像やアイコンはCC0やオープンソースなので、商用でも無料で利用できます。もちろん、自分で用意した画像やアイコンを利用することもできます。

Studioのキャプチャ

アイコン素材

ボックスには、さまざまなコンポーネントが用意されています。

Studioのキャプチャ

コンポーネント

操作が分からない時は、右下をクリックします。

Studioのキャプチャ

ヘルプ

sponsors

top of page

©2018 coliss