週刊Webテク通信

2014年7月第1週号 1位は，最近のデザイントレンド「Ghost Button」について，気になるネタは，LINEいじめ，親の代わりに「監視します」 新サービスが登場

Webテク, Webデザイン, Web広告, CSS, HTML, Ghost Button, LINE

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

ネットで見かけた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を推奨していました。

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

図1　最近のデザイントレンド「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デザイナーには，こういったカスタマイズの余地が大きいフレームワークのほうが向いていそうです。

図2　あまり知られていないCSSフレームワークを3つ紹介

図2　あまり知られていないCSSフレームワークを3つ紹介

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」が使われているサイトも結構ありました。

図3　CSS3を使ったWebデザインのギャラリー

図3　CSS3を使ったWebデザインのギャラリー

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

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

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

図4　レスポンシブなソーシャルメディアボタンのセット

図4　レスポンシブなソーシャルメディアボタンのセット

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

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

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

図5　便利なPhotoshopプラグインを10個紹介

図5　便利なPhotoshopプラグインを10個紹介

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

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

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

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

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

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

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

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

図6　HTML5やCSS3のブラウザサポート状況が確認できるサービス

図6　HTML5やCSS3のブラウザサポート状況が確認できるサービス

今週の気になるWebネタ

LINEいじめ，親の代わりに「監視します」 新サービスが登場http://www.huffingtonpost.jp/2014/07/03/line-filii_n_5556593.html

LINEを監視するサービスが登場というニュースが話題となりました。LINEが提供するサービスかと最初思ったのですが，別なベンチャー企業によるFiliiというサービスでした。そして，元々Facebook，Twitterなどに対応していたサービスが，LINEにも対応したというニュースだったのです。

仕組みとしてはLINEアプリのデータを読み取っているわけではなく，Androidの「通知メッセージ」を読み込んでいるそうです。ということで，通知をオフにしたり通知にメッセージ内容を表示しないようにすれば，監視ができないとのこと。また，仕組み上，発信したトークについても監視はできないんですね。

以下，仕組みについての参考記事です。

ということで，やっぱりLINE自体がこの手のサービスを提供したほうが，よりよいものができると思います。でもLINEが監視の分野に踏み込むと，いろいろと叩かれそうですね。今回の監視サービスに関しても，LINEのセキュリティホールだとか騒いでいる人もいましたし，何にしても注目を浴びてしまうLINEです。

Webテク, Webデザイン, Web広告, CSS, HTML, Ghost Button, LINE

著者プロフィール

芦之由（あしのよし）

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

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

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