スゴイのが登場！Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO

国産のツールでは初じゃないでしょうか。
Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。

操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。

STUDIO

STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。

ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと配置するだけで、レイアウトを完成させることができます。コーディングのスキルは一切必要ありません。
レイアウトはすべてレスポンシブデザインに対応しており、従来のデザインツールでは表現できない動きやスクロールの再現も可能です。

STUDIOの作例

さっそく使用してみました。
まずは、メールアドレスとパスワードを登録します。

STUDIO サインアップ

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

ようこそページ

最初に簡単なチュートリアルを試すことができます。
難しい操作はないですが、STUDIOの機能を見ることができるので、そのまま進みます。

最初のプロジェクト名を決める

スマホのデザインを作成してみます。
まずは、ヘッダを配置します。

ヘッダの追加

左パネルからヘッダを選択し、ドキュメントにドラッグ&ドロップします。配置する時に、ヘッダのサイズがうにょうにょ変化し、レイアウトに合うように配置します。
失敗すると、適切なアドバイスが表示されます。

サイズを間違えて配置

今度は少し慎重に配置してみます。

ヘッダの配置

続いて、画像を配置します。左パネルから画像を選択します。

画像の追加

サイズに注意して、画像を配置しました。

画像の配置

さまざまなコンポーネントが用意されており、そのまま・編集することができます。

用意されているコンポーネントを使用

また、ボックスを使ってゼロからレイアウトを作成することも可能です。

ゼロから作成

作成したレイアウトはURL（QRコード付き）が発行できるので、実機で確認できます。

ライブプレビュー

アイコンなども豊富に用意されており、さまざまなWebサイトやスマホアプリを作成できると思います。

アイコンのリスト

操作が分からない時は、左パネルの「ヒント」をクリックします。

困った時はヒント