コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
Post on:2019年1月23日
sponsors
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！
STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。
STUDIOの特徴
STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
HTMLやCSSの知識は一切不要です。
積み木感覚で簡単に思い通りのデザインを作成できます。もちろんレスポンシブ対応で、無料でも作成できるページに制限はありません。
2.0になり、機能も大幅に強化されました。
- ３倍以上早くなった、デザインパフォーマンス
- リアルタイム共同作業が可能に
- Google Fontsに対応、日本語も使用可
- ダークモードに対応
- UNDO機能に対応
- position: absolute;, z-indexが可能に
- 画像比率固定
- 要素の複数選択
パフォーマンスの改善が最大の特徴ですが、複数人とのコラボ作業も魅力です。同一のデザインファイルを複数のデザイナーで同時に作業する場合はFigmaやSketch+GitLabが必要でしたが、STUDIOも新たな選択肢の一つとして加えておくとよいでしょう。
STUDIOのもう一つの魅力は、無料で始められることです。無料で、ツールの全機能が利用でき、プロジェクト数もページ数も無限、コラボも可能でメンバー数も無制限です。
STUDIOの使い方
STUDIOを使用してみました。
利用するには登録（無料）が必要で、メール・パスワードを設定するか、Facebookで登録できます。
サインアップ: STUDIO
※英語で表示される場合は、左下で言語を変更できます。
登録はすぐに完了し、利用できます。
ようこそ、STUDIOへ
最初に、プロジェクトを作成します。
テンプレートが用意されているので、簡単に始めることができます。白紙も用意されています。
テンプレートの選択
STUDIOでは、デザインをゼロから作ることも、テンプレートを利用してカスタマイズすることもできます。今回は新着のテンプレートを選択してみました。
プロジェクトの作成
ここまでの作業は、1分もかかりません。
プロジェクトの完成
右上のプロジェクトをクリックすると、「ダッシュボード」が開きます。
ダッシュボードでは、プロジェクトの設定、メンバーの管理、料金プランなどが確認できます。
ダッシュボード
デザイン画面に戻ります。
まずは、ページ選択。上部のプルダウンから選択できます。
ページの選択
その下のバーをクリックすると、スマホ・タブレット・デスクトップのサイズで表示を確認できます。
各デバイスのサイズで表示
要素を選択すると、その要素をカスタマイズする情報が表示されます。このカスタマイズ機能が非常に高機能で、操作も快適です。
要素のカスタマイズ
デザインを実機で確認したい時は、右上の「ライブプレビュー」をクリックします。一時的なURLが発行され、デスクトップやスマホなどでアクセスできます。
ライブプレビュー
エディタやデザインツール、OSも最近でもダークモードが搭載されるようになりました。
ダークモード
UNDO機能が手放せないという人も多いと思います。command+Zだけでなく、ヒストリーも表示され、作業を取り消すことができます。
作業のヒストリー
そしてGoogle Fontsのサポートも素晴らしいですね。日本語フォントにも対応しているので、ゴシックや明朝などを使用することも可能です。
Google Fontsの日本語もサポート
sponsors
