Webデザイン

【LP作成】「なんかしっくりこないなぁ」煮詰まった時に試してほしいデザインレシピ & フォント【Webデザイン】【Photoshop】

最近Webデザインの『ななねこコンサル』というWebスクール的なコミュニティに入りました。

※『ななねこコンサル』については、後で別の記事にまとめていきたいと思います。

ここで出されるLP作成課題が一つ終わったので

この課題を通して学んだことを書き記していきます。

▲課題で作ったLP

このLPを作るのにかなり煮詰まって、いろいろ調べて

良かったデザインをこれから紹介していきます。

知ってしまえば誰でも再現できるので

もしLPデザイン作成をしていて行き詰まったなら

一つのデザイン案としてぜひ参考にしてみて下さい。

アクセントカラーが強すぎる。どう使おう?

配色の中でも、特に目立たせたいところに使う色 アクセントカラー

あらかじめ決めておいたアクセントカラーが

実際にデザインに落とし込んだ時に強すぎて浮いてしまった

…こんな時に使えるデザインテクがこれです。

透過させた画像レイヤーを重ねる

この↑左の画像のように

「無料で体験する」という、訪問者にアクションを促す場所(CTA / コンバージョンエリア)の背景をべた塗りすると

色が強いのと、不自然にのっぺりしているせいで浮いて見えます。

そこで、背景にタオル地の画像クリッピングマスクで配置

色相・彩度タオルの色 (もとの色は青) を薄いピンク色に近づけ

透過させたアクセントカラーのレイヤーを被せました。

こうすることで

べた塗りによる不自然なのっぺり感が消え

異素材の質感(今回ならタオル地)のおかげで

強い色でも周囲と喧嘩せず、取り入れやすい色になりました。

女性らしい明朝体がみつからない【結論:貂明朝テキスト】

今回の課題では、必ず明朝体を使うよう指示されていました。

でも、女性らしい明朝体がなかなか見つかりません。

「女性らしい」というのは

  • 上品で
  • しなやかで
  • はんなりした

印象のもので、なおかつ

多用してもクドくならないフォント

…である必要があります。

モリサワフォントの UD明朝 ならしっくりくるんだろうけれど

個人PCにはAdobeフォントとフリーフォントしか入っていないしなぁ……

そんなモヤモヤを一気に解消したのが

貂明朝テキスト

です。

▲貂明朝テキスト

貂明朝テキストAdobe CC ユーザーなら無料で使用できます。

全体的に線の細い明朝体なので

多用してもクドくならず

可読性の高いフォントでした。

皆さんも、もし女性らしい明朝体をお探しでしたら

是非一度使ってみて下さい。

なんか全体的に単調で寂しい

載せるべき要素をただ配置するだけだと

全体的に動きのない

ガランとした雰囲気になります。

…そんな時に使えるのがコチラ。

①画像を ヨコいっぱい に広げる。

②あしらいに を添える。

クリッピングマスク で文字をデコる。

④あしらいに 飾り字 を添える。

⑤部分的に 飾り字 で見出しをつける。

以下、5つのデザインテクニックを紹介していきます。

①画像を ヨコいっぱい に広げる

画像をヨコいっぱいに広げる…だけ!

とっても簡単なデザインテクですが

こうすることによって

スカスカした感じが緩和されます。

載せるべき要素が少ないときに使える

とってもシンプルな策です。

②あしらいに を添える

こんな感じ。(befor/Afterの女性切り抜き粗ッ!苦笑)

クロスさせた直線を配置するだけですが

「Case1」と「Case2」の2つの要素を仕切る役割も果たしてくれて

すこし締まった印象になりました。

クリッピングマスクで文字をデコる

文字のクリッピングマスクは↓こんな風に透過させた画像を配置しています。

今回使った画像は「メタル 表面」でGoogle検索して手に入れました。

わざと全て覆わないのがポイントです。

文字が金属のように、立体的に見えて

全体的なのっぺり感をなくすことができます。

④あしらいに 飾り字 を添える

▲フォント: Mina

少しスペースが余って寂しいところに

適当な英語を、飾り字に適したフォントで添える

あら不思議。

グッとオシャレになります。

ちなみに今回は Mina という飾り字フォントを使いました。

⑤部分的に 飾り字 で見出しをつける

▲フォント: Lobster

こちらも飾り字ですが

こちらはあしらい(≒ハンバーグのパセリ的な役割)ではなく

見出しとしての役割を果たすので

存在感のある、太めのハッキリしたフォントがオススメです。

これを、使用箇所を限定して配置すると

全体的にメリハリが出ます。

ただし、使いすぎるとクドくなるので

多用するのは厳禁です。

【仕上げ】チョットの手間で可読性を高める

①正体・斜体を使い分ける

突然ですが、このbefore・After

どこを修正したか分かりますか?

答えは

アンダーラインが引いてあるところ以外の文字が、正体(斜体/イタリック ではない)になっている。

です。

これは、添削してくれた講師の方に教えていただいたのですが

アンダーラインが引いてあるところだけを斜体にすると

メリハリが出て、強調したい部分がより際立ちます

スマホの文章って、マトモに読まれません。

だからこそ、読ませたい部分に目が行くように

文章にもひと手間かけると、デザインに磨きがかかるんですね。

②左右のマージンをゆったりとる

実は、↑先程の①の画像にはもう一つ変わった点があります。

それが、文章左右のマージンです。

元々は、ギリ1文字分のスペースを空けていましたが

そのスペース(というかマージン)を1.25倍くらい広く取りました。

たったこれだけの修正ですが

ゆとりある、読みやすい文章になりました。

関連記事