毎日jp(毎日新聞)http://mainichi.jp/enta/sports/news/20101109k0000e050004000c.htmlネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年11月8日~11月14日の間に見つけた記事のベスト5です。mobilehttp://cssgrid.net/幅が1140ピクセルのCSSグリッドシステムです。幅1280ピクセルのモニタで丁度いい大きさに設計されているようです。1140ピクセルでは大きいと思う人もいるでしょうが、ブラウザ幅が狭い場合にはそれに合わせて可変するレイアウトになっています。iPhoneやスマートフォンで見た場合には、段組が適用されず全てのカラムが縦に並びます。文字も画像もブラウザ幅に合わせてサイズが可変するのには違和感のある人もいるかもしれませんが、なかなか面白いアプローチです。スマートフォンやタブレットなどの端末への対応も見据えて、こういった可変幅のレイアウトにチャレンジするのもいい機会かもしれません。サイズが可変するボタンも、CSS3を使えば見栄えのいいものが作れますしね。サポートブラウザはChrome、Safari、Firefox、IE7&IE8。IE6ではmax-widthが効かないことによる若干の不具合がありますが、問題なく閲覧できるそうです。Developers」という別のグリッドシステムも登場していました。こちらは幅520ピクセルと狭いですが、Facebookの自分のページで使うために用意されたものです。サンプルはFacebook上で見ることができます。写真を多く使ったカタログやちらしをFacebook上で展開する場合に便利そうです。Magazinehttp://www.smashingmagazine.com/2010/11/11/designing-memorable-websites-showcase-of-creative-designs/印象に残るWebサイトデザインに関する考察とショーケースです。印象に残るサイトにするための方法として、オリジナルで他にないようなグラフィックを作る伝統的ではない色の組み合わせを試みる他とは違うところを明確に言葉で表現するサイトの構成をよく練るといったことについて説明してあります。実際のサイトのショーケースでは、印象に残る箇所が解説されています。inspirationfeed.comhttp://inspirationfeed.com/2010/10/50-examples-of-pixel-perfect-button-design/ボタンデザインのギャラリーです。ボタン部分だけのキャプチャー画像が並びますが、元ページへのリンクが張ってあります。実際にサイトで使われているボタンの場合、元ページで全体のレイアウトとともにボタンを見ると新たな発見があるかもしれません。元ページは、ボタン作成のチュートリアルや画像素材サイトというものもありました。Fireworksのチュートリアル集です。画像処理、メニューデザイン、プロトタイプ作成、ロゴ作成、ボタン作成など、Webサイト制作のいろいろなシーンでFireworksが活躍することが、紹介された大量のチュートリアルを見ると分かると思います。5509http://5509.me/log/some-lightbox-plugins「Lightbox」は、サムネイルをクリックするとモーダルウィンドウとして画像が開く、JavaScriptのフレームワークとしておなじみのものです。類似のものがたくさん登場しているのですが、この記事ではjQuery向けのプラグインをまとめています。プラグインによって、開けるものが画像だけだったり、ムービーや別サイトもOKだったりするのですが、そのへんの対応メディアも明記してあります。ライセンス形態についても載っているので、比較検討するときに役立ちそうです。jQueryのプラグインを探せる検索エンジンを紹介した「jQueryプラグインを探せる検索エンジン・pluginquery」という記事もありました。こちらも便利そうですね。jQueryのLightbox風プラグインをまとめて紹介そのほか先週の記事から、気になるニュース記事を紹介します。先週はいろいろと話題が多かったですね。News日本の曲はまだそれほどないようですが、iTunesストアも最初はそうでしたし、今後に期待ですね。NewsこれはWeb制作に関わる人にはうれしいニュースです。日本国内での脱IE6が進むといいですね。映画はレンタルと販売で提供されています。TVの国内発売も開始されました。マップのデザインが新しくなりました文字、アイコン、色、線のスタイルなど、かなり変わっています。PingとTwitterが連携できるようになりました。pictureshttp://wylio.com/Wylioは、ブログ記事中にFlickrの画像を埋め込むためのコードを簡単に作成できるWebサービスです。Commonsライセンスの写真だけを検索し、作者や元画像へのリンクを付けたコードを生成してくれます。画像のサイズもスライダーで簡単にリサイズでき、左寄せ/センター/右寄せといった配置の設定もできる便利なツールです。同じ作業を手作業でやる場合にくらべ、かなりの時間短縮になるはずですね。TechCrunchのサイトで実際に使われているようです。このサービスを紹介したTechCrunchの記事、「⁠Wylio:ブログ記事中で、他の人の写真を手軽に扱えるようにする新サービス」に掲載されている写真も、Wylioで作ったコードで埋め込まれています。毎日jp(毎日新聞)http://mainichi.jp/enta/sports/news/20101109k0000e050004000c.html日本が32年ぶりのメダル獲得ということで盛り上がった、女子バレーボール世界選手権。「⁠IDバレー」を掲げる全日本の真鍋監督の片手に持たれたiPadにも注目が集まりました。このiPad、試合中にツイッターをしていたのではもちろんなく、分析されたデータを見る端末として使われていたようです。試合中にスタッフがパソコンにデータを入力し、リアルタイムの分析データをiPadで見ることができたとのこと。iPadで動いていたのは専用のアプリのようですが、あくまでもビューワーだったようです(違っていたらごめんなさい⁠)⁠。分析に使ったそのパソコンとソフトウェア、そしてスタッフたちの力のほうが大きそうですが、ビューワーに過ぎないiPadが勝利の立役者のようにもてはやされているのも面白いですね。いえ、iPadがなければ最初からベンチでリアルタイムの分析情報を見るなんて発想には行き着かなかったのかもしれません。iPadの使いやすさやサイズ、バッテリーの持ちなどが評価されたからこその実戦投入だったのでしょう。次回のバレーボール日韓戦では、韓国チームはサムスン製のGALAXYタブレットで応戦するのでしょうか。あ、そもそもiPadは日本製じゃないですね。それともiPadのベンチ持ち込みが禁止になったりして...。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。