週刊Webテク通信

2010年11月第2週号 1位は,幅1140ピクセルのCSSグリッドシステム,気になるネタは,女子バレーボール世界選手権で,iPadが注目される

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

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から,Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は,2010年11月8日~11月14日の間に見つけた記事のベスト5です。

1. The 1140px CSS Grid System/Framework ・ Fluid down to mobilehttp://cssgrid.net/

幅が1140ピクセルのCSSグリッドシステムです。

幅1280ピクセルのモニタで丁度いい大きさに設計されているようです。1140ピクセルでは大きいと思う人もいるでしょうが,ブラウザ幅が狭い場合にはそれに合わせて可変するレイアウトになっています。

また,iPhoneやスマートフォンで見た場合には,段組が適用されず全てのカラムが縦に並びます。

文字も画像もブラウザ幅に合わせてサイズが可変するのには違和感のある人もいるかもしれませんが,なかなか面白いアプローチです。

スマートフォンやタブレットなどの端末への対応も見据えて,こういった可変幅のレイアウトにチャレンジするのもいい機会かもしれません。サイズが可変するボタンも,CSS3を使えば見栄えのいいものが作れますしね。

サポートブラウザはChrome,Safari,Firefox,IE7&IE8。IE6ではmax-widthが効かないことによる若干の不具合がありますが,問題なく閲覧できるそうです。

また,520 Grid System - HTML/CSS Framework made for Facebook Page Developersという別のグリッドシステムも登場していました。

こちらは幅520ピクセルと狭いですが,Facebookの自分のページで使うために用意されたものです。サンプルはFacebook上で見ることができます。写真を多く使ったカタログやちらしをFacebook上で展開する場合に便利そうです。

図1 1140px CSSグリッドシステム

図1 1140px CSSグリッドシステム

2. Designing Memorable Websites: Showcase of Creative Designs - Smashing Magazinehttp://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/

印象に残るWebサイトデザインに関する考察とショーケースです。

印象に残るサイトにするための方法として,

  • オリジナルで他にないようなグラフィックを作る
  • 伝統的ではない色の組み合わせを試みる
  • 他とは違うところを明確に言葉で表現する
  • サイトの構成をよく練る

といったことについて説明してあります。

実際のサイトのショーケースでは,印象に残る箇所が解説されています。

図2 印象に残るWebサイトのショーケース

図2 印象に残るWebサイトのショーケース

3. 50 Examples of Pixel Perfect Button Design | inspirationfeed.comhttp://inspirationfeed.com/2010/10/50-examples-of-pixel-perfect-button-design/

ボタンデザインのギャラリーです。

ボタン部分だけのキャプチャー画像が並びますが,元ページへのリンクが張ってあります。実際にサイトで使われているボタンの場合,元ページで全体のレイアウトとともにボタンを見ると新たな発見があるかもしれません。

元ページは,ボタン作成のチュートリアルや画像素材サイトというものもありました。

図3 ボタンデザイン50選

図3 ボタンデザイン50選

4. 50 Excellent Adobe Fireworks Tutorials - Noupe Design Bloghttp://www.noupe.com/tutorial/50-excellent-examples-of-adobe-fireworks-tutorials.html

Adobe Fireworksのチュートリアル集です。

画像処理,メニューデザイン,プロトタイプ作成,ロゴ作成,ボタン作成など,Webサイト制作のいろいろなシーンでFireworksが活躍することが,紹介された大量のチュートリアルを見ると分かると思います。

図4 Fireworksのチュートリアルいろいろ

図4 Fireworksのチュートリアルいろいろ

5. いまさらjQueryのLightboxぽいプラグインいろいろ :: 5509http://5509.me/log/some-lightbox-plugins

「Lightbox」は,サムネイルをクリックするとモーダルウィンドウとして画像が開く,JavaScriptのフレームワークとしておなじみのものです。類似のものがたくさん登場しているのですが,この記事ではjQuery向けのプラグインをまとめています。

プラグインによって,開けるものが画像だけだったり,ムービーや別サイトもOKだったりするのですが,そのへんの対応メディアも明記してあります。さらにライセンス形態についても載っているので,比較検討するときに役立ちそうです。

jQueryのプラグインを探せる検索エンジンを紹介したjQueryプラグインを探せる検索エンジン・pluginqueryという記事もありました。こちらも便利そうですね。

図5 jQueryのLightbox風プラグインをまとめて紹介

図5 jQueryのLightbox風プラグインをまとめて紹介

そのほか先週の記事から,気になるニュース記事を紹介します。先週はいろいろと話題が多かったですね。

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

Wylio.com - free pictureshttp://wylio.com/

Wylioは,ブログ記事中にFlickrの画像を埋め込むためのコードを簡単に作成できるWebサービスです。

転載が可能なCreative Commonsライセンスの写真だけを検索し,作者や元画像へのリンクを付けたコードを生成してくれます。画像のサイズもスライダーで簡単にリサイズでき,左寄せ/センター/右寄せといった配置の設定もできる便利なツールです。

同じ作業を手作業でやる場合にくらべ,かなりの時間短縮になるはずですね。

TechCrunchのサイトで実際に使われているようです。

このサービスを紹介したTechCrunchの記事,Wylio:ブログ記事中で,他の人の写真を手軽に扱えるようにする新サービスに掲載されている写真も,Wylioで作ったコードで埋め込まれています。

図6 Flickr画像の埋め込みコードを簡単に作成できるサービス

図6 Flickr画像の埋め込みコードを簡単に作成できるサービス

今週の気になるWebネタ

女子バレーボール世界選手権で,iPadが注目される

日本が32年ぶりのメダル獲得ということで盛り上がった,女子バレーボール世界選手権。⁠IDバレー」を掲げる全日本の真鍋監督の片手に持たれたiPadにも注目が集まりました。

このiPad,試合中にツイッターをしていたのではもちろんなく,分析されたデータを見る端末として使われていたようです。試合中にスタッフがパソコンにデータを入力し,リアルタイムの分析データをiPadで見ることができたとのこと。iPadで動いていたのは専用のアプリのようですが,あくまでもビューワーだったようです(違っていたらごめんなさい)⁠

分析に使ったそのパソコンとソフトウェア,そしてスタッフたちの力のほうが大きそうですが,ビューワーに過ぎないiPadが勝利の立役者のようにもてはやされているのも面白いですね。

とはいえ,iPadがなければ最初からベンチでリアルタイムの分析情報を見るなんて発想には行き着かなかったのかもしれません。そして,iPadの使いやすさやサイズ,バッテリーの持ちなどが評価されたからこその実戦投入だったのでしょう。

次回のバレーボール日韓戦では,韓国チームはサムスン製のGALAXYタブレットで応戦するのでしょうか。あ,そもそもiPadは日本製じゃないですね。それともiPadのベンチ持ち込みが禁止になったりして…。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入