15万記事を分析してわかった、クリック率を20％高める「記事タイトル」3つの法則とは？｜アプリマーケティング研究所
Outbrainという会社の「WEBコンテンツの見出し（タイトル）」について、15万記事を調査したデータが、おもしろかったので簡単にメモ。 １）8ワードのタイトルがクリック率が最高に。 記事タイトルの長さとしては、8ワード（英語で）のものが一番クリック率が高かった。平均よりも21％高かった。 ２）サムネイル画像を入れるとクリック率＋27％ ほとんどのメディアはやっている気がするが、サムネイル画像を記事タイトルに加えると、クリック率を27％も高めることができる。 たぶん、ソーシャルのOGP画像とかもそうだし、あとはスマートニュースとかにも、多かれ少なかれ、当てはまる話だと思われる。 ３）偶数よりも奇数のほうが20％も吸引力がある 偶数よりも奇数のほうがクリック率が20％も高まる。たとえば「デザイン上達8のコツ」よりも「デザイン上達7のコツ」にすべきだと。 感覚的には「3・5・7」あたりの数値
高コンバージョンを保つウェブサイトが採用する5つの行動心理学テクと実例|グロースハックジャパン|Growth Hack Japan
7/25最新記事 見落とされがちなオフライン上での3つのリファラルチャンス edited by Ryutaro Mori 過去に何度もお伝えしてきた行動心理学を利用したコンバージョン最適化テクニック。 本日は、growth hack japanの中でまだお伝えしてなかった行動心理学テクを、実例とともに5つ紹介します。 参考:5 Psychological Principles of High Converting Websites プレグナンツの法則 プレグナンツの法則によると、人間は明確で順序だった物事を好み、複雑なアイディアやデザインを恐れる傾向にあります。 シンプルなものほど予期せぬ不快なサプライズを引き起こしにくいということを本能的に感じ取り、それに従ってシンプルに物事を解釈する人間の傾向を表しています。 例えば以下の英文を見てみましょう。 ① Welcome to growth
年寄りを困らせる「レスポンシブWebデザイン」 | スタッフルーム | 日経BPコンサルティング
スマートフォン利用者に配慮して「レスポンシブWebデザイン」を採用するサイトが増えています。このデザインは1つのHTMLファイルで、パソコンとスマートフォン、それぞれに適したページを表示できるのが特長。特に若い人をターゲットにする大学サイトで注目を集めています。Googleも推奨する優れた手法ですが、デメリットもあります。話題になることが少ない、ユーザビリティ上の問題点について指摘しましょう。 「レスポンシブWebデザイン」（以下、レスポンシブ）とは、ブラウザーの画面サイズに応じてレイアウトを変更させるWebページの作り方。パソコンとスマホから同じURLにアクセスし、同じHTMLファイルを開くと、パソコンにはパソコンに適したデザイン、スマホにはスマホに適したデザインが表示されます（中には、タブレット向けデザインを用意しているサイトもあります）。 レスポンシブを採用するサイトは最近増えていま
CMS導入前にしておきたい質問
今注目されている Micro CMS 従来は Joomla, WordPress, Drupal, Movable Type 辺りから制作者の肌に合うツールを選ぶ場合がありました。これらは今でも十分に使える高機能 CMS ですが、機能が多過ぎることから、メンテナンス、運営、ワークフローをしっかり設計していないと、複雑で扱い難いものになることがあります。無料から使える小中規模 CMS は出そろった感がありますが、ここ 1, 2 年ほど新しい CMS を幾つか見かけるようになりました。 Pico : 静的ファイルを管理する CMS Dunked : ポートフォリオに特化した CMS Koken : こちらもクリエイティブ向け CMS Leeflets : 1ページサイトを手軽につくる CMS Ghost : Markdown で書けるブログツール Dropplets : こちらも Markdo
個人事業者になってみて。 - Hiro Log
結婚して5年、父親になって4年、個人事業者になって3年。 そんな人間が地方都市(というよりはど田舎)で個人事業者になり、在宅で仕事をし、24時間365日、2人の子供たち(男の子)に邪魔をされながら、過ごした3年間で気が付いたこと、感じたこと。 まず、自分は積極的でも、社交的ではなく、八方美人にも生きられず、長男が生まれたと同時に、故郷を離れ周囲に知人も友人も誰1人いない環境で生活を始めることになり、話し相手はおろか、飲み友達もいない。そんな状況でした。 無駄な会話のない毎日 「あのハゲ上司、バカじゃね？」「昼飯行きます？」「あのゲーム買いました？」「あの映画見ました？」「jQueryのこの部分が分からないんですけど…」「あのバカ上司、WEBのWも分かってないってハゲじゃね？」と会社員の頃は毎日のように無駄話をしていました。全くもって無駄でした。時には仕事の妨げになりました。 個人事業者で、
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰？ 世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴
いまさら聞けないCSS3入門＆スマホ対応6つの問題点
いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（1/2 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、CSS3になるまでの歴史、代表的な3つのCSS3モジュール、実装上の3つの注意点、OS／機種依存事例6選などを解説します。 こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「JavaScriptのスマホ対応時に知らないと損する16のコト」では、スマートフォン向けWebサイトで利用されるJavaScriptの役割や代表的ライブラリ、実装上の注意点をご紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）」の開発・販売や
これは快適！Mac OS X上でWinのIE6/7/8/9/10など、さまざまなブラウザの確認ができるアプリ -Sauce
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
はじめてスマートフォンサイトを作る人へ。制作で気をつけたいポイント５つ
スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない
50 User-Friendly Website Designs To Inspire You
We’ve rounded up a massive collection of 50 user-friendly website designs to inspire you. These user-friendly website designs are gathered from various niches, from popular websites such as National Geographic, Marni or The Winter Olympic Games, to website concepts or small web design projects we found featured on Behance. All web designers should create their websites with usability in mind. This
私が売れるランディングページを作れる様になる迄の3年で学んだ7つの事
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページは、商品の売上にダイレクトに影響する重要なものだ。それだけに、じっくりと時間をかけて、長期的に安定した売上を出せるものにする必要がある。 私は、今でこそ、コンスタントに高いコンバージョンを出せるようになったが、そこまでの道は決して簡単ではなかった。 そして、過去の私と同じように、高いコンバージョンを出せずに悩んでいる方は多いだろうと思う。 そこで、本日は、私が売れるランディングページを作れるようになるまでの３年間で学んだ７つの気付きをシェアさせて頂こうと思う。 １．データの前では直感は無意味と知った一見すると、WEBセールスは派手に見えるかもしれない。しかし、コンバージョンを上げる作業は、多くの人が考えるよりも、ずっと地
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
HTML5 を IE や Firefox 2 でも使えるようにする方法 - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「How to get HTML5 working in IE and Firefox 2」を日本語訳したものです。この記事では、新要素に対応していない IE や Firefox 2 で、新要素を適切にレンダリングさせる方法を分かりやすく解説しています。HTML5 でサイトを作る場合には、必須の知識となります。 原文タイトル How to get HTML5 working in IE and Firefox 2 原文ページ URL http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/ 著者 Remy Sharp 氏 原文投稿日 2009-06-20 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
ノンデザイナー向けのスライド・「Webデザインのセオリーを学ぼう」
既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。（「意味」って言っちゃうと語弊がありますよ）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーランスの全国Webサイト制作料金表 2013年度版
JPEGmini | Leading JPEG Compressor & Image Size Reducer
GATAG -FREE-