404ページのデザイン提案【後編】

スケッチをすることでページの大まかな形が見えてきたところで、早速コーディングに入りました。404という1ページの課題なので、そうしているというのもありますが、最近は Photoshop とかでビジュアルを固めないままマークアップを記述することがあります。結局ブラウザで表示される状態でないと分からないこともありますし、骨格の状態から徐々に色や雰囲気を加えて行く作業は結構楽しかったりもします。構造への意識もしやすいですし、この時点でまたレイアウトを吟味出来る機会があるという意味でもメリットがあると思います。こういう作り方をしているので、ブラウザのデバッグツールが充実しているのは非常にありがたいです。

すべての案件でそうしているわけではないですが、今後はそうしていきたいですし、素早く骨格（又はプロトタイプ）が作れるようにならないといけないなと思っています。CSS3がもっと使える状態になれば、さらにいろいろな装飾が CSS で可能になるので、マークアップしながら装飾やインタラクションを充実させていく作り方のメリットが高まるでしょう。装飾画像の重なり具合の調整や角度を少しずつ変える作業がたった１行で出来るわけですから素敵じゃないですか。

今回のページだけではないですが、だいたい最初のマークアップでは、ブラウザ云々はあまり考えずにサッとキレイに書ける手段を選びます。例えば最初は :nth-of-type(n) や :last-child といったセレクタは積極的に使っています。最初は面倒な感じがしますが、覚えてしまえば使った方が断然楽なんですよね。HTML に必要以上にクラス名を増やすことなく装飾が出来ますし、より柔軟性が増すような気がします。

当然ながら、上記に挙げたセレクタは IE ではさっぱり理解出来ません。見た目をまったく同じにする必要はありませんが限度もあるので、ここから徐々にクラス名を加えて調整をしていきます。今回は凝ったレイアウトではありませんが、場合によっては IE 向けの CSS ファイルを用意してレイアウトの調整を行うことがあります。もちろん、多くのセレクタは jQuery を使えば IE でも擬似的に使えますが、JavaScript の処理が遅い IE に対して装飾のために負荷をかけるのはどうかと思い、今回は止めておきました（ケースバイケースですし、１、２くらいすることはありますが）。

装飾のほうは IE のケアだけでなく、別ブラウザの拡張属性を利用することもあります。例えば Box Shadow はひとつの例でしょうね。とはいっても最近のブラウザの実装スピードが良好なので、それぞれのブラウザで大きく違うということにはならないです。

真ん中のほうにある、記事数はダイナミックに生成されています。以下の PHP を記述することで数値を取得することが出来ます。あとは好きなところに書き出すだけ。

$article_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->term_relationships WHERE term_taxonomy_id=15;");

最後にある term_taxonomy_id のあとに続く数字は取得したいカテゴリ ID にします。あと、「いろいろなトピックを扱っています」という文章に添えられているキーワードのほうは PHP を記述しなくても wp_tag_cloud を使えば表示出来ます。

しばらく真剣に記述してなかったので、今回の 404 ページは HTML5 にしていますが、CSS の継承が楽になることを除いてはこれといってメリットが感じられませんね。まぁ 404 という小さな場所でメリットどうこう言うのも変ですけど。まだ確定していないことが多いので当然ながらしばらく様子見になりますが、ブラウザとそれを実装しているデバイスの技術、そして JavaScript や CSS といった HTML と一緒に使う技術をどう組み合わせるかによって HTML5 のメリットが明確になるでしょう。これから楽しみですね。

• hail2uさんのように自分ならではの 404 ページを提案している方がいます。いろいろあっても良いよね
• 最初公開した時点では「404 Page Note Found」がやたらでかい文字でしたが、ご指摘をいただいて日本語のほうを大きく見せることにしました。こっちのほうが良いと思います
• ページが見つからない。情報が見つからない。うーん
• 404ページの情報量の加減は難しいですね。多すぎると意図が分からなくなりますし、少な過ぎても突き放してしまう感じがします
• RGBa 大好き
• ひっそり COLOURlovers から色データ取得して使ってます。効果的な使い方とはいえないですが、ちょっとしたアクセントにはなってるかと