本日のお料理は Web page を作ろうと思います。それでは早速材料の方を確認していきましょう。
とりあえず一気に紹介しますが、目を回さないでください。解説、辞書、素材なんかは必要に応じて活用すればいいと思います。とりあえずは基礎知識から。
なお、ここに挙げているソフトやサイトはすでに開発や販売終了、移転してしまっている可能性があります。
Web ページを作成するに当たり、必要なものは以下の通りです。
| 用意するもの | コメント |
|---|---|
| コンピュータ | 当たり前ですが、紙と鉛筆では作れません。 |
| ホームページ作成ソフト | 何を使うかは割と好みの問題ですね |
| 画像編集ソフト | 写真とか、イラストとか、背景の作成に。最近のホームページ作成統合ソフトは画像関係の機能も充実しているが、やはり専用ソフトが一つあると便利。 |
| 解説書 | HTML や CSS の文法解説や構造的な解説、画像形式についての解説、その他高度な利用法に関する解説などを行っている書籍や Web サイトなど。知らないものに取り組むときはやはり道標が必要。 |
| 辞書 | 色見本、HTMLや CSS などを手軽に調べられる書籍、Web サイトなど。ある程度理解が進んでいれば解説書は必要なく、辞書だけで OK. |
| 素材 | 再利用、改変が可能な画像や音、CGI や JavaScript のスクリプトなど。Web サイトで配布されていたり、CD-ROM で販売されていたりする。全部を手作りするのはさすがに大変なので、適宜こういうものを活用。 |
| HTML文法チェッカ | いくら勉強しても、いくら習熟してもミスはつきもの。そんなときはチェック用のプログラムにおまかせしましょ。 |
こんなもんです。Windows であろうが Macintosh であろうが、PC UNIX であろうが、手順はほとんど変わりません。もちろん音楽を鳴らそうと思えば音の編集をするソフトも必要ですが、それは応用編ということで、ここでは扱わないでおこうと思います。
よく Web ページなんかワープロが打てれば誰でも作れると、つい言ってしまうのですが、しかし実際にはなかなかそうはいきません。それを阻むのは
くらいかな？ あと、自分のマシンで確認したからってそれでオッケーとは言えないってのもかなり理解しづらく、いろんな人にとって見やすいページを作るのはさらに難しいですね。どうしても自分の画面を基準に作ってしまいがちですが、画面のサイズも発色もけっこうマチマチなんですよね。
その辺は次の「基礎知識編」で扱います。
使えるソフト一覧を作ってみました。全部必要なわけじゃないですがね。基本的にはフリーソフトを中心にリンクを張っているので、ここから辿っていけば何も買わずに始められます。
Windows 用WYSIWYG HTMLエディタ見たまま書けるホームページ作成ソフト
タグ挿入型HTMLエディタ
画像関係のソフト
|
MacOS 用WYSIWYG HTMLエディタ見たまま書けるホームページ作成ソフト
タグ挿入型HTMLエディタ
画像関係のソフト
68 Mac では WYSIWYG、タグ挿入式を問わず、HTML エディタは少ないです。Netscape Composer か mi（旧ミミカキエディット）なんかがいいと思います。スピードを求めるなら YooEdit とかフツーのエディタでもいいです。グラフィックソフトは 68 でも Photoshop 4 まで、Illustrator 7 まで動きます。頑張れば頑張れます。 Photoshop LE は Photoshop 5 に対する LE（Limited Edition） です。そのほかに Photohop 4.0 LE というものもありますので注意してください。また、フル機能版の Photoshop が 6 にバージョンアップし、Photoshop LE は現行製品ではなくなりました。2001.07.現在では Photoshop Elements というものが後継バージョンに当たります。なお、今後もこのページの情報はどんどん古くなっていく予定です。 |
ある程度以上のマシンスペックがあってグラフィカルな環境で制作したい方には Dreamweaver Fireworks Studio がいいかなぁ、と思い直してきています。パックで安いし、Adobe PageMill が販売をやめましたし…。
ので、使い方、ノウハウ、テクニックの情報を本や Web から入手しやすいし、ユーザーとの情報交換もしやすいのがポイントです。もちろん、高い評価を受けて売れてるってのは前提ですが。
Shockwave とか Flash なんかを視野に入れている人は Macromedia 製品に慣れておいた方がいいかも。最新の Dreamweaver 4 Fireworks 4 Studio はかなり安いし。（ただ、Macromedia 製品はツールパレットの設計があんまり上手じゃないので、画面がかなり狭くなります。1024*768 では正直ツライ。）
Windows でそれほどコダワリがなく、手軽に作りたいということであればホームページビルダーでいいかな、とも思います。（よくできた製品だと思います。ただし、できればバージョン6以降にしてください。それ以前のバージョンはオススメしません。）
また、
なんてのを使い慣れたエディタと組み合わせるのも一つの手です。これは、クリップボード経由でタグをエディタに送り込むことができるで、たいていのエディタで動くはずです。私自身は使い慣れたテキストエディタを使っているので、それ以外のソフトのことは実際にはよく知りませんし、こういうソフトがいちばん嬉しいです。
Mac の方が Windows よりはテキストエディタでの制作はしやすいと思います。mi（旧ミミカキエディット）がフリーでオススメです。Finder から画像をドロップすると自動的にそのサイズがセットされるので、意外と気持ちよく作れます。mi ではしんどい（マシンパワー的に）っていう環境なら Yoo Edit でもいいでしょう。Yoo Edit と Pixel Cat と Finder だけでもそこそこ作れます。（画像とか音声とかの制作はまた別な話ですが。）もちろん HTML そのものを理解する必要がありますが、基本的な構造さえ分かればあとは辞書を片手に、とか、他のサイトのソースを見ながらでなんとかなるもんです。ところで Windows 用のエディタで画像をドロップしても無理矢理バイナリデータを開こうとしないものってないでしょうか？
そのほか、サーバにホームページを転送するための FTP ソフト、各種ソフトなどをインストールするときに必要になるアーカイバ、素材（背景やアイコンなど）を入手するのに便利な HTTP でまとめてデータをダウンロードするソフト、CGI の開発を行う場合は HTTP サーバと Perl などの言語を手に入れる必要があります。が、ここでは大変なので扱いません。そういうことについて親切なサイトがきっとあるはずなので、そちらに譲ります。
Web 作りって、HTML が分かって画像が入れられれて、見やすくなればそれでオッケーかってゆーと、そうではありません。例えばタグの使い方が正しくないといろんなブラウザで思ったように表示されませんし（あなたのページをあなたと同じブラウザで見ているとは限らないのです）、見た目に依存しすぎては、あなたの Web を「聞いている人」にとっては、内容が理解できなくなってしまいます。
そんなこんなへの理解を深めるために、以下のサイトが参考になると思います。
（私がいちばん影響を受けているのは書籍の『スタイルシート Web デザイン』ですね。初心者の方にはオススメしませんけど、これを読んだら、それまでもやもやしてたものが一気に晴れ渡ったように覚えています。ただ、この著者の方の Web サイトはちょっと独特の配色で、あまり読みやすくはないです(^^;）
ホームページを作るうえでなかなか外すことのできない HTML についての解説書。
書籍(『HTML4.0 & CSS 1 正攻法』)にまでなった詳細な HTML 解説集。スタイルシートも真面目にフォローしているし、非常に有用なサイト。
HTMLだけでなく、WWWの総合解説サイト。解説でもありリファレンスでもある。もはや超定番のサイト。まとまっていて使いやすいけど、サンプルが少ないので自分で突っ込みはじめるとここの記述では物足りなくなってくる。早くそのレベルを目指そう。
あの KDD マルチメディアラボのメモがまだありました！うれしい！ 簡潔にして豊富な情報量。一見の価値アリ。
本当に正しい HTML を理解するのに有用なサイトは上のほかにいくつかある。が、初心者がそこを読んでもたいていの場合は何が正しくて何が間違っているのか理解できないので、慣れてきてからそういうサイトを自分で探し出して、訪れて、打ちひしがれてください :-p 私も何度となく自分の書いたページを全面的に書き直したもんです。（今も全面書き換えをしたいんだけど、もうメンドイから別なサイトでやろう。）
テクニックや気をつけるべき注意点など。
コミュニケーション支援サイトと書くとなんだか一瞬戸惑うが、JEIDA(日本電子工業振興協会)の発信する、障害者がコンピュータを利用してコミュニケーションすることを支援するための情報、活動紹介ページ。ここを読めば世の中には様々な形でインターネットを利用している人々がいることが自覚でき、ばかみたいに視覚に訴えたページなどについて考えさせられる。これから Web page を作る人は、共有すべき情報は何で、その発信には何を気をつけたらいいかを考えるくせをつけたいものです。
IBM のホームページリーダで検証している具体的なデザインガイドです。リンクのポインタを小さくしすぎると手に障害がある人には困る、とか、ちょっとしたことですが、結構役に立ちます。私でもどこにリンクが張られているのか分からないページとかありますからね。そういうページは確かにクールなデザインなのかもしれないですけど…。
こちらはテクニカルなデザインガイド。最新の技術やグラフィックスを活かした Web デザインのための連載。
本、読ませる文章を基本にしたページデザインのためのノウハウや考え方のいくつか。Web デザインは紙媒体とは違うのだという主張は確かに正しいのですが、読みやすさのためには紙の上のノウハウがやはり役に立ちます。（ただし、このページが HTML 的にどうかというとまた別問題なのですが…。）
人に読んでもらう文章を書くためのポイントなど。自分の書いた文章って、けっこう他人に分かってもらえないものです。
結構高度な解説が書かれていたり、正確な情報源を辿っていたりして、巷に出回っている HTML 入門書なんかよりはるかに信頼できるサイト。しかし、本講座と同じく非常に説教くさい(笑)
非常に端的に HTML の記述の際に気をつけるべきことが列挙してある。タイトルは「HTML の本を読む時の手助けに」と書かれているが、記述があまりに簡潔なため、手助けにはならないように思う(^^; でも書かれていることは基本的に正しいので、勉強する気があれば参考になる。
携帯インターネットの世界規格 WAP を中心に、携帯 Web について勉強できます。
すぐ役に立つ解説ではないが、HTML 以外にも色々とハイパーテキストと呼ばれるものがあって、それぞれ便利で面白そうだと感じさせてくれるページ。特に XML は今後要チェック！と私は思いますです。
視覚デザイン研究所の本はよいですね。ユニバーサルデザインやアクセシビリティという意味では視覚に偏りすぎてるっことになるんでしょうけど、見やすく、伝えたい情報を的確に伝える方法が分かったような気になれます。コンピュータ的な派手なテクニックではなく、紙の上でも十分通用する、基本的なデザインについて学べます。
HTML は他の人工言語に比べて簡単な方だとは言え、普通、覚えられません。そこで「辞書」を用意します。ま、本でも便利なんですけど、Web 上で参照できるものがいくつもあります。辞書ってのはハイパーリンクの構造をもっとも活かしやすいもんですよね。
| サイト | 内容 | コメント |
|---|---|---|
| とほほのHTML入門 | HTML | HTMLタグ一覧。長すぎず短すぎず、そこそこの解説が加えられているので使いやすい。ここは HTML のほかにも WWW 関係の情報が満載されているので散策してみてもよいでしょう。アルファベット順にも機能別にも引けるのが嬉しい。内容を一気にダウンロードできるので、これを利用するとよいでしょう。 |
| WWW/HTMLメモ集 | HTML | 今は KDDI になってしまった KDD のマルチメディアラボって、日本のインターネット初期には重宝しました。そこにあった HTML メモ。まだまだ使えます。 |
| 水無月ばけらの HTMLリファレンス | HTML | 当然ながらリファレンスなのでどこでどのタグを使うか分からなければあまり意味をなさない。でも、情報量が豊富でよい。ちょっと HTML に慣れてきた人向け。DTD などにも触れることができる。IE じゃないとちゃんと見れないかも。 |
| 色名順カラーチャート for web。 | カラーチャート | 見れば分かる |
| color | カラーチャート | 見れば分かる |
素材にはオーディオデータや JavaScript、CGI などのスクリプトデータもありますが、ここではとりあえず画像だけを紹介します。（また、この情報は確実に古いです。自分で探せる人は探した方がいいのが見つかります。）
| サイト | コメント |
|---|---|
| dpi Web Graphix | かっこいいデザインのページ。内容もよい。コンポーネントになっていて利用しやすい。ここの素材を使っているサイトって、けっこう多いですよ。 |
| akiko brand | かわいくてほのぼのしたアイコンなど |
| 牛飼いとアイコンの部屋 | かわいくてきれいなアイコンなど。定番。 |
| フリー素材集 Giggurat | たくさんありますが、似たようなパターンが多いかも。 |
| MA-Factory | 様々なボタンやプレート、写真など |
| 和風くりっぷ | 和風な素材のイラストなど。絵のタッチが和風なのではない。 |
| ホームページ用素材集 | バリエーションに富んだ豊富な素材集 |
| 自然の素材集 | 様々な木のテクスチャを再現。異色だが使いでがある。 |
| Webデザイン素材店anyway | |
| Sewing box : free buttons & backgrounds | |
| 小原石材 | 石材屋のWeb。石のテクスチャあり。これも異色だけど使えそう。 |
| School Icon CLUB(フリー素材集) | 学校関係のアイコン集。鉛筆とかノートか豊富。 |
| G-TOOL | いっときなくなったと思っていた、ロイヤリティフリー素材集。 |
| FREE BGM | BGM の素材 |
| ふゆき＆シュンローの職業別イラスト | EPS の素材。以前は完全にフリーでダウンロードできたような気がするんだけど、最近は登録とかいろいろ。 |
| DTPの素材屋 | これも EPS の素材 |
| リコーイメージネット | JPEG とか EPS とか WMF とか GIF とか。これだけの意味のあるイラストを大量に、しかもベクトルグラフィックスで公開しているところは他にないでしょう。 |
Web フォームに URL を入力するとその Web ページの HTML がどのくらい文法的に正しいかを採点してくれる。ただし、ここの採点は結構辛いので点数が悪くても怒らないこと。ドキュメントタイプを間違ったり根本的なミスをすると点数が簡単にマイナスになる。Vector がこっそり自慢している「よくできました」は、ここの採点。
Web サーバ立てて CGI を動かせる人はローカルでも動かせます。けっこう便利。HTML 原理主義の人は御用達。この LINT を利用した HTML-LINT RANKING というものもある。これを見ると大手のサイトはけっこう点数が低いのが一目瞭然。これはしかし、こういう大手のサイトでも点数が低いんだから気にする必要はないよ、と安心するのが目的ではないのでご注意あれ。
文法以外にもいろいろチェックしてくれるスグレモノ。採点も Another HTML-lint ほど細かくないのでだいたいのチェックができればいい人はこっちの方がオススメ。ただし、meta タグで keyword とか書いていない場合とスタイルシートでごちゃごちゃやっている場合と JavaScript でごちゃごちゃやっている場合はあまり評価が上がらない。
Perl で書かれた HTML 文法チェッカ。これを CGI で呼び出してチェックしてくれるサービスが世界中にいくつか存在する。日本語版も以前は動いていたが、残念ながら最近は動かないようだ。(1999.05.30.)
SGMLパーサを使った HTML 文法チェッカ。結構厳密。ただし、エラーを教えてくれても採点はしてくれないのでそっけない。