週刊Webテク通信

2012年2月第4週号 1位は,Twitterが提供するCSSフレームワーク「bootstrap」の入門用スライド,気になるネタは,世界初のコネクタをどちら向きでも挿せるUSB Hub

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

ネットで見かけた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ハックなどに時間を取られず,デザインの作り込みに注力できるようになるというのが理想だと思います。

図1 bootstrap入門のスライド

図1 bootstrap入門のスライド

2. CSS3を使ってできる画像まわりのエフェクトやスタイリング18 | Webロケッツマガジンhttp://webrocketsmagazine.com/entry/20120224/css3-image-effects.html

CSS3を使って画像にシャドウを付けたり角丸にしたりするテクニックが18種類紹介されています。

影を傾けて写真がめくれたような効果や,紙の切れ込みに写真を差し込んだような処理など,写真の見せ方にバリエーションが付けられるコーディング例が揃っています。

Pinterestの値段表示に使われているような,写真の隅にリボンを載せたような効果も紹介されていました。

図2 CSS3を使って画像をスタイリングするテクニックいろいろ

図2 CSS3を使って画像をスタイリングするテクニックいろいろ

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のツール,サービス,情報源
  • グリッドとフレームワーク
  • その他

図3 Webサイトのレイアウトを素早く作るためのツールやサービス

図3 Webサイトのレイアウトを素早く作るためのツールやサービス

4. 30 Sets of Social Media/Bookmarking Iconshttp://www.ispsd.com/02/30-sets-of-social-mediabookmarking-icons/

ソーシャルメディアへのリンクボタンなどに使える各種アイコン画像を紹介しています。

後発なのでしかたないのですが,Google+のアイコンが入っていないものが多いですね。代わりにGoogle+アイコンだけのセットも紹介されていました。

図4 ソーシャルメディアアイコンいろいろ

図4 ソーシャルメディアアイコンいろいろ

5. February Sweet And Creative Pink Websiteshttp://littleboxofdesign.com/?p=2460

ピンク色を使ったWebサイトのデザインギャラリーです。ピンクといっても日本人の連想するピンクとは違うんだろうなと思って見てみると,やっぱりちょっと違った感じですね。

日本の子供服通販サイトも紹介されています。⁠SAKURA SELECTION」というのも日本のサイトですね。

図5 ピンク色を使ったWebデザインのギャラリー

図5 ピンク色を使ったWebデザインのギャラリー

そのほか,先週の記事の中から,気になるニュース記事を紹介します。

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

Mentimeter | Interact with your audiencehttp://mentimeter.com/

Mentimeterはスマートフォン向けの簡単なアンケートを作成できるサービスです。

アンケート結果はリアルタイムに確認できます。グラフがリアルタイムでアニメーションしながら伸びていく様子は見ていて面白いです。

アンケートを作成するのにユーザー登録などは不要です。日本語もOKでした。

質問文と選択肢を入力し,グラフのデザインを黒バックか白バックか選択するだけで,アンケートは作成できます。

投票用のページはスマートフォン向けにレイアウトされており,もちろんパソコンからもアクセスできます。投票用ページと結果発表ページは分かれており,投票後すぐに結果を見るような設計にはなっていません。

わたしが試してみたところ,アンケート結果ページはiPhoneでは見られませんでした。アンケートの回答はスマートフォンで行ってもらい,結果を閲覧するのはパソコンというサービスのようです。

図6 スマートフォン向けアンケート作成サービス

図6 スマートフォン向けアンケート作成サービス

今週の気になるWebネタ

バッファローコクヨ,世界初のコネクタをどちら向きでも挿せるUSB Hubhttp://pc.watch.impress.co.jp/docs/news/20120220_513292.html

世界初という,USBコネクタの上下どちら向きでも挿せるというUSBハブが登場しました。たしかにありそうでなかった商品です。日本の技術力を世界に…といいたいとことですが,それにはちょっとスケールが小さいかもしれません。

今さらUSB2じゃあという声もあるようですが,USB3も同じようなコネクタのようなので,USB3版もそのうち出るんじゃないでしょうか。なお,金属シールドがない端子板だけのコネクタには対応していないとのこと。

パソコンに付いている端子もぜひこれにしてほしいですね。いろんなメーカーのパソコンやUSB機器にこの技術が採用されて,ライセンス料で大もうけみたいな話になるのかもしれません。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入