ノーコードツール「studio」をいじってみる

# studioをいじってみる
自分でデザインしたサイトをノーコードでざっと作れるようになりたいなと思ったので、日本製のノーコードツールである「studio」について勉強していきたいと思います！

実際に作るのはまぁ使い方をツールの使い方を覚えるだけなので、アカウント作成から公開までの流れをざっとまとめられたと思います！

それではれっつらご！

## そもそもノーコードとは？

> プログラムを書かずにアプリやwebサイトを作ることができる技術

### なぜノーコードが話題になってるのか？

> フロントエンドだけではなく、バックエンドも扱えるようになってきたから。

1年ほど前、特別定額給付金の申請フォームを兵庫県加古川市の職員の方がノーコードで作成したということが結構話題になったらしいです。
その時使用したのは「kintone」というサービスみたいです。

本来、行政がシステムを作るとなると、開発会社に仕事を発注→設計→開発→テストみたいな工程を踏むのが常識だったようですが、その過程をkintoneを使用することですっ飛ばすことができたと！すごい！

### ノーコードの何がすごいの？

>ノーコードの登場により、開発コストが非常に下がるので、ローリスクで新しいことにチャレンジしやすくなった

例えば...

音楽スタジオのairbnb「[studio.io](https://www.studiotime.io/)」
船着場のairbnb「[PierShare](https://piershare.com/)」

のような、採算が取れるかどうがわからないような超ニッチなサービスが気軽に出せるようになった！

CtoCのマッチング系のアプリが作れるノーコードツール「[ARCADIER](https://www.arcadier.com/)」というのもあるみたい！

### ノーコードの弱点

> 複雑な実装ができない

「シンプルに、早く作れること」に価値をおいているツールなので、複雑な実装を使用と思ってもできないことが多い。

## レッツstudio

ではいよいよstudioを使っていきたいと思います。

### アカウント登録

まずはアカウント登録！
[![Image from Gyazo](https://i.gyazo.com/ece5ad7a7948e39115afbd9bc874ba40.png)](https://gyazo.com/ece5ad7a7948e39115afbd9bc874ba40)

今回はgoogleで登録を選択しました！
[![Image from Gyazo](https://i.gyazo.com/5eb293dfc8fab848b3f7371cab368609.png)](https://gyazo.com/5eb293dfc8fab848b3f7371cab368609)

### チュートリアル

アカウントを登録するとチュートリアルが始まりました！
[![Image from Gyazo](https://i.gyazo.com/25c9eaed5c9b004d2ae180051c4d6524.jpg)](https://gyazo.com/25c9eaed5c9b004d2ae180051c4d6524)

こんな感じの表示が出てきました！
真ん中にある真っ白なものを、周りにあるいろんなメニューからガチャガチャいじって、実際のwebページを作っていくっぽいです！
[![Image from Gyazo](https://i.gyazo.com/108d796106038865f281b426e2c3f65a.png)](https://gyazo.com/108d796106038865f281b426e2c3f65a)

画像マークをドラッグ&ドロップすると画像のコンテナが表示されました！
直感的！
[![Image from Gyazo](https://i.gyazo.com/fa9d533243215b5c315a796fea420f2e.png)](https://gyazo.com/fa9d533243215b5c315a796fea420f2e)

画像のサイズもドラック&ドロップで変更可能！
[![Image from Gyazo](https://i.gyazo.com/c02b79fc8b930d1ab97d195afb523ce0.png)](https://gyazo.com/c02b79fc8b930d1ab97d195afb523ce0)

画像の差し込み、明るさの調整も簡単におこなうことができました！
[![Image from Gyazo](https://i.gyazo.com/64ffc9fe0680a09bebe7ac9d3e483970.jpg)](https://gyazo.com/64ffc9fe0680a09bebe7ac9d3e483970)

文字も簡単に入れられます！
文字サイズ・文字色を変更するのもベリーイージーです！
[![Image from Gyazo](https://i.gyazo.com/00d76f0c0e96c3fdaacbd4e87b3d5324.jpg)](https://gyazo.com/00d76f0c0e96c3fdaacbd4e87b3d5324)

こんな感じでチュートリアルが一通り終わりました！
てか本当に直感的でめちゃ感動してます！！笑

### 多様なテンプレート

一からサイトを作りたい時もこのように多様なテンプレートが用意されているので、画像や文字を当てはめるだけで簡単にwebサイトが作れるっぽいです！すげぇ！
[![Image from Gyazo](https://i.gyazo.com/9418e3c76bd65dc9ea3ed9c09e9930cc.gif)](https://gyazo.com/9418e3c76bd65dc9ea3ed9c09e9930cc)

### サイトを公開してみる

今回は「Work」というテンプレートをちょっといじって実際にサイトを公開してみたいと思います。
[![Image from Gyazo](https://i.gyazo.com/9c42e538119db2b053f7baeb4a639cc9.jpg)](https://gyazo.com/9c42e538119db2b053f7baeb4a639cc9)

右上の公開ボタンを押すと、
[![Image from Gyazo](https://i.gyazo.com/66b5c6843f9cf8af81be5dd480c014cc.jpg)](https://gyazo.com/66b5c6843f9cf8af81be5dd480c014cc)

以下のような画面が出てくるのでドメインを設定します。
月額980円のbasicプランに入れば独自ドメインの接続もできるようです！
[![Image from Gyazo](https://i.gyazo.com/b2e8f76ca43b873419b98f10113c5270.jpg)](https://gyazo.com/b2e8f76ca43b873419b98f10113c5270)

公開ボタンをポチッと押すと以下のような画面が出てきました。
これで公開されたっぽいです！
めちゃ簡単っすね
[![Image from Gyazo](https://i.gyazo.com/1a44ba2035ee9d12e92a8a2e196996bc.jpg)](https://gyazo.com/1a44ba2035ee9d12e92a8a2e196996bc)

実際にリンクに飛んでみると公開されてました！
[![Image from Gyazo](https://i.gyazo.com/6514d4f7aeb3aa5a1c9ef246f8d3aa62.jpg)](https://gyazo.com/6514d4f7aeb3aa5a1c9ef246f8d3aa62)

ただし無料プランだとサイトの左下にこういうのが表示されるみたいですね
[![Image from Gyazo](https://i.gyazo.com/71866dfd37c87ed053de2e97249e8511.png)](https://gyazo.com/71866dfd37c87ed053de2e97249e8511)

フォームやCMS機能なども簡単に実装できるようなので今度やってみたいと思います！
最後までごらんいただきありがとうございました！