2010年04月27日(火)
テキストのみでWebデザイン
テーマ：作品の改良手抜きだった武器バトルのページのデザインを整えました。
http://www.feint.jp/buki/
「テキストファイルのみでWebページをデザインする」というのが今回のデザインのテーマです。
なので画像ファイルもフラッシュも一切使っていないデザインです。
（今後、ゲーム画面をフラッシュにする可能性はあります。）
背景にある微妙に斜めなグラデーションもキャラクターのシルエットも全て込みで、HTML、CSS、JavaScript、のテキストファイルしか使っていません。
こうやってテキストファイルのみでWebページを構成することに力を注いでいるWebデザイナーさんはたまにいますが、僕の場合はCanvasタグが得意なのでCanvasタグをページのデザインのために使うことで、あたかも画像ファイルが使われているかのようなデザインにしてみました。
この手法でWebページを構成するメリットは以下の通りです。
・サーバのTCPソケット数（接続数）を節約することができる。
・サーバのファイル転送量を節約することができる。
・背景の大きなグラフィックをアニメーションさせることができる。
他にもサーバのディスク容量の節約などありますが、そんなメリットは微々たるものなので重要なものだけ書きました。
自分のサイトにアクセスが殺到してなかなか繋がらない経験をしたことのある方なら、この地味なメリットがどれほど大きいかわかると思います。
やり方としてはCanvasタグにJavaScriptでグラデーションやシルエットを描き、そのCanvasタグをCSSで後ろに回り込ませているだけなので、技術的な興味があるWebデザイナーさんはよかったら試してみて下さい。
