週刊Webテク通信

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

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

ネットで見かけた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 インフォグラフィックスを作成するサービス

今週の気になるWebネタ

JAL,国際線でネット接続サービス「JAL SKY Wi-Fi」提供 - ANAより一足先に | 携帯 | マイナビニュースhttp://news.mynavi.jp/news/2012/06/26/168/

ANAが国際線で有料Wi-Fiサービスを来年夏から始めると発表したのですが,JALは今年の7月15日から同様のサービスを開始するとのこと。東京(成田)-ニューヨーク線より導入し,順次路線を拡大していく予定だそうです。

スマートフォンの普及により,Wi-Fiサービスの需要が増えたんでしょうね。気になるお値段は,1時間プランが11.95ドル,24時間プランが21.95ドルです。接続したあとクレジットカード情報を入力するので,機内でクレジットカードをすぐに出せるようにしておかないといけませんね。

出張のビジネスマンには機内で仕事ができて便利だと思いますが,子供連れの親子にもありがたいように思えます。YouTubeなどをネットから見せられるので,子供の退屈しのぎにいいんじゃないでしょうか。事前に子供の好きなアニメをiPhoneに入れておくとかすればいいんですが,長時間のフライトに耐えられるよう事前に完璧に準備するのはなかなか難しいんですよね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入