週刊Webテク通信

2012年6月第4週号1位は、CSSとJavaScriptのテクニックを大量に紹介、気になるネタは、JAL、国際線でネット接続サービス「JAL SKY Wi-Fi」提供

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

1. Powerful New CSS- and JavaScript-Techniques (2012 Edition) | Smashing Codinghttp://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/

CSSとJavaScriptを使ったテクニックから、新しめのものを大量に紹介しています。

CSSだけを使ったものもありますが、ほとんどはCSSをベースにJavaScriptを組み合わせたものです。

  • トランジションとアニメーション
  • 便利で実用的なCSSテクニック
  • タイポグラフィとテキストのテクニック
  • ナビゲーションメニューとホバーエフェクト
  • ビジュアル関連のテクニック

に分けて紹介されています。

CSS 3D transformsで画像が立体的に折れ曲がっているような表現は流行りそうですね。CSSで描いた3Dの雲には驚きました。

図1 CSSとJavaScriptのテクニックを大量に紹介
図1 CSSとJavaScriptのテクニックを大量に紹介

2. 25 Responsive Design Example For Your Inspiration | Designtuto.comhttp://designtuto.com/25-responsive-design-example-for-your-inspiration/

レスポンシブWebデザインのギャラリーです。

Angry Birds Spaceのページは、レスポンシブかつスクロール効果が満載のページになっています。スクロールとともにアングリーバードが左右に弧を描いて動いたりするのですが、ちゃんとiPad/iPhoneでも同じような見え方をしています。

図2 レスポンシブWebデザインのギャラリー
図2 レスポンシブWebデザインのギャラリー

3. Parallax Scrolling Tutorials & Resources | DesignWoophttp://designwoop.com/2012/06/parallax-scrolling-tutorials-resources/

視差スクロールに関するチュートリアルやテクニック情報のリンク集です。

パララックス効果のはしりとなったNike Better Worldのような、単ページ縦スクロールのものを作るのに役立つ記事や、パララックス効果を使ったスライドショーなどが紹介されています。

図3 視差スクロールのチュートリアルやテクニック情報
図3 視差スクロールのチュートリアルやテクニック情報

4. Web Design Trend: Hand Drawn Look - TRUF Bloghttp://blog.trufcreative.com/blog/entry/web-design-trend-hand-drawn-look

手書き風の要素を使ったWebデザインのギャラリーです。

手で書いたような文字を使ったもの中心にセレクトしてあります。英語だとWebフォントも豊富でいろいろな書体が使えますが、それでもあえて手書き文字を使うことの効果は大きいようです。

図4 手書きの要素を使ったWebデザインのギャラリー
図4 手書きの要素を使ったWebデザインのギャラリー

5. Best Premium Facebook Timeline Covers | PremiumCodinghttp://premiumcoding.com/premium-facebook-timeline-covers/

Facebookカバー画像のテンプレートを多数紹介しています。カバー画像を作る際の、デザインの参考になります。

Webデザイナーには、サイトを作るのとセットでFacebookページのカバー画像も作るといった仕事も増えてくるのではないでしょうか。

図5 Facebookカバー画像のテンプレートいろいろ
図5 Facebookカバー画像のテンプレートいろいろ

そのほか、先週の記事の中から、CSS関連のジェネレーターを2つ紹介します。

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

easel.ly | create and share visual ideas onlinehttp://www.easel.ly/

easel.lyは、インフォグラフィックスを作成できるWebサービスです。作成したインフォグラフィックスは、共有することができます。

グラフを描くための機能はないようですが、人型のシルエットなどインフォグラフィックスによくつかう図形が数多く用意されています。

手持ちの画像をアップロードして配置することもできます。用意されている図形や背景画像などのセンスがいいので、簡単に見栄えの良いインフォグラフィックスが作れそうです。

なお、わたしが試してみた範囲では、日本語のテキストは使えませんでした。

図6 インフォグラフィックスを作成するサービス
図6 インフォグラフィックスを作成するサービス

おすすめ記事

記事・ニュース一覧