今回は、ノーコードツールであるwebflowの使い方を見ていきたい。ノーコードツールって色々あるけど、webflowはwebサイトを作ることのできるツール。画面にあるボタンをぽちぽちして画面を作っていくイメージのやつ。Webサイト作りたいけどプログラミングしたくない、早く作りたい・・・なんて思っているなら選択肢としていいかもしれません。
これから何かノーコードツールでwebサイトなりを作ろうと思っているなら、webflowでどういったものが作れるのか。どういった使い方をするのか参考にしてみてください。
目次
ノーコードツール - webflowとは
webflowがどんなツールなのかというと、サイトをみてみた人は分かる通りいろんなツールが用意されていてそれらを使ってwebサイトを作っていくっていうツール。実際に作る画面はというとこんな感じで両サイドに使うツールが表示されて、それらをドラッグしたり数値を変更したりして画面を作る。
しかもタブレットやスマホでどう見えるかとかも見れる。レスポンシブ対応もしているようで結構良いよね。
webサイトに特化したノーコードツールだね。後で実際に使ってみるっていうことを書いていくんだけど、なんとなくいろんな配置されているツール使ってwebサイト作れるんだろうなあ・・・っていうことは感じたと思う。実際に使ってみると、ボタンぽちぽちしていくだけでそれっぽいものが作れてしまうから楽。
どんなwebサイトが作れるのか
なんとなくwebサイトを作ることができるのは分かった、だけどどういうサイトを実際に作れるの？っていう感じですよね。webflowのサイトにshowcaseが色々載っているんだけど、そこを見てみると分かりやすい。結構いろんなサイトがあって面白いよ。
気になるサイトがあったらクリックしてみればどんなサイトなのかを見ることもできる。[Open live site]をクリックすれば、実際にそのサイトにアクセスできるぞ。
参考になりそうなサイトがあったら、showcaseから色々覗いてみるといいですね。
料金プラン
webflowの料金プランは分かりにくい。アカウントプランとサイトプランの2つがあって、サイトプランはどんなサイトをホスティングするのかで変わってきそう。アカウントプランは、いくつプロジェクトを作りたいのかとかで決まってきそうだね。
アカウントプラン
サイトプラン
料金プランについて知りたい人は他の記事なりをみることをお勧めしたい。我では力不足だ。。
webflowの使い方
webflowを使えばなんとなくwebサイトを作ることができるのが分かった。さあ、早速webflowを使ってwebサイトを作っていきましょう。
まずはテンプレートを決めよう。真っ白な何もないテンプレートもあるけど、無料で使える良い感じのテンプレートあるから何か使いたい。ちなみにテンプレートは有料のものもあるから素敵なテンプレートがあれば、買ってみるのもいいかもしれない。
今回はBusiness Starterっていうテンプレートを使ってやっていこうと思う。
テンプレートを選択して作成画面に移るとこんな感じで良い感じのテンプレートデザイン状態から作り始めることができる。
テキストを編集する
テキストの編集は簡単。編集したいテキストを選択して後は普通に打てばいいだけ。フォントも右側から簡単に変えることができる。
使えるツールは右側に結構あってカラーやボーダー、スペースの調整など色々できる。気になったら色々ボタンぽちぽちしてみるといいね。
テキストを編集してとりあえずこんな感じにする。
画像を差し替える
テキストはちょっと変えたけど、背景画像を変えたいから変えてやろう。変更したい箇所をクリックして右上の筆みたいなマークをクリック。そうするとBackgroundsに設定されている背景画像が表示されるからこれを変える。
画像は左側のAssetsっていうところからアップロードできるから、自分のパソコンに入っている画像をアップロードして背景に設定しとく。なんかそれっぽい感じになっていいね。
後は同じようなことの繰り返しでサイトができるはず。いろんな使えそうな部品があったりして何を使っていいのか迷ったり、そもそも最初はどこを編集していいか迷うけどまあいじっていけばそれなりのものができる。
ちなみにどんなページがあるのかは左のPagesから見れたり、どんな構造になっているかはNavigatorで見れたりする。
公開する
そうしてサイトを作っていったら公開したいですよね。右上のPublishボタンから公開してやりましょう。ボタン一発です。
公開されたらもちろん見ることができる。
この公開されたURLはwebflowってついているけど、有料にすれば自分で取得したドメインを割り当てることができるよう。本格的に使いたいなら有料版使えっていうことですね。
Webflowを学びたいなら
webflowをちゃんと学びたいならwebflowUniversityっていうやつがある。ここを見てみると結構いろんなコンテンツが揃っているからwebflowマスターになりたい人は覗いてみてください。
いろんな学べるコースがあったりして動画で構成されていますね。英語だから英語できる人は動画見ておくと良さそう。webflow使っていて最初どこをどういじればいいか分からなかったりしたから、役に立つはず。
ちなみにwebflowを教えてくれるスクールなんてものもある。興味があったら見てみるといい。
webflow、最初は使い方に戸惑うよ
webflowでwebサイトを作ってみるみたいなことを少ししてみたけど、機能がかなり多くて最初はどこをどういじっていいか戸惑ったりしますね。ただその分やれることは多いんだろうし、ノーコードだけど結構いろんな要望に応えてくれそうな感じがある。正直もっとサクッといくと思ったけど、そうでもなかった。まあだからこそWebflowUniversityみても結構な数の講座があるんでしょう。
webflow奥が深そうですね。
日本語版も・・・
どうやらWebflow日本語版もCommingSoonみたい。日本語版なら英語じゃ無理ーっていう人も手をつけやすいだろうからいいね。
まとめ
やっぱりコードを書かないでwebサイトを構築できるっていうのは楽ですね。作って公開するのもすぐできるしね。ただそれでもそこまで簡単には思い通りのサイトを作るのはできないんじゃないかなーっていう印象。機能が多くて最初は戸惑うだろうし、やっぱりデザインも用意されているものに依存しちゃうからね。
結局細かいところも思い通りにしたいなら自分でコード書けよってなるんだろうけど、使ってみた感じwebflowは結構細かいところまでできそうな気もする。サイト制作をノーコードでやりたいっていう場合には良い選択肢になるかもしれません。
関連記事
webflowの記事を見たということは、ノーコード開発に興味があるのではないだろうか。この記事でいろんなノーコードツールについて書いているからよかったら参考にしてみてね。
