週刊Webテク通信

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

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

ネットで見かけた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アニメーションを簡単に作れるサービス

今週の気になるWebネタ

Facebook,モバイル向け「Poke」をリリース--数秒間で消えるメッセージを送信 - CNET Japanhttp://japan.cnet.com/news/service/35026131/

いろいろと分かりにくいところも多いFacebookですが,⁠Poke」⁠日本語版では「あいさつ」⁠という機能は何のためにあるのかわからないと言われていました。ただ相手に「あいさつ」があったことが通知されるだけの機能で,お互いに「あいさつ」し合ってるうちにやめどきが分からなくなるという人も多かったようです。

今ではこの機能は目立たないところに引っ込んでいたのですが,この「Poke」の名を冠した単独のモバイルアプリが登場しました。送信したメッセージ,写真,動画が,指定した1,3,5,10秒のいずれかで消去されるというメッセージツールです。相手にもFacebookのサーバーにも保存されたくない画像や動画を見てもらうのが主な用途のようです。

Pokeというのは「つつく」という意味で,アイコンからも分かるように相手を指でツンツンしているようなイメージなのでしょう。Pokeを「授業中の消しゴム爆弾」といううまいたとえをしている人もいましたが,⁠ちょっかい」というのがニュアンス的にしっくりくるようです。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入