gihyo.jpサイトのロゴ

週刊Webテク通信

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

2010-11-18

ネットで見かけた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画像の埋め込みコードを簡単に作成できるサービス

おすすめ記事

記事・ニュース一覧