週刊Webテク通信

2012年12月第4週号1位は、CSSで立体的なボタンを作るチュートリアル記事、気になるネタは、Facebook、モバイル向け「Poke」リリース--数秒間で消えるメッセージを送信

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

1. Creating a 3D Button in CSS3 - DesignModohttp://designmodo.com/3d-css3-button/

CSSで立体的なボタンを作るチュートリアル記事です。

グラデーションをつけた角丸ボタンに、ボタンと同系色の濃い色の影をずらして重ねて立体的に見せます。

ボタンの上にのった文字には、text-shadowでエンボスっぽくしたり、ボタンには複数の影をつけてよりリアルに見せたりと凝っています。

CSSのtransformを使うことで、簡単にパースをつけたボタンにもなるんですね。

図1 CSSでつくる立体的なボタン
図1 CSSでつくる立体的なボタン

2. Parallax Hovering And Its Engaging Quality For Web Design - The Usabilla Bloghttp://blog.usabilla.com/parallax-hovering-and-its-engaging-quality-for-web-design/

視差スクロールをWebデザインに取り入れることのメリットについて解説しています。

ユーザーの反応を良くする、エンゲージメント率を高めるといった効果が、視差スクロール効果にはあるということで、その理由を以下の項目に分けて説明しています。

  • 訪問者の注目を集める
  • 奥行き感を作る
  • 訪問者を楽しませる
  • 訪問者を引きつける
  • 作り手が楽しむ
図2 視差スクロールをWebデザインに取り入れることのメリットについて
図2 視差スクロールをWebデザインに取り入れることのメリットについて

3. User Experiences Designed for Women - REPUBLICOF3 | REPUBLICOF3http://www.republicof3.com/user-experiences-designed-for-women/

女性のために設計されたユーザーエクスペリエンスデザインに関する記事です。

「Marketing to Women Online」というブログと、その作者の書いた「Don’t Think Pink」という本が参考になるということで、そこから抜粋したテクニックが3つ紹介されています。

図3 女性のためのユーザーエクスペリエンスデザイン
図3 女性のためのユーザーエクスペリエンスデザイン

4. Essential Infographics For Web Designers & Developershttp://inspektr.com/essential-infographics-web-designers-developers/

Webデザイナーや開発者に参考になるインフォグラフィックスをまとめています。

意外とあっさりしたインフォグラフィックスが中心です。CSS3関連のものが多いですね。

図4 Webデザイナーや開発者のためのインフォグラフィックス
図4 Webデザイナーや開発者のためのインフォグラフィックス

5. Top 12 One Page Website Design - BODEGAZINEhttp://bodegazine.com/top-12-one-page-website-design/

1ページ完結型のWebデザインのギャラリーです。

視差スクロール効果のブームもあり、この手のサイトを本当に多く目にするようになりました。

図5 1ページ完結型のWebデザインいろいろ
図5 1ページ完結型のWebデザインいろいろ

そのほか、最近の記事の中から、日本のネット企業がらみのニュースやリリースの紹介です。

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

Moonbase - Welcomehttp://moonbase.com/

MoonbaseはHTML5アニメーションを簡単に作れるサービスです。

Webページのオーサリングに利用するというものではなく、アニメーションムービーを作るためのツールですね。

モジュールとモジュールを線を繋いで設定を行うことでアニメーションを作っていきます。懐かしのWebオーサリングツールのGoLiveやYahoo!Pipesを連想させるインターフェイスですね。

最初はどう線を引っ張っていけばいいのか分かりにくいのですが、操作方法を逐一教えてくれるツアーがよくできているので、それを試せば誰でも理解できそうです。

トップページにある「PLUG THIS」⁠INTO THIS!」の通りに試してみるとイラストの宇宙飛行士が動き出し、絶妙のタイミングで紹介ムービーが登場して、ツアーを試すか新しいプロジェクトを作るかに誘導する一連の流れが秀逸で感心しました。

図6 HTML5アニメーションを簡単に作れるサービス
図6 HTML5アニメーションを簡単に作れるサービス

おすすめ記事

記事・ニュース一覧