Clickfunnel 2.0
デザインパーツテンプレート
Designed By Tomohiro Mochizuki
ボタンデザイン
テーブル・表をつくる
RowとColumn設定だけで作る表です。HTMLを書かないでできるので便利。
モバイルだと中央縦線が変な感じになるので、Desktop/Mobileで個別表示するか、
縦線を表示しないデザインにするのも良い。
Desktop優先。線種・線幅はお好みでカスタムしてください。
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
Desktop / Mobile 共用。
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
表の項目・見出し
表の要素・本文
ヒーロービュー
背景を工夫するだけで文字が読みやすくなります。
グラデーションを使いましょう。適用前後の違いを比べてみてください。
モバイルだと意図したデザインにはならないので別でデザインを用意しましょう。
Small Call to Action Headline
グラデーションは
背景に入れてません
BackgroundのところのForegroundにグラデーションを入れるかどうかで見え方が大きく変わります。
これは上手に使っていくことでデザインの見え方が変わってきます。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。
Small Call to Action Headline
Small Call to Action Headline
グラデーションを
背景にいれました
BackgroundのところのForegroundにグラデーションを入れるかどうかで見え方が大きく変わります。
これは上手に使っていくことでデザインの見え方が変わってきます。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。
Small Call to Action Headline
スムースセクション
何も考えずにデザインしていくとどうしても、ブロックが積み上がったように見えてしまいがちです。
ですが、少し工夫すると、セクション同士のつながりをスムースに見せることができます。
コンテンツのあるセクションの間に何も表示しないセクションを用意して、
バックグラウンドにグラデーションを追加しています。
Section A
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Section B
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
セクションつなぎ
セクションをつなぐTipsとしてもう一つ。
画像を用意する必要がありますが、前後のセクションをデザインしてつなぐ方法です。
簡単なのは波型や三角形などの画像を用意して背景画像に設定してつなぎます。
Section A
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Section B
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Section A
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Section B
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
marginで重ねる
マージン：余白のことですが、マージンを使うと要素を重ねて表示させることができます。
Small Call to Action Headline
こんな
ヒーローセクションがあって
テキストを入れるとこんな感じです。これはダミーのテキストです。テキストを入れるとこんな感じです。これはダミーのテキストです。テキストを入れるとこんな感じです。これはダミーのテキストです。
このセクションは Padding bottomを大きめにしています。
Small Call to Action Headline
Rowのマージンを-200にしています
このROW が前のセクションの上に被って表示されます。
コールトゥアクションのセクションです。他にもマージンで上の要素に被せることができます。
↓ここからコンテンツセクション↓
Small Call to Action Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
グローバルナビゲーション
サイトのヘッダーに設定して、あなたのサイトのリンクを表示するものです。
ロゴ・ナビゲーション・CTAを表示して、モバイルでもきれいに見えるように配置しています。
TEL : 03-1234-5678
文字を影で装飾する
ぼかして使う影がカンタンな使い方ですが、ぼかしを入れずに少しずらして色を変えるだけで
ちょっと縁取りのように見せることができておしゃれに見えたりします。
またぼかしを使った時に影の一をずらさずに適度なぼかしにして背景と文字を濃い同じ色にすると
ネオンが光っているような、文字が浮き出てくるように見える感じにもできるので試してみてください。
Large call to action headline
Large call to action headline
Large call to action headline
Large call to action headline
ブロックを重ねるデザイン
関連する要素や内容を並べてブロックを重ねてずらして並べるデザイン。
リズミカルな感じもあるので、使い所によっては楽しく使えるのではないでしょうか。
Large call to action headline
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Large call to action headline
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
均等に割り付ける
FlexContainerを活用して、均等に割り付けています。
Flexcontainerを入れ子にしてます。
1000
クライアント数
1000
クライアント数
1000
クライアント数
1000
クライアント数
1000
クライアント数
でっかい角丸
FlexContainerを活用して、均等に割り付けています。
Flexcontainerを入れ子にしてます。
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
背景を斜めにする
CSSコードを入れて、セクションの背景を斜めにしています。
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
アイコンとアニメーション
流れる矢印をつくる
アイコンにアニメーションを設定し、Delayで時間差を作って流れるようにしています。
全幅FlexBox
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.
Large call to action headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolore, alias,numquam enim ab voluptate id quam harum ducimus cupiditate similique quisquam et deserunt,recusandae.