スキルを習得する

【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を紹介してくれた知人です笑）

vegecafeちゃまま
外部リンク
vegecafeちゃまま
https://vegecafechamama.studio.design
vegecafe ちゃまま人の体は食べ物でつくられる。大地の恵に感謝しつつ、自然の素材を活かし、「からだ」と「こころ」を健やかに保つ心のこもった食べ物をつくりたい。おからこんにゃくを使用した青森のベジタリアン料理のお店。

もちろんプログラミングはしていません。初めて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
外部リンク
 
STUDIO Blog
https://blog.studio.design/ja/
NoCode Web Design Platform「STUDIO」の公式ブログ。STUDIOに関するニュースやTips、導入事例などを紹介していきます。

まとめ

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

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

あわせて読みたい

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

ABOUT ME
旦那：いわむー
旦那：いわむー
大学卒業後、社会人として3年間働き退職。その後、仙台にあるゲストハウス「Hostel KIKO」のマネージャーとして旅人と地域を繋げる仕事に2年間従事。現在はフリーランスのビデオグラファーとして、企業や地域の魅力を動発信する動画制作をしています。キャンプ、日本酒、居酒屋めぐりが好き。最近ではワーケーション地で嫁や友人とゆるりと過ごす時間が至福。
次に読んで欲しい記事