週刊Webテク通信

2012年2月第2週号 1位は，ファーストビュー神話はもう終わりにしよう，気になるネタは，PinterestがユーザーのPinに無断でアフィリエイトコードを追加

Webテク, Webデザイン, Web広告, Fireworks, HTML5, Pinterest

この記事を読むのに必要な時間：およそ 3 分

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2012年2月6日～2012年2月12日の間に見つけた記事のベスト5です。

1. The Fold is a Lie! well… kind of… | Wood Street News & Bloghttp://www.woodst.com/blog/wood-street-journal/web-site-design/the-fold-is-a-lie-well-kind-of/comment-page-1/

ファーストビュー神話はもう終わりにしようという記事です。「⁠Fold」というのは折り目のことで，新聞の折り目より上という意味から，英語でファーストビューは「Above the fold」と呼ばれています。

ファーストビューの考え方はもういいだろうという理由として，以下の2つが上げられています。

  1. 以前に比べ画面解像度の幅が広がった（800×600から2560×1440ピクセル）
  2. （スクロールホイールの登場で）スクロールすることが容易になった

2については，指でスルスルと楽にスクロールできるスマートフォンやタブレットでも同様ですね。

ファーストビューを気にしないことにより，以下のようなことが可能となります。

  • 垂直方向（あるいは水平方向）により多くのホワイトスペースを取る
  • タイポグラフィやビジュアル表現により多くの場所を取る
  • より柔軟なデザイン
  • 文字をより大きく

とはいえ，ブランドイメージを確立する要素やSEOに効果のある重要なキーワードなどは，上の方に入れておくことが重要とのことでした。

図1　ファーストビューなんてウソだという記事

図1　ファーストビューなんてウソだという記事

2. Fireworksの画像からタップ操作対応のプロトタイプを作成できる「TAP」 | デベロッパーセンターhttp://www.adobe.com/jp/devnet/fireworks/articles/fireworks_tap.html

タッチ端末向けのプロトタイプをFireworksの画像から作れる「TAP（Touch Application Prototypes⁠）⁠」というツールを紹介した記事です。

Fireworksだけでもクリックしてページ遷移するプロトタイプを作れますが，TAPを使うと画面遷移時のトランジション（アニメーション）や，タッチジェスチャーによる遷移などもコーディングなしで追加することができます。

Fireworks上で遷移先／遷移アニメーション／ジェスチャーなどの設定をしたあと，Dreamweaverライブラリ（.lib）形式で書き出します。そして，作成したファイルとTAP関連ファイルとをサーバーにアップし，サーバー上でビルド処理を行うことで，プロトタイプが作成できるという手順を紹介しています。サーバー上の処理のため，PHPが使えるサーバーが必要とのことです。

図2　タッチ端末向けのプロトタイプをFireworksで作れるツールの紹介

図2　タッチ端末向けのプロトタイプをFireworksで作れるツールの紹介

3. This Week's Web Design #89 | Daily Inspirationhttp://dailyinspiration.nl/this-weeks-web-design-89

インスピレーションを与えてくれそうな，Webデザインのギャラリーです。

2つ目に紹介されている「Talent Garden」は，スクロールに合わせてアニメーションしながらコンテンツが出現する効果が面白いですね。

図3　インスピレーションを与えてくれそうなWebデザインのギャラリー

図3　インスピレーションを与えてくれそうなWebデザインのギャラリー

4. Land-of-web ? All about web design ≫ Weekly Fresh Web Design Freebies ? Vol. 5 (2-8-2011)http://www.land-of-web.com/weekly-news/weekly-fresh-web-design-freebies-vol-5-2-8-2011.html

Webデザインに役立つ，フリーの素材を各種紹介しています

  • WordPressのテーマ
  • Webサイトのレイアウトテンプレート
  • UIパーツ
  • ソーシャルメディアアイコンセット
  • バレンタインアイコン（もう遅いですが）

図4　Webデザインに役立つフリー素材いろいろ

図4　Webデザインに役立つフリー素材いろいろ

5. flotr2http://www.humblesoftware.com/flotr2/

HTML5とCanvasでグラフやチャートを描くライブラリです。JavaScriptのコードに数値などを記述します。

棒グラフ，折れ線グラフ，円グラフといろいろなサンプルが紹介されています。ドラッグして移動させたり，ズームするグラフを作ることもできるようです。

図5　HTML5とCanvasでグラフやチャートを描くライブラリ

図5　HTML5とCanvasでグラフやチャートを描くライブラリ

そのほか，先週の記事の中から，気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

Create interactive charts and infographics - Infogr.amhttp://infogr.am/

「Infogr.am」は，グラフやインフォグラフィックをオンラインで作成できるWebサービスです。現在作れるのはグラフのみで，インフォグラフィックは「Coming soon」となっています。

グラフは，棒グラフ，折れ線グラフ，円グラフ，マトリックスなどが作れます。データをインポートして作ることもできるようです。

ブラウザシェアを年代ごとに切り替えて見られる円グラフのような，インタラクティブ性のあるグラフを作ることが可能です。

作例としてインフォグラフィックも載っているのですが，アニメーションやインタラクティブ性のあるものが作れるようです。公開が楽しみですね。

図6　インタラクティブなグラフやインフォグラフィックを作れるサービス

図6　インタラクティブなグラフやインフォグラフィックを作れるサービス

今週の気になるWebネタ

Pinterest is quietly generating revenue by modifying user submitted pins. | LL Socialhttp://llsocial.com/2012/02/pinterest-modifying-user-submitted-pins/

最近日本でも話題になりつつあるPinterest。わたしも結構はまっています。

このPinterestが，ユーザーのPinにアフィリエイトコードを追加していることを指摘した記事が話題になっていました。

ECサイトの画像がPinされたとき，既にアフィリエイトコードが入っていない場合には，PinterestのIDでコードが追加されるようになっているそうです。

Webサービスがアフィリエイトコードを追加するというのはよくある収益モデルではありますが，ユーザーへの情報開示がないまま行われていたという点が問題視されています。

なお，自動でアフィリエイトコードを追加するのには，Skimlinksというサービスが使われているとのことで，このサービスにもちょっと興味がありますね。

この件についての日本語での記事
その他，Pinterest関連の記事

Webテク, Webデザイン, Web広告, Fireworks, HTML5, Pinterest

著者プロフィール

芦之由（あしのよし）

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/