2022年3月に総額142億円を調達し、出資元にはGoogleが名を連ねるなど、世界的に注目を集めているWebflow。
近年では日本でも高機能＆ハイコストパフォーマンスなノーコードツールとして関心を高めており、ベンチャー企業だけでなく、大手企業の利用も増えています。
しかし、まだまだ身近な事例が無く、Webflowの何がいいのか分からない方も多いのではないでしょうか？
そんな方々のために、今回はブランディングにを焦点を当てて、Webflowの「メリット」について解説します。
以前「採用サイトにおけるWebflowのメリット」についても解説していますので、ご興味ある方はこちらも是非ご覧ください。
Webサイト制作をご検討中の企業様からWebサイト制作会社のご担当者、フリーランスの方々まで、ご興味持っていただける内容になっています。是非ご覧下さい。
記事中では当社が制作させていただいた『ミツワ総合地所様のコーポレートサイト』の事例を交えて、できる限り具体的にイメージをもっていただけるように努めています。
宜しくお願いします。
Webflowは数々のノーコードツールの中でも、かなりオリジナリティを出しやすい機能を兼ね備えています。
通常、WixなどのノーコードツールやWordPressでテーマをベースにして制作する場合、それらツールやテーマの仕様上、実装が難しい、工数が掛かってしまうことが多々あり、なかなか既視感のあるデザインから抜け出せないことがあります。
しかし、Webflowはノーコードツールとはいえ、フルコーディングでのサイト制作に匹敵する自由度を持っているため、オリジナリティ溢れるデザインを実現でき、お客様のブランディングを強く支援します。
詳細なWebflowの特徴について下記で順を追って説明していきます。
Webflowというツールの最大の特徴ともいえる点は、「時間を掛けなくていいところは極力効率化し、時間を掛けるべきところに工数を割く」という理想的な考え方を忠実に再現していることです。
ゆえに、ネット上で「Webflow」と検索すると、「素人でも簡単にイケてるサイトが作れるノーコードツール」などと紹介されています。
実際、操作は非常に簡単で、かくいう私はディレクターであり、コーダーではないのですが、制作途中のサイトをレビューがてら自分で修正したり、お客様との打ち合わせの中でご希望をその場でサイトに反映して見せたりと、かなり手軽に操作できています。
一方で、Webflowの構造は、フルコーディングのサイトとほとんど変わりませんので、カスタマイズしようと思えばかなりの作り込みが可能になっています。
このように効率化できる部分は徹底して効率的に作業を進め、こだわる部分にこそしっかり工数を割けることが、Webflowの最大の特徴の1つです。
また、そのおかげで次に解説するような効果も期待できます。
Webflowは次の3つの観点から、細部にまでこだわり抜いた制作方法を実現できます。
多くの制作会社さんでは効率性の観点から制作プロセスの分業化を進めており、戦略はディレクターが、UIはデザイナーが、コーディングはコーダーが対応するといった体制を取っています。
しかしながら、こうした分業化は、コミュニケーションコストの増加やクライアント側の工数負担増などに繋がる懸念もあります。
Webflowでは最も工数の掛かるコーディング部分をノーコードにすることで、WebデザイナーがXU戦略からサイトリリースまで一貫して対応できます。
これによって、ヒアリング時・企画時にお客様と検討した内容を忠実に、リリースまで反映しきることができると当時に、構築中の方針転換や細かな修正などにも柔軟に対応できるようになります。
Webサイト制作の非常に難しいところは【最後まで作り切ってみないとサイトの完成形が分からない】ことにあります。
当たり前に思うかもしれませんが、これは非常に奇妙なことだと私は考えています。
何故なら、『閲覧者からどのように見えるのか？どのように操作するのか？を確かめる頃には、デザインの修正ができない段階までサイト制作の工程が進んでしまっている』ことを意味するからです。
Webサイトに詳しくない人でも『UX（ユーザーエクスペリエンス）』という言葉を聞いたことがあるくらいに、サイト上での閲覧者の体験をより良いものにしていこうというこの時代に置いて、上記の様な事は制作プロセスにおける大きな欠陥だと言えます。
そこで、Webflowは『コーディングに掛ける時間を可能な限り短縮できる』という特徴を活かし、「デザインと構築を同時に進める制作手法」を推奨しています（この手法をインブラウザデザインと言います）。これによって、構築を進めながら、お客様にはPCやモバイル端末からいつでもサイトのリアルな見え方を体感・確認でき、コンテンツの入れ替え、デザインの差し替え、テキストの修正、各端末で表示させたときに微妙なサイズ感・配置などあらゆる観点から常に修正を掛けることができます。
上長や社内の確認も事前に回すことができるため、最後の最後で大きくデザイン・コンテンツがひっくり返るリスクも抑えられます。
こうした、効率的な制作方法によって、最後まで時間を掛けてデザイン部分を作り込むことが可能になります。
上述したようなWebflowの特徴とそれに合わせた制作手法によって『ミツワ総合地所様』のコーポレートサイトは同業他社と大きく差別化されたデザインとなっています。
ご要望としては、
・競合他社と大きく違う印象を与えたい
・理念のキーフレーズに目が行くようにしたい
・総合不動産会社として手がける事業の広さを示したい
・信用の裏付けとして事例の多さもしっかり見せたい
というものでした。
従って、まずサイト全体として通常の不動産会社のサイトとは大きく異なる、スタイリッシュで動きのあるデザインを採用しています。
また、強調したい箇所にはアニメーションを用いつつ、事業全体が見渡せるように、メニューを1か所に纏めたり、事業紹介のコンテンツを1ページにまとめるといった閲覧しやすい作りにしています。
特に、TOPページの背景画像はリリース1週間前までご担当者様が悩んで選び抜いた画像になっていたり、アニメーションのスピードも0.1秒単位で調整しました。
スマートフォンでの見え方も十分にチェックしたうえで、細部まで調整しきってサイトをリリースしています。
このように、こだわりをしっかりと体現し、その目で確かめて、細部まで作り込むことができるのがWebflowの強力なポイントです。
Webflowがブランディングに強い2つめの理由は、Webflowがサイトに様々な動きを取り入れやすいことです。
確かに高い予算を掛ければ、iPhoneのサイトのような動き溢れるサイトは出来ます。しかし、多くの企業がそこまでの予算をサイトに割けないのが現状かと思いますし、私としてもそこまでするよりは、広告運用やSNSマーケティングなどに予算を回すべきだと思います。
しかし、Webflowは標準のアニメーション機能とカスタムコードを組み合わせることで、制作側に大きな自由をもたらしてくれます。
これによって、様々なギミックをサイトに盛り込み、既視感からの脱却、ユーザーの視線・操作の誘導を可能にします。
『ミツワ総合地所様』でも様々な箇所でアニメーションを効果的に取り入れています。
効果的にアニメーションを取り入れている箇所をいくつかご紹介いたします。
1つ目は、キーメッセージの強調です。
『TOPページ』を開いたときのアニメーションで、3つのキーメッセージにアニメーションを付与しています。あえて、白帯から出てくるようなにアニメーションにすることで、まずそこに目が行くような作りにしています。
次は『事業紹介ページ』です。
よく見るアニメーションとしては、画像やテキストが下からふわっと上がってくるようなものですが、今回画像は趣向を変えました。
事業ごとに取り扱っている不動産規模や物件の種類のアピールの意味も込めて、ホバーすると写真が切り替わる仕様にしています。
こうした動きは他のサイトではなかなか見ない動きであり、お客様のご要望にあった『競合他社と大きく違う印象を与えたい』を満たすために取り入れた動きです。
最後は当社事例の導線部分です。『事業紹介ページ』をPCで開いたときに、ページ最下部に表示されているのが該当箇所になります。
お客様が気にしていたこととの一つに『会社の信頼性をどう感じてもらうか』がありました。そのため、多くの事例をサイトに掲載しています。しかし、実際に事例ページに遷移して頂かないことには話が始まりません。
そこで、当社では当社事例の導線を大きく設け、尚且つマウスカーソルを当てると、事例物件が次々に表示されるデザインにしています。これによって閲覧者には、大きなビルの写真から、マンション、店舗、事業用ビルなど、多岐にわたって取り扱える企業であることにまず興味を持ってほしかったのです。
この仕掛けはTOPページにも施しています。
これによって、リリース後は事業紹介ページと同じpv数を稼ぐほどの目玉コンテンツとして機能しています。
Webflowがブランディングに強い3つ目の理由は『サイト運営がしやすい』ことです。
せっかくブランディングを意識して作り込んでも、そのまま放置してしまっては、企業の実態とズレていったり、更新されていないこと自体が、閲覧者の興味を削ぐ要因となってしまいます。
しかし、業者を介してサイトを改修すると金額もコミュニケーションコストも掛かりますし、難しい更新作業を自分でやるには億劫です。
そこで、Webflowでは、自社で情報を追加しやすくする機能を多く用意しています。また、改修を業者に頼んだとしても既存のパーツをうまく流用して効率的に改修を行えるような機能が備わっています。
こちらの特徴について次でご紹介します。
Webflowを自社で更新して頂くにあたって『Editor』というWebflowの機能を使って頂くことになります。
この『Editor』がかなり強力な更新ツールになっています。
ここでは、特に使用頻度の高い「テキストの書き替え」と「画像の差し替え」の2つの作業について解説します。
他の機能も含めたEditorの機能概要についてはこちらからご覧下さい。
上記画像を見てください。見た目はいつもブラウザ上で見ているWebサイトですが、実はこちらが編集画面になっています。
テキストのところにカーソルを合わせると、
このようにえんぴつマークが出ますので、こちらをクリック。
すると、Wordやメールなどと同じ感覚でテキストの書き換えが可能です。
書き替えたあとは、この青いボタンをクリックすれば、その場で本番のサイトに反映されます。
なお、テキストの書き換えだけでなく、太字やリンクにすることもできます。
注意事項！
フォントサイズの変更や、フォントファミリーの変更などいわゆるCSSで設定する事項は対応していません。
先ほどの編集画面に移ります。
画像を掲載していますが、ここもマウスカーソルを当てると、イメージのマークが出ますので、こちらをクリック。
すると、Windowsではエクスプローラーが、Macではfinderが開きます。
あとは、任意の画像をクリックすると、
画像が挿し替わりました。
こちらも先ほどと同様に、この青いボタンをクリックすれば、その場で本番のサイトに反映されます。
このように、テキストと、画像の差し替えであれば、誰でも簡単に行うことができます。画面も見慣れたサイトの見た目なので、操作感も気にせずに操作できます。
分かりやすい投稿画面は、先ほどのEditorに備わった機能です。Webflowでサイトを公開したお客様であれば誰もが使える機能になります。
こちらが投稿一覧画面です。基本的には投稿したコンテンツが新しい順に並んでいます。
この一覧をクリックするとこのような画面になります。
あとは、必要な箇所を入力していき、Publishボタンを押せば投稿完了です。
Webflowは日本語対応していませんが、項目名や説明書きは日本語で編集可能ですので、当社ではお客様が操作しやすいように項目名も設定して、ご納品しています。
また、一次保存や予約投稿機能もあり、非常に使い勝手のいい機能となっています。
Webflowでコンテンツ追加を依頼する場合、コミュニケーションの手間や改修費用を抑えられるため、非常に効率的にサイト改修が可能です。
改修時に手間となるのが『改修依頼をまとめる作業』です。たとえ軽微な修正であっても具体的な修正指示を出す必要が出てくるため、サイトの運営担当者の負担になることが多くあります（一方制作会社任せにすると、企画やデザイン料など、余計な費用が掛かってしまいます）。
しかし、Webflowでは軽い要望を元に、一先ず制作側で修正を掛け、構築時に使ったテスト用のURL（一般公開されていないURL）から状態をチェックし、必要部分のみ修正を入れて完成、といったステップが踏めます。
これによって、慣れない修正指示をまとめる手間も省けます。
また、デザインを担当しているスタッフが改修作業も行えるため、制作会社側の作業期間も短くて済みます。
加えて、Webflowはすでに制作済みのサイトのパーツを元に、好きにカスタマイズして新しいコンテンツ・ページを作り出すことが可能です。テンプレートをベースにサイトを制作している場合や、他のノーコードツールだと、パーツの流用が仕様制限でうまくいかず、一からコンテンツやページの制作を行わなければならない場合が多くあります。
Webflowでは見た目上似たコンテンツであれば、ほぼ流用して効率的に新しいコンテンツを作り出すことが可能だと思って頂いていいでしょう。
これらの特徴によって、Webflowであれば『短期間に』『余計な手間をお掛けせず』『リーズナブルに』サイト改修することができます。
実際当社でも場合によっては、お電話で修正を承ったその日に修正案第1版をお見せするくらいのスピード感で作業を進めることもあります。
サイト運営をスムーズにすることは、ブランディングやその先のWebマーケティングでも非常に重要なことです。
作ってからがWebflowの本領発揮と言ってもいいほど、この拡張性の高さは他に類を見ないWebflowの強みです。
いかがでしたでしょうか。
上述した内容を改めて下記に簡単にまとめましたので、ご覧ください。
＜Webflowが採用サイトに強い理由＞
・オリジナリティを出しやすい
WebflowはUX戦略からデザイン・構築まで一貫して担当者が対応可能であり、デザインと構築を並行して行えるため、細部にまでこだわったサイト構築が、リーズナブルな価格で提供できます。
・動きのあるサイトが作りやすい
Webflowにはパワフルなアニメーション機能があり、さらにはカスタムコードとも組み合わせられるため、様々な動きをサイトに取り入れることが可能です。
・サイト運営がしやすい
Webflowの『Editor』という機能を用いることで自社のサイト運営を簡単に行えるようになります。それだけでなくサイト改修時も効率的に修正を進めることができるため、サイト構築した後も非常に心強い制作手法がWebflowなのです。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した記事はこちらからご覧ください。
Webflowのメリットについて解説した他の記事はこちらからご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営