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

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

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

Studio

• Studioの特徴
• Studioを使ってみた

Studioの特徴

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

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

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

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

Studioを使ってみた

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

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

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

ようこそページ

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

新規プロジェクトの作成

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

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

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

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

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

デザインの選択

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

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

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

ページの選択

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

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

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

スマホのサイズで表示

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

要素のカスタマイズ

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

左寄せに変更

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

パディングを調整

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

ライブプレビュー

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

実機でプレビュー

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

画像素材

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

アイコン素材

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

コンポーネント

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

ヘルプ