コーディングができないデザイナーがWebflowを使ってみた
こんにちは。
スタートアップテクノロジーの山崎です。
今回はタイトル通り、コーディングができないデザイナーがノーコードツール「Webflow」でLPを作ってみた話を書いていこうと思います！
なぜ「コーディングができない」とわざわざ言っているかというと、Webflowについては
「コーディングがわからないと無理」
という意見をちらほら見かけるから。
今回は締め切りがある中で初めて使うことになったので、はたして私のコーディングレベルでできるのだろうか…と不安がありつつもやってみました。
どのくらいコーディングができないのか
目安として、私のコーディングレベルがどのくらいかと言うと、
・HTML、CSSが何かは知っている。
・ずーーーっと昔の高校生の時に、ちょっと書いて作ってみてはいた。（けど忘れたし、昔過ぎて今と色々違いすぎる）
・グラフィック&エディトリアルをしていた前職で、ちょっとしたことはやっていた。（とんでもなく自己流で）
という感じで、「知ってはいるけれど、ほぼできない。」です。
このレベルでWebflowが使えたのかどうか。
結論から言うと、こちらのLPが出来ました！良かった！
Webflowとは？
Webflowは、コードを書かなくてもWebサイトが作成できるツールです。
Googleアカウントやメールアドレスでサインインするだけですぐに始められます。
無料の範囲でできることも多いので、気軽にお試しで触ってみることができます。
登録すると、いくつかの質問に答えた後に使い方のチュートリアルがあります。
Webflowは全て英語ですが、「これをここにドラッグしてみましょう」のような指示に沿って順にやっていくと、ざっくりと使い方がわかってきます。
登録が終わったら、作成を始めます。
ダッシュボードのこちらの画面からブランク、もしくはテンプレートを選択します。
今回はすでにFigmaで大まかなデザインを進めてあったので、ブランクから作っていきました。
ブランクを選択すると、このような編集画面になります。
HTML要素は左側に表示されます。
メニューからクリックかドラッグで要素が挿入されます。
簡単！
CSS要素は右側に。
Webflowについてのさらに詳しい情報は、解説している記事や動画が色々ありますので、ここでは割愛します。
私は始める際にまずこちらの動画で全体的な仕様を確認しました。
Webflowの特徴として、豊富なテンプレートやCMS機能などもありますが、今回はWebflowの基本的な機能を使ってシンプルなLPを作成してみた中での感想をまとめてみます。
コーディングの知識はやっぱり必要なのか
個人的な感想で言えば、Webflowはノーコードとはいえ、
「HTML？何それ初めて聞いた」
という人の場合は、やっぱり慣れるまでちょっと大変そうだなと思いました。
ドラッグ&ドロップでぽんぽんと簡単に組み立ててはいけますが、要素の親子関係やCSSのclass名などある程度意識して作っていかないと、後々ぐちゃぐちゃになってきてしまいそう・・・。
テンプレートをほぼそのまま使う場合であれば、コーディングが全くわからない人でもきれいなページが作れそうです。
上記で紹介しているように、WebflowのUIはHTMLとCSSがベースとなっています。
英語ですがUIはわかりやすいので、HTMLやCSSを知ってれば基本的な操作はすぐにできると思います。
ここがすごい！
今回私が触ってみた範囲内の話で言うと、レスポンシブに対応していることが一番便利でした！
基本的には上部のアイコンでデバイスを切り替えて変更をするだけ、です！
文字のサイズ、レイアウト、表示非表示など、本当に簡単に行えました。
また、例えば、
コンポーネントの「Navbar」を入れれば
タブレットサイズ以降では自動でハンバーガーメニューに。
よく使われるパーツがすでにあるので、とても便利。
ちなみにこのハンバーガーメニューの設定は、ここでできます。
どこで変更するんだ？とちょっと迷ったところだったので、メモとして。
もちろん、ブレイクポイントの設定値は自由に変更できます。
今回は使いませんでしたが、JavaScriptで書くアニメーションなどもWebflowでは簡単にできるようなので、次はそちらもやってみたいと思います！
わからないことがあった時
Webflowは、わからないことがあっても日本語で解説されている記事などがまだ少なめです。
具体的にやりたいことがあっても、「Webflow ◯◯」で検索しても日本語ではあまり答えが見つけられないことが多かったです。
ただ、コーディングでわからないことを調べるように「CSS ◯◯」という感じで検索し、それをWebflowで再現すれば解決できました。
コーディングの勉強にもなりますね。
また、英語で検索するとたくさんの情報が見つかります。
公式の「Webflow University」のLesson libraryでは、一つ一つについて細かく詳しく解説しており、動画もあるので、英語が得意ではない私でもとても役に立ちました。
「Webflow Forum」では、Webflow Universityよりもさらに具体的に「こうしたいんだけどどうしたら良い？」という質問&答えがたくさんあるので、英語で検索した時にはこちらが引っかかってくることも多かったです。
困ったこと
【プラン選び】
Webflowの料金体系は、まず大きく分けてプロジェクトごとに料金が発生するサイトプランと、アカウントに対して料金が発生するアカウントプランがあり、それぞれの中でさらにいくつかプランがあります。
これについては日本語で解説してくれているサイトがすでにいくつかあります。
が、今回は私以外も作業する場合があったため、「共同編集できるのかどうか」などでまだまだわからない箇所があり、プランを決める際にとても迷いました。
正直今も完全には把握しきれていません・・・。
【バグがある】
「この色に指定しているのに表示が違う！なんで？」という場面が何度かありました。あらためてもう一度色を指定し直すとちゃんとその通りになりましたが、「指定し直せば大丈夫」がわかるまでは悩まされました。
この程度のバグがちょこちょこあった気がします。
最後に
スタテクのデザイン部にはコーディングに強いデザイナーが何人もいます。
それゆえ私は別の部分のところに注力していて、これまでなかなかコーディングをしっかり身に付けるタイミングがありませんでした…
（やらなくてはという気持ちだけはとってもありますが！）
とはいえ、コーディングのリソースが足りなくなることもしばしば。
Webflowのようなノーコードツールを使用することで、今回のようなLPなどは私のようなコーディング苦手デザイナーでも進めることができるので、積極的に使ってみたいと思います！