ランサーズ(Lancers)エンジニアブログ > JavaScript > レスポンシブ対応の LP を簡単に作れるツールを React Redux で作った。ソースコードあり

レスポンシブ対応の LP を簡単に作れるツールを React Redux で作った。ソースコードあり

blog_admin|2017年06月20日
JavaScript

pook チームの tsuyoshi です。レスポンシブ対応の LP を簡単に作れるツールへのニーズが社内で高まってきたので React Redux の練習がてら先日の開発合宿で作りました。社内でもランディングページの制作を依頼されたり、発注したりするわけですが、大体が同じようなデザインではないでしょうか?要件としては、アイキャッチがあって、レスポンシブ対応で、コンバージョンボタンがある。ぐらいです。企画などが立ち上がる度に新規作成しているとキリがありません。そういった工数を削減するためにも直感的な入力でLPを簡単に作れるツールを作ってみました。
その名も、 react-lp2cool(リアクトエルピーツクール)。

注意)残念ながらプロダクションレベルで使えるものではありません。作った物の共有程度なので、モックの作成ぐらいにとどめてください

こちらからダウンロードして頂くとすぐに使えます。サーバーやインストールも不要です。必要なのは、 index.html と bundle.js の二つだけ。ブラウザが動く環境であれば、すぐにLPを作れるのが、このツールの特徴です。

DEMO

アイキャッチと、タイトルを挿入

画像を選択して、タイトルを入力するだけです。

セクションを選択して追加し順番を入れ替える。

大まかなデザインは選択して入力し、細かい部分の調整は直接 HTML をいじることができます。ドラッグ&ドロップで入れ替え機能もついていて便利です。

レスポンシブ対応のコンバージョンボタンを置く

Bootstrap が内蔵されているので、レスポンシブ機能がお手軽に実装できます。

ダウンロードして完成

右下の「ダウンロード」ボタンを押すと最終的に index.html ファイル1枚にまとまります。操作画面は react ですが、出力はただの HTML です

いかがでしょうか?それなりのデザインのLPを作ることができました。(上記所要時間5分くらいです)

所感

React と Redux を使ってみる利点は、それなりの UI やインタラクションを持ったツールをライブラリなどをうまく利用することで、サクッと実装できる点です。
今回は編集ページに以下のようなライブラリを用いました
meterial-ui : ダイアログや、編集フォームのデザイン
react-sortable-hoc : ドラッグ&ドロップで並べ替え
redux-form : フォームの制御全般

コードもこちらに用意していますが、1泊2日の合宿で作った全く自信のないコードですので、あまり参考にしないでいただけると幸いです。主にランサーズ流 React.js/redux アプリ開発入門に記載してある構成を利用しているので、全体感を掴むにはこちらのソースコードとブログの解説を読むことを強くお勧めします。

ちなみに、社内でこのツールの運用を検討した結果、今回作ったツールのように HTML を直接書く運用よりも、 json や yaml 形式で必要項目を管理するやり方のほうが、社内利用でのニーズにマッチしているようでした。残念ながらモック程度の用途にとどまりそうです。

お知らせ

現在私が所属する pook チームでは、フロントエンド職の募集以外にも、サーバーサイド職の募集も行っています。新しい働き方を一緒に生み出しませんか?ご応募待ってます。