2015年1月第3週号 1位は、BootstrapとBEMを組み合わせたCSS設計パターンについて考える、気になるネタは、サンコー、スマホを充電できるボールペン兼タッチペン

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

CSSのクラス名などの命名規則についてまとめられています。

「UIコンポーネントに適切な名前とルールを認知させた」というBootstrapの貢献については、たしかになるほどと気付かされました。

Bootstrapの命名規則の考え方を知るだけでも参考になりますし、この記事の本題であるBootstrapをベースにしつつBEMという命名規則を取り入れることも興味深い内容でした。

BEMはCSSの命名規則のデファクトスタンダードとのことで、詳しく解説したページへのリンクも紹介されています。

Androidアプリをマテリアルデザインに作り替えた実例を元にしたノウハウ記事です。

タスク管理ツールとして日本でも注目されているTrelloの、Androidアプリのリニューアルを、インターフェイスのビフォー＆アフターの実例を使って解説しています。

二つ並べたスマホの画面がムービーになっていて、リニューアル前と後のインターフェイスの動作を紹介している見せ方も参考になります。

記事タイトルは「マテリアルデザイン」とマドンナの曲のタイトル「マテリアルガール」とを掛けたものだと思います。

いろいろなWebサイトのスタイルガイドやデザインマニュアルへのリンク集です。

SalesforceやStarbucksのような有名企業のスタイルガイドや、Webサービスのスタイルガイド、BootstrapやFoundationといったフレームワークのマニュアルなどがまとめられています。

アニメーションGIFを作る方法をまとめた記事です。

画面の動きをキャプチャーしてアニメーションGIFを作るツールや、複数の画像をアップロードしてアニメーションGIFを作るWebサービス、アニメーションGIFを加工／編集するサービスなどが紹介されています。

シンプルな図形や線をSVGで描く方法を解説した記事です。

矩形や円の描き方や、線で図形を描く方法など、基本的なことが紹介されています。

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

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

今回は、Dropboxを拡張するためのツールやWebサービスをまとめた記事を紹介します。

といった便利なサービスが掲載されていました。

Windowsでアプリケーションの設定ファイルをDropboxで共有するためのソフトウェアや、Macで任意のフォルダをDropboxで同期可能にするソフトウェアなど、興味深いツールが多数紹介されています。

ふだんはボールペンとタッチ端末用のタッチペンとして使用し、いざというときにはiPhone／Android端末を充電できるモバイルバッテリーとしても使えるグッズが日本のメーカーから登場しました。

サイズの関係もありそれほど容量はないようですが、いざというときに重宝しそうです。スマートフォンの普及でモバイルバッテリーの需要が大きいようですが、差別化のためにキャラクターがプリントされているものなどもあり、各社工夫しているようです。

こういった複数の用途を兼ねる十徳ナイフ的なグッズは一定のファンがいると思うので、なかなか興味深いグッズですね。モバイルバッテリーやWiFiルーターなどを持ち歩かなくても大丈夫な時代が来ることが、みんなにとって幸せなはずだとも思いますが。