danna labo. vol.3

404ページの作成

    [works]

誰も気付いてないと思いますけど、このサイトにはイラストがもう一枚あります。
それは、エントリーやディレクトリがないページにアクセスした際に表示される、404ページで掲載しているイラストです。

404ページのイメージ

間違ったURLでアクセスした時に表示されるのが、404ページです。
IE6であればPC内のHTMLを、他のブラウザはWebサーバが用意するページ、もしくはサーバ会社が用意するページを表示しますが、 表示されるものはとても素っ気なく、みんな同じ。
Not Found
The requested URL xxx was not found on this server.
って書かれたページですね。
Webのユーザビリティの観点からだと、誤った操作を行った場合、理由と解決方法を適切に表示すべきですが、 せっかく自分でサイトを作っているのだから、見えない所もこだわりたいですよね〜。

ちなみに、このサイトの404ページは「jskweb.com/」のあとに適当な文字列を入れて頂くか、 こちらで見れます。404という事で、まだ作成途中のイラストですが。。。

このサイトはrnoteというblogツールで作られているので、エントリーがない場合のテンプレートを上のイメージの様にしていますが、 間違ったURLへのアクセス時に表示させるページは、.htaccessファイルで制御可能。
企業サイトならこの辺は必須の作業なので、仕事で作成する事が多いですが、いつも忘れてしまうのでメモを兼ねて紹介します。

アクセスしたアドレスをアドレスバーにそのまま表示する場合

ErrorDocument 404 /var/www/html/xxx/xxx.html

ドキュメントルートからの絶対パス

エラーページのアドレスに移動させる場合

ErrorDocument 404 http://www.xxx/xxx.html(URL)

URLそのままの記載。404に該当する場合、記載されたURLに移動(リダイレクト)

401 (認証失敗)、403(閲覧禁止)などは、404を該当番号に置き換え

で、上述した通り、ユーザビリティを考えた場合、記載した方がよい内容は、

  • このページ(404)の意味
  • 考えられる動作の可能性(間違ったURL、サーバから削除された等)
  • 目的のページへの移動方法

って感じですが、他にも楽しめる要素を盛り込めると、サイトの価値を上げれるんじゃないかと個人的に思ってます。 ゲームの裏技的な感じで。


実績紹介:ラジコンパッケージ制作

実績紹介:ラジコンパッケージ制作

かなり前から告知してました、ラジコンパッケージ制作の実績紹介。
仕事としてWEBサイト制作がメインの中で、パッケージを制作できるというのはとても面白い経験で、また自分が作ったものが 店頭に置かれ、全国に流通するというWEB制作とは異なる喜びを感じる経験ができました。
上の画像は入稿データでして、製品として発売されるとこんな感じです。

xid2

ラジコン自体は昨年の11月から販売されて、発売にあたっては色々なラジコン雑誌にも取り上げられてます。
とあるblogで、「パッケージやポスターがかっこいい」って言って頂いた記事もあり、WEB制作ではなかなか得られない反響を見て、 ニンマリしてしまいました。

パッケージの制作コンセプトは、他のラジコンとは異なるインパクト。
スーパーカーブームを経験した世代の方をターゲットとしているため、「ラジコン」というより「車・スーパーカー」という点を 前面に出してます。
このパッケージを見て「あれ何だろう?」って思わせる事をポイントとしているので、普通のラジコンパッケージと比べるとかなり異色です。
この考えがクライアントの考えとマッチし、ウチの会社で制作する事になりました。
クライアントによると、このラジコンのCM撮影の際、見学していた家族の会話で、
子供:「あれ何?」
父:「ランボルギーニっていう車だよ。懐かしいね。ラジコンかな?面白いね〜」
というやり取りがあったみたく、まさに狙い通りでニヤリです。

私が担当した部分は、

  • パッケージデザインの企画
  • 大枠のデザイン構成
  • イラスト作成

でして、かなり私の想いが入った制作物となってます。
またこれ以外にも、このラジコンの専用サイトも作ってまして、こちらはサイトのコンセプト作りからデザイン、制作までほとんど一人で行ってます。
思い入れが強い分、なかなか面白いものができました。

店頭では下の様な感じで販売されてます。
いや〜、自分が作ったものがこんな風に販売されてるって、この仕事やってて良かったな〜

xid

久しぶりに時間が出来たので、更新を頑張るためにCSSに関するTIPSを。

最も多くのユーザが使うIE6。CSSレイアウトでコーディングを行っている際、時々ぶちあたるバグを紹介。

floatを多用しているCSSレイアウトのコーディングを行っていると、Windows IE6で下のイメージの様な、テキストの後半が複製され予期しない所にはみ出る事があります。
和柄はフッタのイメージ、コピーライトがテキストです。形として、全体をラップしたボックス内にfloatされたfooterボックスを入れ、さらにコピーライトを配置するボックスを入れ子にしている様な構造です。

テキストはみ出しのイメージ

これは、きちきちのボックスの入れ子を行っている際出現するIE6のバグでして、ソースを見ても余分な文字は無いし、本来あるべき箇所のテキストを選択するとはみ出た所も選択されるという不思議な現象です。

私も制作の際この問題にぶちあたり、頭を悩ませました。
IEのバグなので、CSSの記述がおかしい訳でなく、なかなか原因が分からないからです。
取りあえず原因となりそうなボックスをソースから削除したりしてもだめで、検索しようにも現象となるキーワードが曖昧なため、WEBでも簡単に解決の手がかりが見つかりません。
「IE6」、「CSS」、「テキスト」、「はみ出す」ではヒットせず、これに「余分に」や「突然」みたいなキーワードを加えると、 何がなんやら分からなくなってしまいます。

で、解決方法としては、ソースからコメントを削除する事です。
色々試しましたが、ソース全てのコメントを削除する必要は無いみたいです。でも、 テキストを内包している、ボックスまわりのコメント削除だけでは解決しない場合もあり、 影響範囲がどの程度かはよく分かりません。
でも、とにかくコメントを削除すると、何事も無かったかの様に余分なテキストが無くなります。

まぁ、正直な話この件を深く検証する気はあまりないですが、同じ問題にあたった人の解決に役立てば幸いです。