pook チームの tsuyoshi です。レスポンシブ対応の LP を簡単に作れるツールへのニーズが社内で高まってきたので React Redux の練習がてら先日の開発合宿で作りました。社内でもランディングページの制作を依頼されたり、発注したりするわけですが、大体が同じようなデザインではないでしょうか？要件としては、アイキャッチがあって、レスポンシブ対応で、コンバージョンボタンがある。ぐらいです。企画などが立ち上がる度に新規作成しているとキリがありません。そういった工数を削減するためにも直感的な入力でLPを簡単に作れるツールを作ってみました。
その名も、 react-lp2cool(リアクトエルピーツクール)。
注意）残念ながらプロダクションレベルで使えるものではありません。作った物の共有程度なので、モックの作成ぐらいにとどめてください
こちらからダウンロードして頂くとすぐに使えます。サーバーやインストールも不要です。必要なのは、 index.html と bundle.js の二つだけ。ブラウザが動く環境であれば、すぐにLPを作れるのが、このツールの特徴です。
DEMO
アイキャッチと、タイトルを挿入
画像を選択して、タイトルを入力するだけです。
セクションを選択して追加し順番を入れ替える。
大まかなデザインは選択して入力し、細かい部分の調整は直接 HTML をいじることができます。ドラッグ&ドロップで入れ替え機能もついていて便利です。
レスポンシブ対応のコンバージョンボタンを置く
Bootstrap が内蔵されているので、レスポンシブ機能がお手軽に実装できます。
ダウンロードして完成
右下の「ダウンロード」ボタンを押すと最終的に index.html ファイル１枚にまとまります。操作画面は react ですが、出力はただの HTML です
いかがでしょうか？それなりのデザインのLPを作ることができました。（上記所要時間5分くらいです）
所感
React と Redux を使ってみる利点は、それなりの UI やインタラクションを持ったツールをライブラリなどをうまく利用することで、サクッと実装できる点です。
今回は編集ページに以下のようなライブラリを用いました
– meterial-ui : ダイアログや、編集フォームのデザイン
– react-sortable-hoc : ドラッグ&ドロップで並べ替え
– redux-form : フォームの制御全般
コードもこちらに用意していますが、１泊2日の合宿で作った全く自信のないコードですので、あまり参考にしないでいただけると幸いです。主にランサーズ流 React.js/redux アプリ開発入門に記載してある構成を利用しているので、全体感を掴むにはこちらのソースコードとブログの解説を読むことを強くお勧めします。
ちなみに、社内でこのツールの運用を検討した結果、今回作ったツールのように HTML を直接書く運用よりも、 json や yaml 形式で必要項目を管理するやり方のほうが、社内利用でのニーズにマッチしているようでした。残念ながらモック程度の用途にとどまりそうです。
お知らせ
現在私が所属する pook チームでは、フロントエンド職の募集以外にも、サーバーサイド職の募集も行っています。新しい働き方を一緒に生み出しませんか？ご応募待ってます。