デザインはこちら
▲ランディングページ用
▲facebook用
セールスのスペシャリスト石川様
今回は、
ランディングページの一番重要な
トップのヘッダー画像制作とfacebookのヘッダー画像の
ご依頼をいただきました🙌
ランディングページとは?
一つの商品やサービスを売るための、
一枚の長いWebページです。
なんと！ランディングページを改善しただけで、
ネット上での顧客獲得数が6倍になった！という
事例もあります💛
つまり、ここで売り上げや集客が変わる
責任重大な部分なんです！
私はこのようなセールスに直結する
”セールスデザイン”を学び、
数々のページの反応率をUPしてきた経験があります。
まず、仮案をいくつかお見せします。
こんなイメージとか、
まず、様々なデザインをお見せして、
お好みに近いものに仕上げていきます！
このようなデザインはコンサルタントや
整体師、物販をしている方など
多くの方にニーズがあるデザインです。
集客にお困りの起業家様は、ぜひ一度ご相談くださいね
LPの一番重要な部分である
ランディングページとは、一つの商品やサービスを売るための、一枚の長いページのことです。
人材確保のスペシャリスト福本様
ランディングページはズバリ
「ネットで売り上げを上げるための最重要要素」であり、
ランディングページを改善しただけで、
ネット上での顧客獲得数が6倍になった！という
事例もあります
つまり、ここで売り上げや集客が変わる
責任重大な部分なんです！
このようなデザインはコンサルタント様や
整体師様、物販をしている方など
多くの方にニーズがあります。
私はこのようなセールスに直結する
”セールスデザイン”を学び、
数々のページの反応率をUPしてきた経験があります。
福本様もこのヘッダーになるまでに、
こんなイメージとか、
このようなデザインとか、
このようなデザインなど、
様々なデザインをお見せして、
よりお好みに近いものに仕上げていきます。
＊
また、サービスをご購入の方には、
「おしゃれな枠を作りたい！」とか
「バナーを追加したい！」
「ホームページも一緒にお願いしたい！」
というリクエストにもお応えしています！
ぜひあなたの思いやサービス、
世界観を私にシェアしてください♡
先日、アメブロカスタマイズを制作した
日和佐さとこ様からデザイン制作に関して
ご感想をいただきました♡
Q１. デザイン制作を受ける前にどのようなことでお悩みでしたか？
A. アメブロのカスタマイズについて、自分でできるものなのか、
自分じゃ難しいものなのか、まずそこから分からなかった。
また、カスタマイズを業者さんにお願いした場合の相場も分からなかったので、それも調べるのに時間が掛かって困った。
Q2. デザイン制作を依頼してよかったことを教えて頂けますか？
A. 丁寧にフルでカスタマイズを引き受けてくれたこと。
女性同士なので、イメージを伝えて理解してくれるのがスムーズだったと思う。
Q3. 何が決め手となってデザインをお願いしようと思いましたか？
A. 価格と女性であること
Q4. 今回のデザイン制作はどのような方にオススメしたいですか？
A. アメブロ等のSNSで集客したい人
Q5. やりとりを通じて、sanaの印象はいかがでしたか？
A. とても良かったです。
丁寧にヒアリングしてくれて助かりました。
デザインもとても素敵だし、今後も何かあればお願いしたい。
ご感想ありがとうございます＾＾
基本的にやりとりはメールの文章ですが、
それでも丁寧にヒヤリングをしてご希望のイメージに近づけることを意識しています。
また、直接やりとりをしたいという方には、
zoomやスカイプでも可能です。
日和佐様はアメブロカスタマイズ だけではなく、
スマホ用のヘッダー画像制作もご依頼いただきました！！
今の時代スマホでブログを読む方が７割以上ですからね
そんなスマホ用のヘッダー画像につきましても
お気軽にご相談ください
バナーを制作いたしました。デザインはこちら |
ブログをより見やすく、
わかりやすくしてくれる枠線をご紹介します。
Part3は、
// グリーン系をPick up！//
カラー別にまとめてますので、こちらも参考にしてください♪
▶︎【アメブロ】使える！おしゃれな枠線（ブルー・サックス系）
枠線の入れ方はコチラで解説してます！
よかったら、使ってください♡
1. タイトル帯＋テキストボックス
ここに文章が入ります。
ここに文章が入ります。
ここに文章が入ります。
コードはコチラ▼
<div style="margin: 2em auto;background: #cff7d0;">
<div class="box-title" style="font-size: 1.2em; background:#92dd94; padding: 4px; color: #fff; font-weight: bold; letter-spacing: 0.05em; text-align: center;">Title</div>
<p style="padding: 15px 20px; margin: 0px; text-align: center;">ここに文章が入ります。<br>
ここに文章が入ります。<br>
ここに文章が入ります。</p></div>
2. 実線で囲むだけ
ただ実線で囲むだけでも可愛い！
シンプル好きの方にオススメです♡
コードはコチラ▼
<div class="box1" style="padding: 0.5em 1em;margin: 3em auto;font-weight: bold;border: 3px solid #0ecc4a">
<p style="margin: 0px; padding: 0px; color:#0ecc4a; text-align: center;">ただ実線で囲むだけでも可愛い！</p>
<p style="margin: 0px; padding: 0px; color:#0ecc4a; text-align: center;">シンプル好きの方にオススメです♡</p></div>
3. 見出しにも使える！渋めグリーン！
上下で区切られてスッキリします。
見出しにも使えますね！
コードはコチラ▼
<p style="color:#627449; padding: 0.5em 0px; border-top: 3px solid #627449; border-bottom: 3px solid #627449; text-align: center;">上下で区切られてスッキリします。<br>
見出しにも使えますね！</p>
4. ボタンにも使える！
コードはコチラ▼
<p style="text-align: center;"><a class="btn-gradient-radius" href="#" style=" display: inline-block;padding: 7px 20px;border-radius: 25px;text-decoration: none;color: #FFF;background-image: linear-gradient(-90deg, #9BF74A, #00D1A7);transition: .4s;">文章を入れてもいいし、BUTTONとしても可愛い！</a></p>
5. 背景にグラデーションをつける！
コードはコチラ▼
<div style="background: linear-gradient(25deg, rgba(79, 202, 64, 0.4), rgba(161, 255, 68, 0.7)),url(https://stat.ameba.jp/user_images/20190616/11/testnoguchi/b0/59/p/o0488031114466867509.png);
background-size:cover;
/*以下グラデーションとは関係のない部分*/
height: 200px;
text-align: center;padding:2rem;
color: #FFF;">好きな背景の上に、文章を入れることができます！</div>
6. 点線の囲み枠
コードはコチラ▼
<ul style="color: #145107;/*文字色*/
border: dashed 2px #145107;/*破線 太さ 色*/
background: #f7fffa; /*背景色*/
padding: 0.5em 0.5em 0.5em 2em;">
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス１</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス２</li>
<li style="line-height: 1.5;padding: 0.5em 0;font-weight:bold;">サービス３</li>
</ul>
7. ストライプ
ここに文章
コードはコチラ▼
<div style="padding: 0.5em 1em;
margin: 2em 0;
background: -webkit-repeating-linear-gradient(-45deg, #BAF1AF, #BAF1AF 3px,#fffcfe 3px, #fffcfe 7px);
background: repeating-linear-gradient(-45deg, #BAF1AF, #BAF1AF 3px,#fffcfe 3px, #fffcfe 7px);">
<p style="margin:0;padding:0;color:#579B49;">ここに文章</p></div>
8. タイトル入り
ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。
コードはコチラ▼
<div style="position: relative;margin: 2em 0;
padding: 0.5em 1em;border: solid 3px #84edb7;
border-radius: 8px;"><span class="box-title" style="position: absolute;
display: inline-block;top: -13px;left: 10px;padding: 0 9px;line-height: 1;
font-size: 19px;background: #FFF;color: #84edb7;font-weight: bold;">Title</span>
<p style="margin: 0; padding: 1rem 0;">ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p></div>
9. 見出し＋影
ここに文章入ります！
コードはコチラ▼
<div class="box22" style="padding: 0.5em 1em;margin: 1em 0;background: #f4f4f4;border-left: solid 6px #7ef213;box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);">
<p style="margin: 0; padding: 0;">ここに文章入ります！</p></div>
10. 角丸
ここに文章が入ります！
ここに文章が入ります！
ここに文章が入ります！
コードはコチラ▼
<div style="padding: 0.5em 1em;margin: 2em 0;font-weight: bold;color: #bee316;/*文字色*/background: #FFF;border: solid 3px #bee316;/*線*/border-radius: 10px;/*角の丸み*/">
<p style="margin: 0px; padding: 0px; text-align: center;">ここに文章が入ります！<br>
ここに文章が入ります！<br>
ここに文章が入ります！</p></div>
11.角っこ
コードはコチラ▼
<p style="text-align: center;"><a href="#" style="position: relative;
display: inline-block;
font-weight: bold;
padding: 0.25em 0.5em;
text-decoration: none;
border-bottom: solid 3px #009107;
border-left: solid 3px #009107;
color: #009107;
transition: .4s;">▶︎ こちらまで </a></p>
以上、アメブロの枠線Part3(グリーン系)11選でした。
また今後も随時追加していく予定です😃📝
皆さんもこんな枠線が欲しい！
というものがあったら、
コメントいただけたら嬉しいです💖
制作の励みになります👍☺️✨
次は、Part4（イエロー・オレンジ系）製作中です！
お楽しみに〜♪
){kind=link}