さよならMF KESSAI。こんにちはマネーフォワードケッサイ。そしてよろしくノーコードでリニューアルした新ブランドサイト

December 1, 2020 shinofara nocode

2020年11月2日にMF KESSAI株式会社からマネーフォワードケッサイ株式会社へ名称変更を行いました。またサービスブランドも合わせて変更しました。 https://corp.mfkessai.co.jp/press/2020/11/02/

サービスブランドの変更に合わせてサービスサイトをノーコードでリニューアルを行いました。

今回はリニューアルの前後にフォーカスして下記の通りお話できればと思います。

  1. リニューアル前の状態（課題）
  2. リニューアル後に実現したい事
  3. リニューアル後の仕組みなど

リニューアル前の状態（課題）

リニューアル以前のサイトは過去の記事にもありますがHugo で実装してました。またGitOpsでPR時に検証環境、masterマージ時にproductionデプロイする形でした。

  • 黒い画面を普段使わない開発以外のメンバーには少しハードルが高く、Github上で操作して検証環境の更新を待って確認をする運用状態
  • スケジュール投稿ができないため、Actionsで自前実装
  • 開発のレビューが挟まることで、マーケの施策スピードにブレーキがかかってしまう
  • Firebase Hostingへのデプロイするための利用するCLIのバージョンアップ対応や、Hugoのバージョン対応などの手間

リニューアル後に実現したい事

リニューアルを行う際にこれまでの課題に対してだけではなく、理想も考えやるやらを決めました。

  • エンジニアが関わらない運用体制
  • プレビュー画面を見ながら記事を追加できる仕組みや、公開日時を気軽に設定できる仕組み
  • プレビュー環境などが簡単に作れる事
  • ローカルではなくすべてがWEBで完結する事

リニューアル後の仕組みなど

  • サイト開発と運用
  • DNS管理
    • Cloud DNSからCloudflareに変更
      • これは目的と言うより結果的に使う必要が生まれた為、後半で理由を書きます
  • 無くなった物（事）
    • Githubを使ったGitOpsの仕組み
    • エンジニアのレビュー時間や、エンジニアの開発依頼時間
    • Firebase Hostingを利用していたので運用コストは掛かっていなかったが、インフラ構築やPatchなどの時間

サイトの運用方法の変化

Webflowを使うことで、Hugo x GitOpsの時代とは全く異なる運用方法に変わりました。

前述した通りですが、Webflowには、Designer画面と、Editor画面が存在しています。

ここではそれぞれの画面を少しだけ説明します。詳しくは別途何かしらの形で共有できればと思います。

Designer画面

CSSの知識が必要になる場面はありますが、Designer画面ではURLの階層を考えながら各ページを作る事ができますね。

それぞれのページごとにSEO関連のMeta情報を設定して、Google検索結果にでるイメージを確認することもできます。

デザインエディタとしての使い方は、僕が使い勝手をお話できないのは残念ですが、この通りWEB上のエディタでサイトを開発や更新できる仕組みは良いなと思いました。

Editor画面

Designerで作成したデザインに対して、Editor画面から文言変更などを実行する事ができるので、役割ごとに触る場所を変更できて安全です。

CMS（Collections）では、記事一覧管理、変更や追加などができるのでわかりやすく、また変更しながらプレビューを閲覧できます。

このようにWebflowでリニューアルが完了したことで、これまで関わっていたエンジニアが必要なくなりデザインと編集者がそれぞれの領域を協力しあって価値拡大だけに集中できる状態が整ったと思えます。

そしてなぜDNS管理にCloudflareまで登場したのか

Webflowでcustom domainを利用する為には、CNAMEで割当を行うことになります。しかし弊社がDNS管理に利用していたGCP Cloud DNSではapexドメインに対しての、cname割当が許可されない仕様になっていることに気付きました。（これはDNSとしての仕様です）

弊社の都合ですがapexドメインをメインにしたいという思いがありました。そこでCNAME Flattingという仕組みを提供してくれている、Cloudflareに移行する事を決めた形になります。

Cloudflareへの移行をどのように実施したかは、また別記事を作成しようとおもっています。

最後に

これまでは、事業ドメインの領域だけではなく、コーポレートサイト等にもエンジニアが時間を使う状態でした。今回ノーコードを選択したことで、デザインに責任を持つメンバーと編集に責任を持つメンバーで問題なく行える状態になりました。

今回のリニューアルにおいては、デザイナーが積極的に導入をリードしていったり、運用に向けてマーケターが物凄いスピードで使い方をキャッチアップしていきました。今回のリニューアルが実現できたのも、エンジニアに限らず新しいテクノロジーや変化に対してオープンで、技術によって業務を効率化しよう、現状をもっと良くしていこうとする風土が当社にあったからだと思っています。

現在ノーコードは流行りという事もありますが、このようなケースも含めて自分たちにとって適切だと思える判断で取り入れながら、より生産性高い会社を目指していきたいと思います。

引き続き、マネーフォワードケッサイをよろしくお願いいたします。

RECENT ENTRIES
ARCHIVES
ABOUT