プログラミング

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

2021年1月30日

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ハックな人材を目指して頑張っていきましょう。

  • この記事を書いた人
  • 最新記事

てん

Uber Eats / ブロガー / プログラマー【経歴】新潟大学 ▶︎ web広告代理店マーケ / 営業 ▶︎ 独立 ▶︎ Uber Eats 配達で月50万 ■ 友人と広島で2人暮らし ■ ブログ・プログラミング・YouTubeが好き ■ 福岡出身25歳 / 夢は起業家

-プログラミング
-,