週刊Webテク通信
2009年9月第4週号 1位は,果てしなくスクロールするウェブサイト/気になるネタは,GoogleがWebの問題児Internet Explorer対策を発表
ネットで見かけた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)」といった検索ワードを使うとよさそうです。
2. 10 Wonderful Letterpress Type Tutorialshttp://sixrevisions.com/graphics-design/10-wonderful-letterpress-type-tutorials/
Letterpressと呼ばれる型押ししたような文字が最近流行っていますが,そういうイメージを作るためのチュートリアルがまとめられています。
Photoshop,Illustrator,Fireworksのどのツール用にもチュートリアルがありました。CSS3のドロップシャドウを使う方法や,CSS2で二つの文字を重ねてそれっぽく見せるといった,画像を使わないやり方も紹介されています。
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サイトで流行ったギザギザ星形バッジのチュートリアルは,いまさらという気もしますね。
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ファイルの埋め込み)
が簡単に実装できます。
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のチュートリアルを多数紹介しています。それぞれのチュートリアルで使われているポイントとなる機能についての記述もあります。
グラデーションメッシュを使って描かれた赤ピーマンは見事ですね。「グラデーションメッシュ」で検索すると,日本語のチュートリアル記事も多数見つかりますよ。
以上,メルマガ「デイリーWebテク」で先週紹介した記事から独断と偏見で選んだベスト5でした。
そのほか先週の記事から,日本語によるまとめ記事を二つ紹介します。
- cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net
CSSに関する情報を発信しているサイトのまとめです。日本のサイトを中心にまとめてあります。 - 14個のTwitterの細かすぎて伝わらない裏技や仕様 - 聴く耳を持たない(片方しか)
Twitterについての細かいTipsなどをまとめてあります。ダイレクトメッセージの仕様についての解説がわかりやすいです。
先週の気になる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階層までしか作れませんし,簡易サイトマップ向けと考えた方がいいでしょう。
今週の気になる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テク通信
- 2009年10月第4週号 1位は,CSSのfloatプロパティの謎,気になるネタは,Barnes & Noble、電子書籍端末「nook」を発表—Kindleキラーとなるか
- 2009年10月第3週号 1位は,サイトをリデザインするための準備と計画,気になるネタは,Twitterはつぶやくという意味の英語なの?
- 2009年10月第2週号 1位は,さんざん乱用されたWebデザインのトレンド/気になるネタは,落書きから写真を合成!? PhotoSketch
- 2009年10月第1週号 1位は,検索結果ページのデザイン/気になるネタは,キー局がなぜ今,YouTubeに
- 2009年9月第4週号 1位は,果てしなくスクロールするウェブサイト/気になるネタは,GoogleがWebの問題児Internet Explorer対策を発表
- 2010年2月第4週号 1位は,すばらしいCSS3のチュートリアル&テクニック集,気になるネタは,Google「リアルタイム検索」が日本語対応
- 2010年2月第3週号 1位は,リンクのスタイリングに関する手引き,気になるネタは,韓国で「iPhoneを操作できる」魚肉ソーセージが人気
- 2009年12月第2週号 1位は,ミニマルなWebレイアウトを作るために必要なこと,気になるネタは,絶対に覚えたい iPhone+Google音声検索・10の技
- 2009年12月第1週号 1位は,RGBAカラーの使い方,気になるネタは,思いどおりの日本語入力 - Google 日本語入力
- 2009年11月第2週号 1位は,WebデザインをGoodからGreatに変える6つの方法,気になるネタは,Gmailのフォントが変に


