スゴイのが登場!Webやスマホページを積み木感覚でデザインできる、日本語対応の無料オンラインツール -STUDIO
Post on:2017年8月29日
国産のツールでは初じゃないでしょうか。
Webサイトやスマホアプリのページデザインを積み木感覚で楽しくデザインできる無料のオンラインサービスを紹介します。
操作が非常に快適で、ちょっと触るだけでもかなり楽しめます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-01.png)
STUDIOは無料で利用できるオンラインサービスで、日本語版と英語版がリリースされています。
ヘッダやフッタ、コンテンツのコンポーネントなどをドラッグ&ドロップでぽんっと配置するだけで、レイアウトを完成させることができます。コーディングのスキルは一切必要ありません。
レイアウトはすべてレスポンシブデザインに対応しており、従来のデザインツールでは表現できない動きやスクロールの再現も可能です。
STUDIOの作例
さっそく使用してみました。
まずは、メールアドレスとパスワードを登録します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-02.png)
登録はすぐに完了し、ようこそが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-03.png)
ようこそページ
最初に簡単なチュートリアルを試すことができます。
難しい操作はないですが、STUDIOの機能を見ることができるので、そのまま進みます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-04.png)
最初のプロジェクト名を決める
スマホのデザインを作成してみます。
まずは、ヘッダを配置します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-05.png)
ヘッダの追加
左パネルからヘッダを選択し、ドキュメントにドラッグ&ドロップします。配置する時に、ヘッダのサイズがうにょうにょ変化し、レイアウトに合うように配置します。
失敗すると、適切なアドバイスが表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-06.png)
サイズを間違えて配置
今度は少し慎重に配置してみます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-07.png)
ヘッダの配置
続いて、画像を配置します。左パネルから画像を選択します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-08.png)
画像の追加
サイズに注意して、画像を配置しました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-09.png)
画像の配置
さまざまなコンポーネントが用意されており、そのまま・編集することができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-10.png)
用意されているコンポーネントを使用
また、ボックスを使ってゼロからレイアウトを作成することも可能です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082902-03.png)
ゼロから作成
作成したレイアウトはURL(QRコード付き)が発行できるので、実機で確認できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082901-11.png)
ライブプレビュー
アイコンなども豊富に用意されており、さまざまなWebサイトやスマホアプリを作成できると思います。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082902-01.png)
アイコンのリスト
操作が分からない時は、左パネルの「ヒント」をクリックします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082902-02.png)
困った時はヒント
sponsors