週刊Webテク通信

2009年9月第4週号 1位は,果てしなくスクロールするウェブサイト/気になるネタは,GoogleがWebの問題児Internet Explorer対策を発表

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

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

1. Web Design Trend Hunting ? 15 Amazing Infinite Scrolling Websites | Inspired Magazinehttp://www.inspiredm.com/2009/09/25/web-design-trend-hunting-15-amazing-infinite-scrolling-websites/

際限なくスクロールするWebサイトを多数紹介しています。

単に縦に長~くコンテンツの入ったページというわけではなく,端までスクロールすると新たなコンテンツの読み込みが行われ,延々とスクロールできるという仕組みのページです。

ページの一番下まで行くと自動で新たなコンテンツが読み込まれるものと,ボタンを押して読み込むものとがあります。Twitterもボタン方式ですね。ページのリロードなしに新たなコンテンツを読み込む非同期通信の技術を使っています。

文末に,このようなサイトを作るための情報源へのリンクもあります。自分で調べる場合は「Infinite Scrolling(Scroll)⁠Endress Scrolling(Scroll)⁠といった検索ワードを使うとよさそうです。

図1 果てしなくスクロールするWebサイトのギャラリー

図1 果てしなくスクロールするWebサイトのギャラリー

2. 10 Wonderful Letterpress Type Tutorialshttp://sixrevisions.com/graphics-design/10-wonderful-letterpress-type-tutorials/

Letterpressと呼ばれる型押ししたような文字が最近流行っていますが,そういうイメージを作るためのチュートリアルがまとめられています。

Photoshop,Illustrator,Fireworksのどのツール用にもチュートリアルがありました。CSS3のドロップシャドウを使う方法や,CSS2で二つの文字を重ねてそれっぽく見せるといった,画像を使わないやり方も紹介されています。

図2 型押し文字を作る方法いろいろ

図2 型押し文字を作る方法いろいろ

3. 40+ Best Photoshop Tutorials for Creating Buttons and Badges | Naldz Graphicshttp://naldzgraphics.net/tutorials/40-best-photoshop-tutorials-for-creating-buttons-and-badges/

ボタンやバッジを作るPhotoshopチュートリアルの膨大なリンク集です。

Web 2.0サイトで流行ったギザギザ星形バッジのチュートリアルは,いまさらという気もしますね。

図3 ボタンやバッジを作るPhotoshopチュートリアルいろいろ

図3 ボタンやバッジを作るPhotoshopチュートリアルいろいろ

4. jQuery Tools: The missing UI library for the Web « Noupehttp://www.noupe.com/jquery/jquery-tools.html

タブやアコーディオンメニューなどのユーザーインターフェイスを簡単に作れるjQuery用ライブラリ「jQuery Tools」の解説記事です。

jQuery Toolsによって,

  • Overlay(Lightboxのようにモーダルウィンドウを表示)
  • Tooltip(ツールチップ)
  • Tabs(タブインターフェイス)
  • Scrollable(決まった領域内でスクロールしてコンテンツを見せる。カルーセル)
  • Flashembed(Flashのswfファイルの埋め込み)

が簡単に実装できます。

図4 UIライブラリ「jQuery Tools」の解説

図4  UIライブラリ「jQuery Tools」の解説

5. Back-to-School With 40 Excellent Adobe Illustrator Tutorials « Smashing Magazinehttp://www.smashingmagazine.com/2009/09/23/back-to-school-with-40-excellent-adobe-illustrator-tutorials/

Illustratorのチュートリアルを多数紹介しています。それぞれのチュートリアルで使われているポイントとなる機能についての記述もあります。

グラデーションメッシュを使って描かれた赤ピーマンは見事ですね。⁠グラデーションメッシュ」で検索すると,日本語のチュートリアル記事も多数見つかりますよ。

図5 Illustratorのチュートリアルいろいろ

図5 Illustratorのチュートリアルいろいろ

以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。

そのほか先週の記事から,日本語によるまとめ記事を二つ紹介します。

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

SlickPlan - Free Flowcharts | Free Sitemap | Flowchart Design | Sitemap Design | Flowchart Design | Creating Flowchartshttp://www.slickplan.com/

SlickPlanはサイトマップやフローチャートが作れるWebサービスです。

それほど多機能ではなさそうですが,簡単に見栄えのよいサイトマップを作図することができます。作ったサイトマップは,HTMLかPDFで書き出すことも可能です。HTMLの場合は,テキストのみのリスト表示になります。

作ったサイトマップには固有のURLが与えられ,このURLにアクセスすると誰でも見ることができます。Web上で見てもらうのがメインの使い方になるのだと思いますが,アクセスに対する制限などは特にないようです。

テキストデータをインポートできると便利だと思うのですが,それほど巨大なサイトマップを作るためのものではなさそうです。3階層までしか作れませんし,簡易サイトマップ向けと考えた方がいいでしょう。

図6 サイトマップの作図に特化したWebサービス

図6 サイトマップの作図に特化したWebサービス

今週の気になるWebネタ

GoogleがWebの問題児Internet Explorer対策を発表: IEをChromeにしてしまうhttp://jp.techcrunch.com/archives/20090922google-turns-internet-explorer-into-chrome-yes-seriously/

GoogleがリリースしたChrome Frameは,Internet ExplorerのレンダリングエンジンをChromeに変えてしまうというスゴイものです。

プラグインとしてインストールされるので,ブラウザを乗り換えるということ関心のない人や,会社の決まりでIE以外のブラウザを使えないという人にも受け入れられるかもしれません。

Chrome Frame対応のサイトにするには,HTMLにメタタグで指定する必要があるそうです。HTML5やCSS3などの最新技術を使う制作者は,こぞってこの指定を入れるんでしょうね。

IE6,IE7,IE8に対応しているそうですが,メインのターゲットは問題の多いIE6でしょう。マイクロソフトはセキュリティ上の問題が増えることなどからChrome Frameを非難し,新しいバージョンのIEに移行したほうが良いと言っているようです。IE6対策をしなくてよくなる日が早くなるなら,Googleとマイクロソフトどちらにも頑張ってほしいですよね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入