ホームページ制作をしていると、最近多いのが、LP（ランディングページ）だけ制作すると言うパターン。
「ホームページのようなたくさんのページも仰々しいサイトもいらないからペライチのLPだけ制作してください。」
と言うように、依頼をしてくる人がまあまあの割合でいるんですよね。
確かに、ホームページ制作者も「LP専用」とか「LPデザインのみ」と言う人をチラホラ見かけます。
LPとホームページは何が違うのかというと、ホームページは、複数のWebサイトを通して構成を考えて、お問合せから、商品注文完了だったり、資料請求などの複数のコンバージョンをまとめる役割りがありますが、
LPは、「1ページ、1コンバージョン」と言う鉄則があります。
広告ページの役割を担うLPは、複雑にしてはダメなんですね。
シンプルに1つの商品やサービスを説明してそれの
購買だったり、コンバージョンまでを導く役割の1ページWebサイト
になります。
そんなLP制作の時に、毎回書かれている文章の中の文字を際立たせたい意図で、蛍光マーカーで引かれたような下線のデザインをよく見かけます。
CSSにも、underlineを引くプロパティはあるんですが、デザイン通りにいかないため、今回はどうやってデザイン通りにアンダーラインを作れば良いのかを、ブログに書き残しておきたいと思います。
ちなみに、アニメーションをさせて様々な効果が狙えるところまで追求しますので、LP制作者の人の参考になれば幸いです。
こんなデザイン
普通にCSSのデフォルト・アンダーラインで作ると・・・
LPで重要なアンダーライン・デザイン。
こうなります。
.underline{
text-decoration:underline red 2px;
}
コードは、コレで、いわゆる基本形がコレです。
デザイン通りのアンダーラインの作り方
次に、デザインのようなマーカーペンでなぞったようなデザインは、次のように作れます。
LPで重要なアンダーライン・デザイン。
.underline{
background: linear-gradient(transparent 60%, #ffe66d 60%);
font-weight: bold;
}
余白を持ちたい場合
paddingを入れると、少し余韻を持った表現もできます。
LPで重要なアンダーライン・デザイン。
.underline{
background: linear-gradient(transparent 60%, #ffe66d 60%);
font-weight: bold;
padding: 0.2em 0.5em;
}
アンダーラインの命令ではなく、バックグラウンドを使って、マーカー風を構築しています。
改行しても大丈夫
インラインテキストに適用しているので、改行しても、ちゃんとマーキングされます。
LPで重要なアンダー
ライン・デザイン。
アニメーションを入れるとこれだけ効果的
視覚効果が欲しい場合は、cssアニメは最適です。
マウスを文字の上に置く（スマホの場合はタッチしっぱなしにする）と、マーカーが引かれるアニメーションが表示されます。
LPで重要なアンダーライン・デザイン。
.underline {
font-weight: bold;
padding: 0.2em 0.5em;
background: linear-gradient(#ffe66d 0 0) left bottom / 0% 60% no-repeat;
transition: background-size 0.4s ease;
}
.underline:hover {
background-size: 100% 60%;
}
あとがき
柔軟性の高いコードが書けたと思いますが、いかがだったでしょうか？
色やサイズ、アニメーションタイミングなどは、サイトに合わせた形で変更して使ってもらえるといいです。
0 件のコメント:
コメントを投稿