週刊Webテク通信

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

ネットで見かけた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 インタラクティブなグラフやインフォグラフィックを作れるサービス

おすすめ記事

記事・ニュース一覧