
Webflowを使ってみよう! 概要編
2020.10.19

デザイナーがデザイン&コーディングを担当する案件が徐々に増えてきました。
今回は「Webflow」というレスポンシブ・ウェブ・デザインのコーディングに特化したサービスをご紹介します。
デザイナーのクメです。
近頃社内では、よりスピードが求められる案件に対応するため、ノーコードに関心が高くなっています。これまでデザイナーがコーディングを担当する機会はあまりなかったのですが、徐々にデザイン&サイト構築を担当する案件が増えてきました。
今回は「Webflow」というRWD(レスポンシブ・ウェブ・デザイン)の実装に特化したサービスをご紹介します。
Webflowとは?
オンラインでサイト制作から公開までこれ一つで完了できる海外発のウェブサービスです。
HTMLとCSSの知識はあった方がよいですが、実際の作業ではコードを記述する必要はなく、基本的にはボタンをポチポチやっていくだけでOK!自動でHTML、CSS、JavaScriptを生成してくれるのです。
最近はコーディングから少し離れてしまっているというデザイナーやディレクターの人たちに特におすすめしたいです。
インターフェイスはこのような感じです
こういったサイト作成サービスの場合、再現できるデザインが限定的になってしまったりしますが、Webflowではそんな事はありません。静的なページのコーディングであれば基本的にできないデザインはほぼ無いです。
デザインを作る時はいつも通りクリエイティビティを思う存分発揮してください!
また、パララックス効果などの演出も簡単につける事ができます。今までエンジニアにお任せ状態だったものを自分で作成できるのは嬉しいですよね。
そこにこそ非エンジニアがWebflowを使う醍醐味があると言っても良いと思います。
テンプレート集が用意されているので、まずはどんなものが作れるのか眺めてみるといいですよ。
秀逸なデザインの無料テンプレートが豊富
操作の基本
まずはAddパネル
ページ作成は、左側のAddパネルにある「Elements」や「Layouts」からパーツを配置して行います。
ここで配置したものがHTMLとしてコードに反映されていきます。
スタイルの設定
CSSの設定は右側にあるスタイルパネルで行います。
細かく調整できるので、デザインの再現性が高いです。
ここで設定したものがCSSとしてコードに反映されます。
デバイスごとにレイアウト調整
PC、タブレット、スマホ横、スマホ縦とデバイスごとにCSSを調整することが可能です。
ここのボタンを切り替えてそれぞれのレイアウトを確認することができます
PCアイコン左の「︙」(縦の三点リーダー)をクリックすればさらに大きなサイズのブレイクポイントを追加することができます。
かんたん公開
公開は「Publish」からブルーのボタンをクリックするだけでOKです!
注目ポイント
下記のようなメリットにも注目したいです。
- Googleフォント、Adobeフォント、カスタムフォント(任意のフォントをアップロード)が使える
- CMSが使える
- ECサイトも作れる
- HTML、CSSのソースコードを出力できる
- SEO対策が簡単
- 開発環境が必要ない点も手軽でよい
もしクライアントワークで使う場合は有料版の契約をオススメします。
実はWebflow、無料版だとできないことが多々あるんですね。
できない事の一例
- 検索エンジンにインデックスされないようにする
- カスタムコードでnoindexの設定
- transfer(他のアカウントへ自分の作ったページを移動する)
- パスワードをかける 等
開発作業中にこれらの機能が使えないとなるとちょっと困りますよね。。そんな時は有料プランを検討しましょう!
有料プランについて
有料プランの詳細ページはこちらになります。
では、具体的にどんなプランを契約すればよいのでしょうか?海外のサービスということもあり、少々分かりにくいのですが、
- Site plans からどれか1つ
- Account plans からどれか1つ
の両方を契約する必要があります。
(Site plansまたはAccount plansのどちらかを契約すればOKなように見えてしまいますが、ここは注意が必要です。)
学習方法
何はともあれ、まずはFreeプランでWebflowを触ってみましょう!
海外のサービスなので日本語で解説している記事が少なく、初めはハードルが高く感じるかもしれません。でも大丈夫です!
私は以下のページを参考に勉強を進めました!
- NoCode School
https://www.youtube.com/playlist?list=PLiDMHhMXhuXQiLGSyf6OwoJiEHyTufLLv
しんじさんによる解説動画です。まずはこちらをオススメします! - Webflow University
https://university.webflow.com/
公式チュートリアル。英語ですけどGoogle翻訳でだいたい理解できますよ。 - フォーラム
https://forum.webflow.com/
わからない時はここも見てみると良いですよ。(もちろんGoogle翻訳) - フリーのテンプレ
https://webflow.com/templates/free-website-templates
無料でダウンロードできるので作りを参考にすると良いですね。
いかがでしたでしょうか?
次回は、実践編と題して、CSSの指定の仕方についてお話できればと思います。