【殿堂入り】Webデザインハック

Webデザイナーは狡猾であるといえるでしょう。完成させたい外観や機能がある場合、様々な方法をつなぎ合わせこれらを実行します。方向性を示す明確な基準や手段がない場合も同様です。デザインハックのコンセプトはここから始まりました。

 

デザインハックはWebサイトが特定の方法で表示、機能する為の遠回しな術です。時にはネガティブな意味も含みます。例えば、HTML tableを使ったレイアウトはスクリーンリーダにはアクセスすることができないと揶揄されています。また必要に迫られ可能な限り限界を超えていくよう展開されており、限界がありつつもデザイナー達はデザインハックにより問題を切り抜けています。

 

では、かつて最も役立つとされ、広く普及していたWebデザインハックについてフェローデザイナーたちとのTwitter上のディスカッションを見ていきましょう。現在の基準に匹敵するものではないかもしれませんが、それぞれの時代に殿堂入りしていた方法ではあります。

 

 

レイアウト: HTML Tables とCSS Floats

まず、HTML TableとCSS Floatについて見ていきましょう。両者のピーク使用には何年もの開きがありますが、どちらとも基本的にマルチカラムレイアウトを作る為に使用されてきました。

 

 

HTML table

CSSが普及する以前は、シングルカラムが主流でした。上下左右の余白部分にあたるpaddingやmarginは存在せず、コンテンツを横並びに表示する標準的な方法もありませんでした。HTML tableはページレイアウトではなく表形式のデーターに使用する為のものですが、CSSが普及するまでは最も効率的に作業をすすめる手段であったのは確かなことです。

 

 

CSS float

Tablesには先ほど述べたアクセシビリティの問題も含め様々な欠点があります。さらに、ブラウザのレンダリングにおいても時間がかかります。その為、CSS　floatの導入はWebデザイナーにとってゲームチェンジでした。float(フロート)はHTMLのマークアップでなく、よりアクセシビリティが高く、パファーマンスを高めることができるものでした。

 

CSSによってマルチカラムが可能になり、スクリーンサイズにより良く対応するようになりましたが、全てにおいて問題がなかったわけではありません。列の高さを合わせたい場合は、clearfix という方法を使う必要があります。それぞれの方法は、本来の目的を果たす為に使う場合は今日でも役立ちます。ですが、レイアウトに関しては過去の話です。

 

 

 

スペースや空白を入れる：( )とスペーサーGIF

細部までこだわるデザイナーは正確なピクセルでスペースを入れる方法を探していましたが、当時それは簡単なことではありませんでした。よって、ノーブレークスペースやスペーサーGIFがスペースや空白をコントロールするために使われていました。

 

 

ノーブレークスペース( )

中央揃えや右揃えをせずに空白を入れたい際に、ノーブレークスペースが役立ちます。しかし、使用するフォントや大きさによって実際のスペースのサイズも変わってきます。それだけでなくユーザーがどのブラウザ、OSを使用しているかによっても変わります。

 

gifスペーサー

より正確なスペースは背景を透化できる画像、 GIF画像を使うことで作ることができます。この透明な画像は、見た目に悪影響を与えずにデザイナー自身で高さ、横幅、ピクセル数を設定することができます。

 

CSSの普及によりこれらは時代遅れな方法に見えますが、 WordPress のGutenberg(グーテンベルグ)でも同じことができるスペーサブロックを使うことができることから、まだこれらの方法への需要はあると考えられます。

 

 

 

タイポグラフィ：　イメージ・ベースのテキスト

これの必要性は極めてシンプルです。かつてのWebでは、ユーザーシステムにインストールされたフォントのみ反映可能でした。しかし、基本的なフォント(Times New Roman、 Georgia、Arial 、 Helvetica)以外にユーザーがどのフォントをインストールしているかデザイナーは知る由もありません。

 

そこで、最悪なことにPhotoshopで全てのテキストをイメージにしたのです。これによって、どのフォントをインストールしているかどうかは関係なくなりましたが、アクセシビリティが代償となりました。HTMLのヘディングタグの代わりにイメージを使うことでページでのセマンティクスが損なわれ、SEOがダメージを受けます。

 

 

 

スティッキーヘッダーとナビゲーション：フレーム

HTML  frameは当時一番進んでいたものでした。現在CSSやJavaScriptで可能になったことのほとんどは、かつてはHTML frameにより行われていました。コンセプトはいたってシンプルで、レイアウト内の個々のフレームが独立したページとしてみなされます。ヘッダー、フッター、ナビゲーションをサイト内の他のコンテンツと簡単に分けることができる方法でした。

 

例えば、ナビゲーションの変更はたった一つのファイルで完成します。

 

HMTL frameはスティッキーヘッダーやナビゲーション作成ができることを目だまとしています。ユーザーはコンテンツをスクロールすることで、サイトを簡単に操作することができます。しかし、この方法は目的を果たしていますが異なる画面のサイズには適応しておらず、SEOにも向いていないため理想的とは言いがたいです。また、悪質なURLからフレームをローディングすることによるセキュリティ面での不安もあります。

 

 

 

イメージの最適化：スライス

ブロードバンドが普及する以前は、イメージの最適化は必要不可欠でした。 50kbのイメージですら、ページを重くし回線を遅くするからです。

 

ソフトウェア大手のAdobeは興味深い解決策を提案しました。AdobeのImageReadyというソフトウェアでは、１つのイメージを複数のファイルに分割して保存するので、画像のダウンロードが早くなります。それだけではなく、ソフトウェアはそれらの分割したファイルをHTML tableへエクスポートすることもできるので、そこからHTMLを自身のページにコピー＆ペーストすることができます。

 

しかしこの方法には問題がありました。テーブルレイアウトのレンダリングには更に時間を要するので、最適化の意味がなくなります。維持にも多くの労力を必要としました。例えば、大きなヘッダー画像にナビゲーションを追加する場合、再度スライスから開始しなければなりません。よって、テンプレートの変更を余儀なくされます。

 

ブロードバンドの普及により少しゆとりが生まれましたが、それでも最新のPhotoshopでは未だにスライシングとHTML エクスポートを提供しています。

 

 

 

Internet Explorerに対する条件付きコメント: <!--[if IE]>

現在でもWebデザイナーがInternet Explorerの強固な存在に苦しめられていると耳にすることはそう珍しくありません。Internet ExplorerはMicrosoftのレガシーとして受け継がれていくものであり、一部のユーザーが使用することをやめないからです。そのため、沢山あるIE独自のソースコードや制限を永遠に切り開き続けなければならないようなものです。

 

全てのバージョンのIEに対応した条件付きこめんと<!--[if IE]>、もしくは古いバージョン <!--[if lt IE 11]>の記述は汎用性が高いものでした。その逆を記述することで、より良いバージョンもしくは特定の<!--[if gte IE 10]>に匹敵するものを探すことも可能です。

 

Microsoftはデザイナーを思い遣るべきです。 幸いなことに、新しいブラウザーMicrosoft Edgeではこれらの無意味な機能は廃止されました。

 

 

 

Webデザインハックにおいて大切なこと

ここで紹介したデザインハックが全てではありません。一見不可能に見えることを可能にする回避策も無数に存在します。今回紹介した方法が他と区別される点は、広く利用され、時には大きな企業でも取り入れられているという点です。

 

効果があるから意味があるわけで、デザインハックとは目的を達成する手段なのです。ごまかしも効きますが、高尚なデザインをブラウザにレンダリングしてこそ真の達成感を味わえたような気持ちになります。デザインハックが今日のWebのある形を切り開いたのです。