MK Wizardの中田です。
さて、先日「予算を抑えてLPを作って欲しい」との制作依頼をいただき
BootstrapでのLP制作を行い、WordPress化を行いました。
Bootstrapを使うと、効率的にレスポンシブ対応のされたwebページを制作することができます。
これは12カラムに分割された、グリッドシステムという考え方のおかげ。
時間がない急ぎの場合や、リソースの少ない状況でも
ある程度融通をきかせながら、パパっと作れてしまうのが特徴です。
専門のデザイナーでなくとも、ノンデザイナーであるエンジニア・プログラマでもフロントページを作ることが可能。
特に、LP制作では活用するシーンも出てくるでしょう。
しかし効率的な制作が可能な反面
「どこかで見たことある」というデザインや、レイアウトになってしまうのが難点です。
「Bootstrap臭」という言葉まであるくらい。
そこで、このBootstrap臭を消す方法を
以下に記載します。
特にLP（ランディングページ）をデザインする際に使えるテクニックが中心です。
※ 私も専門デザイナーではありませんので、念の為。
同じくノンデザイナーの方、ご活用いただけますと幸いです。
目次
まずはここから！Bootstrapデザインの基本「タイポグラフィ」を変更して臭みを抜く
まずはBootStrapの臭みを消すにあたって、非常に有名な以下の記事をご確認ください。
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
つまるところ、すべてはタイポグラフィが重要であることに行き着きます。
と言われているとおり、このタイポグラフィに関する7つのテクニックを使うだけでも、だいぶBootstrapデザインの印象が変わってきます。
7つのテクニック全てを行う必要はありませんが
採用できるものは、なるべく採用しておきましょう。
私はLP制作にあたって、7つのテクニックのうち
- line-heightの変更
- letter-spacingの変更
- font-family: フォントの変更
- body-colorの変更
- レスポンシブグリッドの活用（offset-クラスの活用）
を採用しました。
なお、フォントの選定は面倒だったこともあり（いや本当はめちゃくちゃ大事ですよ）
↓の記事の設定からそのままコピペしてご活用させていただきました。
Bootstrapに上書きして、いい感じに使う（SCSSなし） – Qiita
斜め背景を活用する（CSSのみで実装可）
Bootstrapを活用すると、どうしても単調なデザインになってしまいます。
長めのLPを作っていると、単調さゆえに最後まで読まれない（離脱される）こともしばしば。
そこでスクロールを促すような、斜め背景を活用してみましょう。
以下、CSSのみで斜め背景を実装する方法が記載してある記事です。
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
背景色にCSSでグラデーション効果をつける（ linear-gradient ）
Bootstrapでは、HTMLファイルに特定のクラス名をつけるだけで、背景色をつけることが可能です。
（bg-info, bg-success, bg-warningなど）
しかし、このデフォルトカラーはコンテンツエリア背景にはあまり使わないほうが吉。
背景色をデフォルトのものから変更するだけでなく、CSSによるグラデーション効果も持たせて、Bootstrap臭を抜いていきましょう。
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！ | Webクリエイターボックス
CSSのグラデーション（linear-gradient）の使い方を総まとめ！
視差効果を持たせて、背景画像に遊びゴコロを（parallax:パララックス）
背景に写真を利用するエリアがある場合には、parallax（パララックス =視差効果）と呼ばれるテクニックを使って
コンテンツ背景に遊びゴコロをもたせてみましょう。
特に海外のサイト、LPではよく使われている効果のようです。
HTMLとCSSでパララックスページを作ってみよう | キャスレーコンサルティング株式会社
見出しデザインをCSSコピペで行う
仕上げに、見出し部分のデザインを行いましょう。
下記のサイトには、コピペで見出しデザインを行うことができる例が多数例示されています。
CSSだけで作れるトレンド見出しデザイン20選｜2018年版 | 侍エンジニア塾ブログ（Samurai Blog） – プログラミング入門者向けサイト
見出し部のデザインは意外と重要。与える印象を大きく変えることかできます。
BootStrapを用いて、効率的におしゃれなLPを作ろう
いかがでしょうか。
Bootstrapはフレームワークであり、効率的な制作のために用いられるものです。
Bootstrap臭を抜くためとはいえ、あまり必要以上に工数をかけてしまうと、時間や学習コストがかかってしまい、本末転倒になってしまいます。
なるべくコピペ等でできる範囲の、簡易的なデザインを行い、時間をかけないBootstrap制作を行っていきましょう。
参考までに、私が初めてBootstrapを用いて制作させていただいたLPを載せておきます。
（専門デザイナーではないので、その点ご容赦を…！）
完全在宅で、高単価のテレアポ業務のアルバイトを募集する際のLPを制作させていただきました。
完全在宅・高単価のテレアポ業務アルバイト丨pawn promotion合同会社 | 好きな時間に好きな場所でお仕事を
時給3,500円という、破格の高価格在宅テレアポ業務です。ご紹介まで。
Bootstrapで作成した上LPには、本文で言及した
• 斜め背景
• グラデーション背景
• 見出しデザイン
• parallax
を実装しています。よろしければ、見てみてくださいませ。
またメインビジュアルとして、背景動画を活用。動画はGIF形式のものを利用すれば、スマートフォン上でも自動的に再生させることができます。
GIF動画のエンコーディング方法とリサイズには無料のオープンソースソフトウェア”FFmpeg”を利用して、mp4などの動画形式からGIFへと変換しています。
FFmpegでgif動画のファイルサイズを小さく調整する | まほウェブ
動画背景を活用すると、LPやサイト上に動きをもたらすことができます。ぜひ合わせてお読みください。
Leave a Reply