TECH::HowTo

go back to frame top

サイト設計、目的別ノウハウ集です。
こちらでご紹介しているツール類を使用されていることを
前提としてお話いたします。
ツールの使用方法について、詳細は記載していません。
各ツールの取り扱い説明書や、ヘルプ、チュートリアル、
巷の参考書を片手に、
ガイドラインとして参考にしてみてください。

用語解説も順次充実させていきます。
難しいと思われる用語には WhatIs へリンクが貼られています。

★本ページは未完成です。随時更新中です。

TECT：：HowTo 目次

レイアウト

文字と画像を思った通りのレイアウトにする
賢いレイアウトの切り方（テーブルのススメ）
ウィンドウサイズに依存しないレイアウトにする
2段組以上の段組を作る
分割されたウィンドウを作る

デザイン

画像を載せるコツ
綺麗なフォントにする
マウスポインタで画像が変わるようにする（ロールオーバー）
グラフィックを用いずに四角形を貴重としたデザインを作る
段落をグラフィックを用いずに綺麗に作る

文字と画像を思った通りのレイアウトにする

こちらでご紹介しているようなサイト設計ツールを使ってみると、
ワープロとは違う感覚を感じてしまうと思います。
意外と、自分の思ったようにはレイアウトできないのです。

例えば、文章中に画像を貼り付けたりする場合、
左に画像、右に文章と言うレイアウト、例えば以下のようにしたいとしましょう。
（文、画像は、プロジェクト MOMO-CHAN の一節より）

ところが、普通にツールを使って作成すると、
次のような表示になってしまいます。

ちょっといけていませんね。
これは、ホームページの実体である、HTML では、
画像も文章の一文字も全て同じ行として扱ってしまうため、
このような表示となってしまいます。
HTML 的には、文章の中に画像がある、と言う感じなわけですね。

画像から、「さてさて…」の文章が繋がっていて、
それらが一行になっているのがお分かりでしょうか。

これに対して、最初に示したような表示にするためには、
2つほど、方法があります。

解決策その1：テーブルを使う

一番ポータブルな方法をご紹介します。
今回画像一枚に対してキャプション一つですから、
2列一行のテーブルを用意して、
以下のように左セルに画像、右セルに文章を貼り付けてしまう。

これは好きずきですが、
大抵のツールではテーブル幅(width)が px （ドット数）になっていますから、
それを「100%」に変更しましょう。
そうすれば、ウィンドウが小さく表示されている場合も
問題なく表示できるようになります。
これを行わないと、指示ドット幅より小さいウィンドウで参照すると、
下に横スクロールバーが現れて、ちょっと行けてない感じになってしまいます。

ここで、テーブルのボーダーや、セル間隔、余白を ”0” に設定します。
HTML の border、cellspacing 属性がそれにあたります。

どうでしょうか？
これでテーブルとは気が付かれないようにレイアウトが切れるようになりました。

上手く応用すれば、もっと複雑なレイアウトも実現できますね。
ちなみに、Macromedia Dreamweaver は、このあたりの調整機能に豊富です。
（覚えるのがちょっと大変なくらいですが）

ところがですね、この方法、欠点があります。
文字数が大きくなってくると、こんな表示になってしまうんですよ。

さてさて、今回の録音で一番問題になってしまったのが、
実はこのPerformer。
マック用のソフトで、業界標準のミキシング・ソフトなのだそうですが、
どうにも使い方で止まってしまいました。
加えて、iBook には USB 端子しかついておらず、
USB マイク端子入力。
なんでも Mac OS で USB Audio フルサポートになったのは
つい最近の Revision からなんだとか。
ハードが悪いんだか、OS の設定が悪いんだか、ソフトが悪いんだかで、
もめにもめること1時間。

本当は伴奏チャンネルと同期させながら、録音したいところだったのだそうですが、
Performerの仕様が分からなくて、
とりあえず、今回は、MDに録音しておいた、伴奏を聞きながら、
歌声だけ入力することに。

ところが、どうにもマイクが音を拾わない。
たかつきさん思いつくに、
マイクと、オーディオ端子間のケーブルがいかれてるんじゃないか？
たかつきさん、スタジオでケーブルをお借りして、お取替え。
…するとどうやら、音が拾えたのでしたー。

キャプション文章が多くなってくると、
文章を画像に対して回り込ませたくなってきますが、
そのように見せるためには、次のような複雑なテーブルを用意しないといけません。

本当は伴奏チャンネルと同期させながら、録音したいところだったのだそうですが、
Performerの仕様が分からなくて、
とりあえず、今回は、MDに録音しておいた、伴奏を聞きながら、
歌声だけ入力することに。

ましてサイトを見ている方が
フォントサイズなんて変更されていようものなら、
これだって解決できません。
（実は、フォントサイズを固定することも可能ですが、後述）

そこで、解決策その２に繋がります。
次のは抜本的に解決します。

解決策その2：スタイルシートを使う

スタイルシートを使うと、
画像に対しての文章回り込みを、なんと指定できるのです。

ですが、この機能は多くのツールではサポートしていません。
ですので、 HTML ソースコードを開いてダイレクトに打ち込みます。

以下の HTML ソースコードは、Dreamweaver のものですが、
一連の各ツールが生成する HTML コードは
だいたいこんな感じになっているハズです。

<img src="graphics/MOMO_REC07.jpg" width="160" height="120">
さてさて、今回の録音で一番問題になってしまったのが、 
実はこのPerformer。 
マック用のソフトで、業界標準のミキシング・ソフトなのだそうですが、 
どうにも使い方で止まってしまいました。 
加えて、iBook には USB 端子しかついておらず、 
USB マイク端子入力。 
なんでも Mac OS で USB Audio フルサポートになったのは 
つい最近の Revision からなんだとか。 
ハードが悪いんだか、OS の設定が悪いんだか、ソフトが悪いんだかで、 
もめにもめること1時間。

この色で示した、<img src="…"> が画像を表示しているタグです。
このように書くと、画像が表示されるわけですね。

この個所を以下のように変更します。

<img src="graphics/MOMO_REC07.jpg" width="160" height="120" style="float:left">

float は画像に対して、
文字の回りこみを指定するスタイルシートです。
今回は左に貼り付けて回りこませているので、「left」が指定されています。
その他、right、とすると右に貼り付けて回り込ませることができます。

さてさて、今回の録音で一番問題になってしまったのが、
実はこのPerformer。
マック用のソフトで、業界標準のミキシング・ソフトなのだそうですが、
どうにも使い方で止まってしまいました。
加えて、iBook には USB 端子しかついておらず、
USB マイク端子入力。
なんでも Mac OS で USB Audio フルサポートになったのは
つい最近の Revision からなんだとか。
ハードが悪いんだか、OS の設定が悪いんだか、ソフトが悪いんだかで、
もめにもめること1時間。
本当は伴奏チャンネルと同期させながら、録音したいところだったのだそうですが、
Performerの仕様が分からなくて、
とりあえず、今回は、MDに録音しておいた、伴奏を聞きながら、
歌声だけ入力することに。

見事に回り込ませることに成功しました～（ぱちぱち）。

テーブルや、スタイルシートを上手く使うことで、
ワープロレベル、とは言わないまでも、
かなりのレイアウトを実現できます。

↑目次

賢いレイアウトの切り方（テーブルのススメ）

文字と画像を思った通りのレイアウトにする方法でのお話していますが、
スタイルシートやFlashと言う新しい技術が提案されている昨今においても、
テーブルは未だにとっても使えるレイアウト用素材だと思います。

普通にテーブルを使うと次のような表示になります。
（WhatIsのテーブル解説も併せて参照ください。）

テーブルのサンプル
(0,0)	(1,0)	(2,0)
(0,1)	(1,1)	(2,1)

一見すると、単なる表組みにしか使えないように見えるのですが、
上手く使うと、以下のようなことが可能となります。

文字や画像のレイアウトが切れる
ウィンドウサイズに依存しないサイトを設計できる
段組に応用できる
四角のデザインをグラフィックを用いずに設計できる
グラフィックを用いずに「囲み線」を作ることができる

テーブルには、には次のような機能が提供されているからです。

サイズを指定できる
サイズを px ではなく、ウィンドウサイズに対して何％と言う形で指定できる
セルの背景を指定できる
枠をかなり自由に変更できる（スタイルシートを用いる）
↑目次

ウィンドウサイズに依存しないレイアウトにする

見てくれる人が、
常にブラウザは常に最大化して見てくれるとは限りません。

それに、みんながみんな 1240 × 768 ドットのモニタ（XGA）
で見てくれているとは限りません。

意外とまだまだ 800 × 600 のモニタ（SVGA）も健在です。
そう言えば、640 × 480 モニタ（VGA）なんてのもありましたね(^^;)
さすがにこれは最近見かけませんが。
逆に最近は 1400 × 1050 （SXGA+）だとか、
1600 × 1200 （UXGA）だとか言うのも大分値段が下がっています。

こういった全ての閲覧環境をサポートすることも、
クロスブラウザの一つだと思います。

これは大分主観が入るのですが、
サイトを作る場合、横スクロールが入るのってよろしくないと思うのです。
Window を最大化すれば良いのですが、
1240 × 768 を前提にして作ると、
それ 800 × 600 の解像度モニタを使っている人には
やっぱり横スクロールが必要となってしまいますし、
もしかしたら、それより低い解像度の方もいるかも知れません。

クロスブラウザの解説でもお話していますが、
確かに、オーディエンスを限定するのもあって良いことです。

実際、最近は企業サイトでも 800 × 600 を前提としているサイトも
多くなってきている昨今ではあります。
レイアウトが難しいのです。

ですが、それで良いのでしょうか。
そのサイトだけを閲覧しているとは限りません。
複数のブラウザを起動して、あちこち見ているかも知れませんし、
ブラウザのサイズを小さくして、
そのサイトの内容をメールに書いてくれている人がいるかも知れません。

僕個人的には、そういった全ての状況を考慮して、
初めてウェブ・デザインと言えると思うのです。

前置きが長くなりましたが、
そういった方針で設計する場合、
フレームやテーブルを用いて設計することになると思います。

テーブルの長さを％で指定すると上手く行きます。

（現在具体的内容を作成中）

↑目次

音楽や映像を公開する

音楽や映像を公開する場合に最も一般的なのは、
MP3 や MPEG1 と言ったデータをサイト上に置いて、
ファイルへリンクを貼ることでダウンロードしてもらう形です。
これらファイルは、各アプリケーションで作り出すことができます。

レコーディング・撮影技術は、
それだけで一つのカテゴリーです。
様々なノウハウがあるようですが、
それはむしろ専門サイトにお任せして、
このサイトでは基本的な指針だけを列挙致し、
ウェブサイトに置く場合に重要となる点、
ストリーミングにフォーカスを置いてご説明します。

1.音楽のファイルを作る場合

演奏を HDD レコーダに録音したけ―スについては、
HDD レコーダ（Optical 端子） → （Optical端子）変換ポート（USB）→(USB)パソコン
といった具合にして、データをパソコン上に Wave ファイルとして転送します。

音質に拘らないのであれば、MD なりに録音後、
MD やテープの出力端子とパソコンのマイク端子を繋いで、
Wave ファイルにすることも可能です。
Windows の場合、こんなフリーウェア等、様々出ています。
フリーウェアサイトである、Vector なりで、「録音 Wave」などとして検索すれば、
Mac / Win 問わずいくらでもありますのでお好きなソフトで Wave ファイルにしましょう。

もし、お手持ちのパソコンにマイク端子がない場合、USB 端子を使う手があります。
出力端子 → USB 変換ポートが別途必要となります。
これがお勧め、と言うのは専門外なのでよくわかりませんが、
こんなようなものを使うことになるでしょうね。
上の製品リンクは Google で「変換アナログ USB」として、検索したものです。
結構なんでもあるものですね。

Wave ファイルは、CDEx と言ったソフトを用いることで、
MP3 ファイルへ変換することができます。
メニューから Convert を選択し、 WAV → MPEG とすれば OK。
Winamp と言うソフトでも可能で、これまたいくらでもフリーウェアがあります。

2.映像の場合

画像データは Digital Video で撮影してパソコンにデータを転送するわけですが、
こればかりは IEEE1394 （アイトリプル・イーいちさんきゅーよんと読みます）
と言う端子経由で行う必要があり、多少面倒です。
IEEE1394 は i.LINK とも Fire Wire とも言われます。

IEEE1394 搭載パソコンは最近でこそ出回っているのですが、
まだまだそんなパソコンをお持ちの方は多くはないでしょう。
いくつか拡張ボードや PC-CARD が出ているようですが、
パソコンに詳しい方向け、と言う感じです。

まずはお手持ちのパソコンにこの端子が搭載されているかどうか、
ご確認してみてください。

搭載されているパソコンの場合、
各社、別々に DV 取り込み用ソフトが添付されている筈です。
それらソフトを使って、パソコン上に、AVI、若しくは MPEGと言うファイル形式で
動画を HDD に転送するのです。
（詳しくは取扱説明書を参照くださいませ。）

しかし、これらファイル、数10分でも 10MB くらい平気で超えるファイルサイズになるので、
実際にサイトに置くのはなかなか困難となってしまいます。

3.ストリーミング

音楽、映像、いずれも 2、3MBは超えるファイルとなってしまうため、
サイトに公開するのは多少無理があります。
アナログ回線で 2MB のダウンロードは 5分以上かかりますので、
折角のバンド演奏を聞いてくれる可能性はぐんと減ってしまうでしょう。

もっとも良い方法は、ストリーミングを用いる方法です。
ストリーミングを用いれば、ダウンロードのストレスなく
音楽や映像を閲覧できるため、より多くの人にそれらを楽しんでもらえる筈です。

ストリーミングで最も有名なプレイヤーは、RealPlayer です。
RealPlayer は音楽・画像の両方がストリーミング可能なプレイヤーです。
RealProducer と言うツールを使って、Wave / MPEG ファイルを
ストリーミング用ファイルに変換します。
いずれも BASIC 版は無料でダウンロードできますので、
上記方法で音楽・映像ファイルの作成ができる方はやってみる価値があると思います。

3.1.RealPlayerストリーミングファイルの置き方

変換自体はそんなに難しくありません。
RealProducer にはほとんどの手順を順を追って指示してくれますので、
手順に従えばすぐに作成できます。

Real Producer を起動して、
まず、メニューから、New Session → Record from file を選択します。
後は指示に従って、ストリーミングファイルにしたい
Wave file や MPEG ファイルを指定します。
Wizard 形式になっていて、その他、想定ユーザーの回線レート等を
順次入力していきます。

一通り Wizard の手順を終えたら、
下の方にある、Recording Controls の Start ボタンを押せば完了。

変換後、your-sound.wav ならば your-sound.rm と言うファイル名となります。
これは MPEG ファイルでも同様です。

ですが、ファイルの変換の他にも以下のことを行わないと、
ちゃんとストリーミングしてくれないのです。
このことがちゃんと出来ていないサイトは結構少なくないように見受けられます。

3.2.ramファイルの作成

ブラウザの初期仕様では、
リンクファイルはダウンロード後に実行になってしまいます。
折角 rm ファイルを作ってアップロードし、リンクを貼っても、
結局だらだらとダウンロードしてしまい、
ダウンロード終了後に RealPlayer が起動されることに気が付くことでしょう。
もし、そのような挙動になっていなかったとしても、
それは、ブラウザのバージョンや、
RealPlayer インストール時のオプションによっても挙動が異なるため、
サイトを見てくれる人によっては、「ダウンロード後実行」になってしまうのです。

これを解決するために、作成されたストリーミングファイルが
your-sound.rm であるならば、
your-sound.ram と言うファイルをテキスト・エディターで作成して、
（テキストについてはこちらウェブサイトの説明を参照ください）
中身を以下のように rm ファイルへの URL だけを一文書きます。

your-sound.ram

http://www.yourhomepage.ne.jp/your-sound.rm

で、このファイルもサイトへアップロードし、
your-sound.rm ではなく、your-sound.ram にリンクするのです。

すると、ブラウザは、上記たかが数バイトのテキストだけを読み込み、
RealPlayer を立ち上げます。
RealPlayer はテキストファイルの URL を参照し、
ストリーミングできるようになるのです。

4.「.htaccess」の作成

サイトを置いているウェブ・サービスにもよりますが、
上記音楽・映像データをサイトに置いてリンクを張っても、
上手くダウンロードできないことがあります。
経験上は Mac と Windows で挙動が異なったりすることがあるので、
仮にご自分のパソコン上で問題にならなかったとしても、
クロス・ブラウザの観点から、
騙されたと思って、以下の手順を踏んでみてください。

まず、以下のテキストファイルを作成して、
適当な名前（仮にyour-text.txt）で保存してください。

your-text.txt

AddType audio/x-mp3 .mp3
AddType audio/x-pn-realaudio .ram
AddType audio/x-pn-realaudio .rm
AddType audio/x-pn-realaudio .ra

作成後、your-text.txt を .htaccess
（ピリオドを最初に打って全部小文字で htaccess）と
名前を変更し、アップロードします。

.htaccess と言うファイルには様々な役割がありますが、
上記で記載されているものの意味は .mp3 や .ram といったファイルが
どういったファイルであるのかが記載されているもので、
サーバーによって自動的に読み込まれ、処理されます。

これが行われていないと、
時折、音楽・動画ファイルへのリンクをクリック時に、
ダウンロードではなく、
HTML テキスト文章としてブラウザが強引にデータを
表示しようとしてしまうことがあるのです。

.htacess に関する詳細は、こちらのサイトに
非常に詳しく記載されておりますので、参照してみてください。
また、ウェブ・サービスの多くは、
この件の FAQ が記載されていることがありますので、
チェックしてみると良いかも知れません。

良くわかんないけど、
文字化けしたページが表示されるよ、
と言う方は分からなくても、.htaccessをお試しあれ。

↑目次

ロボット検索エンジンに引っかかるようにする

巷に溢れる検索エンジンですが、
Google のように登録さえすれば、
ホームページ全文から検索されるようなものが
基本的には主流です。

しかし、一部検索エンジンは、
全文検索型ではなく、index.htm に以下のようなタグを用意して、
想定される検索文字列を以下のようなHTMLタグを直接書き込むことで
指示してあげる必要があります。

ここで示しているのは、
本サイトの<head>タグの中で用いているものです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<META NAME="description" CONTENT="アイディアはあるんだけど…と言う方向けに技術トレンドの解説。">
<META NAME="keywords" CONTENT="無償,インディーズ,サイト設計,代行,コラム,委託,テクノロジー,写真たて,フリーウェア,アイディア">
<title>アイディア&amp;&amp;テクノロジー</title>

<META NAME="robots" CONTENT="INDEX, FOLLOW">
が、『ロボット検索で、index.htm及び全てのファイルを引っ掛けてね』と言う意味です。

<META NAME="description" CONTENT="サイトの説明">
で、サイトの説明のところに、ロボット検索エンジンで引っかかったときに
表示されるサイトの説明文章を入れます。

<META NAME="keywords" CONTENT="WORD1, WORD2,…WORDn">
検索で引っ掛けるキーとなる文字列を WORD1～WORDnに指定します。

全文検索型が台頭している昨今ですが、
まあ、書いておいたほうが安心です。

↑目次

ロボット検索エンジンに引っかからないようにする

これはもう、HTMLタグを以下この色で示すように、
直接<head>～</head>の中に書き込む。そんでおしまい。
意味なんて大してないのでコピペで十分。
私も別ページで以下を試してみましたが、
効果実績ありのHTMLソースコードです。
全文検索型Googleだろうとなんだろうと検索エンジンで引っかかることはなくなります。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<META NAME="ROBOTS" CONTENT="NOFOLLOW,NOINDEX">
<META NAME="ROBOTS" CONTENT="NONE">
<title>秘密のページ</title>
</head>

その他、NOROBOTS なんて書くやり方もあるようですが、
それは W3C 標準ではない模様。
ですが、そちらでも、ほぼデファクトスタンダードらしいです。

後、この属性は大文字で書かなければならない、と言う噂がありましたが、
最近は小文字でも構わないようだ、と言う解釈が一般的な模様です。

↑目次

W3C準拠サイトを設計する

僕個人的には、重要なのは W3C 準拠であることではないと思っています。
要はブラウザがどのようにそれを実装したかであり、
ブラウザ上で不具合なく動くことが最も重要だと思っています。
実際、巷の HTML エディタは、W3C 100% 準拠な HTML を生成してくれはしません。

ただし、クロスブラウザを考慮すると、
出来る限りそれっぽく作っておけば、
比較的安心できると思います。

かといって、W3C標準の文書を読むのは大変です。
そこで、W3C標準に見合った HTML ページになっているかどうかを
チェックできるサイトがありますので、それを利用させてもらっちゃいましょう。

ミケネコ HTML-lint

このサイトを用いると、どこが標準でないのかを駄目出ししてもらえます。
具体的な対処方も示してくれるので、
ツールで作成した HTML 文書を元に
チューニングしていけば、2、3日で W3C 標準になれます。
なお、こういうのに強い HTML エディタとしては、
IBM ホームページビルダーを推薦します。
その次が Macromedia Dreamweaver で、
一番マズイのが Adobe GoLive。

一般的なサイトの場合、HTML 4.01 Transitional でチェックするのが良いでしょう。
HTML 4.01 Transitional 対応サイト、
設計上のガイドラインは以下のようなものになると思います。

1.フレームを使わない

フレームが使用している frameset 等のタグは
Internet Explorer / Netscape Navigator 固有のタグとされていて、
HTML 4.01 標準ではない、とされています。
どのように書いても標準になってくれません。
ですので、サイトを W3C 標準にしたいのであれば、使わないのが良いでしょう。

2.DOCTYPE 等、必要なヘッダをしっかりと書く

スタイルシートを使っているよ、とか、HTML のバージョンとかをHTML文書の冒頭で記載します。
例えばこんな感じで。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>アイディア&amp;&amp;テクノロジー</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0033CC" alink="#CC0000" vlink="#0099CC">
  …

3. 色合い等はスタイルシートで設計する

フォントの色やサイズの指定は タグを使わずにスタイルシートで書くのがより標準。
<TABLE> はお咎めなし。

4.不要と思われるようなタグ属性もちゃんと書く

<IMG> タグの代替属性 ALT= なんて、
IE のツールチップ表示が出なくなるから良いじゃん、と思っても、
中には画像表示オフで見ている人がいるから、と言う理由でちゃんと入れなさい、と言われます。
これは、身体に障害を持っている方への配慮でもあります。
現在そういったブラウザがあるのか良く分かりませんが、
全てが文章として閲覧できるように設計されていれば、
目の不自由な方に対しても、なんだかの対処が可能となるわけです。

でも、この配慮が必要となるタグはそんなに多くないですね。
以下のタグ属性をちゃんと入れていればだいたい標準。

<IMG> タグの ALT 属性
<TABLE> タグの SUMMARY 属性
<HTML> タグの LANG 属性

いずれもツールは自動生成してくれないことが多いので、
ダイレクトに HTML をいじる必要があります。

以上4点のうち、必要と思われる内容を適用していく感じが、
現実的だと思います。

補足ですが、Adobe GoLive の場合、GoLive 固有タグをばんばん生成するので、
とても標準とはかけ離れた HTML になってしまいます。
設定で固有タグの生成をオフとしましょう。

↑目次

go back to frame top