独学で始めるウェブサイト制作：構築編

公開日：2020.12.20

何のためにウェブサイトを作る？

よーし、ウェブサイトを作るぞー！　と思い立ったけど、そもそも何からやればいいんだろう。そんな、悩めるあなたにクエスチョン。制作ツールは決まっていますか？　ウェブサイトに掲載する内容は決まっていますか？　ウェブサイト制作そのものが目的になっていませんか？

制作ツールが決まっていないあなたへ。独学で始めるウェブサイト制作：基礎編でも少し触れていますが、フリーのテキストエディタからプロフェッショナル向けのアプリケーション『Dreamweaver』まで、ウェブサイト制作のツールは幅広く存在しています。html形式で保存できるものなら何でもいいのですが、タグ部分を違う色で表示してくれるアプリケーションがオススメです。私はWindowsを使用していた頃は『TeraPad』、Macを使用するようになってからは『mi』を愛用しています。

掲載内容が決まっていないあなたへ。ウェブサイト制作は、目的達成のための手段のひとつにすぎません。情報を伝えるため、人を集めるため、作品を公開するため……。もちろん「HTMLやCSSを学ぶこと」が目的でもいいですが、具体的な終わりが見えないのはなかなか辛い。人間は、目的がないと行動できないもの。まずは目的をしっかり定めましょう。話はそれからだ。

まずはイメージしよう

日本では「ホームページ」という言葉と「ウェブサイト」という言葉が、ほとんど同じ意味で使われています。この違いはご存知でしょうか。英語のhome pageはウェブサイトのトップページのみを指す言葉です。本当にトップページしか存在しないなら「ホームページ」でも間違っていませんが、表現として好ましいのは「ウェブサイト」や「公式サイト」「個人サイト」であると、個人的に考えています。

「ウェブサイト」の制作であることを前提に話を進めます。まずは、掲載内容をどのように見せるのか考えましょう。何が必須で、どんなレイアウトがいいか、図でも文字でもいいので簡単にまとめておくと便利です。画像を使うなら、それはどんなものなのか、自分で作成するのか、誰かに作成をお願いするのか、フリー素材を借りるのか……。考えることは、たくさんあります。ウェブサイト制作に限ったことではありませんが、頭の中で完成形をイメージしてそれを目の前に再現していくのが基本です。

メインコンテンツはどんなものがあって、どれくらい階層があって……というような、ウェブサイト全体の繋がりも考えましょう。後からいくらでも追加できるとはいえ、複雑になりすぎると管理がしづらいだけでなく、見てくださる方も何があるのか分かりづらくなってしまいます。

お気に入りの情報元を見つけよう

HTMLやCSSなどウェブサイト制作の具体的な方法については、詳しく解説しているウェブサイトや参考書などを参照してください。いきなり人任せかよ、なんだこのメモ、とか言われても仕方ない一文ですね。

そういった情報を掲載・解説しているウェブサイトはたくさんあるので、まずは信用できるお気に入りの情報元を見つけましょう。HTMLやCSSのルールは決まっているので、どのウェブサイトも参考書も内容はだいたい同じ。しかし、解説の方法が違ったり情報が見つけやすいなど、扱っている内容が同じでも見せ方や受ける印象が異なります。そういった点を見比べるのも、ウェブサイト制作の参考になるはずです。

私は独学でウェブサイト制作を始めてから15年以上、参考にしているリファレンス系ウェブサイトがあります。特にお世話になっているのは、TAG indexとHTMLクイックリファレンスです。こちらのサイトをご覧いただくと分かるように、私は目的の情報にサッとたどり着けるウェブサイトが好き。余計な装飾がなく、シンプルで機能的なところも共通点でしょうか。『まにまにメモ』と本館『まにまにスタジオ』のデザインもシンプル系。いつの間にか、影響を受けていたのかもしれません。

ウェブサイト制作で気をつけたいこと

性質上、たった1文字の間違いできちんと表示されなくなる可能性があるのがウェブサイト。作りながら（タグを打ちながら）間違いがないかチェックするだけでなく、表示や動作の確認もしっかり行いましょう。レイアウトが崩れる、表示される画像が間違っている、意図していないリンク先に移動してしまうなどの不具合を抱えるウェブサイトは、欠陥住宅のようなもの。パソコンとスマホ、複数のブラウザなど、色々な環境で確認をするのが好ましいです。

画像については、どんなときも美しい画像形式「SVG」でも説明していますが、どの保存形式を使用するのかが大切です。JPGは画質を落としてデータ量を軽くすることができる、PNGは透明にできるなど、それぞれにメリットがあり、同時にデメリットも存在します。画像に関する知識もある程度は身につけておいたほうがいいでしょう。

文字については、かつては文字化け対策として機種依存文字（環境依存文字）に配慮する必要がありました。しかし、「UTF-8」という文字コードが主流となったおかげで、「Ⅶ」のようなローマ数字や「①」のような丸囲み数字などを使用しても文字化けしなくなっています。色々な記号が使えるようになりましたが、「㌕」のようなものは見づらい場合もありますので、使いどころを考えたほうがよさそうです。ちなみに、文字化けしないのは文字コードを指定できるウェブサイトの特権のようなもの。2020年現在も、ファイル名に「①」が含まれているデータをWindowsからMacに送った場合、もれなく文字化けしてしまいます。