Webサイト制作者必見!Webflowを使ったサイト構築 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webサイト制作者必見!Webflowを使ったサイト構築

Webサイト制作者必見!Webflowを使ったサイト構築

Webflowは2013年にスタートしたサンフランシスコ発のWebサイト開発サービスであり、nocode(コードを書かない開発)ツールです。

この記事では、Webサイト構築に使うことができるWebflowについて、その特徴と使い方について解説いたします。

1.Webflowのメリット・デメリット

Webflowを使った開発は便利ではあるものの、万能ではありません。

以下のようなメリット・デメリットがあることを理解した上で導入するのがよいでしょう。

メリット

・CMSやECサイトも作成することができる
・ブラウザでコーディングする感覚で作ることができる
・画面でデザインして作ったものを HTML/CSS/JSでエクスポート可能
・HTMLとCSSさえ知っていればなんでも作れる
・開発環境が不要
・クライアントサイドで更新ができる
・サーバーなどの面倒な設定が必要ない
・サーバー更新や運用費用をWebflowが代わりにクライアントへ請求してくれる


デメリット

・HTML や CSS の知識がないと操作ができない
・コーディングができないと理解が難しい
・国内では作れる人が限られる
・日本語のドキュメントがない

2.Webflowでの開発の特徴

Webサイト開発に必要な3大要素は以下です。Webflowはこの全てを画面操作で開発することができます。

Webflowのメリットを大きく受けられるのは、これまでWordPressテーマをユーザーのニーズに合わせて作っていた「マークアップ」と「コーディング」に携わっていた方々です。

html/cssを使った開発の場合、コーディングやデザインスキルが必要ですが、コーディングすることなく、ユーザーインターフェースの操作によっての実現が可能となります。

・デザイン
・操作アクション
・CMS

WordPressのテーマ作成では、データベース設計してカラムを追加して、PHPファイルを編集してどの項目をどこに表示させるかを考えて決めます。Webflowでは、それらが画面上から全て設定できます。

WordPressテーマはプログラマーが作成しなければいけないし、1回作るとユーザーは二度と編集できません。

Webflowだといつでも簡単に編集できて、もし間違ってもすぐにもとに戻すことができます。

3.Webflowのできること、できないこと

デザイン

デザイン知識がなくてもテンプレートからwebサイトが作ることができます。これまでwebデザイナーが内部にいるか、外注するしかなくて作れなかった人もいるかもしれませんが、そういう場合でも作ることができるのは大きな変化でしょう。


htmlとCSS

ドラッグアンドドロップだけで、webサイトが構築できます。html/cssのコーディングができなくてもよいということが大きなメリットです。ただ、コーディングの知識があったほうがスムーズに構築することができます。


CMSの構築


CMS一覧からゼロから作るのも、CSVでインポートするのも、両方できます。CMSといえば、Wordpressのようなもので、ゼロ状態から作ることは工数も難易度も高いですが、そのCMS構築もGUI上で可能です。


HTMLタグのスタイル設定

例えばbodyタグに下記のようなスタイルを設定したい場合、cssであれば以下のように書きます。

body {
background-color: #eee;
font-family: 'Noto Sans JP', sans-serif;
color: #333;
font-size: 14px;
line-height: 24px;
}

これをWebflowで実現するためには、ナビゲーターパネルで「Body」を選択した状態で「Style」パネルのプラスアイコンをクリックし、「Body(All Pages)」を選択します。

その状態でフォントと背景色を設定します。img-5プロパティを指定すると文字が青色になります。

続けてH2のスタイルを設定します。Addパネルから「H2 Headings 2」を配置し、「Style」パネルのプラスボタンから「All H2 Headings」を選択します。

H2には以下のようなスタイルを設定したいです。

h2 {
margin-top: 0px;
margin-bottom: 0px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size: 30px;
line-height: 40px;
font-weight: 700;
}

スタイルパネルでプロパティを指定します。

H2では、以下を指定したので、その部分が青字になります。

margin-top
margin-bottom
font-family
font-weight
font-size
line-height

4.まとめ

今回の記事では、Webサイト構築のためのノーコードツールである、Webflowについてご紹介してきました。

英語ドキュメントしかないなど、英語に苦手意識がある人からすればデメリットはありますが、これまでhtml/cssを扱ってきた方が簡単にwebサイトを構築する上では重要となってきます。

関連記事

ページ先頭へ