Worksを使用してLP作成アプリをつくってみた

デザインユニットの紺井です。
今回私が勉強会で選んだお題は、Worksアプリです。
Worksには帳票をhtmlとして出力できる機能があるので、それを上手く利用してLPを出力できるアプリをつくってみました。

※ちなみに技術ブログの記事作成にはnoteを使い、通勤の移動中の時間を使って下書きを作成しました。

それでは、デザイン制作からLP作成までの工程を、3分クッキング的なノリでご紹介していきます。　よろしくお願いします。

まずは、帳票のテンプレートとして登録するLPのデザインを作成します。
LPのデザインは王道のセオリー的なものがあるので、その辺を意識しながら構成を考えます。

なるべく汎用的につくりたかったので、基本構成（ヘッダー、メインビジュアル、各セクション、フッター）に加えて、料金表やCTAのレイアウトも盛り込みました。

セクション内のアイテムは、アイコン・画像・テキストのセットを基本としてレイアウトのパターンを何案か作成します。

続いてWorksアプリを作成します。
今回はアプリ画面の見た目にも手を入れたかったので、アプリの機能の一つである、カスタムコードも使用します。
メインレコードで基本情報や公開ページ設定などの項目をつくり、サブレコードでは、セクションやセクション内のアイテムをつくっていきます。
レコード項目の「条件付きフォームの設定」もうまく使いながら、サクサクと進めていきます。

冒頭で汎用的なLPをつくりたいと書いたので、今回は、過去に作成した自社のLPのリプレイスと飲食系のLPで2パターンのデザインをつくってみました。

最後に、文章では伝えきれない部分もありますので、アプリに興味を持っていただけましたら、ぜひWorksのストアからダウンロードして、色々と触ってみてください。