Webサイトを作ろうと思ってもできれば簡単に良い感じのデザインで作りたい。そんな時に使いたいのがノーコードツール。今回はSTUDIOっていうWebサイトを作ることのできるノーコードツールを見ていきたい。これからWebサイトをプログラミングなしで作りたい！っていう場合には参考にしてみてください。
目次
ノーコードツール - STUDIOとは
STUDIOのことについてわざわざ書く必要はないだろうけど、さらっとどんなツールなのか書いていこう。STUDIOは知っての通り画面にあるツールを駆使してwebサイトのデザインを作っていく。
作成画面はこんな感じなんだけど、色々できそうな気がしてきますよね。
テキストを入れたり画像を入れたり、編集したりして自分が求めるサイトデザインに近づけていくことができる。変更できそうな箇所はクリックしていけばわかるから直感的に使えてなかなか良い。
サイトを公開する
画面にあるいろんなツールを使ってデザインを整えていったら完成。完成したらやっぱり公開したいですよね。公開するのは簡単で公開するボタンがあるからボタンをポチってしまえばいい。
独自ドメインは有料だけど、STUDIOが用意してくれるstudio.siteなら無料で公開できる。まあ普通にサイト作って公開するなら独自ドメイン取得して割り当てたいはずだから有料プランだね。
作成事例
STUDIOでどんな作成事例があるのかはサイトから確認することができるんだけど、結構美しいサイトがあってなかなか良い感じ。スタートアップの作成事例なんかみてみるとこんな感じで綺麗だよね。君が知っているサイトもあるかもしれない。
気になったらどんなサイトなのかみることができるから覗いてみてね。
価格
料金プランはこんな感じ。独自ドメインの接続がFREEプランだと使えないけどまあしょうがない。独自ドメイン使って公開したい場合にはBASICから考えよう。
STUDIOの使い方
何となくSTUDIOがどんなものか、どんなサイトが作れるのかはきっと感じているでしょう。自分も何となく良い感じのサイトを作ることができるんだろうな、っていうところまではきた。だけどやっぱり作ってみないと分からないですよね。なので、実際にSTUDIOを使ってサイトを作ってみます。
作り始めるときに白紙から作成するかテンプレートから作成するかを選ぶことができる。
テンプレートもいくつかあって、デザインも良い感じで素敵ですね。今回はテンプレートを1つ選んで作っていこうかなと思う。テンプレートを選んでみると早速作成画面。
テキストを編集する
テキストを編集する時には、編集できそうなテキストをクリックすれば編集することができる。webflowもこんな感じで編集できたな。
画像を変更する
画像を変更するのも変更したい画像をクリックしてやれば、画像の選択をすることができる。自分のパソコンに入っている画像をアップロードして使いたい場合にも左側の[Uploads]から行うことができる。
テキストの編集と同じように直感的に編集できていいですね。
画像やテキスト・アイコンを挿入する
テキストやアイコンを挿入したかったら、左側のメニューから挿入することができる。
アイコンもハートマークから加えることができますね。Material IconとFont Awesomeから選ぶことができる。
テキストやアイコンの追加も画面ぽちぽちすれば簡単にできるのは素晴らしい。「あれ、これどうやるんだろう？」みたいなことはほとんどなくいじれるのが楽。
レスポンシブ対応
画面上部を見ると、基準・タブレット・モバイルのそれぞれの見た目を確認することができる。
ちなみに右上の[ライブプレビュー]っていうやつをクリックすれば、作っているデザインをリアルタイムで共有できるようにQRコードとURLを取得することができる。「誰かにこんな感じなんだけどどう？」って見せたい時に使えるね。
作ったサイトを公開する
作ったサイトを公開したい時には右上の[公開]ボタンをクリックすると公開することができる。独自ドメインを使いたい場合には有料だけど、[.studio.site]っていうものなら無料で使えるみたいだね。
STUDIOを学ぶには
STUDIOの使い方学びたいなあーって思ったらSTUDIO JapanっていうYoutubeのチャンネルがあるからそこにある動画を見てみるといいと思います。
STUDIOまとめ
STUDIO使ってみた感じなかなか良いですね。Webサイト作っていく時にもっと作り方迷うかなーとか思っていたけど、画面ぽちぽちすれば何か表示されて直感的にいじることができて楽です。以前Webflowも使ってみたんだけど、Webflowはちょっと迷ったりしてしまった。機能はWebflowすごいんだけどね。
