週刊Webテク通信

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

ネットで見かけた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サービスいろいろ

おすすめ記事

記事・ニュース一覧