弊社Webサイト制作のためにWebflowを利用してみて気づいた使いこなしのコツ

Yuki Takeda
2022-01-18

こんにちは!アンカーデザインの武田です。

近年、コーディングが不要でWebサービスやアプリの開発が可能なノーコードツールに注目が高まっています。ノーコードツールの1つであるWebflowを自社のWebサイトをリニューアルする際に使用しました。Webflowを実際に使用してみて感じた使い方のコツについて紹介します。

Webflowとは

WebflowはWebサイトを主にドラック&ドロップのみの操作で制作することが可能なWebサービスです。動画で解説されたチュートリアルが多く、基本的な操作、機能を学ぶことができます。また、無料でありながら高品質のテンプレートが豊富に用意されており、コーディングの知識がなくてもテンプレートを参考におしゃれなWebサイトを制作することが可能となっています。デザインの自由度が他のノーコードツールと比べて高いように感じています。

本来Webサイトをインターネットに公開するためには、サーバーの構築や開発環境などを準備する必要がありますがWebflowではWebサイトの制作から公開までをWebflowの中で完結することができ、自分自身のPCで面倒な準備をする必要がありません。Webサイト作成および公開に必要な知識や手間が不要になることで、Webサイトの制作そのものに専念できるのは大きなメリットです。

さらに、検索サイトで上位に表示することによってより多くの人にサイトを訪問してもらうためのSEO設定や、twitterやFacebookに代表されるようなSNSサイトなどでプレビュー表示するためのOGPの設定も比較的容易にすることができます。

Webflowを使いこなすためのコツ

まずはテンプレートを利用して始める

前述した通り、Webサイトを制作・公開する上での面倒なポイントをWebflowがサポートしてくれるため、HTML・CSSの知識のみでWebサイトの作成に専念することができます。HTML/CSSの知識がない人、もしくは初学者でWebflowを利用する場合であっても動画によるチュートリアルやサポート情報が充実しているため、シンプルなWebサイトであれば比較的簡単に制作することができるかと思いますが、その際はぜひ、Webflowで用意されているテンプレートを利用してプロジェクトを開始することをお勧めします。

テンプレートを利用してサイト制作をスタートすることでWebサイトの基本構造やレスポンシブウェブデザイン(画面の幅に応じてコンテンツの表示の仕方を切り替える仕組み)に対する理解を深めることができます。

Webサイトの基本構造やレスポンシブウェブデザインに対しての理解があまりないまま、かつテンプレートを使用せずにWebサイトの制作を始めてしまうと、レスポンシブ対応可能なレイアウトに変更するため多くの箇所を修正することになり、苦労する可能性があるかと思います。


迷ったらまずはチュートリアルを探す

Webflowでは動画でのチュートリアルが用意されており、Webflow UniversityではWebflowに関する操作方法や機能をわかりやすく解説されている動画、記事が用意されています。全て英語ではありますが、充実したチュートリアルから基礎的なことを学ぶことができます。

例えば弊社のWebサイトのニュースページでは、リッチテキスト要素(RTE)を使用しています。この要素はブログなど長いコンテンツの作成に適しており、段落や見出し画像、動画といった要素を追加することが可能です。

CMSのリッチテキストに対してスタイルを適用しようとしたときにスタイルの適用のやり方がわからないという問題が生じました。CMSを利用していない単なるリッチテキスト要素の場合は、リッチテキスト要素にネストされている個々の要素を選択することで、スタイルを設定することが可能となります。しかし、CMSのリッチテキスト要素は、利用していない場合とは異なり内部のコンテンツに対して、選択することができず他と同じような方法でスタイルを適応することができませんでした。

CMSのスタイルの適用方法について調べていると、Webflow University(https://university.webflow.com/lesson/rich-text-field)でリッチテキスト要素について説明されている記事を発見しました。こちらの記事を参照することによって、変更したいタグのプロジェクト全体で設定されているその要素のデフォルトのスタイルに変更を加える必要があることを知り、無事にCMSのリッチテキストに対してスタイルを適用することができました。

Webflowの機能を利用して実装できる場合は、ほとんどがWebflow Universityの記事を参照することで解決できるように思います。私たちがWebサイトを作る上で直面する問題のほとんどがカバーされていますので、まずはチュートリアルを参照する、というのが問題を解決するための最短ルートであることが多いです。

チュートリアルになければWebflow +(HTML/CSSに関連する用語)」でググる

Webflowは基本的な操作であればチュートリアルが用意されていますが、機能が豊富であるため解説されていない箇所も多く、それらに関しての情報がHTML/CSSに比べて少ないです。また実際に実装方法に関して調べる際には「Webflow +(HTML/CSSに関連する用語)」で調べることが多く、コーディングの知識が必要となることもありました。そのため、コーディングに関連する知識があまりない場合は、Webflowでの実装方法を調べる前にHTML/CSSでの実装方法を調べてから実現可能かどうかを確認する必要があります。

Webflowを使いこなそうと思うと、HTMLやCSSの知識があった方がよりベターではあるもののWebflowを学び、使い込んでいくことによって自然とHTMLやCSSについての知識や概念が身につくようにも感じますので、Webflowを触りながら自然とステップアップしていけるところもWebflowのメリットであるように感じます。

また、Web制作で実装がやや大変だろうと感じるレスポンシブ対応やコードで実装する場合はJavaScriptが必要になるアニメーションについても簡単に対応、設定することができる点も大きなメリットです。


ただし、海外のサービスであるため日本語での情報はどうしても少なくなってしまいます。Webflowのチュートリアルで解説されている動画、記事はほとんどが英語であり、日本語の情報があまり存在しませんので、頑張って英語を読むか、必要に応じて翻訳サービスなどを利用する必要があります。


ステージングを使いこなす

Web制作を進めていると本番環境とできるだけ同じ環境でテストしたいと思うことがあります。Webflowではステージング環境が用意されており、本番へと反映させる前の最終チェックとして利用することができます。実際のブラウザでレスポンシブ対応、フォーム、CMS、カスタムコードなどのデザインや利用している機能、動作が想定通りであるかを確認します。ステージング環境を利用することで、フォームなどのWebflowのプレビュー画面だけでは確認することができない動作の確認ができ、また本番環境には影響を与えないため、気軽に試すことができます。本番に反映をして第3者の目に触れる状態になってやっと間違えに気付き、慌てて修正するといったことを格段に減らすことが可能になります。ステージング環境によって本番とほとんど同様の環境でテストすることができるため、安心して本番環境に反映させることができます。

ブレイクポイントは追加しない方が楽(一度追加すると削除できない)

Webflowではメディアクエリを利用してデバイスごとのブレイクポイントに合わせてデザインをカスタマイズすることができます。ブレークポイントには初期の設定としてデスクトップ,タブレット、スマートフォン(横持ち)、スマートフォン(縦持ち)の4つが用意されています。デスクトップのブレイクポイントがベースとなっており、ベースブレイクポイントで行うスタイルの変更が他のブレイクポイントでも適応されます。オプションとしてデスクトップよりも大きいブレイクポイントである、1280px、1440px、1920px を追加することも可能ですが、基本的にブレイクポイントの追加はしなくてよいです。1度追加してしまうとそのプロジェクトからは追加したブレイクポイントを消すことができません。

そしてブレイクポイントを追加することによって生じる弊害を2つ紹介します。
1つ目はレスポンシブ対応のためプレビュー画面を複数回利用していると意図しないブレイクポイント以外でスタイルの適用をしてしまうことがあります。ブレイクポイントを増やした状態だとブレイクポイントを間違えてスタイルを適応してしまっていることに気づく時間とその修正にかかる時間が余計にかかることになります。
2つ目はプレビュー画面にて画面幅を変更すると作業画面に戻った時にブレイクポイントがプレビュー画面で確認していたブレイクポイントに変更されることです。これによって1つ目の問題が起きやすい環境にあると感じました。初期の設定であればプレビュー画面で画面幅を最大にするとデスクトップのブレイクポイントになりますが、オプションで追加することによって、画面幅を広げ、作業画面に戻った際にデスクトップよりも大きいブレイクポイントに変更されてしまい、その都度デスクトップに変更する手間がかかってしまいます。

スムーズにWeb制作を進めるためにもブレイクポイントの追加はどうしても必要がない限り、しない方がよいです。


おわりに

今回はノーコードツールの1つであるWebflowを使用して、Webサイトのリニューアルを行いました。テンプレートやCMSの構築、SEOの設定などの豊富な機能を利用することができるため、Webサイトを非常に効率的に制作することが可能です。

ノーコードのWeb制作ツールとしてはWebflowの他に国産のSTUDIOなども存在しますが、いずれにしても今後Web制作をする際にこれらのノーコードツールは有力な選択肢のひとつとなるであろうと感じています。

記事一覧に戻る