アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

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

週刊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)」といった検索ワードを使うとよさそうです。

図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/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

サイエンスに片思い

本連載では,サイエンスという学問を軸に,そこから広がる可能性やつながり,そしてWebの世界との関係について,前田邦宏氏がさまざまな取材を元に考察し,これからの可能性について展望します。

使ってみよう! Windows Live SDK/API

Windows Liveサービスの一部にはAPIやSDKとして提供されているものがあります。本連載では各API・SDKの紹介とそれらを利用したアプリケーションを開発していきます。

Lifelog~毎日保存したログから見えてくる個性

コンピュータを使って,日常のさまざまなことの記録(ログ)をとり,それを分析して活用することで,もう一段階上の「楽な生活」をめざす日々の研究報告です。

もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス