All Health Care 2 Culture 41 Public 19 Tourism 20 Education 12 Finance 2 Transportation 20 Publishing 5 Food & Drink 28 Fashion & Beauty 19 Manufacturing & Retail 30 Media & Entertainment 5 Technology 7 Visual Identity 55 Tagline 29 Signage 19 Exhibition / Space 22 Graphics 63 Web / App 35 Movie 28 Package 31 Products 9 Editing 21 Typeface 2

今回のKISSmetricsマーケティング特集記事の原題は “Everything You Need to Know About the Psychology of the Call to Action” です。 Call to Action (略してCTA) は直訳すると「行動喚起」という意味ですが、マーケティングの世界では、ウェブサイトや広告の最後にある「訪問者に押して欲しいボタン」や「そのボタンを含むページ全体」のことを指します。 クリック数やコンバージョンをあげるにはどうすればいいか、皆さん日々考えていらっしゃいますよね。実はこのCTAは「心理学」と深い関係があるのです。たった一つのボタンが、サイト訪問者の心理とコンバージョンにどれだけ影響しているかを解説しています。 (以下、翻訳文) おそらくほとんどのWEBマーケティング担当者が、CTAという言葉自体は知っているだろう。しかし、

CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ ホバーエフェクトを確認するのには、「Run Pen」をクリック

若者向けではなく、主に50代以降をターゲットにしたサイト（スマートフォン向けサイト）のUIの好事例ついてまとめてみました。 ひとくくりに「50代」といってもスマホを使いこないしている方も多いと思うので、以下のような人物像で考えました。 ・５０代後半の女性 ・スマホは持っているけど通話、家族とのメールやLINE利用がメイン ・インターネット通販では商品を購入したことがない。 ・お気に入り登録しているサイト以外はあまり見ない ・小さい文字は読みづらい、老眼。 事例１：フォントサイズは大きめ・テキストリンクには下線を フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを「大・中・小」で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっている

あなたは”視認性とクリック率の高いバナーの作り方”をご存知でしょうか？バナーはただデザインが良いだけでは意味がありません。視認性が高く潜在顧客が「おっ！自分に関係がありそう！」と思ってくれるデザインやレイアウト、そしてキャッチコピーが必要なのです。 でも”視認性とクリック率の高いバナー”を作るのって難しそうですよね…。Webデザイナーなら誰しも経験あると思いますが、多くの時間を掛けたにも関わらず理想のバナーにならないことも。しかし”視認性とクリック率の高いバナーの作り方”にはその基本があります。基本を抑えることで理想のバナーを効率よく制作出来るようになります。もちろん、何度も練習を重ねることが大切なのですが、基本を知っているのと知らないのでは大きな差があります。 そこで今回は、高品質なバナーの作り方をまとめてみましたので、ぜひご覧ください！ そもそもバナーの役割とは？ 本題に入る前に、そも

ランディングページなどの申し込みページでは、CTAボタンのデザインを少し改善するだけでも、コンバージョン率（CVR：成約率）が劇的にアップすることがあります。 CTAとは CTA（シー・ティー・エー）とは、「Call to Action：コール・トゥ・アクション」の略で、Webサイトの訪問者に求める『行動を喚起する』ことを指す。 例えば、Webサイトの目的が『申し込み』の場合は「申し込みのための案内」がCTAになります。電話をかけてもらう目的の場合は「電話番号の表記」がCTAになります。 多くの場合は、《ボタン》や《リンク》の形で表現されます。 《CTAボタン》はコンバージョン率を上げるための重要な要素のひとつですが、意外とおろそかになっている場合があります。 心当たりがある場合は、この記事を読んでみてください。クリックされるCTAについて、完全網羅しています。

優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。 このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】 コンテンツ目次 1. コントラストを活用しよう。 2. 「黒に近い黒」が「黒」よりも読みやすい。 3. 重要なコンテンツを最初に。 4. すべてのものを整列させよう。 5. 文字サイズと文字スペースに気をつけよう。 6. 検索結果の順番が重要なときは「リスト表示」。 7. まずは白黒でデザイン、あとから色を追加しよう。 8. 快適なデザインを目指そう。 9. 素敵な配色カラーパレットを使おう。 10. Apple や Google

シニア層を対象にしたスマートフォンサイトのユーザビリティ私の母は某アーティストの大ファン。20 年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のための Web サイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 シニア層のための Web サイトユーザビリティ ライブチケットの当選確認をしたかった母ここ数年は Mac を触る機会もほとんどなくなり、スマートフォンで Web サイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝

Webサイトの閲覧の6割がスマートフォンユーザーと言われ（※1）、最近ご依頼いただくホーム―ページのほとんどがスマートフォン対応サイトです。 （※1）参照： http://www.similar-web.jp/blog/archives/3985 私たちがスマホサイトをデザインするときに特に気を付けていることの1つが「ユーザビリティ」です。ユーザーが自分に必要な情報をすぐに見つけられるように、どのようなメニュー設計が良いのかを考えて制作をしています。 そこで今回は、大手のスマホサイトがユーザビリティを考えて、どのようなメニュー設計をしているかを調べて比較してみました。 スマホサイトのメニュー設計の比較 比較内容 （1）メニューの場所は上か下か （2）メニューは追従するか （3）メニューのサイズ （4）メニューアイコンの種類、文字の有無 比較した大手スマホサイト（15サイト） ※順不同 Ya

ウェブサイトを作るのに欠かせない『HTML』について学びましょう。初心者の方でも分かるように図をたくさん使って解説していくのでご安心ください。 1. HTMLとは？ HTML（えいちてぃーえむえる）とは、ウェブページの土台を作るための言語です。ウェブページに表示したい文章やウェブページの情報を独自のタグではさむことでHTMLを書いていきます。と言っても何のことだか分からないと思うので1つ1つ解説していきます。 1-1.HTMLはウェブページの土台！ インターネット上に公開されてるウェブサイトでHTMLを使っていないものはほとんどありません。今見ているこのページにもHTMLが使われています。

要約：全ての根拠が示しているのは、「プログラミングには高い適性を要求されますが、適性を持った人間はわずかしかいない」ということです。最近の流行の短期でコーディングを学べるコースは、デマカセを売り付け、プロのプログラマのスキル不足解消に何ら力になってないのです。 これはイギリスからの観点での記事です。私はこの事象について、とりわけソフトウェア開発者の社会的地位に関しては、他の地域決してこの通りではないと思っています。 メディアが共通して取り上げるテーマは、スキルのあるプログラマの不足です（”プログラマ”も”コーダ”も”ソフトウェア開発者”も、ここでは全て同じものを意図し、区別せずに使用しています）。このコーディング技術のギャップには解決の糸口が見えない心配が多くあります。要は”明日の高品質な仕事”を担う候補者を生み出すことに失敗しているということです。例えば、 The Telegraph の

This domain may be for sale!

「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や

2013年 01月 09日 今さら聞けない？有名なフォント12種類の紹介とフォントの基礎知識について カテゴリ： Font タグ：Font 新年明けましておめでとうございます。今年も色々と挑戦する年にしたいのですが、一先ずブログをしっかり書くというのをベースにがんばります。 早いもので、このブログも気がついたら3年が過ぎ4年目に突入していました。立ちあげ当初は辞めないことを目標にしていましたが、続けることが大事だなと今でも思っています。皆様本年もよろしくお願いします。 今回は自分がよく使っているフォントをまとめました。他にも使っているフォントはもちろんあるんですが、基本的なフォントやWebベースで使えるフォントあたりを紹介しています。 1.フォントリスト 2.フォントの基本 3.考察 フォントリスト 欧文フォント 1.Arial 2.GEORGIA 3.Myriad 4.Verdana 5

表示中のページから https://webtan.impress.co.jp/n/2017/10/23/27208 にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。

『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

バナー広告によって獲得数や集客率は1.5倍~2倍と劇的に変化するケースもあります。 しかし「売上を増やすために新しくバナーを作ろう！」と考えたときに、実際にどんなバナーを作れば成果が上がるのかお悩みの方も多いのではないでしょうか。 成果にしっかりと繋がっているバナーには共通点があります。そして、業種やサービスの内容によっても特に工夫すべきポイントがあります。 WEB広告業界でバナー・ランディングページ・サイト等の構成を手掛けている私が、バナー作りの秘訣を参考事例を交えて分かりやすくお伝えします。ぜひバナー制作の参考にして頂ければと思います！ 【eBook】コンバージョンする効果の高いバナーの作成方法 知ってるだけで成果が変わる！良いバナーが持つ５つの共通点たった５個のポイントを押さえるだけで、バナーの成果は確実に上がります。まずは王道とも言えるルールを一覧で紹介します。 上記のポイント一覧

バナーをデザインしてみたは良いけど、なかなか良いCTR（クリック率）が取れなくて困っている・・・なんて思っていませんか？デザインが美しいからといってバナーのCTRが高くなるかと言ったら必ずしもそうではありません。むしろ見た目の良いバナーは逆にCTRが悪くなることさえあります。 サイトに訪れたユーザーにバナーをクリックしてもらうには、「思わずクリックしてしまいたくなるようなシカケ」が必要です。それは優れたキャッチコピーやカラーリング、背景画像、バナーサイズなど様々です。 そこで、今回はバナーデザインのCTRを高める為の「心理学テクニック」と事例を１４個ご紹介します。どれも非常に高い威力を発揮する心理学ですので悪用厳禁のテクニックです。 １．はじめに CTRの高いバナーサイズとは？ バナーのクリエイティブ以前にもサイズによってもCTRは全く異なってきます。 以下の図をご覧下さい。 出典：htt

あなたは、Webデザイナーやプログラマーに作ってほしいWebサイトのイメージを指示する際に、どのようにしていますか？Webデザインやプログラミングをある程度知っていれば、明確な指示が出来るかもしれませんが、多くの人がそうではないと思います。 そんなときに、役立つのがWEBデザインのギャラリーサイト（参考サイト）です。デザイン的にも秀逸な色々なサイトを一覧で眺める事が可能ですので、イメージに近いWebサイトがあれば、ひとこと添えてWebデザイナーに指示すれば簡単にイメージを共有できます。 今回はWebデザインの参考サイトを２０サイトご紹介します。これから自社もしくは自分のWebサイトを制作していこうと考えている方にはイメージを膨らませる参考になるでしょう。また、特別興味がなくても見ているだけで楽しいWebサイトばかりになっています。ぜひご覧ください。 １．MUUUUU.ORG 左サイドバーに