週刊Webテク通信
2012年2月第4週号 1位は,Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライド,気になるネタは,世界初のコネクタをどちら向きでも挿せるUSB Hub
ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2012年2月20日~2012年2月26日の間に見つけた記事のベスト5です。
1. Twitter bootstrap入門 #twtr_hackhttp://www.slideshare.net/makingx/twitter-bootstrap
Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライドです。
bootstrapはグリッド,ボタン,タブ,ナビゲーションバーなどがあらかじめデザインされたフレームワークで,jQueryプラグインを利用したモーダルウィンドウ,ツールチップ,アコーディオン,カルーセルなども簡単に実装できるようになっています。LESSを使ってのカスタマイズもでき,バージョン2でレスポンシブWebデザインにも対応しました。
このスライドでは,bootstrapとはどういうものかの説明から始まり,用意されているUIコンポーネントの説明や,便利な関連ツールなどが掲載されています。
プログラマやエンジニアなど,デザインが苦手な人がWebサービスを立ち上げるときに使うと便利という紹介のされ方の多いbootstrapですが,Webデザインのプロもこの手のフレームワークを使うのが当たり前になっていくと思います。jQueryを使うのが当たり前になったのと同じような感じですね。
カスタマイズでデザインのオリジナリティは出せるでしょうし,画像を適切に使用すれば,見た目がほかのサイトと同じようになってしまうこともないと思います。フレームワークを使うことで,ブラウザ間の互換性やCSSハックなどに時間を取られず,デザインの作り込みに注力できるようになるというのが理想だと思います。
2. CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジンhttp://webrocketsmagazine.com/entry/20120224/css3-image-effects.html
CSS3を使って画像にシャドウを付けたり角丸にしたりするテクニックが18種類紹介されています。
影を傾けて写真がめくれたような効果や,紙の切れ込みに写真を差し込んだような処理など,写真の見せ方にバリエーションが付けられるコーディング例が揃っています。
Pinterestの値段表示に使われているような,写真の隅にリボンを載せたような効果も紹介されていました。
3. 40 New Tools and Services for Web Designers and Developers | Splashnologyhttp://www.splashnology.com/article/40-new-tools-and-services-for-web-designers-and-developers/4619/
Webサイトのレイアウトを素早く作るためのツールやサービスを紹介しています。
以下の3つに分けて掲載されています。
- HTML/CSSのツール,サービス,情報源
- グリッドとフレームワーク
- その他
4. 30 Sets of Social Media/Bookmarking Iconshttp://www.ispsd.com/02/30-sets-of-social-mediabookmarking-icons/
ソーシャルメディアへのリンクボタンなどに使える各種アイコン画像を紹介しています。
後発なのでしかたないのですが,Google+のアイコンが入っていないものが多いですね。代わりにGoogle+アイコンだけのセットも紹介されていました。
5. February Sweet And Creative Pink Websiteshttp://littleboxofdesign.com/?p=2460
ピンク色を使ったWebサイトのデザインギャラリーです。ピンクといっても日本人の連想するピンクとは違うんだろうなと思って見てみると,やっぱりちょっと違った感じですね。
日本の子供服通販サイトも紹介されています。「SAKURA SELECTION」というのも日本のサイトですね。
そのほか,先週の記事の中から,気になるニュース記事を紹介します。
- モリサワ,クラウドフォントサービス「TypeSquare」開始 表示のシミュレーションも可能 - はてなブックマークニュース
モリサワのWebフォントサービスがついにスタートしました - Apple,日本でも「iTunes in the Cloud」開始 - ITmedia ニュース
iTunesストアで購入した楽曲は複数端末で自動同期したりできるそうです - “ZumoDrive”が5月1日でサービス終了,ファイルのダウンロードツールが公開中
オンラインストレージサービスZumoDriveがサービス終了とのこと - アドビ,個人デザイナー向けにも「Digital Publishing Suite」を提供へ - CNET Japan
小規模デザイン事務所や個人デザイナー向けの「Single Edition」が登場です
先週の気になるWebサービス
Mentimeter | Interact with your audiencehttp://mentimeter.com/
Mentimeterはスマートフォン向けの簡単なアンケートを作成できるサービスです。
アンケート結果はリアルタイムに確認できます。グラフがリアルタイムでアニメーションしながら伸びていく様子は見ていて面白いです。
アンケートを作成するのにユーザー登録などは不要です。日本語もOKでした。
質問文と選択肢を入力し,グラフのデザインを黒バックか白バックか選択するだけで,アンケートは作成できます。
投票用のページはスマートフォン向けにレイアウトされており,もちろんパソコンからもアクセスできます。投票用ページと結果発表ページは分かれており,投票後すぐに結果を見るような設計にはなっていません。
わたしが試してみたところ,アンケート結果ページはiPhoneでは見られませんでした。アンケートの回答はスマートフォンで行ってもらい,結果を閲覧するのはパソコンというサービスのようです。
今週の気になるWebネタ

バッファローコクヨ,世界初のコネクタをどちら向きでも挿せるUSB Hubhttp://pc.watch.impress.co.jp/docs/news/20120220_513292.html
世界初という,USBコネクタの上下どちら向きでも挿せるというUSBハブが登場しました。たしかにありそうでなかった商品です。日本の技術力を世界に…といいたいとことですが,それにはちょっとスケールが小さいかもしれません。
今さらUSB2じゃあという声もあるようですが,USB3も同じようなコネクタのようなので,USB3版もそのうち出るんじゃないでしょうか。なお,金属シールドがない端子板だけのコネクタには対応していないとのこと。
パソコンに付いている端子もぜひこれにしてほしいですね。いろんなメーカーのパソコンやUSB機器にこの技術が採用されて,ライセンス料で大もうけみたいな話になるのかもしれません。
週刊Webテク通信
- 2012年3月第4週号 1位は,Bootstrapを補完するツールや素材,気になるネタは,アマゾン,実際に商品を購入した人のレビューに「証明マーク」表示
- 2012年3月第3週号 1位は,はやりすぎて蔓延しているWebデザインのトレンド,気になるネタは,iPad求め450人が並ぶ,アップル銀座はiPadフィーバー
- 2012年3月第2週号 1位は,これからの未来を見据えたWeb制作について,気になるネタは,アドビの新ツール「Shadow」は,モバイル用Webアプリ開発者必須のツール
- 2012年3月第1週号 1位は,メニューが同じ位置に固定されているWebデザインのギャラリー,気になるネタは,ワコム,ペンタブレット新製品「Intuos5」指でマルチタッチ可能に
- 2012年2月第4週号 1位は,Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライド,気になるネタは,世界初のコネクタをどちら向きでも挿せるUSB Hub
- 2012年5月第4週号 1位は,日本のWebデザインはなぜ2003年風なのか,気になるネタは,楽天,Pinterestに出資・提携 国内展開に協力
- 2012年5月第3週号 1位は,レスポンシブWebデザインのツールキット,気になるネタは,リアルを狙うソフトバンクとPayPal提携
- 2011年12月第3週号 1位は,2012年のWebデザインのトレンド,気になるネタは,Google+ハングアウトのOn Air機能が一般公開へ
- 2011年11月第4週号 1位は,Web業界でよく使う用語の英語辞典,気になるネタは,Wikipediaの創設者,ジミー・ウェールズの顔写真バナーが話題
- 2011年11月第2週号 1位は,CSSのみでテキストにグラデーションやリフレクトをかけるテクニック,気になるネタは,Adobe,モバイル向けFlash Playerの提供中止を発表

