すべてのページが美しい! 色に関する365のアイデアがぎっしり詰まった、デザインやイラストに即戦力の新しい配色本 -色の日めくり配色帖365

in コリス on 2022-04-22

辞書のように分厚い本書には1ページにつき1色、全部で365色の素敵な色、配色、色の知識・情報がおさめられた保存版の配色帖を紹介します。

デザインやイラストに使用する色を見つけたい、主役の色は決まっているけど配色をどうすればよいのか、色の使い方はどうすればよいのか、色に関する365のアイデアがぎっしり詰まっています。

特長

  • 1ページにつき1色、365日分の365ページを収録。9つの系統に分かれており、合間にはデザインやイラストの実例としてコラムも収録。
  • おしゃれなカラーや趣のある色まで、古今東西の幅広い色が紹介されている。
  • 各色のページには、色の名前、テーマカラーを連想する写真、色の知識・情報、テーマカラーを使用した3色配色、CMYKとRGB値を掲載。
  • 日本の伝統色も数多く収録されている。

ブログで使えるテーブル(table)のHTMLコード例

in TCD on 2022-04-25

テーブルブロックでは実現が難しい表現を可能にする工夫:

  • 1行目を見出しにする:theadとcolspanを使用。
  • 横幅を調整:widthで列ごとに横幅を指定.
  • 背景色を設定:background-colorで指定。
  • 文字を中央寄せ:WordPressのエディタからも可能。CSSのtext-align:center; で中央寄せに。
  • 枠線を太くする:WordPressのエディタでも変更可能。border-bottom、border-top、border-right、border-leftで指定。
  • セルを横に統合:colspanでセルを結合。
  • セルを縦に統合:rowspanでセルを結合。
  • 横スクロール:overflow: auto;は、子要素がはみ出した場合にスクロールさせる記述。white-space: nowrap;は、テキストを自動的に改行させないための記述。
  • 英単語の自動改行を解除:word-break: break-all;を入れておくと、英単語が自動改行されない。

テーブルは記事を読みやすくするアイテム

  • テーブルの本質は、情報の整理にある。
  • テーブルは情報を視覚的に整理できるので、それだけで文章が読みやすくなる。
  • 読みやすい記事は、ユーザーからの評価も高くなるため、結果として検索エンジン対策にもつながる。
  • テーブルを上手に活用することは、ブログ運営ではとても重要。

見出しに使えるfit-contentを解説してみる

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます

  • 中央位置に配置した見出しに背景色をつけるスタイルで便利。
  • 使わない場合、見出しの横幅を指定しないと親要素の幅いっぱいに広がってしまう。
  • 見出しにdisplay: inline-blockを使用すればコンテンツ幅に背景色をつけられる。しかし、中央配置ができないため、見出しタグの中にを追加してテキストを括り、見出しタグにtext-align: centerを指定。
  • もし、テキストの周りに余白(padding)を指定し、背景色のボックスを広げたい場合にはタグにdisplay: inline-blockを追加。

使用した場合

  • 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせて背景色を配置
  • width: fit-contentを使用することで、コンテンツ(テキスト)に合わせてボックス要素の横幅を指定でき、背景色を配置可。margin-right: autoとmargin-left: autoで中央配置ができ、もしテキストの周りに余白を指定する場合でもタグやコードを追加しなくても対応可。
h2 {
  margin-right: auto;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #e3bf00;
}

見出しが2行の場合

  • 2行以上になるとコンテンツの中で一番長い行の横幅に合わせて背景色が配置されてしまう。
  • テキストだけに背景色を配置したい場合には、テキストをで括る。

fit-contentでマーカー

  • 見出しタグにwidth: fit-contentを指定するとコンテンツ幅に合わせてマーカーを配置できる。

見出しが2行の場合

  • テキストだけにマーカーを配置したい場合には、テキストをで括る。

ブラウザ対応

  • IE以外のモダンブラウザで対応。Firefoxのみベンダープレフィックス(-moz-fit-content)が必要。

参考

ランディングページとは〜LPOで成果の上がるページを作る方法と使えるテンプレート集まとめ

https://ferret-plus.com/2499

in ferret on 2018-01-31

今回は、ランディングページを最初にやるべき理由と、そのランディングページの作り方など、ランディングページで売上や問い合わせ数を上げるために必要なことをまとめて解説します。

ランディングページとは

  • Googleなどの検索エンジンや広告からユーザーがアクセスした最初のページ。
  • 広義の意味としては、「広告バナーやテキストリンク、検索結果などからアクセスしてきた人が最初に訪問したページ」、つまりリンク先ページのこと。
  • 狭義の意味としては、「インターネット広告などに設定する縦長の1ページで、そのページ内でコンバージョン(問い合わせ・申し込み・資料請求)を促すためのページ」。

ランディングページの最適化が重要な理由

  • 購入率を改善するだけで売上が跳ね上がるので重要。広告からの流入数が変わらず広告費が変わらなくても、売上は2倍になれば売り上げが倍になる。
  • 広告出稿ページを変更すればいいので重要。上位表示できればアクセス数が増え、倍々で売上が伸びていくので非常に効率的。

効果的なランディングページの作り方

いくつもランディングページの構成フレームワークはあるが、オススメなのはBEAFの法則:

  • Benefit読み手に取ってのメリット。ユーザーは3秒でそのページが自分にとって有益かそうでないかを見極める。「自分にとってこのページを見ることでメリットがある」と思わせるため、3秒でそう思わせるために短く端的にキャッチコピーのような形でメリットを伝えたり、写真などを使って伝える。
  • Evidenceメリットの根拠。Benefit(ベネフィット)で伝えたメリットを、ユーザーはそのまま受け取らず脳の中で疑いにかかるので、その疑いを解消するために、Evidence(エビデンス)として根拠を載せる。根拠としては、表彰歴などもよく使われる。
  • Advantage競合と比べた優位性。「ここにしかない商品である」ということを伝えるための競合優位性を掲載。
  • Feature特徴。「今買わなければいけない理由」を提示し、背中を押す。

ランディングページで使える心理学

よく使われるものを挙げてみます。

  1. アンカリング効果:何かしらの意思決定を行う際、最初に見たデータを重要視する傾向。「数量限定」「期間限定」というふうにプレミア感をアピールする等、ユーザーに対し「この商品はお得だ」「良い買い物ができた」と思わせるようにするための仕掛けを作る。
  2. ハロー効果:ある1つの目立つ特徴を最初に認識すると、その他の構成要素まで一番目立つ特徴に引っ張られて歪んで認識してしまうこと。例えば異性を見るとき、容姿がさわやかな雰囲気であれば中身までもがさわやかで良い人だと思うのも「ハロー効果」。
  3. 単純接触効果:何かしらで接触する機会が増えると、その接触した相手に対して好意を持ちやすくなること。ランディングページに一度訪問して離脱してしまったユーザーに対し、リターゲティング広告を行うことで接触回数を増やし、サービスを記憶して頂くと同時に好感度も上がる。
  4. バンドワゴン効果:「これが流行っている」と聞くと、人はその流行している物事を好意的に捉える傾向。「大流行」「大人気」という言葉を含むキャッチコピーを付けられた商品やサービスは不思議とよいものに見えてしまう。
  5. 同調現象:周囲の人間と同じ行動をしていると安心し、逆に自分1人だけが違う行動をしていると不安を覚えること。例えば「30代男性の8割が使用」「◯◯地区の主婦は皆使っている」というように、商品のマジョリティ性がある場合はそこを最大限アピールすると効果的。
  6. 損失回避の法則:人は利益を獲得することよりも、損失を出さない方を重要視する。自社サービスを利用しないと損をしてしまうイメージを沸かせることで対処。
  7. マッチングリスク意識:商品やサービスを購入する前、ユーザーは「効果が出なかったら…」と不安を持つこと。お客様の声や口コミコーナーを設置する等の手段で解消できる。
  8. 決定回避の法則:人は、選択肢が増えるとその中から選択・決定することが困難になる。ユーザー側で選択する項目を減らし、まっすぐゴールまで案内できるような構成にする。
  9. カリギュラ効果:禁止されると、人はかえって禁止された行為をしたくなってしまう。たとえば、冒頭にいきなりインパクトのある否定的な文章を入れ、ユーザーの関心をひきやすくする。
  10. フレーミング効果:見方や基準を変えることで、同じ物事でも全く違う印象を持ってしまう。普段と少し違った見方をすれば新たな切り口が見えてくるかも。
  11. 文脈効果:隣り合う情報の意味がお互いに影響しあい、意味が形成されること。同じ基礎化粧品でも、ターゲットが女性であれば、ピンクやオレンジなどを基調とした柔らかく女性的な印象に、男性向けの場合は黒やグレーなどシャープなデザインにする場合が多い。
  12. シャルパンティエ効果:大きさや重さの単位を変換することで錯覚が起こること。例えば、10kgの鉄と10kgの羽毛布団を比べた時、重さは同じなのに羽毛布団の方が軽そうだと感じてしまう。
  13. 権威への服従原理:人は権威のある者の言動には無意識に従ってしまう。専門家として紹介された人物のアドバイスであれば、ほとんどの人は無条件にその内容を信頼し、受け入れる。
  14. 一貫性の原理:一度決めたことは無意識のうちにやり通そうとする人の性質。ページを観ているであろうユーザーの欲求を刺激し、少しずつイエスを取ったうえで、「この商品を購入すれば欲求が充たされる」と訴求することで、ユーザーは欲求を満たす為にその商品を購入する。
  15. 認知的不協和:自身の中で、矛盾する2つの感情を抱え、不快感を感じること。その認知的不協和が起きている状態を解消するための手段を提示してコンバージョンに至らせる。

ランディングページを作る前に!参考にしたいLPデザインまとめサイト10選

https://ferret-plus.com/399

in ferret on 2019-03-06

今回は、ランディングページのデザインや構成の参考になるまとめサイトを紹介します。

国内のランディングページのデザインまとめサイト

  1. Web Design Clip [L]:業界問わず、参考になるランディングページのデザインがまとめられたWebサイト。各デザインにカーソルを合わせると、「category(美容・健康・化粧品、家電・PC・玩具など)」「main color」「sub color」の確認ができる。さらに各項目をクリックするとその項目ごとのランディングページのデザイン一覧を表示。自社と同じ業界ではどのようなランディングページを作っているのかやカラーごとにランディングページのデザインを参考にしたい場合に便利。
  2. MUUUUU.ORG(ムーオルグ):縦長のWebサイトのみをまとめたギャラリーサイト。「カテゴリ」「デザイン」「Webサイトのタイプ」「カラー」ごと一覧表示可能。
  3. ランディングページ集めました。:トップ画面に並ぶサムネイルをクリックするだけで該当ページに遷移するため、気になるデザインを手軽にチェック可。更新年月や取り扱っている商材のカテゴリごとの検索も可能。
  4. LANDINGPAGE BOOKMARK:コンバージョンとなる商品ごとのカテゴリで分けられている。美容商品や健康商品、サプリメントなどを扱うランディングページが多くまとめられている。自社で取り扱っている商品と競合になるランディングページに絞って検索できる。
  5. LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE:スマートフォンに特化。(※リンクが切れている。)
  6. 縦長ページのデザイン 集めました:「セールスレターのデザインリンク集」として、主に美容・ハウツー・情報商材のランディングページをまとめて紹介。商材のメリットをいかに伝えるのか、そのデザイン手法を参考にできる。
  7. LPアーカイブ:デザイナー観点で、多くの分類からランディングページを検索可。商品だけでなく、ランディングページの「カラー」「イメージ」といったカテゴリから絞り込める。ランディングページの商品名や店舗名、掲載先など、より具体的な情報も掲載。
  8. LP advance:「業界・業態」「カラー」「タイプ(かわいい系・クール系など)」「メインビジュアル」の複数のカテゴリをかけ合わせてアンド検索で絞り込める。まとめているランディングページのキャッチコピーを一覧で確認できるため、ライティング担当者の情報収集にもオススメ。
  9. イケてるランディングページデザインまとめ:「にぎやか系」「ネタ系」「神秘系」など、直感的なイメージからも検索できる。ジャンルやカラーでも検索可。
  10. ランディングページ(LP)データベース(Landing Page Database):日本企業のランディングページを中心にまとめている。(※リンクが切れている。)

海外のランディングページのデザインまとめサイト

  1. Land-book:海外サイトを集めた参考サイト。ランディングページだけでなく、ポートフォリオやブログもまとめられている。キーワード検索や、新着順、人気順の並べ替えも可。アカウント登録をすると気に入ったサイトを「My Favs」というリストに保存できる。
  2. One Page Love:カテゴリー分けや検索機能が充実。ランディングページだけでなく、1ページで完結する様々なサイトを紹介。サイトのテンプレートも配布。
  3. OnePageMania:1ページで完結するWebページを紹介。ランキングから海外で人気なデザインを探せる。カテゴリー機能を使い、同じテーマのデザインを見てまわることも可能。