見出し画像

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

この記事はインターパークの技術職がお届けする技術ブログです。

元記事:https://www.interpark.co.jp/dev/p0441.htm

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

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

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

LPとは?

LP(ランディングページ)とは、検索結果やWeb広告などを経由してユーザーが最初にアクセスするページのことです。

1. テンプレートのデザイン

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

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

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

デザインができたので、このまま一気にコーディングまで進めます。ここで作成したコーティングデータをアプリ作成時にhtml帳票として登録します。

2. Worksアプリの作成

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

一通りレコード項目の設定が終わったら、次に登録画面と詳細画面の見た目をCSSとJavaScriptでカスタムしていきます。

さぁこれでアプリの方はひとまず完成しました。今回の勉強会で、お題にWorksアプリ作成を選んだ場合、アプリをリリースするまでが一環なので、完成したアプリをWorksのアプリストアに登録します。

3. アプリ紹介

LP作成アプリ

- Worksを使用してLPを作成できるアプリです -
>> ダウンロードはこちらから

【注意点】
「LP作成アプリ」はカスタムコードを使用するため、プレミアムプランでのみご利用いただけます。現在、Worksでは作成したLPを直接公開する機能は提供されておりません。公開するためには、別途サーバーの契約が必要です。既にサーバーを契約している場合は、アプリからダウンロードしたHTMLファイルをアップロードして公開してください。

4. LPの作成

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

もちろんLPはスマホにも対応しています。

実際にLPをブラウザで確認することができます。以下のURLからアクセスしてください。
>> 過去のLPのリプレイスはこちら
>> 飲食店系のLPはこちら
※Basic認証が設定されていますので、ユーザー名に「test」、パスワードに「test」と入力してログインしてください。

4. さいごに

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

▍もっと知りたい方はこちら

▼インターパークについて

▼技術ブログ一覧

▼よく読まれてる記事