最近Webデザインの『ななねこコンサル』というWebスクール的なコミュニティに入りました。
※『ななねこコンサル』については、後で別の記事にまとめていきたいと思います。
ここで出されるLP作成課題が一つ終わったので
この課題を通して学んだことを書き記していきます。
このLPを作るのにかなり煮詰まって、いろいろ調べて
良かったデザインをこれから紹介していきます。
知ってしまえば誰でも再現できるので
もしLPデザイン作成をしていて行き詰まったなら
一つのデザイン案としてぜひ参考にしてみて下さい。
アクセントカラーが強すぎる。どう使おう?
配色の中でも、特に目立たせたいところに使う色 アクセントカラー。
あらかじめ決めておいたアクセントカラーが
実際にデザインに落とし込んだ時に強すぎて浮いてしまった
…こんな時に使えるデザインテクがこれです。
透過させた画像レイヤーを重ねる
この↑左の画像のように
「無料で体験する」という、訪問者にアクションを促す場所(CTA / コンバージョンエリア)の背景をべた塗りすると
色が強いのと、不自然にのっぺりしているせいで浮いて見えます。
そこで、背景にタオル地の画像をクリッピングマスクで配置し
色相・彩度でタオルの色 (もとの色は青) を薄いピンク色に近づけ
透過させたアクセントカラーのレイヤーを被せました。
こうすることで
べた塗りによる不自然なのっぺり感が消え、
異素材の質感(今回ならタオル地)のおかげで
強い色でも周囲と喧嘩せず、取り入れやすい色になりました。
女性らしい明朝体がみつからない【結論:貂明朝テキスト】
今回の課題では、必ず明朝体を使うよう指示されていました。
でも、女性らしい明朝体がなかなか見つかりません。
「女性らしい」というのは
- 上品で
- しなやかで
- はんなりした
印象のもので、なおかつ
多用してもクドくならないフォント
…である必要があります。
モリサワフォントの UD明朝 ならしっくりくるんだろうけれど
個人PCにはAdobeフォントとフリーフォントしか入っていないしなぁ……
そんなモヤモヤを一気に解消したのが
貂明朝テキスト
です。
貂明朝テキスト は Adobe CC ユーザーなら無料で使用できます。
全体的に線の細い明朝体なので
多用してもクドくならず
可読性の高いフォントでした。
皆さんも、もし女性らしい明朝体をお探しでしたら
是非一度使ってみて下さい。
なんか全体的に単調で寂しい
載せるべき要素をただ配置するだけだと
全体的に動きのない
ガランとした雰囲気になります。
…そんな時に使えるのがコチラ。
①画像を ヨコいっぱい に広げる。
②あしらいに 線 を添える。
③クリッピングマスク で文字をデコる。
④あしらいに 飾り字 を添える。
⑤部分的に 飾り字 で見出しをつける。
以下、5つのデザインテクニックを紹介していきます。
①画像を ヨコいっぱい に広げる
画像をヨコいっぱいに広げる…だけ!
とっても簡単なデザインテクですが
こうすることによって
スカスカした感じが緩和されます。
載せるべき要素が少ないときに使える
とってもシンプルな策です。
②あしらいに 線 を添える
こんな感じ。(befor/Afterの女性切り抜き粗ッ!苦笑)
クロスさせた直線を配置するだけですが
「Case1」と「Case2」の2つの要素を仕切る役割も果たしてくれて
すこし締まった印象になりました。
③クリッピングマスクで文字をデコる
文字のクリッピングマスクは↓こんな風に透過させた画像を配置しています。
今回使った画像は「メタル 表面」でGoogle検索して手に入れました。
わざと全て覆わないのがポイントです。
文字が金属のように、立体的に見えて
全体的なのっぺり感をなくすことができます。
④あしらいに 飾り字 を添える
少しスペースが余って寂しいところに
適当な英語を、飾り字に適したフォントで添えると
あら不思議。
グッとオシャレになります。
ちなみに今回は Mina という飾り字フォントを使いました。
⑤部分的に 飾り字 で見出しをつける
こちらも飾り字ですが
こちらはあしらい(≒ハンバーグのパセリ的な役割)ではなく
見出しとしての役割を果たすので
存在感のある、太めのハッキリしたフォントがオススメです。
これを、使用箇所を限定して配置すると
全体的にメリハリが出ます。
ただし、使いすぎるとクドくなるので
多用するのは厳禁です。
【仕上げ】チョットの手間で可読性を高める
①正体・斜体を使い分ける
突然ですが、このbefore・After
どこを修正したか分かりますか?
答えは
アンダーラインが引いてあるところ以外の文字が、正体(斜体/イタリック ではない)になっている。
です。
これは、添削してくれた講師の方に教えていただいたのですが
アンダーラインが引いてあるところだけを斜体にすると
メリハリが出て、強調したい部分がより際立ちます。
スマホの文章って、マトモに読まれません。
だからこそ、読ませたい部分に目が行くように
文章にもひと手間かけると、デザインに磨きがかかるんですね。
②左右のマージンをゆったりとる
実は、↑先程の①の画像にはもう一つ変わった点があります。
それが、文章左右のマージンです。
元々は、ギリ1文字分のスペースを空けていましたが
そのスペース(というかマージン)を1.25倍くらい広く取りました。
たったこれだけの修正ですが
ゆとりある、読みやすい文章になりました。