Webflow (ノーコード)を実際に使ってみて分かったポイントを解説

webflow聞いたことあるけど使ったことはないなぁ〜。

いろんなノーコードツールがある中でwebflowは使いやすいツールなの？

プログラミングはできないんですけどやっていけます？

今回はこういった疑問に回答していきます。

結論このwebflowはプログラミング初心者〜中級者以上の人におすすめできるツールです。

これくらいのレベルの人であればとても魅力的なツールになります。

webflowとは？

webflowとは、WIXやJimboのようにプログラミングの専門知識が不要でサイト制作ができるノーコードツールのことです。直感的に見出しや文章、画像などを配置し、色やフォント、形、動きをつけるなど自由にサイト制作ができるところが特徴的です。その他、

などの利点があります。実際に使ってみてどのように作っていくかをざっとみていきましょう。

Webflowの実際の使い方

それでは実際にwebflowを使ってみましょう

サイトにアクセス

公式サイトにいくと無料で作れるため早速制作していきます。

メールアドレスの登録

サイト内容を事前に選択

step
1サイトの方針を決めます

step
2サイトの届けるターゲット層を決める

step
3自身のサイト制作歴を答えます。

step
4今回のサイト形式を答えます。

実際にサイトの管理画面に入り作っていく

制作の流れ↓

サイトの管理画面にアクセスするとチュートリアルに従って実際にコンテンツを白紙のキャンバスに描いていくように配置していきます。

左側の項目からテキストや画像などを選択して設置したら、右側の項目で幅や文字の大きさの調整をしていきます。

どれも直感的でとても扱いやすいです。操作方法がわからなかったり「この知識勉強不足だな、、、」と感じたら左下のビデオマークからチュートリアルを観ることもできます。

公式が作成してるチュートリアルのためとても質がよくわかりやすいです。

簡易サイトを実際に作ってみました（ファーストビューのみ作成）

webflowを使ってみてのメリットとデメリット

実際にwebflowを触ってみて感じたメリットとデメリットがこちらです。

メリット

webflowはHTML/CSSのサイト制作知識が前提のツールになります。なのでこの知識があるととても扱いやすく自由度高くサイト制作ができます。

管理画面上部に「PC」「タブレット」「スマホ」のボタンがありそこを押すことでレスポンシブ状態での編集も可能です。これがとても制作してる時にわかりやすく作りやすいです。

普段パソコンで作っているとスマホなどの画面がうまく想定できてなくデザインが崩れてしまうことがよくありますが、すぐ別デバイスの見え方を確認できるのは嬉しいところです。

また、チュートリアル用の動画がわかりやすく整理されててわからないところの動画をすぐ見つけておさらいできるのも魅力的です。大半のツールは問い合わせ対応などですが、それをする以前に動画で問題解決できるところがいいですね。

デメリット

webflowはノーコードツールと言われていますが、コードを打ち込む必要がないだけでコードの知識はほぼ必須と言えます。これがないと各ボタンの機能が何を表すのかから理解していかないといけないため、むしろ時間がかかってしまいます。

まずは基礎知識をつけてからwebflowを使うことをおすすめします。

また、webflowは海外のツールのため日本語対応しておらず基本的に全て英語の表記になります。チュートリアル用の動画も英語のため、英語を理解できないとそもそものところでつまづいてしまいます。

「おいおい知識ないとボタンの機能もわからないし、そもそもなんて書いてあるかわからないやん！」という方、焦らず焦らず。

プログラミングはどうしても全くの未経験から開始するにはハードルが高いものになります。いきなりノーコードで作っていくのも手ですが、大なり小なりプログラミングの知識があるとノーコードで作っている時も応用が容易にできるようになります。

また、優良な情報は日本語ではなく英語に多くあるため英語学習も合わせてお勧めしておきたいところです。

少しずつ知識を身につけていきましょう。

合わせて読みたい記事

まとめ

今回はノーコード、webflowについて解説しました。実際に使ってみて使用感や使いやすさは人それぞれだと思います。無料で自由度高くサイト制作ができるので試しに使ってみてはいかがでしょうか？

これからますますノーコードツールが発展していく中、IT、webの知識を引き続きつけて行ってITハックな人材を目指して頑張っていきましょう。