週刊Webテク通信

2011年6月第1週号　1位は，CSS3ボタンを作るのに役立つテクニック，チュートリアル，ツール，気になるネタは，Google +1（プラスワン）ボタン，Twitterフォローボタンが登場

Webテク, Webデザイン, Web広告, CSS, ソーシャルメディア, Twitter, Photoshop, Google

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

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

1. Creating CSS3 Buttons: Techniques, Tutorials, Tools | Splashnologyhttp://www.splashnology.com/article/creating-css3-buttons-techniques-tutorials-tools/816/

CSS3ボタンを作るのに役立つテクニック，チュートリアル，ツールのリストです。

  • オンラインジェネレーター，サービス，ツール
  • テクニックとチュートリアル

に分けて，大量のリンクが紹介されています。

CSS3の角丸，テキストシャドウ，グラデーション，ボックスシャドウを利用したボタンを作るときの手助けになるでしょう。

図1　CSS3ボタンを作るのに役立つリソース集

図1　CSS3ボタンを作るのに役立つリソース集

2. 40 Examples of Well Integrated Social Media Links in Web Design | 39Articleshttp://www.39articles.net/40-examples-of-well-integrated-social-media-links-in-web-design/

ソーシャルメディアへのリンクを，Webページの中にうまくデザインした実例を多数紹介しています。

TwitterやFacebookが提供しているボタンをそのまま使うのではなく，そのサイトのデザインに合うようにリデザインしているものばかりで，ズルイ気もしますが。

サイトのテイストに合うような形状の中にマークを入れ，モノトーンで使っているサイトがほとんどでした。

図2　Webデザインにおけるソーシャルメディアへのリンクの扱い方の例

図2　Webデザインにおけるソーシャルメディアへのリンクの扱い方の例

3. Normalize CSS : necolas/normalize.css @ GitHubhttp://necolas.github.com/normalize.css/

クロスブラウザで見た目を標準化するCSSファイルです。

ブラウザのデフォルトのスタイルを無効にする，いわゆるリセットCSSの機能に加え，標準的なスタイルがクロスブラウザで同じように適用されるための設定もされています。

ブラウザのバグを直したり，ユーザビリティを向上させるための調整もしてあるとのことで，リセットCSS代わりに便利に利用できそうです。

対応ブラウザは，Chrome，Firefox 3以上，Safari 4以上，Opera 10以上，Internet Explorer 6以上となっています。

図3　クロスブラウザで見た目を標準化するCSSファイル

図3　クロスブラウザで見た目を標準化するCSSファイル

4. Making a Simple Tweet to Download System | Tutorialzinehttp://tutorialzine.com/2011/05/tweet-to-download-jquery/

Twitterにツイートした人だけが何かをダウンロードできるという仕組みを，jQueryで実現したサンプルです。「⁠ツイートしてくれた人にプレゼント」といった企画で使えそうです。

jQueryの他に，tweetAction.js，script.jsというプラグインも利用しています。

図4　Tweetした人だけがダウンロードできる仕組みのサンプル

図4　Tweetした人だけがダウンロードできる仕組みのサンプル

5. 120 Free Photoshop Grid Patterns | Photoshop Patternshttp://www.shapes4free.com/vector-photoshop-patterns/grid-patterns-photoshop/

Photoshop用の大量のグリッドパターンをダウンロードできます。

透明な背景に白いラインのグリッド60個と黒いラインのグリッド60個が，パターンファイルとして提供されています。

図5　Photoshopのグリッドパターン120個

図5　Photoshopのグリッドパターン120個

そのほか，先週の記事の中から，気になるニュース記事を3つ紹介します。

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

WEBディレクタなら知っておきたいWEBサービス25選｜designaholic -Creative Column- http://designaholic.cc/2011/06/webweb27.html

今回は，サイト内検索のようにWebサイトに追加して利用するWebサービスを多数紹介した記事を取り上げます。

日本の会社がビジネスとしてやっている有料のWebサービスが中心です。

いつもここで取り上げているのは海外の実験的なWebサービスが多いのですが，実際に企業サイト内で利用する場合は，こういった日本企業のWebサービスのほうが安心感があるでしょう。

サイト内検索，効果測定，FAQシステム，レコメントシステム，メール配信，CMSなどが紹介されています。

図6　Webサイト構築時に役立つWebサービスいろいろ

図6　Webサイト構築時に役立つWebサービスいろいろ

今週の気になるWebネタ

Google +1（プラスワン） SEOへの影響は？ ほか まとめ ::SEM R http://www.sem-r.com/news-2011/20110602043254.html

Twitter，「フォロー」ボタンを提供開始。ソーシャルグラフ強化を狙う http://jp.techcrunch.com/archives/20110531twitter-follow-button/

Google +1ボタンの提供が開始されました。すでにGoogle.com（英語版）の検索結果には登場していたというGoogle +1ボタンですが，サイトオーナーがページ上にもGoogle +1ボタンを設置することができるようになりました。

Twitterの「フォロー」ボタンもページ上に設置できるようになったりと，ボタン競争は激しくなっているようです。

まだ日本語の検索結果には関係ないとはいえ，多くの日本のブログやニュースサイトにもGoogle +1ボタンが設置されています。この手のものの導入が素早いgihyo.jpの記事にも，やはりさっそく導入されていますね。

検索エンジンがソーシャルグラフを利用するという点でいえば，検索結果にFacebookの「いいね！」を連携させたBingの方が有利な気がします。ソーシャルグラフが検索結果に影響を与えるようにするのなら，Googleが機械的に算出するページランクの限界を認めたことにもなるでしょう。Google +1の今後のライバルとの競争が気になりますね。

Webテク, Webデザイン, Web広告, CSS, ソーシャルメディア, Twitter, Photoshop, Google

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote