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

1. Design Trend: Ghost Buttons in Website Design - Designmodohttp://designmodo.com/ghost-buttons/

Webデザインのトレンドとして、枠だけのボタン「Ghost Button」についてまとめた記事です。

Ghost Buttonとは、枠とテキストだけ、あるいは枠とシンプルなアイコンとテキストだけのボタンで、確かに最近よく見かけますね。

特徴がまとめられていました。

• ボタンは空洞
• アウトラインに囲まれている
• シンプルなテキストが入っている
• 色は白か黒
• 従来のボタンより大きいことが多い
• ページの目立つ場所に配置される
• 1つだけか、少数のボタングループとして配置される
• フラットまたはほぼフラットなデザインとともに使われる
• ボタンの中に小さく幾何学的なアイコンが控え目に使われることもある

また、以下のような悪い点もありますが、この記事ではGhost Buttonを推奨していました。

• 従来のボタンと違い、万人にはボタンと認識されないかもしれない
• ハイコントラストな写真や、様々な色の画像の上で使うには注意が必要
• 使いやすさは位置と大きさに依存する
• 場合によってはイメージよりボタンが目立ってしまう

2. 3 fantastic CSS frameworks you won’t want to miss | Webdesigner Depothttp://www.webdesignerdepot.com/2014/07/3-fantastic-css-frameworks-you-wont-want-to-miss/

あまり知られていないCSSフレームワークをテストしてみた結果をまとめた記事です。Kube、IVORY、Baseという3つのフレームワークについて、その特徴について解説しています。

どれも、シンプルで基本的な要素だけが用意されているフレームワークのようです。Webデザイナーには、こういったカスタマイズの余地が大きいフレームワークのほうが向いていそうです。

3. 30 New CSS3 Websites Design Examples for Inspiration | Website Designing | Design Bloghttp://blog.karachicorner.com/2014/07/new-css3-websites-design-examples-for-inspiration/

CSS3を使ったWebデザインのギャラリーです。デザインと動きに凝ったサイトが多いですね。

また、「⁠Ghost Button」が使われているサイトも結構ありました。

4. Ridiculously Responsive Social Sharing Buttons by KNI Labshttp://kurtnoble.com/labs/rrssb/

レスポンシブなソーシャルメディアボタンのセットです。アイコンにはアイコンフォントではなくSVGを使用しています。

横幅が狭い場合は、ラベルテキストがなくなりアイコンだけになるのですが、幅に合わせて自動でテキストのあるなしを混在させられるところがよくできています。

5. 10 Free and Super Useful Photoshop Pluginshttp://designwoop.com/2014/07/10-free-super-useful-photoshop-plugins/

便利なPhotoshopのプラグインを10個紹介しています。

グリッド生成や、スライス書き出し、レイヤーをCSS3に変換するものなど、Webデザインに役立ちそうなものが多数掲載されていました。

そのほか、最近の記事の中から、気になる素材やスクリプトの記事を紹介します。

• 12 Amazing Sites With Breathtaking Free Stock Photos - BootstrapBay
  フリーの写真素材サイトのまとめです。
• Dribbble - Android "L" Buttons by Tim Kendall
  Android L風の押した反応がわかりやすいボタンです。コメント欄にCodePenへのリンクがあります。
• CSS3 Animate It | Homepage
  CSSアニメーションを簡単に適用できるスクリプトとCSSです。

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

Can I use... Support tables for HTML5, CSS3, etchttp://beta.caniuse.com/

HTML5やCSS3のブラウザサポート状況が確認できるサービスです。現行のサイトは、http://caniuse.com/なのですが、今回紹介するのはリニューアルしたベータ版のサイトとなります。

CSS、HTML5、SVGなどの機能別に、ブラウザサポート状態を分かりやすく色分けで示した表と、現状何パーセントのユーザーに対応してるかなどが表示されます。

日本からアクセスした場合、日本のデータをインポートするかどうかを聞かれるので、インポートしておくと日本でのブラウザサポート状況のパーセント表示がグローバルでの状況と併記されます。

さらに、Google Analyticsと連携すると、自分のサイトの訪問ユーザーのブラウザ状況を元にした、対応状況の数字も見られるようになります。

設定できる項目も多く、かなり充実した機能が用意されており、ベータが取れるのが楽しみですね。