Ｗｅｂサイト制作などの
独学支援情報

Ｗｅｂサイト制作に関連する
教本紹介

こちらでは、私がＷｅｂサイト制作技術習得にあたって読み込んだ教本のうち、 主なものを紹介します。

なお、Ｗｅｂサイト制作のノウハウは随時変化していますので、 私は、できるだけ2008年秋時点で出版時期が１年以内のものを選ぶようにしましたが、 これらのものもいずれは古いものになってしまうかもしれません。 また、基本的にはAdobe社のソフト利用を前提にしています。 それらの点、ご了承のうえ、ご参照ください。

まずは時流や基本的な制作の流れを把握

学習を始めるにあたっては、まず、何をどう学んでいくべきか、 概要を把握しておくとよいと思います。

サイト制作の流れ、構成、連携技術、ネットワークのしくみ等について、 基本的なことを知っておくと、 実際にツールの使い方を学んでいく際に理解がしやすくなります。

下記は初心者にも分かりやすく全般的なことを解説していますので、 このような本に目を通しておくとよいでしょう。

ただし、上記の本は発行年の古いもので最新の情報までは載っているとはいえないので、 併せて下記のような最新の動向、テクニックなどを解説している本も参考になります。

ただし、上記の本は初心者には少々高度な話も含まれますので、 ある程度実際に勉強と制作を進めたうえで、改めて見返すとより理解が深まるかと思っています。

また、実際にサイト制作を企画から手掛ける予定がある場合は、 「新・Webデザインワークフロー（出版：SoftBank Creative・定価：2,400円・初版：2008年2月）」 のようなもので、そもそもＷｅｂサイトにどのような目的をもたせるか、 どのような方向性で構成するかといったことを検討する流れについても把握するとよいでしょう。

レッスン形式主体のものがお薦め！

できるクリエーター 独習ナビシリーズ

ツールの使い方を覚えるには、やはりまずは実際に使い、 サンプルを作りながら馴染んでいく方法が有効だと思います。 そして改めてツールの機能などを全体的に把握すると理解が深まります。
下記の本は、まさにそのような構成になっており、 まずは(1)レッスン、そして(2)リファレンス、(3)練習問題。という形式になっています。

またレッスンサンプルも、トップページ、会社概要、実績、ＦＡＱ、お問い合わせ、 といった５ページのサイト構成で、それぞれのページで色々な基本的なことが学べ、 かつデザインも時流に沿った参考になるものであると感じました。

ちなみに、下記紹介のＷｅｂ制作の主ツールであるDreamwaverの他に、 Illustrator（イラスト作画ソフト）、Photoshop（画像処理ソフト）についても、 シリーズ本があります。

サンプルページ制作に関わる複数のツールの基本的な活用法解説本

サイト制作は、Dreamweaverなどを活用して実際にページを制作する前に、 レイアウトデザインや、利用する画像の処理、 イラストの作成などを行う必要があり、 通常はそれぞれ別のツールを利用します。

この本はそれらのツールの比較的よく使われる基本的な活用法を、 ホテル紹介のＴＯＰページ制作を通して学ぶ形式となっています。

サンプルは１ページなので、 テンプレートを利用するようなサイト構成のものを作るまでの参考には厳しいですが、 １冊でサイト制作の基本的な流れを把握するのには手軽でよいのではないでしょうか。

特に、Dreamweaverとの連携が強力で Ｗｅｂサイトのレイアウトデザインに適したソフトであるFireworksの使い方について、 単独の教本は意外と少ないのですが、この本で学べる点もよいかと思います。

様々なテクニックの巾を広げましょう。

実践的スタイルシートサンプルの紹介

サイト制作の流れは、上記のようなレッスン本である程度つかめますが、 実際には、スタイルシート（ＣＳＳ）を利用したレイアウトテクニックには、 様々なものがあり、幅広く学ぶ必要があります。

CSSの記述方法については、実際に公開されているサイトのソースを 簡単に見れるので、色々と拝見させて頂いて参考にするのもよいと思いますが、まずは、どのような記述のバリエーションがあるのかをこのような本で知るのもよいのではないでしょうか。

例えばメニュー部分の実現方法についても、 一つの画像で実現しているもの、テキストの記述のみで実現しているもの、JavaScriptを利用するものなど様々です。 また、動画配信ソフトYouTubeに投稿されている画像の埋め込みなど、 気づいてしまえば実は簡単なことでも知らないと分からないちょっとしたテクニックなども紹介されています。

ツール(Dreamweaver)の機能を有効に活用しましょう

(X)HTML・CSSの記述は、シンプルなフリーのテキストエディタなどでも可能ながら、 Adobe社のDreamweaverを利用する場合、 その様々な活用テクニックを学べばより効率的に制作ができるようになります。

各メニュー毎の機能を解説したリファレンス本もあり、 全体像をつかむにはよいとは思いましたが、 やはり実務に即した活用テクニックの機能別ノウハウを学べる本がお薦めです。

下記に紹介する本は、初心者には少々高度な内容も含まれるため、 私もいずれまた改めて復習をしたいと思っていますが、 テンプレートの活用、Fireworksとの連携などをはじめ、 ＰＨＰなどのＷｅｂプログラミングとの連携概要、アクセシビリティ（使いやすさ）の実装など、単体ファイルの制作にとどまらないノウハウが紹介されています。

また、下記の本では、ちょっとした便利ワザ、裏ワザが紹介されており、 やはり知ると便利なことが多いかと思います。 なかなか全ては覚えきれませんが、随時参照できるとよいでしょう。

XHTML+CSSのテクニックを強化

ＸＨＴＭＬ＋ＣＳＳの手法で、実際に制作を進めていくと、 ツール利用のテキストをこなしていても、 理由がなかなか分からない不具合などに遭遇する場合があります。 ツールの使い方を知るだけでは分からない、スタイルシート（ＣＳＳ)のしくみ、ブラウザなどの違いによる対応方法などは、また別途に学ばなければいけません。

ただし、そのようなノウハウは、ブラウザなどの環境の変化や推奨技術の更新などによってもどんどん変化していきますので、ネットを活用して常に最新の情報を収集するのも有効だと思います。

しかし、一度はまとまった形の教本などを参考に学習しておくとよいでしょう。

下記に紹介する本は、７人のプロ直伝の、ＸＨＴＭＬ＋ＣＳＳに関する基本的な知識と、実用のテクニックなどが学べるものです。

また、下記では、一般的なガイドラインやトラブルシューティングなど、実務で悩みが生じやすいポイントなどが紹介されています。

制作管理対応中Ｗｅｂサイト-加賀友禅工房[長町友禅館]