http://japan.internet.com/busnews/20111228/5.html
ということは、
スマホでGoogle検索を使った場合は、
スマホサイトを優先的に出すということかもね。
Googleは表向きは、
入口を一つにして、
裏のロジックで、いろいろを判定、切り分けを行いながら
最適と思われるモノを出力するわけで、
外から見ているだけだとわからないかもね。
http://japan.internet.com/busnews/20111228/5.html
ということは、
スマホでGoogle検索を使った場合は、
スマホサイトを優先的に出すということかもね。
Googleは表向きは、
入口を一つにして、
裏のロジックで、いろいろを判定、切り分けを行いながら
最適と思われるモノを出力するわけで、
外から見ているだけだとわからないかもね。
■Wordpress
Twenty Eleven
このblogで、使っているヤツ。
自分で考えて作る気力が失せるぐらいよく出来ている(笑)
■レスポンシブWEBデザインで作られたWEBサイト26選
http://designm.ag/design/26-inspiring-responsive-web-design/
■Responsive Web Design: 50 Examples and Best Practices
http://designmodo.com/responsive-design-examples/
■Awesome Responsive Designs and Resources
http://bestdesignwebgallery.com/blog/responsive-designs/
海外サイト
レイアウトが変わるというよりも、
小さな画面にしたときに、witdh%設定なので、
折り返して収まる系が多い。
まあ、スマホは、縦にレイアウトするしかないので、
PCサイトのレイアウトを、どうするかのCSSが腕の見せ所になるね。
但し、PCサイトのレイアウトは、スマホで縦になることが前提なので、
段組みレイアウトになってしまいがち。
スマホファーストで設計、デザインしてから、
これを元に、PCサイトをレイアウトするというのが、
正しい手順かも。
html5 新要素はセマンティックのためにあ~る
■html5 新要素
<header> ヘッダーだけど、ページ単位だけでなく、セクション単位でも利用
<nav> いわゆるメニューだね(リンクの集合体)
<aside> これも、いわゆるサイドメニュー(関連事項へのリンク等の集合体)
<section> 1ページ1個が美しいかも。このセクションに見出し(h1~h6)が付く、<article>が並ぶ。
<article> 独自した記事の単位
<footer> フッター。これもセクション単位でも利用
■セマンティックとは
セマンティックは、機械が意味を解釈出来るようにするということ。
つまり、Google様が、意味を解釈できるようにするということ。
このhtml5のタグを使って書けば、
Google様は、これはヘッダーねとか、メニューに、コンテンツ本文ねとか、理解してくれる。
そして、その理解にもとづき、検索結果を変えてくるはず。
今まで、SEOと言われていたようなことが、html5の新要素になった感じ。
■html5の新要素による記述例
<body>
<header>
<h1></h1>
<img src=”" style=”max-width:100%” alt=”">
</header>
<nav>
<div class=”menu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
</nav>
<section id=”content”>
<article>
<h2><a href=”#”>First Article Title</a></h2>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<h3>Stuff</h3>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</article>
<article>
<h2><a href=”#”>First Article Title</a></h2>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<h3>Stuff</h3>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</article>
</section>
<aside id=”sidebar”>
<h3>Stuff</h3>
<ul>
<li><a href=”#”>Log in</a></li>
<li><a href=”#”>Entries RSS</a></li>
</ul>
<h3>More Stuff</h3>
<ul>
<li><a href=”#”>Log in</a></li>
<li><a href=”#”>Entries RSS</a></li>
</ul>
</aside>
<footer>
<section id=”footer-area”>
<aside id=”first” class=”footer-segment”>
<h3>Blogroll</h3>
<ul>
<li><a href=”#”>four linkylinks</a></li>
<li><a href=”#”>five linkylinks</a></li>
</ul>
</aside>
<aside id=”second” class=”footer-segment”>
<h3>Awesome Stuff</h3>
<ul>
<li><a href=”#”>one linkylink</a></li>
<li><a href=”#”>two linkylinks</a></li>
</ul>
</aside><!– end of #second footer segment –>
</section><!– end of footer-outer-block –>
</footer>
</div>
</body>
凄い。
ここまで来たか~。
使いこなせるようになりたい。
jquery.mobile.structure見てて思ったけど、
jquery.mobileは2つの役割があるね
(1)元のhtmlに何か付与する
(2)付与したidやらを見て、jqueryで動作をコントロールする
つまり、やたら役割分担、分業化が進んでいる。
この役割分担、分業化を設計することで、よりレスポンシブWEBに近づくわけで、
jquery.mobile.structureは、レイアウト系のCSSのみを扱っているものだし
Theme Rollerで書き出されるcssは、色を扱っているものだし、
レイアウトと色のCSSを分割して書いてしまうところが凄い。
レイアウト部分のCSSの直せば、レスポンシブWEBになるし、
色のCSSを直せば、テーマの切り替えみたいな感じに出来る。
1つのhtmlで、様々なカタチに切り替えることができるようになる。
<div class=”ui-body ui-body-a”>
classの設定の仕方としては、
レイアウト系のCSSとデザイン系のCSSの2つを設定する感じ。
■お客の心理を操れば売上があがる!26の心理サイトまとめ
http://blog.omiyageya-san.com/sell/web_matome/
これみて、久びさマーケティングでもと思って
サイトを見た中でなるほどね~と思ったこと。
■電通の広告戦略を分析する
http://tsurumitext.seesaa.net/article/130055536.html
1.もっと使わせろ
2.捨てさせろ
3.無駄使いさせろ
4.季節を忘れさせろ
5.贈り物をさせろ
6.組み合わせで買わせろ
7.きっかけを投じろ
8.流行遅れにさせろ
9.気安く買わせろ
10.混乱をつくり出せ
振り返ってみると何人か知っている
電通の社員さんは、地で行っているところが凄い。
■儲かるランディングページの作り方を公開!LP会社さんごめんなさい
http://www.re-marketing.jp/marketing/website_navigation/lp.html
情報を一枚にまとめることで、閲覧者に探す手間を省かせたランディングページの設計
お決まりのランディングページを見ると、またかと思うけど、
手間を省かせるという視点はいい。
■楽天市場公式 ネットショップの教科書() tatsuosakamotoさんの要点まとめ
http://bukupe.com/summary/633
(2)買いたくなる場を作り出すには
①客観的説明と主観的説明を書く
②店長さんの言葉で対面のように親しみやすくする
③使用シーン・用途を提案する
④一番商品を決め、一番商品として演出する
⑤「刺激」「理由」「限定」をキーにキャッチコピーをつける
あえて、
いち押し商品を決めることは、迷っているお客さんへの決め手になりそう
■心理学を融合することで最適なWebマーケティングを導きだす
http://markezine.jp/article/detail/5892
一般的に、人は情報に3回接する事によって、その対象を認知し、7回接する事によって、商品を手に取り、購買に結び付くといわれている。これがセブンヒッツ理論である。
セブンヒッツ理論と言うのか、
代理店さんは、広告は継続しないと意味ないです。
と言っていた論拠はここにあるのね。
これ、感覚的にわかるんだけど、
カネを掛けないとダメというのがなんとも。
■NOが言えない日本人に効果的な2つの心理テクニック
http://www.sugobu.com/lifehack/mind/post217/
例えば知り合った異性に対し『メアド聞いちゃダメ?』と聞いたら、相手は『うん』と簡単に答えることができます。しかし質問の仕方を少し変えて『メアド聞いてもいい?』に変更すれば、日本人の習性で相手はNOと答えにくいために、『うん・・・まぁいいよ』と答える可能性が高まる。
日本人は一度は断れることができても二度連続断るのは苦手
恋愛テクニックだと最初に『携帯番号教えて!』とややハードルが高い質問をし、その次に『番号がダメならメアド教えて』とそれよりもハードルの低い質問をすると効果は抜群。相手も『一度は断ってしまったし悪いな・・・』という感情があるため、二度目のお願いには応えてくれる可能性が高いのです。
痛いところを突いてくるな~
確かにな~
押しの強い人は、たぶんこのタイプ。
焼畑系は、短期では成果が出るかもしれないけど、長期的に見たらダメかもな。
■「一瞬で信じこませる話術コールドリーディング」読了
http://prius.cc/d/20090301_isshundeshinjikomaseruwajutsuk.html
コールドリーディングは以下のような人間の性質を利用する。
・同じ属性の人間(例:30代男性会社員など)はだいたい同じような経験をしてきている
・人間は自分の都合のいい事しか覚えない(セレクティブメモリ)
・人間は自分の事に一番興味がある
・人間は自分を平均以上だと思っている
・人間は誰でも二面性を持っているこれを元にストックスピールという誰にでも当てはまるような事を言う。いくつかは当たっているのでセレクティブメモリ効果によって当たってるものだけが印象に残る。その他、上に書いてある人間の性質を利用して相手を自分を信じ込ませていく。
これも、凄いな~
どんな商材でも売れる営業マンが身に付けているテクニックかもな。
商品とは関係なく、単に相手はどうすれば動くか的な発想。
営業という仕事のイメージを作ってしまう部分かも。
本当は、営業っていろいろあるんだけどね~
このコールドリーディング、こっちでは、
イカサマ霊能師やインチキ占い師の手口まとめ
http://d.hatena.ne.jp/LM-7/20070415/1176651449
イカサマ認定みたい。(笑)
■「顧客が感じる心理的価格」
http://www.muguruma-ryuken.jp/kikouronbun-fashon2.htm
3.今、アメリカのワンランク上の業態は苦戦
②スターバックスコーヒー
価格も、いろいろ体系化されているのね。ビックリ。
ワンランク上狙いという発想が面白い。
しかも、苦戦なのか。
■製品やサービスの値段を決めるために知っておくべき「8つの価格戦略」
http://gigazine.net/news/20101115_pricing_strategies/
これも、基本ではあるが、
価格戦略が取れるだけの企業体力がないと意味ないよな~
価格戦略は企業体力との裏表関係が現実。
■人が動かされる影響力の6つの武器
http://d.hatena.ne.jp/bizkatu/20101213/1292226274
以下の6つを影響力の「武器」、人が動かされるものとして、紹介しています。
返報性
コミットメントと一貫性
社会的証明
好意
権威
稀少性
なるほどと思ってしまうわけだが、
これらは、相対的なモノサシだから、
全商品がそっちに向かうと、
相対的にポジションが低下して意味がなくなる
■WEB制作者なら最低限知っておくべき色彩心理
http://d.hatena.ne.jp/kiyo560808/20090326/1238090375
色彩心理を示す、形容詞が面白い。
これで、全部カバーしているかも。
要は、どこを目指すのと考えるときに、
ここに出ている形容詞に集約されてしまうような~
マーケティングは正解は無いし
時代ととも変わるだろうし、
その中から本質を見出したり、施策に落としたりするわけだが、
チャレンジャー的なキャラじゃないと出来ないね(笑)
メディア消費時間でWebに次いでモバイルが印刷物を抜く–でも広告主は印刷物に空しい幻想を
http://jp.techcrunch.com/archives/20111212time-spent-mobile-print/
幻想は美しい。
だから幻想するんだと思う。
確かに広告の世界は美しいもんな。
クリエイティブという言葉がぴったりだもんな~。
見ている人を気持ちよくさせるもんだもんな~。
これも、幻想で、
実際の広告は違うけど(笑)。
レスポンシブWEBも幻想かもな~。
htmlの一元化とか、美しいし、
コストも一気に下がるだろうし、
良い事だらけだもんな~。
時代がデザインに向かっているのかもね。
html5で言えばセマンティクスだろうし、
ネットそのものは、SNSだし、
すべて、昔から有るものと言えばそれまでだけど、
ゆっくり大きく変わっていくのがよくわかる。
[JS]jQueryのプラグイン100選 -2011年総集編
http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2011-best.html
今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。
css3-mediaqueries.js
css3-mediaqueries.js を使えば、
IEでも media queries が使えるようになる
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>
●条件付きコメント
<!–[if IE 6]>
IE6の場合
<!–[if lt IE 9]>
IE9未満の場合、IE8,IE7, IE6など
<!–[if gte IE 8]>
IE8以上の場合、IE8, IE9など