ユーザに美しい驚きを与える404 Page Not Found

    後藤大地  [2010/03/19]

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

    Kevin Yank氏がWhat Makes a Good 404 Page? - SitePointにおいて、404 page not foundのページの例としてhttp://idzr.org/404を紹介している。http://idzr.org/404は現在策定が進められているCSS 3D Transforms Module Level 3の機能を使って背後に文字のアニメーションを表示するというもの。Webkitで実装されているためSafariやChromeで閲覧できるほか、iPhoneのSafariからも動作を確認できる。

    Safari 4 on Mac OS Xでの閲覧例

    Chrome on Windows XPでの閲覧例

    iPhone 3GS Safariでの閲覧例

    背後の文字がアニメーションしていることを確認できる

    http://idzr.org/404のアニメーションは基本的にCSSのみで実現されている。JavaScriptも使われているが、これは最初に文字をランダムに配置するためだけに利用されている。

    3DアニメーションはCSSのみで実現されている

    文字をランダムに配置するだけの目的でJavaScritが利用されている

    IE8では機能しない

    Firefox 3.7 Alpha 2では機能しない

    なお、What Makes a Good 404 Page?では、404 page not foundのページとして機能的なものがいいか、http://idzr.org/404のようにユーザに驚きを与えるようなものの方がいいか、という点に関しては答えがわからないとも説明している。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン