こんにちは。旦那（@Etupirkazuyan）の方です！
僕は最近Progateでプログラミングの勉強を始めました。WEB作成ができるHTMLとかCSSとかPHPとか。プログラミングができればフリーランスとして仕事が取れるぞ！と意気込んでいましたが、1つ問題点がありました。
そう、プログラミング言語って勉強するのに時間がとてもかかるんです。
僕の場合、ProgateでHTML＆CSSの初級編をクリアするのに、大体5時間くらいかかりました。
初級編なので内容はそこまで難しくありませんでしたが、コードを覚えたり、実際にコードを書いたりすることに、結構な時間がかかってしまいます。
更に中級編、上級編、そして他言語と勉強を進めていくとなるとさらに多くの時間を必要とします。暗闇の中を歩いている気持ちです。
そんな風に考える方もいるのではないでしょうか。
プログラミングを勉強するのに楽な道はないだろうとProgateの中級編に進もうとしたその時！知人からコードを書かずにWebサイト作成できる「STUDIO」というサービスを紹介してもらいました。
と思って使ってみたら、感覚的な操作でおしゃれなサイトを簡単に作れる素晴らしいサービスということを知りました。
偶然にも、たまたま地元仙台でワークショップが開かれるということでそれにも参加してきましたが、やっぱり最高でした。
— STUDIO (@studiodesignapp) 2018年9月11日
本日はその革命的とも言える「STUDIO」のサービス概要をご紹介します。
Contents
世界が注目している「STUDIO」とは
STUDIOとは、デザインと開発を１つにしたまったく新しいWebデザインプラットフォームです。
こちらはSTUDIOの紹介動画で、どういった操作感なのかが分かるようになっています。
2017年4月にベータ版をリリース後、着実にユーザー数を増やし続け、2018年4月に正式リリース。
2017年8月27日に、プロダクトハントという世界中の人気製品の情報が集まるメディアにて、デイリーランキング１位（#1 Product of the day）に選出されています。
2018年現在ユーザー数は20,000人にも及んでいます。（海外ユーザーの割合が50%程度）
「STUDIO」を使用したサイトのポートフォリオ
１）飲食店サイト
例えば下記のWEBサイトは非エンジニアの素人が制作しました。（僕にSTUDIOを紹介してくれた知人です笑）
もちろんプログラミングはしていません。初めてSTUDIOを使ってのサイト制作ということで、デザインから公開まで約3時間ということでした。（これでも時間がかかった方とのこと）
２）イベントページ
他にSTUDIO公式ツイッター(@studiodesignapp)にて紹介されているのが下記のサイトです。
デザインシップのサイトが公開されました！https://t.co/fdzxnXm7lr
デザインは @shiratoriyurie 作！
STUDIO（@studiodesignapp）を使って頂いたのでノンコーディングで完成しました！@d_maso 作のロゴモーションも見どころです！#DesignShip #withSTUDIO— Keima Kai (@keimakai1993) 2018年7月31日
これらWEBサイトは決まったテンプレートから作ったわけではなく、白いワークスペースの上で、自分が思い描いたデザインをそのまま形にしたものです。
３）アプリのティザーサイト
公式サイトで紹介されている事例です。（2018.10.7 更新）
【本日のピックアップ】
STUDIOを使って制作したサイトをピックアップして紹介✨— STUDIO (@studiodesignapp) 2018年10月4日
情報ごとに背景画像やカラーを変えたり、ボックス形式でコンテンツを積み重ね、情報が小出しにされているので非常に読みやすくわかりやすいサイトですね。
無料でデザインからサイト公開まで可能な料金体系
STUDIOは下記の通り、3つの料金体系でサービスを提供しています。(※2018年10月現在)
サブドメインであれば無料で何サイトでも作成が可能になっています。
独自ドメインでの使用やSSL化は月9ドルの有料化が必要ですが、WEB制作の外注費用として何十万円とかけるくらいよりも安価に抑えられます。
自分でサイトの修正もできるので楽ですよね。
他のツールとは違う「STUDIO」の利点とは
注目すべきは下記3点です。
✓デザインと開発を一体化して制作スピードアップ
✓自由自在にデザインが可能なボックスレイアウト
✓プロダクト改善へのスピードが早い
それぞれ紹介していきます。
デザインと開発を一体化して制作スピードアップ
通常だと下記の流れでWEBサイトを制作します。
ワイヤーフレーム
デザイン
プロトタイピング
コーディング
サーバーセットアップ
ドメイン接続
公開
それが「STUDIO」を使用すると、コーディングが不要になるので、下記のようにデザインのみで全てがが完結されます。
デザイン
公開
煩雑な作業が一気に短縮されました。「STUDIO」を使えば、WEBサイト制作にかける時間を短縮できます。
また、そもそもプログラミングを学ぶ必要もなくなるので、学習時間なども含めトータルで考えるとかなりの時間削減になります。
自由自在にデザインが可能なボックスレイアウト
ホームページを制作できるサービスやツールはたくさんありますよね。例えばWIX、ペライチ、Strikinglyなどが有名どころでしょうか。
これら他のビルダーツールと比べて、STUDIOはどこが優位なのかと言うと、自由度が高いことです。
他のビルダーツールはテンプレートありきのWEBサイト制作です。そのため、本当の意味でしっくりくるデザインを見つけるまでに時間がかかります。その点、STUDIOは自由自在にデザインしたWEBサイトを自分で制作することが出来ます。
それでは、なぜ自由自在なサイトを作れるかを簡単に紹介します。
感覚的に配置できるボックスレイアウトという機能
STUDIOを使用してWEBサイト制作をするにあたり覚えておく必要があるのが、”ボックスレイアウト”という概念。
上記画像を参照して貰えば分かるかと思いますが、最下層に親ボックスを作り、そこに子ボックスを入れていくことで１つの素材が完成します。
１つボックスを作成したら、また次のボックスを作ります。そうすることで、ボックスを何個も作り、積み木方式に並べていくことで、WEBサイトを作成します。
STUDIOマスターへの道は、ボックスレイアウトの理解から#STUDIOWorkshop pic.twitter.com/qkpIHU9zu4
— Risa Yuguchi@11/20 Adobe MAX JAPAN登壇 (@risay) 2018年7月31日
また、こちらのボックスですが、下記の機能も使用できます。
✓ドラッグ＆ドロップでサイズ調整
✓ボックスの余白調整のためのマージンやパッディング
✓ボックスの並び方を指定する要素の方向・整列
こちらは詳細な操作ガイドの動画です。気になる方は参考にどうぞ。
こちらの動画でも紹介されていますが、レスポンシブ設定、地図の挿入なども可能です。
また、コンタクトページの設置も可能になってます。
個人的に嬉しいのはオシャレな著作権フリーの画像を何枚でも使用できること。これ結構便利です。
これら機能を組み合わせることによって、自由自在なWEBサイトの制作が可能になっています。
プロダクト改善へのスピードが早い
Slackのコミュニティで最新情報ゲット&製品改善要求が可能
これは僕が驚いたポイントの１つです。ユーザーも参加できるコミュニティを作ることにより、ユーザーのニーズをしっかりと拾い上げています。
間違いなく爆速の機能改善を支えている要因の１つですね。
— STUDIO (@studiodesignapp) 2018年7月12日
月１ペースくらいで新機能が追加
例えば最近ではサブドメインを使用することにより、無料でWEB公開まで可能になりました。
【サブドメインでのWebサイト公開が無料に！】
この度、STUDIOはWebサイト公開機能の一部無料化を開始いたしました！
また、 公開数の制限も無くサイトを公開することが可能です✨詳しくはこちらをご覧ください↓
PR TIMES : https://t.co/Cl0HeSLrk9 #STUDIO #無料化 pic.twitter.com/NDN7d9yuBp— STUDIO (@studiodesignapp) 2018年9月26日
高品質なブログも要チェック！
WEBサイト作成に関する情報や、STUDIOユーザーの生の声がチェックできます。無料でこれだけの情報が見れるなんて凄すぎです。これは必見。
まとめ
スピード感が重視されるIT社会の中で、今まさに爆速で進化を続けているSTUDIOですが、これからどんなプロダクトを社会に落としてくれるのか目が離せません。
今後のアップデートが楽しみですね。
