レスポンシブ対応のLPをたった5時間で製作する方法
ハローエブリワン、ジェイだ。
最近は増刊号でエブリワンに会える機会が増えて、俺も嬉しい限りだよ。
季節も夏が近づいてきて気持ちもハッピーなピープルが増えてきたんじゃないだろうか。
俺も日が長くなり太陽とコミュニケーションできる時間が増えて、自然との会話力が向上し、ハッピーサンシャインだ。この勢いで太陽の息子にでもなろうかな。
だが、太陽がでている時間が長くなったからといって、1日24時間の壁を突破できるわけじゃない。気を付けたいのはエブリデイ24時間ということだ。今日はこの24時間の中で巻き起こる、ドラマチックな案件に対処する方法をエブリワンに伝えよう。
エブリワンもこんな経験を一度はしているんじゃないだろうか。
デザイナー：えっと、いつまででしょうか。
企画担当：大変申し訳無いんですけど、明日の朝にリリースで、本日の17時にはチェックに出したいんです。
デザイナー：うっ・・・。（現在12時）
という感じになり、約5時間で特設LPに対応しなければならないわけだ。まさにドラマチックな展開だな。残り5時間を海外ドラマ「24 TWENTY FOUR」で例えるなら、ジャック・バウアーが一度死にかけて、起死回生に挑んでいるところだろう。話も佳境からスタートということになる。
昔で言えばPCサイトがあればよかったが、モバイルファーストと言われる時代の中で、SPサイトもデフォルトで製作する必要があるよな。
今回はこういったケースのためにBootstrapを使って短時間でLPの製作をする、危機の乗り越え方を記載しよう。
Bootcompを使ってデザインしよう
残された時間は5時間！
まずは素早くデザインカンプを製作するぜ。BootstrapをデザインするにはBootcompと呼ばれるツールを使うのが早いんだ。
Bootcompとは
Photoshop CC2015対応の機能拡張で、Bootstrapのグリッドや基本的なコンポーネントをワンクリックで利用できるツールなんだ。ワンダフルミラクルだぜ。まずは簡単にBootcompの使い方を紹介しよう。
Bootcompをインストール
まずはここからダウンロードをしてくれ。
ダウンロードしたファイルを解凍したら「Bootcomp」フォルダを以下の中に入れよう。
Windows: C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
Photoshopのメニューから「ウィンドウ」>「エクステンション」>「Bootcomp」を起動すれば早速スタートできる。
さあ、デザイン開始
Bootcompを起動したらデザイン開始だ。
赤い枠で囲っているBootcompのパネルのボタンをクリックしていくだけで、どんどんデザインを製作することができるぜ。
メインビジュアルを設定してみよう
まずはメインビジュアルをつくってみよう。
上記の図のようにシェイプを製作したら「シェイプをIMG-BOXに変換」を押してみよう！
すると・・・
こんな感じですぐにメインビジュアルができた！
コンポーネントを利用してコンテンツを入れ込もう
次はコンテンツを製作していくぜ。時間がないからガンガンいくぞ。
上記のように選択ツールで、コンテンツを入れたい部分を囲んだら、利用したいものを選択しようぜ。今回は「H2＋P」を選んでみた。
すると・・・
見出しとテキストが自動で入る！ おお、ワンダフル！
これを利用してどんどんコンテンツを追加していこう。時間が迫っているぜ。
複製をうまく利用して時間を省略
Webデザインにおいて、同じレイアウトを使うことはよくあるよな。
そんな時に利用したいのが、「ガターサイズを空けて複製」だ。
上記のように複製したいものを選択して、「ガターサイズを空けて複製」を選択しすると・・・
こんな感じでガター分を空けて複製を完了してくれる。いちいち移動などを調整しなくていいから簡単だ。これらを利用してデザインを進めていけば時間短縮で製作ができる。
ちなみに、ボタンを作成したり、マージンを空けたりもワンクリックでできるからぜひ利用してほしい。
使い方を以下の動画でまとめているから、参考にするといいだろう。
そして、Bootcompを利用してこんな感じでカンプが仕上がったぞ。
所要時間は約2時間だ。あと、3時間！
きついぜ！ ジャック・バウアー。
Bracketsを使ってコーディング
さあ、残り3時間だ。諦めたらそこで試合終了！
最後まで、人類のため、案件のために、命を振り絞って戦おうじゃないか。
ここからは俺の記事でも紹介した愛用のBracketsを使ってコーディングをしていく。
Bracketsを利用する理由は大きく２つある。
- Extract for Bracketsを使えば、先ほどのPSDデータをスライスする必要がない
- レスポンシブモードを利用してスマホを調整しながらコーディングできる
まあ、俺が慣れているというのもあるが、上記は誰もが感じられるメリットだろう。
スライスせずにコーディング
ここについては俺の以前の記事を見て欲しい！
時間がない中で正確に画像の切り出しをしてくれるなんて、最高だろう。
レスポンシブモードでスマホを調整
今回は時間がないために、スマホのデザインを起こす時間がなかった。
Bootstrapでデザインしているから、グリッドにそってデザインしていれば、ある程度は予測しながらデザインすることができるが、どうしても微調整は必要になる。
その時に利用したいのが『Response for Brackets』というプラグイン機能だ。
▼Response for Bracketsのダウンロード
Bracketsの「拡張機能マネージャー」から『Response for Brackets』をインストールしよう。
「ファイル」 > 「拡張機能マネージャー」から『Response for Brackets』を検索すれば一発でヒットするだろう。
▼Responsive modeでスマホの状態を見ながらコーディング
こんな感じで画面を確認しながらコーディングできる。
bootstrapのデフォルトのCSSでは表現しきれなかったところを微調整していこう。
▼Inspect modeで簡単に要素を探り出せ
『Response for Brackets』にはもう１つ便利な機能が付いている。
それはInspect modeというやつだ。
左上の「INSPECT」というボタンをONにすればすぐに利用できる。
この機能を使うことによって、「これ、どの要素だっけ？」みたいに悩む必要もないし、いちいちChromeの「要素の検証」を開かなくて済むんだぜ。
まさにBracketsは時間短縮の名人だぜ。俺のパートナーにピッタリなんだ。
さて、コーディングももうそろそろ終わる！ 時間も残すところ30分を切っていたようだ。
ふぅ〜、危ない危ない。
今日も神とPhotoshopとBracktesに感謝しよう。
完成
さあ、完成したぞ。
残り20分強か。
海外ドラマ「24 TWENTY FOUR」で例えるなら、ほんの少し平和な時間を過ごしている頃だろう。平和はすぐに終わってしまい、次の脅威がすぐそこに迫っているんだよな。
なんだか、俺たちの仕事にそっくりだぜ。
ちなみにこれが完成品だ。
完成品はこちら
さいごに
今回は素材があり、構成が決まっている前提でなんとか5時間以内にレスポンシブ対応のLPを製作することができた。
みんなも今回紹介した『Bootcomp』と『Brackets』を上手く利用してみて欲しい。
ちなみに全てのLPを5時間以内でできると思っちゃいけない。
いいデザインを製作するにはそれだけの時間がかかるということは覚えておいてほしい。それに俺たちにも体力の限界というものがあるからな。
俺たちデザイナーはジャック・バウアーのように不死身ではないのだから。
それではまたの機会に。
アディオス！
