Frontend

NEWTの販促企画を支えるノーコードとエンジニアリング

2023/04/15

| Ippo Matsui

category

frontend

mainImage

publishedAt

Apr 15, 2023

published

slug

newt-adventcalendar-20230415

authorDisplayName

Ippo Matsui

ノーコードを活用したWebサイト制作ノーコードとエンジニアリング動的なコンテンツの生成 Firebase Dynamic Linksを活用したアプリ遷移とクーポン機能 Proxy処理を活用したSEO対策エンジニアリングのサポートがしやすい環境づくりおわりに

こんにちは。NEWT 1st ANNIVERSARY CALENDAR 11日目担当の松井一歩 (@ippo_012) です！

令和トラベルではフロントエンドとiOSのエンジニアを担当しています。

2022年4月5日に海外旅行予約アプリ『NEWT（ニュート）』はリリース1周年を迎えました。カスタマーの皆さま、いつも応援していただいている皆さま、いつも本当にありがとうございます。

この1年間、NEWTではセールやクーポンといった様々な販促企画を展開してきました。これらの企画において、効果的なランディングページ（LP）制作が欠かせません。しかし、一からサイトを作るとなると膨大な時間と開発工数がかかってしまいます。さらに、令和トラベルでは「Go Fast」をValueに掲げており、とにかく早く、また数多くの打席数に立つことを重要視しています。

このため、ノーコードとエンジニアリングを活用して、販促企画を高速に打ち出せるように仕組み化を進めてきました。

今回は、NEWTがこの仕組み化についてどのような方法で実現しているのかを紹介していきます。

詳しいNEWTの販促企画について知りたい場合は、販促企画をリードしてきたまなみんが書いた以下の記事をご覧ください。

リリース1年目の販促企画。10以上の企画で必ず守っていた、重要なポイント3つ。｜Manami Mukai｜note

こんにちは。令和トラベルでプロモーションを担当しています、向井愛美（Manami Mukai）です！ 2023年4月5日、海外旅行予約アプリ『NEWT（ニュート）』は無事リリース1周年を迎えることができました。予約いただいたお客さま、いつも応援してくださるみなさま、まずは、本当にありがとうございます。その1周年を機にアドベントカレンダーがはじまるとのことで、わたしもnoteを書くことにしました。この1年、主軸においていた「販促企画」について書きたいと思います。 1年間で発表した企画は10以上！ほぼ毎月、何かしらの企画をリリースしました。ほぼ広告予算を使わずに（販促費は基本、お客

https://note.com/mnm_writing/n/n186f34a04c7b#45855b39-a002-4301-867a-a5714744aa84

ノーコードを活用したWebサイト制作

前述したように、NEWTはセールやクーポンなど多様な販促企画を展開しており、それに伴いLP制作が必要となります。しかし、一からサイトを構築すると、時間と開発リソースが必要になる問題が存在します。これを対処するため、令和トラベルでは創業当初からノーコードでのWebサイト制作を採用し、開発工数を最小限に抑えながら、品質を担保しつつスピーディーにリリースすることを意識しています。

その結果、NEWTでは初期から、サイト制作ノーコードプラットフォームであるWebflowを利用しています。

主に販促担当者やデザイナーがWebflowを利用しており、エンジニアの開発工数をほぼ必要とせずにサイト制作を実現できています。

1周年セールのLP (https://newt.net/sale-fes2303)

コーポレートサイトもWebflowで制作しています。 (https://www.reiwatravel.co.jp/)

StripeのPayment Linksを利用して決済機能を実現しています。(https://newt.net/rakuraku-pack)

以下に、Webflowの利用メリットをまとめます。

基本的にデザインの制約がなく、どんなデザインでも再現可能

CMS機能が用意されている

Designer/Editorなど、メンバーの機能を制限できる

本番反映ではエンジニアのデプロイが不要

管理画面でフォームなど動的な項目も作成が簡単

Components機能が便利

HTML/CSSの知識があると、より細かいカスタマイズが可能

困ったときにはCustom code欄を活用しHTMLをEmbedできる

さらに、WebflowのComponents機能を利用してLP用のコンポーネントを作成し、テキストや画像の差し替えで効率的に使用できるようにしています。これにより、かなり効率的にページ作成が可能になっています。実際に、コンポーネントが完成した8月以降、デザイナーでもエンジニアでもないメンバーが、30ページ以上を制作し、週に1ページ作成するペースをコンスタントに維持できています。

こうしてノーコードでサイト制作の仕組みを構築していますが、Webflowは便利で自由度が高いものの、ノーコードだけで全てを実現することは困難です。

そこで、ノーコードとエンジニアリングを組み合わせた事例を紹介します。

ノーコードとエンジニアリング

動的なコンテンツの生成

NEWTのLPでは、ツアーカードという動的コンテンツが存在します。ツアーカードの料金部分は、価格と在庫に応じて日々変動します。

Webflowには便利なCMS機能が用意されていますが、外部APIから動的なコンテンツを生成する機能は提供されていません。そのため、NEWTのLPではFigmaから生成した画像をツアーカードに埋め込んでいました。

しかしこの方法では、価格と在庫が動的に変化するため、手動で更新しなければならず、かなりの工数がかかっていました。さらに、人力による作業ではミスも生じやすい状況になっていました。

この問題を解決するために、埋め込み用のツアーカードを作成し、iframeで表示する方法を採用しました。埋め込み用のツアーカードは、NEWT Web版と同じ構成で、Next.jsを用いて作成されています。

不要なパッケージを除去し、バンドルサイズを縮小する目的で、NEWT Web版とは別のNext.jsプロジェクトを作成しました。この設計では、コンポーネントやGraphQLのクエリを共通利用できるようになっています。

ツアーID別のページには、1つのツアーカードが表示されるよう設定し、それらをWebflowのEmbedタグ内でiframeを使って埋め込む形で実装しています。iframeタグにはLazy loadingを指定しページ読み込みを最適化しています。

このツアーカードの埋め込み実現により、料金更新にかかる工数を大幅に削減できました。

Firebase Dynamic Linksを活用したアプリ遷移とクーポン機能

ツアーカードや「もっとみる」リンクでは、Firebase Dynamic Linksを使用しています。これにより、アプリが未インストールの場合はApp StoreやGoogle Playに遷移し、インストール済みの場合はアプリ内の特定の画面へ遷移させることが可能です。

Firebase Dynamic LinksはURLを管理画面から簡単に発行でき、クリック数などの情報も取得できるため、便利であり多くのサービスで活用されています。

さらに、Firebase Dynamic Linksを用いてクーポン受け取り機能も実装しています。具体的なフローは以下のようになっています。

Dynamic Linksのパラメータにクーポンコードを付与する。

LPの受け取るボタンからDynamic Linksでアプリの保有クーポン画面に遷移する。

付与されたクーポンコードを利用して、クーポン追加のリクエストを送信する。

追加されたクーポンを保有クーポン画面に表示する。

このように、Firebase Dynamic Linksを活用することで、アプリの遷移やクーポン機能をスムーズに実現しています。

Proxy処理を活用したSEO対策

NEWT Web版は、newt.netドメインを使用し、LPはWebflowで制作されており、カスタムドメインを設定し、lp.newt.netドメインが割り当てられています。

SEO対策の一環として、同一テーマのサイトであるため、Webflowドメインではなくnewt.netドメインでLPを表示する必要があります。例えば、ユーザーがnewt.net/brandにアクセスした場合、lp.newt.net/brandのコンテンツが表示されるようにしています。

解決策として、メインドメイン内でWebflowのコンテンツを表示するため、Next.jsのRewritesを利用し、リクエストをプロキシ処理しています。これにより、ユーザーがnewt.net/brandにアクセスすると、newt.netがlp.newt.net/brandからHTMLを取得し、ユーザーに返す仕組みになっています。また重複したページになるWebflow側にcanonicalを指定しています。

この方法では、ユーザー自身がlp.newt.netにアクセスすることなく、代わりにサーバーがその処理を行います。これにより、SEOランキングを向上させることができるだけでなく、ユーザーにとっても適切なコンテンツが表示されるようになります。

このように、NEWTはノーコードの利点を活かしつつ、エンジニアリングのサポートを受けながら、効率的かつ迅速に販促企画を行っています。今後も、ノーコードとエンジニアリングを組み合わせた手法を用いて、より多くの販促企画を実現していく予定です。

エンジニアリングのサポートがしやすい環境づくり

前述の埋め込み用のツアーカードは、販促企画チームからの相談がきっかけで生まれました。令和トラベルでは、Slackにエンジニア相談用チャンネルを設けており、どのチームでも課題の大小問わず気軽に相談できる場所として活用されています。日々さまざまな提案が寄せられ、エンジニアが迅速にサポートできるように努めています。