スキルを習得する

【WEBサイト制作の革命】日本企業初プロダクトハント1位の「STUDIO」が想像以上に面白かったので紹介

  /

こんにちは。旦那（@Etupirkazuyan）の方です！

僕は最近Progateでプログラミングの勉強を始めました。WEB作成ができるHTMLとかCSSとかPHPとか。プログラミングができればフリーランスとして仕事が取れるぞ！と意気込んでいましたが、1つ問題点がありました。

そう、プログラミング言語って勉強するのに時間がとてもかかるんです。

僕の場合、ProgateでHTML＆CSSの初級編をクリアするのに、大体5時間くらいかかりました。
初級編なので内容はそこまで難しくありませんでしたが、コードを覚えたり、実際にコードを書いたりすることに、結構な時間がかかってしまいます。

更に中級編、上級編、そして他言語と勉強を進めていくとなるとさらに多くの時間を必要とします。暗闇の中を歩いている気持ちです。

悩む人々
悩む人々
フリーランスエンジニアになりたくてプログラミングを勉強しているけど、覚えることが多くて大変。時間をかけず、もっと感覚的にサイトを作成できればどれだけ楽だろうか。

そんな風に考える方もいるのではないでしょうか。

プログラミングを勉強するのに楽な道はないだろうとProgateの中級編に進もうとしたその時！知人からコードを書かずにWebサイト作成できる「STUDIO」というサービスを紹介してもらいました。

旦那
旦那
コードを書かずにWEBサイト作成？どーせダサいテンプレとか、自由度が低くて使いにくいでしょ？

と思って使ってみたら、感覚的な操作でおしゃれなサイトを簡単に作れる素晴らしいサービスということを知りました。

偶然にも、たまたま地元仙台でワークショップが開かれるということでそれにも参加してきましたが、やっぱり最高でした。

本日はその革命的とも言える「STUDIO」のサービス概要をご紹介します。

世界が注目している「STUDIO」とは

STUDIOとは、デザインと開発を１つにしたまったく新しいWebデザインプラットフォームです。

こちらはSTUDIOの紹介動画で、どういった操作感なのかが分かるようになっています。

2017年4月にベータ版をリリース後、着実にユーザー数を増やし続け、2018年4月に正式リリース。

2017年8月27日に、プロダクトハントという世界中の人気製品の情報が集まるメディアにて、デイリーランキング１位（#1 Product of the day）に選出されています。
2018年現在ユーザー数は20,000人にも及んでいます。（海外ユーザーの割合が50%程度）

「STUDIO」を使用したサイトのポートフォリオ

１）飲食店サイト

例えば下記のWEBサイトは非エンジニアの素人が制作しました。（僕にSTUDIOを紹介してくれた知人です笑）

Vege cafe ちゃまま

もちろんプログラミングはしていません。初めてSTUDIOを使ってのサイト制作ということで、デザインから公開まで約3時間ということでした。（これでも時間がかかった方とのこと）

２）イベントページ

他にSTUDIO公式ツイッター(@studiodesignapp)にて紹介されているのが下記のサイトです。

これらWEBサイトは決まったテンプレートから作ったわけではなく、白いワークスペースの上で、自分が思い描いたデザインをそのまま形にしたものです。

３）アプリのティザーサイト

公式サイトで紹介されている事例です。（2018.10.7 更新）

情報ごとに背景画像やカラーを変えたり、ボックス形式でコンテンツを積み重ね、情報が小出しにされているので非常に読みやすくわかりやすいサイトですね。

無料でデザインからサイト公開まで可能な料金体系

STUDIOは下記の通り、3つの料金体系でサービスを提供しています。(※2018年10月現在)

サブドメインであれば無料で何サイトでも作成が可能になっています。

独自ドメインでの使用やSSL化は月9ドルの有料化が必要ですが、WEB制作の外注費用として何十万円とかけるくらいよりも安価に抑えられます。

自分でサイトの修正もできるので楽ですよね。

他のツールとは違う「STUDIO」の利点とは

注目すべきは下記3点です。

✓デザインと開発を一体化して制作スピードアップ
✓自由自在にデザインが可能なボックスレイアウト
✓プロダクト改善へのスピードが早い

それぞれ紹介していきます。

デザインと開発を一体化して制作スピードアップ

通常だと下記の流れでWEBサイトを制作します。

通常のWEBサイト制作フロー

ワイヤーフレーム
デザイン
プロトタイピング
コーディング
サーバーセットアップ
ドメイン接続
公開

それが「STUDIO」を使用すると、コーディングが不要になるので、下記のようにデザインのみで全てがが完結されます。

STUDIOを使用した場合

デザイン
公開

煩雑な作業が一気に短縮されました。「STUDIO」を使えば、WEBサイト制作にかける時間を短縮できます。

また、そもそもプログラミングを学ぶ必要もなくなるので、学習時間なども含めトータルで考えるとかなりの時間削減になります。

自由自在にデザインが可能なボックスレイアウト

ホームページを制作できるサービスやツールはたくさんありますよね。例えばWIX、ペライチ、Strikinglyなどが有名どころでしょうか。

これら他のビルダーツールと比べて、STUDIOはどこが優位なのかと言うと、自由度が高いことです。

他のビルダーツールはテンプレートありきのWEBサイト制作です。そのため、本当の意味でしっくりくるデザインを見つけるまでに時間がかかります。その点、STUDIOは自由自在にデザインしたWEBサイトを自分で制作することが出来ます。

それでは、なぜ自由自在なサイトを作れるかを簡単に紹介します。

感覚的に配置できるボックスレイアウトという機能

STUDIOを使用してWEBサイト制作をするにあたり覚えておく必要があるのが、”ボックスレイアウト”という概念。

上記画像を参照して貰えば分かるかと思いますが、最下層に親ボックスを作り、そこに子ボックスを入れていくことで１つの素材が完成します。

１つボックスを作成したら、また次のボックスを作ります。そうすることで、ボックスを何個も作り、積み木方式に並べていくことで、WEBサイトを作成します。

また、こちらのボックスですが、下記の機能も使用できます。

✓ドラッグ＆ドロップでサイズ調整
✓ボックスの余白調整のためのマージンやパッディング
✓ボックスの並び方を指定する要素の方向・整列

こちらは詳細な操作ガイドの動画です。気になる方は参考にどうぞ。

こちらの動画でも紹介されていますが、レスポンシブ設定、地図の挿入なども可能です。
また、コンタクトページの設置も可能になってます。

個人的に嬉しいのはオシャレな著作権フリーの画像を何枚でも使用できること。これ結構便利です。

これら機能を組み合わせることによって、自由自在なWEBサイトの制作が可能になっています。

プロダクト改善へのスピードが早い

Slackのコミュニティで最新情報ゲット&製品改善要求が可能

これは僕が驚いたポイントの１つです。ユーザーも参加できるコミュニティを作ることにより、ユーザーのニーズをしっかりと拾い上げています。

間違いなく爆速の機能改善を支えている要因の１つですね。

月１ペースくらいで新機能が追加

例えば最近ではサブドメインを使用することにより、無料でWEB公開まで可能になりました。

高品質なブログも要チェック！

WEBサイト作成に関する情報や、STUDIOユーザーの生の声がチェックできます。無料でこれだけの情報が見れるなんて凄すぎです。これは必見。
STUDIO Blog

まとめ

スピード感が重視されるIT社会の中で、今まさに爆速で進化を続けているSTUDIOですが、これからどんなプロダクトを社会に落としてくれるのか目が離せません。

今後のアップデートが楽しみですね。

あわせて読みたい

僕がプログラミングの学習を中断し、別のスキルを学び始めた理由【初心者フリーランス向け】

ABOUT ME
旦那：いわむー
旦那：いわむー
大学卒業後、社会人として3年間働き退職。現在は仙台にあるゲストハウス「Hostel KIKO」のマネージャーとして旅人と地域を繋げる活動をしたり、地域で活躍する人や場所のPV制作、Youtube用の動画編集をしたりしています。何気ない時間を大切に過ごすのが好きで、日本酒や料理、キャンプや居酒屋めぐりを夫婦や友人たちと共に愉しんでいます。
次に読んで欲しい記事