コーディング作業はもう一切不要!2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0

去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました!

STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。

サイトのキャプチャ

STUDIO

STUDIOの特徴

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

サイトのキャプチャ

デザイン: STUDIO

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

サイトのキャプチャ

デザイン: STUDIO

2.0になり、機能も大幅に強化されました。

  • 3倍以上早くなった、デザインパフォーマンス
  • リアルタイム共同作業が可能に
  • Google Fontsに対応、日本語も使用可
  • ダークモードに対応
  • UNDO機能に対応
  • position: absolute;, z-indexが可能に
  • 画像比率固定
  • 要素の複数選択

パフォーマンスの改善が最大の特徴ですが、複数人とのコラボ作業も魅力です。同一のデザインファイルを複数のデザイナーで同時に作業する場合はFigmaやSketch+GitLabが必要でしたが、STUDIOも新たな選択肢の一つとして加えておくとよいでしょう。

サイトのキャプチャ

コラボレーション: STUDIO

STUDIOのもう一つの魅力は、無料で始められることです。無料で、ツールの全機能が利用でき、プロジェクト数もページ数も無限、コラボも可能でメンバー数も無制限です。

サイトのキャプチャ

料金プラン: STUDIO

STUDIOの使い方

STUDIOを使用してみました。
利用するには登録(無料)が必要で、メール・パスワードを設定するか、Facebookで登録できます。

サイトのキャプチャ

サインアップ: STUDIO
※英語で表示される場合は、左下で言語を変更できます。

登録はすぐに完了し、利用できます。

サイトのキャプチャ

ようこそ、STUDIOへ

最初に、プロジェクトを作成します。
テンプレートが用意されているので、簡単に始めることができます。白紙も用意されています。

サイトのキャプチャ

テンプレートの選択

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

サイトのキャプチャ

プロジェクトの作成

ここまでの作業は、1分もかかりません。

サイトのキャプチャ

プロジェクトの完成

右上のプロジェクトをクリックすると、「ダッシュボード」が開きます。
ダッシュボードでは、プロジェクトの設定、メンバーの管理、料金プランなどが確認できます。

サイトのキャプチャ

ダッシュボード

デザイン画面に戻ります。
まずは、ページ選択。上部のプルダウンから選択できます。

サイトのキャプチャ

ページの選択

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

サイトのキャプチャ

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

要素を選択すると、その要素をカスタマイズする情報が表示されます。このカスタマイズ機能が非常に高機能で、操作も快適です。

サイトのキャプチャ

要素のカスタマイズ

デザインを実機で確認したい時は、右上の「ライブプレビュー」をクリックします。一時的なURLが発行され、デスクトップやスマホなどでアクセスできます。

サイトのキャプチャ

ライブプレビュー

エディタやデザインツール、OSも最近でもダークモードが搭載されるようになりました。

サイトのキャプチャ

ダークモード

UNDO機能が手放せないという人も多いと思います。command+Zだけでなく、ヒストリーも表示され、作業を取り消すことができます。

サイトのキャプチャ

作業のヒストリー

そしてGoogle Fontsのサポートも素晴らしいですね。日本語フォントにも対応しているので、ゴシックや明朝などを使用することも可能です。

サイトのキャプチャ

Google Fontsの日本語もサポート

sponsors

top of page

©2019 coliss