for Startups Tech blog

このブログのデザインを刷新しました。(2023/12/26)

【フォースタ テックブログ】デザイナーがコーポレートサイトをノーコードツールのWebflowを使ってリニューアルした話

 

フォースタートアップスは2021年7月にコーポレートサイトの大幅なリニューアルを行いました。

www.forstartups.com

今回、このリニューアルに関わったデザイナー2名(甲斐・長峰)より、ノーコードでWebサイト制作ができるWebflowを利用するに至った背景や、グラフィックについてのこだわり、制作で苦労した点などについてご紹介します。

www.wantedly.com

www.wantedly.com

TechLab.でノーコードツールを使うという選択

甲斐:
エンジニアリングチームであるTechLab.には複数名のエンジニアが所属しています。SREをはじめ、バックエンド・フロント、もちろんデザイナーも在籍しています。Webサイトを制作するスキルを十分に保持したチームですので、今回ノーコードツールを選択した理由は技術や実装面の問題ではありませんでした。多くの企業が同じ課題を抱えていると思いますがコーポレートサイトという特性上、多くの時間と予算を使って作成するというものでもありません。テックラボも日々ビジネスを加速するためのタスクに追われています。今回フォースタがコーポレートサイトのリニューアルの実行に舵を切れたのは、チームが常に新しい事にチャレンジしようとする文化があったからだと思います。結果として、ノーコードツールを使用した知見は今後の開発にも大きく役にたつものになりましたし、PRやブランディング、そしてHRの観点からもメリットが大きかったと思っています。

Webflowにした理由や背景

甲斐:
「ノーコード」という言葉を耳にする機会が増えた方も多いと思います。実際フォースタでもノーコードを使ったWebページを作成した事はありました。ノーコードツールの印象としては「お手軽にWebページが作れる」といった感じです。しかし既にフォースタのコーポレートサイトをご覧頂いた方はお分かり頂けたと思いますが、決してお手軽にスピード重視で作成されたサイトではありません。今回のコーポレートサイトはフォースタのブランドを大切に、コンセプトメイキングからはじまり、ペルソナ・ユーザーストーリーなどをしっかり設計、ブランドを生かしたグラフィックとアニメーションにも挑戦しました。プロジェクトは約半年をかけたものです。

私たちが重視しこだわったのは、更新のしやすさとフォースタのブランドの再現でした。更新のしやすさでいうと、CMSやノーコードツールが挙げられると思います。フォースタでもWordPressといったCMSを利用してはいましたが、テンプレート部分などはエンジニアへの修正依頼が必要であったりして、時期に寄ってはなかなか修正の工数が割けないといった状況も発生しました。実際にフォースタのコーポレートサイトは2019年4月にリニューアルして以降、追加で開発することはあまりできませんでした。上場時にIRページを追加した以外は細かい変更を行うのみでした。しかし、フォースタという会社も事業拡大しており、その拡大しているフォースタと共に進化していくコーポレートサイトを作るということが課題でした。そこを解決してくれそうだと考えたのがWebflowです。Webflowであれば、デザイナーとコンテンツエディターが直接Webサイトを更新できます。デザイナーが直接サイトを更新出来るというのは、先に挙げたフォースタのブランドをデザイナーが直接表現できるということでもありました。

デザイナーのみで作り上げるWebサイト

甲斐:
一般的なWeb開発の場合、デザイナーが作ったカンプを元にバックエンドエンジニアとフロントエンドエンジニアが実装するというイメージが多いかと思います。しかし今回私たちは、最初に練り上げたコンセプトやユーザーストーリーを元に、UXデザイナーが作ったワイヤーから直接WebflowでWebデザインを行うという工程に移りました。

今回のコーポレートサイトに携わったデザイナーはグラフィックデザイナー(長峰)とUXデザイナー(甲斐)の2名です。10数年に渡るグラフィックデザイン歴のある長峰にとって、Web制作は大きなチャレンジでもありました。これまで担当してきたパッケージなどのクリエイティブとWebデザインでは画面内での表現やレイアウトの考え方に違いがあったからです。それにプラスして動きといったモーションデザインもとてもチャレンジングな作業となりました。さらに今回は会社のミッションのアップデートも重なり、それにともなった新しいグラフィックもうみだされました。

これまでのフォースタのブランドを引き継ぎ、次なる進化を表現したトップ画面

 

サイトのキーグラフィックを「挑戦者の広がり」をテーマに制作し、トップ画像などに展開

 

各サービスのビジュアルを開発し、それぞれの特色を出しながら全体のトーンを合わせた。

 

トップページのサービスメニュー

 

デザイナーが直接デザインを行っていけるWebflowはとてもパワフルなツールです。HTML/CSSの基礎知識があるデザイナーであれば十分に使いこなせますし、フロントエンジニアであれば問題無く実装に利用出来ると思います。私自身Webサイトのコーディングをこれまでいくつも行ってきましたが、コーディングを行う頭の使い方でGUIを使って実装していけるのがとても便利だと感じました。これまでの方法ですと、コードを考えて、書いて、書き出して、確認する…といういくつかのステップが必要でしたが、ブラウザ上で直接GUIを使って操作できるので、そうしたステップが大いに短縮できました。必要なパーツは共通コンポーネントとして使えたりもするので、メニューやフッターなどに変更があった場合でも1回の更新ですべてに適用することができます。必要なのはブラウザだけなのです。

グラフィックデザイナーがWebデザインに挑戦

長峰
私は前職のデザイン制作会社でグラフィックデザインに13年以上、アートディレクター・デザイナーとしてロゴデザイン・パッケージデザイン・広告・ポスター等の制作、商品撮影・モデル撮影等のディレクション・デザインに従事してきました。半年前よりプロジェクトメンバーとしてキックオフから参加し、グラフィックデザイン、WEBデザイン、実装と広く関わりました。Webflowを使って実装したのですが、過去に使用したことのあるノーコードツールのSTUDIOとは全然違いました。Webflowはコーディングと同じ仕組みで作られたアプリケーションで、クラスの設定やコードの埋め込みなど、最初ははっきり言って訳がわかりませんでした。しかし、公式の豊富なレクチャー動画や公開されているデザインデータを研究することで一つ一つ理解していきました。

コーポレートサイトのWEBデザインへの挑戦は非常にチャレンジングな仕事で幾多の壁がありましたが、心強い仲間と力を合わせることで乗り越え、リリースすることができました。

グラフィックデザイナーが苦労したポイント

長峰
私が苦労したポイントが大きく3つあります。
1つ目は、グラフィックデザイナーならではの壁だと思いますが、WEBのデザイン・実装の経験が少ないため、何ができて何ができないか、できる場合どれぐらいの工数がかかるかがわからないことです。想像がつかないのでデザインも進めにくいという事態になりました。しかし、WebflowのいいところはGUIで実装しながらデザインできるところで、想像つかないところはまず実装してみることで感覚を掴みました。

2つ目はHTML 、CSSCMSなど専門的な知識がないと理解しづらい部分があるということです。幸い、私はフォースタートアップスでTechLab.に所属していて優秀なエンジニア・デザイナーがいるので相談したり力を借りたりすることで乗り越えました。また公式が運営しているWebflow Universityというサイトがあり、豊富なレクチャー情報があります。英語なので最初はとっつきにくいかもしれませんが、Google翻訳などを駆使して読み解くことで解決できました。他にもWebflow Forumというサイトは様々な質問に対してみんなで答えるサイトがあり、大抵の困りごとはそこで見つけることができます。

3つ目はインタラクティブの部分です。アニメーション表現やユーザーのスクロールやカーソルに対しての表現はフォースタの進化を伝えるためにどうしてもチャレンジしたいものでした。しかし、本来そこはCSSやjsなどのコードによって実装するものでかなりハードルが高いものです。しかしWebflowであればインタラクティブに関しても多くの機能がありGUIでプレビューしながら進めることができ、表現したいイメージに近づくことができました。

WordPressからWebflowへ

甲斐:
コンポーネントやテンプレートといった考え方はWordPressでもなじみのあるものだと思います。世界で最も導入されているCMSであるWordPressは多くのコーポレートサイトでも使用されていると思います。しかし今回フォースタで利用したWebflowは今WordPressに置き換わろうとしています。多くの人がWordPress程できることの多いCMSは他にないだろうと考えていると思います。私もその1人でした。しかし今回私が半年をかけて担当したWeb開発で、WordPressに著しく劣っていると感じた部分はありません。むしろPHPJavaScriptの知識が無くても実装できる点で優位と言えるのではないかとさえ思います。確かに細かい点でPHPが使えれば便利(実装が早そう)だなと思う点はありましたが、結果として実現したいことでWebflowの機能で実現出来なかったことはありませんでした。

今回の開発では使用していませんが、ECの機能も付いています。コーポレートサイトだけでなく用途は大きく広がると思います。さらに作業を自動化できるZapierなどの外部ツールとの連携も可能です。例えば、お問い合わせフォームからの投稿があった場合には社内のSlackにリアルタイムに通知を送ったり、自動でスプレッドシートにお問い合わせ内容を格納したりと言うことが可能です。コーポレートサイトを入り口として発生するお客様対応などを一部自動化することで、1人に集中しがちな作業の負担を減らし、分担もしやすくなりました。

インターフェースが英語なので不安に思っている方もいるかもしれませんが、これまでWeb制作を行ってきた方にはなじみのある用語ばかりですので問題無いと思います。

おわりに

今回のコーポレートサイトのリニューアルは、デザイナー自身がWebflowというノーコードツールを使って実装しただけではなく、会社のミッションのアップデートに伴った新たなグラフィックを生み出したり、ブランディングや設計を、PRや時には経営陣と共にしっかり練り上げてゴールまでたどり着いたプロジェクトです。作業を行うだけではなく、デザインやエンジニアリングの力をフルに生かしてアイディアを形にする職場に魅力を感じるデザイナー・エンジニアの皆様の参画をお待ちしております!