駆け出しWebデザイナー必見 素早くランディングページ作成
最近ブログを書くのが日課になりつつあるYuuichi(@WestHillWorker)です。
昔はPC向けだけでよかったので、作成コストは少なかったものの現在は、様々なデバイスサイズのページを素早く作成することが求めらてきています。
僕のような元々エンジニアの人やWebデザイナーになりたい人（駆け出しの人）・コーダーだけどレイアウトも時間をかけずに作りたいなという方向けにさくっと作るランディングページ作成についての記事となります。
ランディングページってなんぞや？って方は、まずは下記を参照ください。
参考いまさら聞けないランディングページ（LP）作成の基本
通常良くある作成フローと今回素早く作成するフローから始めたいと思います。
スポンサーリンク
良くあるランディングページ作成フロー
1.ページ設計（ワイヤーフレーム)
2.デザインカンプ（photoshop/illustrator等）
3.デザイン確認
4.コーディング
5.動作検証
6.納品（公開）
細かなフローは省いています。
最初にがっちりと上記フローで作成してしまえば、手戻りは少ないと思います。
しかし、デザインカンプもデバイスが増えて、作成のコストが上がってきているのも現状です。
この辺りを改善するのが、今回の目標となります。
今回紹介するランディングページ作成フロー
1.ページ設計（ワイヤーフレーム)
2.プロトタイプ作成⇄各デバイスでのサイズ確認
3.コーディング細かいところ調整
4.動作検証
5.納品（公開）
フロー自体は、大きく変わってはいませんが、デザインカンプ作成する代わりに、すぐにプロトタイプを作って、ざっと各種デバイスでの表示チェックを行うことで、後々は軽微なコーディングだけで楽に実装ができてしまいます。
複数デバイスに対応する際に効果的です。
プロトタイプ作成から見ていきましょう。
プロトタイプ作成
インブラウザ・デザインツールを使って作成します。
今回紹介するのが「webflow」というブラウザ上で画面を作成する会員制のサイトです。フリープランありますので、お試しも可能です。
※ランディングページといっていますが、静的なページはなんでも作成できます。
①下記サイトにアクセス
webflow
②メールアドレス登録
③チュートリアル開始
初歩的な使い方から作成したページのソースを出力したり等の一連動画が、各フェーズ単位で見れるようになっていました。
※ただ英語でしたので、ご注意ください。日本語でyoutube使い方を掲載している人がいました。
④実際にランディングページを作成
ずるしてWordPressみたいなテンプレートが無料から有料まであります。
必要に応じて活用ください。
最初は、何もない空っぽの状態からやるのが、勉強になるかと思います。
ラフスケッチ作った通りに配置したら、一度各サイズでチェックしてみる。
この時点である程度の修正箇所も見えるし、クライアントにもそのまま作ったページを見せて、修正箇所を洗い出すのが良さそうです。
⑤デバイスサイズ単位の検証
PCブラウザでチェック（画面上部のパソコンのアイコン押すだけ）
タブレットもチェック
最後にスマホもチェック
各サイズの確認がボタン一つで、、、確認が可能です。
レスポンシブなページやパーツ（コンポーネント）を作るのには、うってつけかと。。。
修正もブラウザ上でできちゃうので、迅速に対応が可能！！
このようにある程度各デバイスのサイズでプロトタイプで作成したコード（html/css/img)を一括で吐き出して、サイトに組み込むだけです。
作りながらの検証で、随分コストパフォーマンスが上がるかと思います。
試しに作ってみたもの
使って気になったところ
・数ページ作っただけですが、ブラウザで簡単に作成できるメリットはあるものの、GUIで設定できるのにも限度があり、細かな調整はやはりwebflowで作ったあとに作業する必要があるように思いました。
・大きな会社やフローに決まりのあるような会社では、まだまだ使えないと思いました。利用する前にクライアントにこのようなフローで作ることを事前に提案してから作業することをオススメします。
※まだまだpsd/aiデータから作成していくという会社が多いのが現状じゃないでしょうか。
・ソースのzipファイル出力が有料であること。最初の無料体験期間ではzipファイル出力もできますので、その期間で一度使ってみてから検討したほうがいいかと思います。
※ただし、無料コースでもコピペでソース取得できます。
・ブライベートと全公開用のページの作成があって、テンプレートを広めたり、機密にしたりできるので選べるのはいいと思いました。
まとめ
ブラウザで素早くプロトタイプを作り、各デバイス確認（レスポンシブ）できるというスピード感と一気に大枠を作ってしまうという大きなメリットがありました。
上手く活用すれば、制作にかかるコストは削減できると思いました。
ただし、まだまだ浸透性が薄いことと、ほとんどの会社がデザインカンプが必要であるということも事実です。
仕事で利用する際のポイントを考える必要がまだまだありそうです。