デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
最終更新日:2019.01.31

すごいサービスが公開されています。
その名も「STUDIO」

日本発信のこのサービス、なんとデザインから公開まで、コーディングなしで完結しちゃうんです。

ナコさんが5分で作ったサイトがこちら!
サブドメインなら無料で公開までできてしまいますよ。

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
「STUDIO」で作ったサンプルサイトを見てみる

コードを書かずに、Webサイト制作を完結

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
「STUDIO」の制作秘話的なインタビュー記事を読んだのですがデザイナーさんがコーディングの手間や時間をかけず簡単にサイト公開できるようにという思いから制作されたそうです。

これからはデザインの後のコーディング作業や、サーバーのセットアップは必要ありません。STUDIOでデザインした画面は、瞬時にコードに変換されそのまま公開が可能です。

あなただけのデザイン

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
オリジナルデザインを簡単につくれちゃいます!

STUDIOは、実際のWebサイトに使用される「ボックスモデル」を搭載した、世界で初めてのデザインツールです。あなたがデザインをしたものは、STUDIOが瞬時にコードに変換します。ついに、デザインと開発が1つになりました。

ドラッグ&ドロップで、直感的にデザイン

ドラッグ&ドロップでボックスを追加して、レイアウトを作れます!

このチュートリアル記事で紹介されているように要素をドラッグするだけで簡単に配置ができます。
レイアウトの作成、要素の配置

レスポンシブ対応

画面を見ながらレスポンシブ表示の調整ができます。

WEBサービスだけどアプリライク

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

ショートカットも沢山用意されていますがデザイナーさんが使うAdobeのツールと揃えてくれているので迷うことはなさそうです。

レスポンシブレイアウトの作成

なこ
とにかく簡単!

共同編集ができる

チームでリアルタイム編集が可能です!すごない?
編集してる箇所はアイコンと色つきで表示されます。
そして自動保存。ミスっても履歴からの復帰あり。

STUDIOでは、プロジェクトにメンバーを招待したり、リアルタイムの共同編集が可能です。プロジェクトの編集を行うと、チームメンバーの編集者は編集内容を見ることができます。
チームメンバーがプロジェクトのページを開いているときは、メンバーのアイコンが色で囲まれます。また、チームメンバーが編集している行なっている要素は、アイコンと同じ色で強調されて表示されます。

詳しくは公式サイトのチュートリアルをみてみてください。
プロジェクトにメンバーを招待する、 リアルタイム共同編集

1クリックで公開完了

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

公開は「公開」ボタンを押して好きなURLを入力するだけ。
サーバーへのアップロードとかいらないんです。

編集後の更新も更新ボタンを押すだけ。
無料プランだとサブドメインになっちゃいますが月9ドルで独自ドメインもGETできます。
独自ドメインの取得も「STUDIO」内で完結しちゃう。

なこ
もうお名前ドットコムのメールテロ受けなくていいのん?ヤバない!?

まだまだあるよ便利な機能

オリジナルのフォームを作成

PHPで組まないといけないフォーム、大変ですよね…。
なんとフォーム作成機能がついてます。ありがてぇ

フォームの追加とカスタマイズ

SNSのOGP表示のカスタムが出来る

FacebookやTwitterなどでシェアする際に、表示される画像やタイトルも自由自在に設定可能!

SEO対策

「STUDIO」で作成されたサイトは、SEOにも最適化されています。titleやmetaタグなど、自由に編集可能です。

解析ツールやチャットボットのツールが簡単に設置出来る

わたしが一番いいなぁと思ったのがこの機能で、分析のためのGoogle Analyticsや、カスタマーチャットのIntercomなどの外部サービスと簡単に連携ができること。

このあたりの裏側サポートはさすが!WEBデザイナーさんの意見をたくさんヒアリングして取り入れてくれたんだなぁとおもいました。

他ツールとの比較

公式サイトに比較表があったのですが英語なので日本語VERを置いておきます。

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
WEB出力
デザインファイル
デザインをWebサイトに変換するには、Web開発者を雇うか自分でコードを書く必要があります。

100%カスタマイズされたウェブサイト
あなたのデザインは即座に完全にレスポンシブなWebサイトになります。もうコードを書くことを心配する必要はありません。

デザイン済みウェブサイト
コーディングしなくてもWebサイトを入手できますが、最初から作成することはできません。
デザインの自由
フリーデザイン
Sketchで自由にデザインできます。

最初からデザインする、 またはテンプレートをカスタマイズする
空白のキャンバスまたは私たちの美しく現代的なテンプレートの1つから始めて、あなたが望むすべてをカスタマイズしてください。

限定的なカスタマイズが可能
あなたは写真やテキストを編集することしかできません、あなたはあなたの夢のウェブサイトを作成することはできません。
テンプレート
スケッチ自体はテンプレートを提供していません。

私たちのテンプレートはあなたのウェブサイトがプロのデザイナーによってあなたのために特に作られたように見せます。

あなたは様々な単純なテンプレートから選ぶことができます。
共同編集
他のチームメンバーと共同作業することはできません。

あなたとあなたのチームメンバーは、同じプロジェクトに同時に取り組むことができます。

共同作業は可能ですが、STUDIOほどシームレスではありません。
サポート
公式のサポートなし
唯一のサポートはコミュニティベースなので、あなたの問題を素早く解決するのは難しいかもしれません。

リアルタイムサポート
私達は現場のライブチャットを通して即座にどんな質問にでも答えます。

標準カスタマーサービス
ライブチャットも、リアルタイムサポートもありません。
ブログ(CMS) 近日公開
ネットショップ(EC) 近日公開

早速やってみよう

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた

デザインから公開までコーディング不要で簡単!しかも無料!日本発のサービス「STUDIO」を試してみた
日本の方が開発したサービスなので完全日本語対応で、細かいところまでつかいやすいUIなので最初にある4ステップのチュートリアルが終われば直感的に使えるハズです。
サブドメインは無料ですし、LPや自分のサイトを作ってみたい方におすすめです。
大学のゼミ発表など共同で更新することもできますし、非公開設定も可能なのでモックを進めてみたり使い方は無限大。

ポートフォリオもいいですね〜夢が膨らみます。

デザインから公開まで、コーディングなしで完結。「STUDIO」を見てみる!