• Subscribe to RSS

Webflowを使ってみよう！ 概要編

2020.10.19

クメ

デザイナーがデザイン＆コーディングを担当する案件が徐々に増えてきました。
今回は「Webflow」というレスポンシブ・ウェブ・デザインのコーディングに特化したサービスをご紹介します。

デザイナーのクメです。
近頃社内では、よりスピードが求められる案件に対応するため、ノーコードに関心が高くなっています。これまでデザイナーがコーディングを担当する機会はあまりなかったのですが、徐々にデザイン＆サイト構築を担当する案件が増えてきました。
今回は「Webflow」というRWD（レスポンシブ・ウェブ・デザイン）の実装に特化したサービスをご紹介します。

実践編はこちら

Webflowとは？

img 01

オンラインでサイト制作から公開までこれ一つで完了できる海外発のウェブサービスです。
HTMLとCSSの知識はあった方がよいですが、実際の作業ではコードを記述する必要はなく、基本的にはボタンをポチポチやっていくだけでOK！自動でHTML、CSS、JavaScriptを生成してくれるのです。
最近はコーディングから少し離れてしまっているというデザイナーやディレクターの人たちに特におすすめしたいです。

img 03
インターフェイスはこのような感じです

こういったサイト作成サービスの場合、再現できるデザインが限定的になってしまったりしますが、Webflowではそんな事はありません。静的なページのコーディングであれば基本的にできないデザインはほぼ無いです。
デザインを作る時はいつも通りクリエイティビティを思う存分発揮してください！
また、パララックス効果などの演出も簡単につける事ができます。今までエンジニアにお任せ状態だったものを自分で作成できるのは嬉しいですよね。
そこにこそ非エンジニアがWebflowを使う醍醐味があると言っても良いと思います。
テンプレート集が用意されているので、まずはどんなものが作れるのか眺めてみるといいですよ。

img 02
秀逸なデザインの無料テンプレートが豊富

操作の基本

まずはAddパネル

ページ作成は、左側のAddパネルにある「Elements」や「Layouts」からパーツを配置して行います。
ここで配置したものがHTMLとしてコードに反映されていきます。

img 08

スタイルの設定

CSSの設定は右側にあるスタイルパネルで行います。
細かく調整できるので、デザインの再現性が高いです。
ここで設定したものがCSSとしてコードに反映されます。

img 06

デバイスごとにレイアウト調整

PC、タブレット、スマホ横、スマホ縦とデバイスごとにCSSを調整することが可能です。
ここのボタンを切り替えてそれぞれのレイアウトを確認することができます
PCアイコン左の「︙」（縦の三点リーダー）をクリックすればさらに大きなサイズのブレイクポイントを追加することができます。

img 07

かんたん公開

公開は「Publish」からブルーのボタンをクリックするだけでOKです！

img 09

注目ポイント

下記のようなメリットにも注目したいです。

  • Googleフォント、Adobeフォント、カスタムフォント（任意のフォントをアップロード）が使える
  • CMSが使える
  • ECサイトも作れる
  • HTML、CSSのソースコードを出力できる
  • SEO対策が簡単
  • 開発環境が必要ない点も手軽でよい

もしクライアントワークで使う場合は有料版の契約をオススメします。
実はWebflow、無料版だとできないことが多々あるんですね。

できない事の一例

  • 検索エンジンにインデックスされないようにする
  • カスタムコードでnoindexの設定
  • transfer（他のアカウントへ自分の作ったページを移動する）
  • パスワードをかける　等

開発作業中にこれらの機能が使えないとなるとちょっと困りますよね。。そんな時は有料プランを検討しましょう！

有料プランについて

有料プランの詳細ページはこちらになります。
では、具体的にどんなプランを契約すればよいのでしょうか？海外のサービスということもあり、少々分かりにくいのですが、

  • Site plans からどれか1つ
  • Account plans からどれか1つ

の両方を契約する必要があります。
（Site plansまたはAccount plansのどちらかを契約すればOKなように見えてしまいますが、ここは注意が必要です。）

学習方法

何はともあれ、まずはFreeプランでWebflowを触ってみましょう！
海外のサービスなので日本語で解説している記事が少なく、初めはハードルが高く感じるかもしれません。でも大丈夫です！
私は以下のページを参考に勉強を進めました！

いかがでしたでしょうか？
次回は、実践編と題して、CSSの指定の仕方についてお話できればと思います。

クメ

株式会社ニューロマジック デザインチームのクメです。小学生の息子に影響されて植物に興味を持ち始め、野菜の切れ端を水耕栽培している。趣味は美術鑑賞。