週刊Webテク通信

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

Webテク, Webデザイン, Web広告, CSS, Androidアプリ, アニメーション, SVG, Dropbox, スマートフォン

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

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

1. Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | NET BIZ DIV. TECH BLOGhttp://tech.recruit-mp.co.jp/front-end/architecture-bootstrap-bem/

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

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

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

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

図1　BootstrapとBEMを組み合わせたCSS設計パターンについて

図1　BootstrapとBEMを組み合わせたCSS設計パターンについて

2. We are Living in a Material World and I am a Material Girl | Trello Bloghttp://blog.trello.com/we-are-living-in-a-material-world-and-i-am-a-material-girl/

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

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

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

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

図2　マテリアルデザインのアプリを作るノウハウを紹介

図2　マテリアルデザインのアプリを作るノウハウを紹介

3. Brand Style Guide Examples, Hand-picked by Saijo Georgehttp://saijogeorge.com/brand-style-guide-examples/

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

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

図3　スタイルガイドやデザインマニュアルのリンク集

図3　スタイルガイドやデザインマニュアルのリンク集

4. How to Create Animated GIFs For Your Bloghttp://www.razorsocial.com/how-to-create-animated-gifs/

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

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

図4　アニメーションGIFを作る方法とツールを紹介

図4　アニメーションGIFを作る方法とツールを紹介

5. SVG Basics?How To Create Simple Shapes And Lines - Vanseo Designhttp://www.vanseodesign.com/web-design/svg-shapes-lines/

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

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

図5　SVGで図形や線を描く方法

図5　SVGで図形や線を描く方法

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

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

10 Tools To Supercharge Your Dropbox | SmashingApps.comhttp://www.smashingapps.com/2015/01/12/13-tools-to-supercharge-your-dropbox.html

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

  • Dropboxを含め様々なオンラインストレージを一元管理できるOtixo
  • Dropbox上のファイルを暗号化するBoxCryptor
  • Dropboxのフォルダに入れたファイルをWebサイトとして公開できるSite44

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

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

図6　Dropboxを拡張するためのWebサービスいろいろ

図6　Dropboxを拡張するためのWebサービスいろいろ

今週の気になるWebネタ

サンコー，スマホを充電できるボールペン兼タッチペン | マイナビニュースhttp://news.mynavi.jp/news/2015/01/13/108/

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

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

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

Webテク, Webデザイン, Web広告, CSS, Androidアプリ, アニメーション, SVG, Dropbox, スマートフォン

著者プロフィール

芦之由（あしのよし）

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

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

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