2022年3月に総額142億円を調達し、出資元にはGoogleが名を連ねるなど、世界的に注目を集めているWebflow。
近年では日本でも高機能＆ハイコストパフォーマンスなノーコードツールとして関心を高めており、ベンチャー企業だけでなく、大手企業の利用も増えています。
しかし、まだまだ身近な事例が無く、Webflowの何がいいのか分からない方も多いのではないでしょうか？
そんな方々のために、今回は採用サイトを例に挙げて、Webflowの「メリット」について解説します。
Webサイト制作をご検討中の企業様からWebサイト制作会社のご担当者、フリーランスの方々まで、ご興味持っていただける内容になっています。是非ご覧下さい。
記事中では当社が制作させていただいた『船井総研デジタル様の採用サイト』の事例を交えて、できる限り具体的にイメージをもっていただけるように努めています。
宜しくお願いします。
会社イメージを伝えやすい
メリットの1つ目は会社イメージを伝えやすい事です。 採用サイトを構築する上での最重要事項は『いかにして求職者に職場のイメージを持ってもらうか』です。 そのためには、ビジョンや仕事内容もさることながら、その会社で働く人々のリアルをサイトを通じて求職者に実感してもらう必要があります。
このようなニーズに対応できるWebflowの特徴をご紹介します。
多くの動画・画像の掲載が可能
Webflowでは画像や動画といったメディアコンテンツを様々な方法で掲載することができます。
1．画像の容量を大きく抑えて掲載できる
Webflowでは、通常使われるpngやjpgといった画像形式の他に、WebPという画像形式に対応しているため、掲載する画像容量を大きく抑えることができます。
会社のイメージを伝えるためにはより多くの画像を掲載したいのが、採用のご担当者様のお気持ちかと思います。しかしながら、1ページ内に画像を大量に掲載すると、ページの表示が遅くなってしまい、却って見づらく、閲覧者の離脱率を上げてしまいます。
Webp形式はGoogleが開発した新しい画像形式です。Googleの発表によれば、jpgよりも25～34％、pngよりも26％も軽量化できる超軽量化画像形式なのです。
（実際に制作で扱ってみると、場合によっては70％～90％程度軽量化するくらいの実感があります。）
これで、ページの表示スピードを気にせずに、たくさんの画像を掲載することで、求職者に思う存分会社のイメージを伝えることができます。
2．ページの表示速度に配慮した動画掲載が可能
「サイトに動画を掲載したいけど、そうするとページの表示速度が重くなってしまう、、、」こんなお悩みを持っている採用担当もいらっしゃるかと思います。確かに、サイトに動画ファイルを直接埋め込むとページの表示速度が格段に遅くなってしまいます。
そんな時のために、Webflowでは外部ストリーミングサービスと連携して、ページの表示速度を保ちながら、動画コンテンツをサイトに掲載できる標準機能が備わっています。
Youtubeはもちろんのこと、下記の様にたくさんのストリーミングサービスと連携しているので、ご要望に合わせた掲載方法を選択できます。
- YouTube
- Vimeo
- DailyMotion
- KickStarter
- TED
- Wistia
- Ustream
- Livestream
- Twitch
- Tudou
- Hulu
- SproutVideo
その中でも当社で多用する2つのパターンについて補足します。
A.サイト内の1コンテンツとして動画を掲載する方法
「採用サイトにインタビュー動画を掲載したい」といったご要望にお応えするために、当社が用いるのがYoutubeです。そのメリットはなんといっても『無料』『手軽』であることです。動画投稿に慣れていない方でも簡単に投稿できることから、ここ最近では多くのサイトで利用されています。
しかし、デメリットもあります。
それは、【Youtubeのマークや、関連動画のリストなど、余計なものを表示してしまうこと】です。
数年前までは消すことも可能だったのですが、近年のYoutubeのポリシー改訂で、こうした表示を消すことはNGとされています。
こうしたデメリットに対応するために当社が行っているのが、次の方法です。
B.サイトのファーストビューなど背景に動画を掲載する方法
背景に動画を載せるとき、特にWebサイトの顔であるファーストビューに動画を掲載するとき、Youtubeのマークなどは正直邪魔になります。しかし、動画データを直接ページに埋め込むと、ページの表示スピードが遅くなりせっかくサイトを訪れた人がすぐに離脱してしまいます。
そんな時、当社が活用しているのが「Vimeo」という動画ストリーミングサービスとの連携です。動画投稿の仕方や閲覧制限を掛けられる点などはYoutubeとほぼ同じです。大きく違う点は【邪魔な表示を一切消せること】です（もちろん自動再生や、リピート再生もできます）。これで、サイトに訪れた人に余計な表示を出さずにスムーズに動画を見ていただけます。
実際、船井総研デジタル様でも、採用サイトのファーストビューはVimeoを用いて、動画を載せています。
注意事項！
Vimeoは月額有料のストリーミングサービスです。なので、当社では当社自身がアカウントを保有しそこにお客様の動画をアップロードする形で対応しています。もちろんお客様自身でアカウントを保有して頂いても動画掲載は可能です。
一言一句まで完成形をイメージしてこだわることが可能
Webflowの最大の特徴の一つに『構築工数を大きく抑えられる点』が挙げられます。あくまでも体感値ではありますが、オリジナルテーマでWordPressを用いてサイト構築する場合と比べて、構築に限って言えば工数が1/2程度なのではないかと思っています。
従って、当社では（Webflow制作を行う他社さんも同様かもしれませんが）構築中のサイトにおいてデザインやテキストについては原則修正回数を無制限で承っています。
これによって、細部にまでこだわり抜いてサイトを完成させることができます。
特に、掲載する文言はサイト上で見てみなければなんとも言えない部分があるものですが、Webflowで発行されるテストURLからいつでもサイト制作の状況が確認できるため、実際に今作っているサイトが閲覧者からどのように見えるのかをお客様が逐次把握することができます。
なので、実際にブラウザ上で構築途中のサイトを見ながら、細かな文言の言い回しや、掲載順序、掲載ページなどを調整することが可能です。
こうした透明性が高く、柔軟な構築が出来ることもWebflowで採用サイトを作る大きなメリットの1つです。
オリジナリティあるデザインでサイト制作可能
採用サイトは会社の個性を出したい場所。だからこそ、既視感のあるサイトデザインは何としても避けたいところだと思います。
そんな時にもWebflowはハイコストパフォーマンスで応えます。
WordPressで安くサイトを立ち上げたり、他のノーコードツールでリーズナブルにサイトを制作する場合、どうしてもテンプレートや使用しているツールの制約が、個性的なデザインアイデアの前に立ちはだかります。
制約を乗り越えようとすると大きく工数が掛かるため、泣く泣くアイデアを押しとどめたことがある方もいらっしゃるのではないでしょうか。
しかしながらWebflowはノーコードツールとは思えないほどの自由度の高さでオリジナリティ溢れる採用サイトの構築を、ノーコードならではのリーズナブルな価格で提供します。
実際に、船井総研デジタル様のサイトでも、日本のサイトではあまり見られない『ページを格子状に区切ったデザインをベース』にして制作しています。船井総研グループのDXチームとして発足した会社だからこそ、一目見て『ほかの会社となんか違うな』と求職者に感じて欲しかったのです。
実際グリッドデザインはコンテンツがきれいに整頓されて配置されるため、閲覧者も目で追いやすいというメリットもあります。
このように、細かいところまで創意工夫を凝らしたサイト制作をリーズナブルに提供できるのもWebflowの大きな強みです。
外部リソースを活用しやすい
採用には様々な資料やツールが活用されますので、こうした資料を余すところなく採用サイトに盛り込むことも、非常に重要です。
しかしながら、テンプレートやツールによっては、中々上手く組み込めなかったり、オリジナルで制作するとどうしても工数が掛かってしまったりと、採用サイトを構築する上で、難儀する点でもあります。
しかし、Webflowはノーコードとコーディングを織り交ぜた構築が可能なため、様々な外部リソースの掲載を可能にします。
船井総研デジタル様でも、いくつか実装例がありますので、ご紹介します。
スライド資料の掲載が可能
船井総研デジタル様の採用サイト、ファーストビューのすぐ下にはスライド資料のコンテンツが『Docswell』というツールと連携させて掲載しています。
説明会で使用することもあり、社内でも作り込みができる採用説明資料はかなり高頻度で更新されることが多いです。
しかし、その内容を逐次サイト上で制作した別コンテンツに反映させようとすれば、改修費用がかさみ、制作会社の担当とのコミュニケーションコストもかさみます。
そこで、常に最新の採用情報を載せられるように、このような形でスライド資料をそのままサイトに掲載する事例がここ数年で増えています。
これなら、サイト側を操作することなく、資料ツール（船井総研デジタル様の場合は『Docswell』）側を操作するだけで情報の更新ができるため、運用面で非常に効率的です。
Wantedlyとの連動が可能
船井総研デジタル様の採用サイトにはフッター上部にWantedlyの投稿と連動したビューが表示されています。
近年ではマイナビやリクナビの他にWantedlyを活用する企業様が増えていますが、もちろんWebflowであれば通常のコンテンツとほぼ変わらない工数で、こうしたビューの実装も可能です。また、ビューの大きさの調整も細かくでき、レスポンシブ対応も可能です。
近年、就職者のニーズは多岐にわたっており、それらに対応するため多くの手法が用いられています。こうした状況でもWebflowであれば、様々なツールと連携し、採用活動の軸としてしっかりと機能することができます。
その他外部サービスとの連動も可能
他にも、近年では採用サイトに「チャットボット」や「プッシュ通知機能」「動画やSNSコンテンツの掲載機能」など様々な機能を実装する例が増えています。
ノーコードツールでは実装が難しかったり、通常のサイト制作では別途追加料金になる例もありますが、Webflowではノーコードをベースとして、必要なところだけカスタムコードを実装できるため、他のコンテンツとほぼ変わらない工数で、こうしたニーズに応えることができます。
古いまま放置されにくい
採用サイトを運営する上で、掲載する情報の鮮度維持はご担当者様がかなり気にされるポイントだと思います。実際、そうした工数を捻出できずに採用サイトの解説に二の足を踏んでいる企業様もいらっしゃいますし、採用サイトを開設したはいいけど随分更新できていないサイトも多々あります。こうしたことを防ぐこともサイト制作会社が叶えるべき要件の1つだと思います。また、CMSなどサイト制作ツールを選定する上でも非常に重要なポイントです。
Webflowは開発側だけでなく、サイト運営者にとっても非常に扱いやすいツールになっており、こうした情報鮮度の維持を効率的に行うことができます。
その軸となるのがWebflowの『Editor』です。これによって、お客様は普段見ているWebサイトと同じビジュアルで、編集作業ができます。
ここではよく使う「テキストの書き替え」と「画像の差し替え」の2つの作業について解説します。
他の機能も含めたEditorの機能概要についてはこちらからご覧下さい。
誰でもテキスト変更可能
上記画像を見てください。見た目はいつもブラウザ上で見ているWebサイトですが、実はこちらが編集画面になっています。
テキストのところにカーソルを合わせると、
このようにえんぴつマークが出ますので、こちらをクリック。
すると、Wordやメールなどと同じ感覚でテキストの書き換えが可能です。
書き替えたあとは、この青いボタンをクリックすれば、その場で本番のサイトに反映されます。
なお、テキストの書き換えだけでなく、太字やリンクにすることもできます。
注意事項！
フォントサイズの変更や、フォントファミリーの変更などいわゆるCSSで設定する事項は対応していません。
誰でも画像の差し替え可能
先ほどの編集画面に移ります。
画像を掲載していますが、ここもマウスカーソルを当てると、イメージのマークが出ますので、こちらをクリック。
すると、Windowsではエクスプローラーが、Macではfinderが開きます。
あとは、任意の画像をクリックすると、
画像が挿し替わりました。
こちらも先ほどと同様に、この青いボタンをクリックすれば、その場で本番のサイトに反映されます。
このように、テキストと、画像の差し替えであれば、誰でも簡単に行うことができます。画面も見慣れたサイトの見た目なので、操作感も気にせずに操作できます。
Webについて詳しくない方でも開発画面で修正可能
ここは少々応用編ですが、例えば社内にWebの構築にご興味がある方、ノーコードツールをさわったことがある方がいらっしゃる場合を想定して、ちょっとだけ解説します。
開発画面上でも、Webサイト構築に慣れていない、経験がない方でも操作できることがいくつかあります。
例えば、フォントファミリーやフォントサイズ、フォントカラーの変更です。
開発画面上で、変更したい箇所をクリックします。
すると、青い枠が表示されると共に、右側にいろいろな設定が出てきます。
イメージとしては、Adobe Illustratorのプロパティに近いものです。
この中の「Typography」の欄でフォントファミリーやフォントサイズ、フォントカラー、行の高さなどが設定できます。
日本語版Webflow Universityをぜひ参考に
この他にももちろん開発画面ではWebサイト制作のあらゆることができます。
そちらについては、別途コラムで『日本語版Webflow University』として、定期更新していますので。
是非こちらもご覧ください。
注意事項！
Webflowは他のノーコードツールと同様に無料でサイト制作を行えますが、サイトを独自ドメインで公開するには月額費用（おおよそ$23～29）が掛かります。
この月額費用にはEditorの使用権も含まれています。
この月額費用はいわば、サイトサーバー費用＋保守管理費用＋Editor利用料だと思って頂ければと思います。
尚、当社ではWebflow利用料も含めて月額4,400円(込)をサイト維持管理費用として頂戴し、上記に加えて、Editorの操作レクチャーや軽微な修正対応、Webflowの機能アップデートに対応するサイトメンテナンスなどを行っています。
拡張がしやすい
採用サイトはただ作って終わりのサイトではありません。そのため、Webflowの持つ強みの一つである、拡張性の高さもWebflowで採用サイトを作る大きなメリットです。
もちろん、お知らせや社員インタビューといった投稿コンテンツの追加・編集もしやすいのですが、Webflowはそれだけでなく、例え開発会社に改修を依頼したとしても、短期間・低コストでページ追加やコンテンツ追加ができるようになります。
これは、単にコストメリットがあるだけでなく、金銭的・人的リソースの余剰分を、コンテンツ自体のクオリティ向上や、広告・求人掲載といった集客部分への投資に回せるなど、採用活動全般に好影響を与える程のインパクトを持ちます。
ここでは実際に投稿画面や開発画面をお見せしながら、上記メリットについて解説していきます。
分かりやすい投稿画面
分かりやすい投稿画面は、先ほどのEditorに備わった機能です。Webflowでサイトを公開したお客様であれば誰もが使える機能になります。
こちらが投稿一覧画面です。基本的には投稿したコンテンツが新しい順に並んでいます。
この一覧をクリックするとこのような画面になります。
あとは、必要な箇所を入力していき、Publishボタンを押せば投稿完了です。
Webflowは日本語対応していませんが、項目名や説明書きは日本語で編集可能ですので、当社ではお客様が操作しやすいように項目名も設定して、ご納品しています。
また、一次保存や予約投稿機能もあり、非常に使い勝手のいい機能となっています。
コンテンツ追加がしやすい
構築工数を抑えられるWebflowは例え後からコンテンツを追加する場合でも同様です。
通常、コンテンツを追加する場合、構造の把握から行う必要があるため、思ったよりも改修に費用や時間が掛かることがあるのですがWebflowの場合は画像の通り、サイトの構造が一目瞭然です。
また、一から新しいデザインのコンテンツを追加する場合でも、大元のレイアウトが他のコンテンツから流用出来たり、他のコンテンツの設定を流用出来たりと、部分的に効率化が図れるため、非常にスムーズにコンテンツ追加することが可能です。
これによって、採用担当者はサイト構築やデザインに割く時間をコンテンツ自体の質の向上に割くことができるようになります。
ページ追加がしやすい
流用が利くのはページ追加も同様です。新しい目的の元、新しいページを構築したい場合でも、ベースとなる設定はそのままに追加分の作業だけを行うことで、ページ追加することができます。
WordPressだとどうしても既存の設定を把握するのに時間が掛かったり、他のノーコードツールだと既存ページと少し異なるレイアウトなだけで1から作り直しになる場合もありますが、Webflowは要素ごとに設定の自由度が高いため、皆さんが想像するような流用・効率化を実現することができます。
機能追加がしやすい
Webflowはサイトの機能を追加しようとする場合でもその魅力をいかんなく発揮します。
これは、前述したノーコード部分とカスタムコード部分を任意に組み合わせられることに起因します。
例えば、近年採用サイトには、Web接客ツールを導入する企業様が増えています。
大きな理由としては、採用サイトの重要性が上がるにつれて、採用サイトのコンテンツ量が増えていくことで、閲覧者及び管理者の利便性をサイト運営側が考慮する様になったことが挙げられます。
例えば、サイト閲覧者にチャットボットを介して閲覧ニーズを引き出し、希望するページを案内出来れば、より多くの情報を閲覧者に届けることができます。また、ページごとにヒートマップ分析を掛けてサイト内のユーザー動向を分析し、サイト改善を図ることで、場当たり的な改善ではなく、データに基づく意味のある改善を行うことができます。
こうしたニーズに対応するため、当社でもサイト接客ツールの導入を必要に応じておすすめしています。
まとめ
いかがでしたでしょうか。
上述した内容を改めて下記に簡単にまとめましたので、ご覧ください。
＜Webflowが採用サイトに強い理由＞
・会社イメージが伝えやすい
Webflowでは、ページの表示速度低下を抑えつつ、豊富な画像や動画コンテンツを掲載できる機能が標準で備わっているため、多くの情報をビジュアルで分かりやすく求職者に伝えることができます。
・外部リソースを活用しやすい
採用活動に使用されるあらゆるツールは採用サイトのパワーを上げるために重要なパーツです。Webflowでサイト制作することで、それらのパーツを実装し、低予算でも魅力的な採用サイトを創り上げることができます。
・古いまま放置されにくい
採用サイトは作って終わりではなく、刻々と変化する企業様の状況を反映し、更新していく必要があります。Webflowにはそうした活動をお客様が行う上で心強い『Editor』というツールが標準で備わっているため、古いままサイトが放置されることを防ぎます。
・拡張がしやすい
採用サイトの重要性が高まるにつれて、多くのコンテンツ、ページ、機能を搭載する必要性が高まっています。こうしたサイト拡張を効率的に行うことこそ、高い自由度をノーコードで実現するWebflowの真骨頂といえます。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した記事はこちらからご覧ください。
Webflowのメリットについて解説した他の記事はこちらからご覧ください。
