クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
Webユーザビリティを改善するための5つのポイントと方法
先日の記事[競合サイト調査・分析に必要なチェック項目と役立つツール達！]でユーザビリティの調査・分析方法を軽く紹介しましたが、今回はWebユーザビリティを改善するための5つのポイントと方法を紹介したいと思います。 まずユーザビリティとは何なのかについて軽く触れておきます。先日の記事でも紹介しましたが、それは【使い勝手】のことです。WEBユーザビリティの改善とはすなわち、WEBサイトの使い勝手を良くするということになります。ではその使い勝手とは何なのか。それは単純に【使いやすさの程度をあらわした言葉】のことです。使い勝手が良いということは、使った人から見てその【何か】は使いやすかったということになります。そして今回のこの記事は【どうしたらユーザーに使いやすいと感じてもらえるのか】について紹介しています。 この【WEBユーザビリティを改善するための5つのポイントと方法】は下記の項目で紹介するヤ
競合サイト調査・分析に必要なチェック項目と役立つツール達！
たいていの人は何らかの商品を購入する時、似たような商品の中から一番気に入ったものを買うと思います。そのため、自社商品を他社商品よりも多く購入してもらうには、お客様に「これが一番良い！」と思ってもらえる商品でなければなりません。 お客様に自社商品を一番だと思ってもらうには、競合他社の調査・分析は欠かせません。自社と他社の違い(差)を理解することが、より優れた商品やサービスの開発に繋がります。 これはWEBサイト制作でも同じです。競合サイトの調査分析をすることで、どのようにWEBサイトを組み立てたら、競合サイトよりも優れたサイトになるかが見えてきます。 そこで今回は、競合他社のサイト調査・分析に必要なチェック項目と、役立つツール・調査方法を簡単にまとめて紹介したいと思います。 最初にライバルだと思われる会社のターゲットユーザーを調べることが必要です。これを調べると【実際にその企業がライバルと言
リストの横並び時に生まれる< li >の隙間を解決する5つの方法
ナビゲーションやリストを水平に並べると、なぜか少し隙間が生まれてしまうことがあります。今回はこの現象の解決方法をいくつか紹介したいと思います。 結構簡単な方法なので、知っている人も多いと思いますが、もし知らない人がいれば、ちょっとは役に立つかと思います。基本的にはfloatで解決すれば良いと思いますが、floatを使うと都合が悪くなる場合などもあると思うので(width指定とか、センタリングとか)、そんなときのためにどうぞ。 個人的にメモしておいたものを、WEBにUPして管理しておきたいという意味もあり、今回記事にしています。 元となるソース HTML <ul> <li>バナナ</li> <li>リンゴ</li> <li>ミカン</li> </ul> CSS ul { margin:0; padding:0; list-style:none; } ul li { display: inli
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
Webディレクターだから間違えるECサイトの提案(商品詳細)
どんな業界・どんな職業に就いても同じことが言えるのですが、その業界で働いているからこそ学べることがあります。ですが、この業界特有の専門知識のせいで、勘違いが生まれてしまうこともあるんです。例えば、『伝えたい事は簡潔に書き、画面のスクロールは避けるようにする』これは私達WEB業界で働いている人であれば、よく知られたコンバージョンを上げるためのポイントの1つです。 ただ、実はこの『伝えたい事は簡潔に書き、画面のスクロールは避けるようにする』という事を提案したがために、売れないECサイトを作ってしまうことがあります。なぜか分かりますか？ それは『人は買いたい商品の情報であれば、詳しく知りたい』と考えているからなんです。 今回は、WEB業界では正しいと思われているが、実は間違っている可能性のあるECサイトの提案について説明させていただきます。 本当に買いたい人は商品の詳細を詳しく知りたい webデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
