デザインの引き出しを増やす!簡単なクリップボードを作ろう

こんにちは、日南本です。

大雨による被害をニュースで拝見して、
皆様がご無事であることを案じております。

今週も、予報では長雨が続くようですが、
どうか被害が拡大しないよう願っております。

今日はLPのコンテンツ部分について
お話していきます。

セールスデザイン講座proでは
最終課題ではLPをテキストから
デザインを起こして作る課題があります。

そして、コーディングも
画像をペタペタ貼るだけの物ではなく、
程よくプレーンテキストの部分があるのを
レスポンシブで実装する
少し難しいものになっています。
(スキルアップ的にはおトクな課題だと思います)

ファーストビューは、
そこを読んでもらえないと、
全体を見てもらえない重要なパーツですが、

LP全体を作るとなると、さらに、
途中で離脱されずに読み進められるように
コンテンツを見せていくことも
求められるから大変です><

そのためには
下記を解決する必要があります。

  • どんな枠で囲むかなどあしらいのバリエーションが少ない
  • 話題の変わり目の見出しをどう見せるか
  • コンテンツ同士の繋ぎ目をテンポ良くみせるには
  • コンテンツ前後のコントラストをどう見せるか

特に、
「お客様の声」「5つの○○」「成分について」
「こんな方にオススメです」「5つのSTEP」

などなど業種によりけりの
箇条書きのコンテンツが
たくさーん出てくるのを

どういうあしらいで、
他の箇条書きコンテンツと
同一に見えないように
どう変化をつけて見せるかが悩ましいところです。

私も、先週
シンプルだけど凄く長いLPを
デザインしていました。

スマホ用でデザインしていたので、
PCサイトのように横幅を使わず
縦に積んでいく形になり、
必然的に長くはなるのですが、

それにしても長くて、
アートボード上から下まで、
いっぱい使って13本分!!

項目コンテンツも
もちろん沢山!!

経験値で、
コンテンツ前後のコントラストが出るように
背景や枠の色、見出しのあしらい
をだいたい決めて進めて行き、

なんとか正気の状態で
短期間で全体の90%のコーディング
まで進められましたが、

初めて
長いLPをフルで作る場合には

パフォーマンスを維持しながら
デザイン的な試行錯誤を繰り返して
アウトプットしていくことが
本当に大変過酷な作業になるかと思います。

でも、
引き出しを何パターンかでも持っていると、
制作にかける労力がグッと楽になります。

数日前にアップした枠についての
作り方の実演動画をご紹介します。

マスキングテープも文字を重ねて、
小さな見出しにも活用できますよ!

あともう1つ、
簡単な飾り枠の作り方も参考になります

ぜひ、項目コンテンツ以外でも
ご活用下さい。

今日はこの辺で!

追伸.
夏季休暇中は
子どもたちがドタンバタンしてるし、
ずっと大声でしゃべってるし、
読書も何も集中できなかったです!
何歳から落ち着くんでしょうか。

そんなこんなで、
YouTubeでチュートリアル見ながら、
ギター弾いたりして過ごしてました。
左手は軽く腱鞘炎になってるような(笑)

追.追伸.

セールスデザイン講座youtubeチャンネルでは、
ノーカット実演で制作に役立つ多くの情報を発信しています。
https://www.youtube.com/user/SalesDesignLab

無料で短い一文のコピーと画像を合わせるだけの
動画はよく見かけますが、
(↑それもわざわざLINE登録が必要だったり)

そういった動画との違いは、
メインコピー、サブコピーと多くの文字情報を
見やすくまとめることについての
参考になるように作っています。

そして、デザイン以外にも
コーディングについても学びがある、
おトクなyoutubeチャンネルです!

投稿者プロフィール

日南本 文乃
日南本 文乃
web業界19年目
セールスデザインラボ9年目

WEBデザイナーとして20年のキャリアを持つ二児の母。
詳しいプロフィールはこちら