本を書くのはまだまだ慣れないのでいつも周囲に迷惑をかけてしまうのですが、今回もまたとんでもなく時間がかかっちゃいました…。というのも、担当編集者さんや監修のロクナナさんを巻き込んで「ああでもない、こうでもない」とディスカッションしつつ、かなり丁寧に進めたからなのですね。

いかに分かりやすく説明するか。
応用がきかないTips集ではなく、基礎をしっかり学んでもらえる内容にするにはどうすればいいか。
自分なりに知恵をしぼった一冊です。

このブログを読んでくださっている方は中級者以上が多いので参考にならないかもしれませんが、新人さんの教育に使ったり、Web制作に興味があるお友達などに薦めていただけたらうれしいです。

なお、教育関係のお仕事に就いている方、教科書採用をご検討いただく可能性があれば献本いたします。
問合せフォームからご連絡くださいませ！

目次

Webページについて知ろう

• Webサイトの構成について知ろう
• Webページを作成するために必要なもの
• Webサイト制作の流れを知ろう
• Webページを表示するソフトを知ろう

HTMLの基本を理解しよう

• 実際に書いてみよう
• ページタイトルを決めよう
• お約束を入力しよう
• HTMLファイルを保存しよう
• テキストを追加しよう
• Webブラウザで確認しよう

Webページを作ろう

• 見出しを設定しよう
• 段落を設定しよう
• 文章を改行して読みやすくしよう
• 箇条書きを設定しよう
• 画像を埋め込もう

サブページを作ろう

• ページを複製しよう
• 表を作成しよう
• ページ同士を連携しよう
• 外部サイトへのリンクを設定しよう
• メール送信用のリンクを設定しよう

CSSの基本を理解しよう

• CSSの基本
• セレクタを理解しよう
• ページの背景色を設定しよう
• テキストの大きさと色を設定しよう
• CSSファイルを保存しよう
• HTMLにCSSを読み込もう

CSSでレイアウトしよう

• HTMLをグループ化しよう
• 幅と高さを設定しよう
• 左右に配置しよう

ページをデザインしよう

• 背景画像を設定しよう
• テキストや画像の周りに余白を付けよう
• リンク画像に付いた枠線を消そう
• 箇条書きの見た目を変更しよう
• 箇条書きの余白をなくそう
• 枠線を付けよう

CSSでテキストをデザインしよう

• リンクテキストのスタイルを変更しよう
• テキストと背景のバランスを調整しよう
• テキストを画像の横に回り込ませよう
• テキストを中央に寄せよう

Webページを公開しよう

• Webサーバを準備しよう
• FTPクライアントソフトを設定しよう
• ファイルをアップロードしよう
• ブラウザで確認しよう

付録

• 本書で作成したWebページ
• メモ帳の設定
• テキストエディットの設定
• ファイルの拡張子を表示する
• よく使うタグ一覧
• 練習問題解答

「HTML5」は、最初に複数のブラウザがサポートした仕様が「canvas要素」だったために動的なコンテンツ実現のための仕様として注目されましたが、実際には従来のHTMLコーディングのマークアップ記法をすべて刷新するものであり、今後のマークアップの基本となるものです。この特集では、やがて来るHTML5が当たり前の時代に備えて、HTML5の「本思想」「基本仕様」「マークアップ」などについて解説していきます。

• INTRODUCTION（総論）＿HTML5が制作環境に与える影響
• 01＿HTML5からのページ記述の基本記法
• 02＿HTML5のマークアップはアウトラインの理解から
• 03＿これだけは押さえたいHTML5の新要素、HTML4との違い
• 04＿CSS3の7つの主要な機能を理解する
• 05＿動的コンテンツを実現するHTML5
• Column＿HTML5とWebアクセシビリティ

私が担当したのは01、02、03です。年末のバタバタの中でがんばって書きました。

まだ2回しか開催してませんが、各回なんと20名前後の参加がありました。これだけ人数がいるとその場ではあんまりゆっくり交流できなかったはずなのですが、本編以外で個人的に会ったりしている人もいるようで。しかも、メンバー間でお仕事も発生しているようで！スバラシイことですね☆
2012年はますます盛り上がっていくといいなーと思ってます。

さて、そんなa会の最年長（うっ）メンバー5名で、1/8に勉強会を開きました。今日はそのレポートを。

テーマは「グループワークにおける問題点の洗い出しとその解決方法」

私以外のメンバーはすべて組織内で仕事をしているため、彼らにとって今もっともホットな内容を第一回目のテーマとしました。
モデレータさんからのメッセージは以下のとおり。

自分一人でサイトを作る場合と違い、複数人が関わる場合には、様々な問題点が出てきます。
皆さんが日ごろ直面する問題や抱えている問題にはどんなものがあるのか、経験談を出し合いましょう。ついでに愚痴っちゃう勢いでもいいと思います。
同じウェブ制作者でも職場や立場などが異なる人の生の声は興味深いと思われます。
出てきた問題点について、あーだこーだ話しあって考えているうちに、何か気付くことがあるかもしれません。
グループワークにおいて気をつけるべきポイントや、解決方法が見つかれば、万々歳。
今回のテーマは、「新しい技術の勉強会」というようなものではなく、日常業務に関わる身近なものなので、積極的に事例や意見を出し合えればいいなと思います。

当日までの宿題

各自、以下について考えをまとめてくることにしました。

【A】グループワークにおいて困った経験談

「○○で困った」「○○なことがあった」「○○がやりにくい」「今○○で悩んでいる」など何でも。

【B】グループワークをしやすくするための、参考事例

例えば「職場で取り組んでいること」「ウェブや本などで見かけた手法」など、参考になりそうなことをピックアップする。

当日の流れ

当日は全員が順番に宿題を発表し、ひとり終わるごとにみんなでディスカッションしました。
おもしろかったのは、メンバーが発表する【A】が大体同じような内容になること。勤め先の業種も、携わっているサイトの規模や種類も、メンバーの雇用形態もまちまちなのですが、多少の違いこそあれ同じような悩みを抱えているものなんですねー。

たとえば…

• プロジェクトメンバー不在時のフォロー体制が中途半端
• 制作物の品質が、担当者によってばらつく
• ソースの記述方法などがルール化されていないため、ちょっとした修正作業などにかかる工数が大きい
• 責任の所在があいまい
• それぞれが自分の仕事で忙殺されているため、進捗の共有などがおろそか

【B】については、実際にためした方法や便利なツール、参考になる書籍などを紹介しあいました。最後には「なんだかんだ言って、やっぱり人間同士のコミュニケーションだよねー」という結論に落ち着いてしまいましたが、それでもコミュニケーションを助けるためのヒントはたくさんあった方がいいですもんね。
ちなみに、今回紹介された本はこれ（楽天ブックスにリンク）。

16時スタートで、終わったのは4時間後の20時。想像していたよりはるかに長時間、白熱の勉強会となりました。

終了後はタイ料理屋さんに移動しておいしい料理とお酒で大盛り上がり！そしてその場で第2回のモデレータも決定。次回は春？夏？楽しみです！

機材構成は、Mac（OS X 10.6）＋モニタ、Win（Windows7）＋モニタ、キーボードはHappy Hacking Keyboard Lite2（US配列）。キーボードとマウスはWin機に接続。
やりたいことは

• Winを「サーバ」、Macを「クライアント」として、「Synergy」でキーボードとマウスを共有する
• 文字種切替えを含む、いわゆるキーボードショートカット操作はMac方式に統一

の2点。

ちなみに「Synergy」とは、複数のパソコンでキーボードやマウスを共有するためのソフト。さらに、ひとつのパソコンで「コピー」したデータを、別のパソコンに「貼り付け」たり、複数のモニタ間をマウスで自由に行き来できるようにしてくれるスグレモノです。
くわしい情報はマイコミジャーナルさんのページで。

Synergyの設定

今回、Mac用のSynergyは「SynergyKM」というソフトを使いました。
インストール後、「システム環境設定」で簡単に設定できます。Macはクライアントとして機能させたいので、「General」画面で「Connect to a shared keyboard and mouse」にチェックを入れます。
続けて、「Client Configuration」画面の「Server IP or hostname」にはWin機のIPアドレスを入力。
Mac側の設定はこれで終わり。

Win用は本家Synergyを利用します。
「Screens & Link」でそれぞれのマシンの配置を設定。私の場合Macを左、Winを右に配置しているのでこんな感じになります。

続けて、Macでキーボードを利用するときのキーマップ変更の設定。
「Control」キーが「Alt」、「Alt」キーが「Control」として機能するよう設定しておきます。

HHKのスイッチを切り替える

Happy Hacking Keyboard Lite2（以下、HHK）の「Delete」キーを押したときに「バックスペース」として機能させたければ、キーボードの背面についているスイッチ「DIP SW」の3番を「ON」にします。これは箱についてる説明どおり。

また、Macと共有するときには「◇」キーを「Alt」として利用する設定にしておきましょう。「DIP SW」の3番をONにします。
ひとつ前のステップで、Macでキーボードを使用する際には「Control→Alt、Alt→Control」となるよう設定を済ませました。ということは、「◇」キーの機能は「Alt」から「Control」に変換されます。 Macでは「Control」キーが「コマンド」キーとして認識されるので、「◇」キーをたたけば「コマンド」として機能してくれるようになります。

Windowsの設定

US配列のキーボードを使うときは、まずレジストリを書き換えます。

1. スタートメニューの［アクセサリ］-［コマンドプロンプト］を起動
2. 「regedit」と入力してレジストリエディタを起動
3. [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layouts\00000411  ]までたどる
4. [Layout file] の値を [KBDJPN.DLL] から [KBDUS.DLL] に変更
5. レジストリエディタを終了

次に「KeySwap」をインストールして、キーマップの変更をレジストリに書き込みます。HHKのスイッチを切り替えたことにより、現在「Alt」として機能している「◇」キーを「Control」として機能するよう変更します。

※レジストリ関連は、まったく理解せずに書いてます。
あちこちのサイトで解説してくれている情報を寄せ集めているだけなので、間違いがあったらご指摘をお願いします！

CmdSpaceを導入

「CmdSpace」は、Winマシンでも「Command」+「スペース」で文字種の変更ができるようにしてくれる、超スグレモノソフトです。XP時代から愛用してますが、Window7でもちゃんと使えるので本当にありがたい。
インストールして設定。

以上の設定を行えば、2台のマシンで1組のキーボード＋マウスを共有したり、2台のモニターを自由に行き来できるようになります。
異なるOSなのに、キー操作もほとんど同じ。すごい！しかも全部無料のソフトです。なんとお礼を申してよいやら。

あ、SynergyはDonateウェアでした。安いけど$10寄付しとこ！

当日私が担当したのは「非フロントエンドエンジニアのための選択授業」という枠で、私から見た「フロントエンドエンジニア（以下、FE）の意義」や「これからのWebサイトのありかた」などをテーマにお話しさせていただきました。
…のつもりだったのですが、私自身の未熟さや緊張が原因で伝えたいことの半分も伝えられなかったように感じたので、補足のためにこのエントリーをあげます。

そもそもFEって？

最初に、事前にtwitterでおこなったアンケートにいただいた回答を掲載しますね（原文ママではありません）。「FEの定義」や「FEに期待すること」について答えていただきました。

•  SEOやトレンド、メンテナンスの効率化、アクセシビリティなど諸々をもちろん踏まえた上で「今回どういう仕様にするか」を判断できる
• 「テクニカルアートディレクター」みたいな存在かも
• JavaScriptをマスターしたマークアップエンジニアの上位クラス
• ユーザーの手に馴染むようなUIを考える人
• 質とスピードを両立できる人でありたい（現役FEさんから）

いやー、正直言って「FEって、自分が想像していたよりもずっとハイレベルなものだったんだ！」とガクゼンとしました。
私自身が想定していたFEの定義は「HTML、CSSの知識をベースとして、JavascriptやPHP、Perl、CMSの独自タグなどを必要に応じて使う人」だったので…。
かなり焦りつつ、でも定義を決めないことには話を組みたてられないので、今回はひとまず自分の定義に基づいて背伸びせずに話を進めさせていただくことにしました。

フロントエンドエンジニアの仕事って？

ひとつめのテーマ「フロントエンドエンジニアの仕事って？」を語る際に私が何度か口にした「精度の高いマークアップ」とは、つまり「デザインに引っ張られないマークアップ」のことです。
当日のスライドの例はその顕著な例だと考えています。あのソースの何が悪いのか、もうひとつのソースのどこが良いとされているのか。たとえ経験を積んだFEでも、きちんと説明できない方が（中には）いらっしゃると思います。

CSSはデザインカンプと密接につながっていますが、HTMLはまったく（と言い切れない場面もありますが）別モノです。
当たり前のようでいて、いざ実践に結びつけるとなると難しいポイントを、非FEさんにもご理解いただきたくてお話しさせていただきました。FEの力量を評価する上でのひとつの指針になるかと思います。

フロントエンドエンジニア受難の時代！？

技術は日々進化し、トレンドはうつりかわり、アプリケーションはバージョンアップを重ねます。それらに対応することだけで精一杯で、疲れきっているFEのなんと多いことか…。でもこれは、FEに限らずどの職種にもいえることですよね。

「Web制作」という動きの早い業界に身をおいているかぎり、トレンドに目を配ることは最低限のたしなみでしょう。でも、表層の情報を追うだけで本質を見失ってしまっては本末転倒だと感じます。

私は15年ほどWeb制作の仕事を続けています。歴史の浅いWeb制作業界においては、これでも中堅もしくは古参の部類に入るかと思います。その私から見て、15年前と今を比べると当然「浦島太郎もビックリ！」というくらい色々なことが変化しているのですが、実は概念的な部分は大して変わっていない気がします（個人的には、テーブルコーディングからの脱却の際は、それまでの概念を180度変える必要がありましたが…）。

たとえば、ブロードバンドの普及やマシンのハイスペック化にともなってWebサイトのデザイントレンドは刻々と変化してきました。コンテンツの幅が広がったり巨大な背景画像がしきつめられたり。でも、基本のセオリーに大きな違いは無いように思うのです。
「いろんなことが変わり続けているように見えて、実は大して変わっていないんじゃない？」
これは、ここ10年近くずっと感じ続けていることです。

私は、「概念（本質）さえしっかり理解しておけば日々の情報にふりまわされる必要は無い！」と考えています。
もちろん「知らない」よりは「知っている」方が有利に決まっています。でも、技術やトレンドに目を奪われるあまり、「流行っているからこうしよう」「みんながやっているからやらなくては」というのは、なんだかおかしい気がするのです。

仕事で必要になったときに、そのつど必要な（と思われる）情報や知識を的確にピックアップするのも“才能”であり“技術”です。
また、常に最新の技術や最新の表現を導入しないといけないのか。これも落ち着いて判断したいところですね。目新しいものに踊らされるのではなく、常にニュートラルな目線で「目的を達成するためにどの方法が最良か」を見極めることの大切さを、あらためて考えるきっかけにしていただけたらうれしいです。

これからのWebサイトを考える

当日は漠然とした話になってしまいましたが…。
これまでの「制作者が提供する形態で閲覧する」スタイルだけでなく、「ユーザーが自由な形態を選択して閲覧する」スタイルも視野に入れることで、まったく新しい、そして真に効果的な情報提供の可能性が見えてくるのではないか、と考えています。
ここでお話しした内容は、「概念」に通ずるかと思います。

チームのみなさんへ

授業後、参加者のおひとりが「せんがんさんは会社員時代にチームで苦労されたんですね」というコメントをくださいまして…。「キャー！こころの声が届いてしまった！！」と焦りました（笑）。
いやいやいや、フォローするわけじゃないんですが、私は制作会社時代の仲間には本心から感謝しています。いまだに尊敬する人もいるし連絡を取り合う人もいます。もちろん、社員全員と良好な協力関係を築けていたかどうかは分かりませんが…（あはは）。
でも、所詮はヒトとヒトとのことですもの。心を開いて素直に接することのできた相手と、そうでない相手がいるのは当然ですよね。
そういった経験もふまえて、最後の「結局はコミュニケーション」というまとめにいたりました。

組織に属している人はぜひ、ちょっと迷ったら気軽に周りの人に声をかけてみてもらいたいです。結果、望む答えにたどりつけなかったとしても、協力してもらえなくてムッとすることになったとしても、また懲りずに話しかけてみてほしい。
また、小さな組織のメンバーやフリーランサーなど孤立した状態で仕事をしている方なら、同業者と横のつながりを持って気楽に仕事の話ができる環境をつくってみてはいかがでしょうか。

周りを巻き込んでいくことで、ひとりでは気づかなかったことに気づける機会がきっとあると思います。
そしてその気づきが、あなたがつくったサイトを利用する誰かさんの暮らしを少し便利にしたり、一瞬でも華やいだ気持ちにさせることができたらステキだと思うのです。

最後に

今回のイベントを運営されたスタッフのみなさん。今回はお声がけ本当にありがとうございました。
来場者を喜ばせようという気合がほとばしった、すばらしいイベントでした。感動しました。
来年も是非、なんらかの形で参加したいです。生徒コスプレもよろこんで！！

class名を利用してCSSをいじると、結構思い切ったカスタマイズができます。こんな感じ。

<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">
<div class="twtr-doc" style="width: [指定した幅]">
<div class="twtr-hd">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-profile-img-anchor"><img alt="profile" class="twtr-profile-img" src="[プロフィール写真]"></a>
<h3>[表示用ユーザー名]</h3>
<h4><a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]">[twitterアカウント]</a></h4>
</div>
<div class="twtr-bd">
<div class="twtr-timeline" style="height: [指定した高さ]">
<div class="twtr-tweets">
<div class="twtr-reference-tweet"></div>
<div class="twtr-tweet" id="tweet-id-2">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]"><img alt="[twitterアカウント] profile" src="[プロフィール写真]"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p>
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-user">[twitterアカウント]</a>[発言内容]<em><a target="_blank" class="twtr-timestamp" time="[投稿日時]" href="http://twitter.com/[twitterアカウント]/status/[tweet ID]">xx days ago</a><a target="_blank" class="twtr-reply" href="http://twitter.com/intent/tweet?in_reply_to=[tweet ID]">reply</a>
<a target="_blank" class="twtr-rt" href="http://twitter.com/intent/retweet?tweet_id=[tweet ID]">retweet</a><a target="_blank" class="twtr-fav" href="http://twitter.com/intent/favorite?tweet_id=[tweet ID]">favorite</a></em>
</p>
</div>
</div>
</div>
<div class="twtr-tweet" id="tweet-id-1">
<div class="twtr-tweet-wrap">
<div class="twtr-avatar">
<div class="twtr-img">
<a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]"><img alt="[twitterアカウント] profile" src="[プロフィール写真]"></a>
</div>
</div>
<div class="twtr-tweet-text">
<p><a target="_blank" href="http://twitter.com/intent/user?screen_name=[twitterアカウント]" class="twtr-user">[twitterアカウント]</a> [発言内容]<em><a target="_blank" class="twtr-timestamp" time="[投稿日時]" href="http://twitter.com/[twitterアカウント]/status/[tweet ID]">xx days ago</a><a target="_blank" class="twtr-reply" href="http://twitter.com/intent/tweet?in_reply_to=[tweet ID]">reply</a><a target="_blank" class="twtr-rt" href="http://twitter.com/intent/retweet?tweet_id=[tweet ID]">retweet</a><a target="_blank" class="twtr-fav" href="http://twitter.com/intent/favorite?tweet_id=[tweet ID]">favorite</a></em></p>
</div>
</div>
</div><!-- tweets show here -->
</div>
</div>
</div>
<div class="twtr-ft">
<div>
<a target="_blank" href="http://twitter.com"><img alt="" src="http://widgets.twimg.com/i/widget-logo.png"></a><span><a target="_blank" class="twtr-join-conv" style="color: rgb(255, 255, 255);" href="http://twitter.com/[twitterアカウント]">Join the conversation</a></span>
</div>
</div>
</div>
</div>

私が担当するのは「非フロントエンドエンジニアのための選択授業」というコマで、フロントエンドエンジニア（あぁ、まどろっこしい。以下「フロントエンドエンジニア」＝「FE」で）ではない方に向けて、FEの立場から見た「仕事をよりスムーズに進めるためのアイデア」や「これからのWeb制作のあり方はこうなるのでは？」といったテーマについて話そうと考えています。

まだまだ準備中で、しかも初・非FEさん対象の講演ということで少し不安ですが、Web業界のお祭りみたいなイベントだと聞いているので楽しんでのぞみたいと思っています。
参加されるみなさん、どうぞよろしくお願いします！

仕事とぜんぜん関係なくて恐縮です。
今日は「パブリックコメント送ろうよ！」の呼びかけエントリーを書いてみました。

今、環境省が「動物取扱業の適正化」についてパブリックコメントを募集しています。このパブリックコメント、単なる「目安箱」かと思いきや、集まった意見はかなり重要視されるそうです。ちょっと面倒ですが、ペットを飼ってる方や動物好きな方、参加しませんか？あなたの意見が反映される可能性大ですよ。

こちらのサイトに、詳しいことが書いてあります。興味のある方はぜひ読んでみてください。
https://sites.google.com/site/1action4animals/public_comment
「ほぼ日」はさらに分かりやすい！
http://www.1101.com/george/2011-08-19.html

ひとつめのリンク先「One Action for Animals」の内容を一部かいつまんでご紹介すると、今回の法改正の重要項目のひとつは「犬猫幼齢動物を親等から引き離す日齢」についての規制です。現在はこの規制が緩いため、ペットショップなどでは「赤ちゃん」の動物たちを親から引き離して堂々と展示販売しています。

でも、まだ乳離れもしていないうちに親から引き離された赤ちゃん動物は、母乳による免疫力や栄養を十分にたくわえることができていないため虚弱になってしまうことがあります。また親から教わるはずの社会性を身につけないまま売られていくことで、やがて問題行動を起こす可能性があります。

ちなみに、2010年には犬猫合わせて229,832頭が保健所で殺されています。この中には、問題行動が原因で、心ない飼い主から保健所に持ち込まれる動物の数が多く含まれます。
よく誤解されますが、保健所の殺処分は決して「安楽死」ではありません。苦しい窒息死です。人間のエゴのために、命が使い捨てされている不幸な現状がたしかにあるのです。

動物と生活したことのある方なら分かると思いますが、小さくてかわいい時期なんて一瞬です。でも彼らは、小さいときよりも大きくなってからの方がずっとかわいいのです。
見た目の愛らしさよりも、ふとした瞬間に気持ちが通じ合ったと感じたり、自分を信頼して体を預けてくれたりする様子にこそ、私たちは愛情を感じるものではないでしょうか？

約三割の子犬や子猫がブリーダーからからペットショップの買い入れ元となる競り市の間で命を落とし、生き残っても競り市からペットショップに移動する間に命を落とす子がまた一割、さらにペットショップの裏側で一割の子が亡くなってしまうとも言われています。

この状況をなんとか変えたいと思います。
ということで、私はこのフォーマットに意見を書き込んでメールしようと思っています。
https://sites.google.com/site/1action4animals/public_comment/mail_text02
メールの宛先は shizen-some@env.go.jp 。タイトルに”「動物取扱業の適正化について（案）」に関する意見”と書いてください。

締め切りは8/27（土）！もうすぐです。賛同してくださる方はお早めに。
今回をのがすと、5年後まで法改正のチャンスはありません。

社員コーダ—時代の話

私は、ざっくりした言い方をすると「デザインの重要性はそこそこ」派です。

これはおそらく個人的な恨み（！）も関係していると思います。
というのも、私が制作会社でコーダ—として仕事をしていた頃って、今とくらべものにならないくらい「デザイナー＞コーダ—」の図式がハッキリしていたように思うのですね。

分かりやすい例をあげると、デザイナーはクライアントとの打ち合わせに同席するのに、コーダ—は連れていってもらえなかったんです。基本的にコーダ—は、社内で仕事が落ちてくるのを待つだけ。気づいたときにはかなり無理のあるデザインカンプがクライアント合意のもとでできあがっていて、「今さら変更できないから」と言われて四苦八苦して実装したこともあります。そりゃ何年経ってもギリギリしますわね（笑）

ただ、その当時の私は「くやしいけど仕方ない」と思ってたんです。
だって、Webサイトは結局は「見た目」だから。
HTMLソースの美しさなんて、制作者の自己満足。クライアントにとっては意味のないことだから。

でもその一方で「なんかヘンだ」という思いも持ち続けてました。言いようのない違和感を解決したい＋自分が愛してやまない「コーディング」という仕事の意義を探すため、手当たり次第に書籍を読んだものです。

そんなこんなで何年か経って、いつの間にか自然と「HTMLにもデザインにも同等の価値がある」と思うようになりました。
今ならハッキリ言えます。Webページの価値は、HTMLの質（だけじゃないけど）に大きく影響されるということ。
Webページの裏側は、クライアントにとっては意味がないかもしれないけどユーザーには意味があるということ。

そう思うようになった理由はいろいろです。SEOとか、ブログの台頭による「読み物」重視の傾向とか、「アクセシビリティ」という考え方の一般的な広まりとか。
特に大きいのはCSSを使うようになったこと。それまでのHTMLは「デザインカンプを再現するためのもの」でしかありませんでしたが、装飾に関する記述をCSSにまかせるようになったことでHTMLの役割が全くといってもいいくらいガラッと変わったんです。

私自身、CSSを使うにあたり、HTMLに対する意識を変える苦労は相当なものでした。

…そう、マークアップ＝原稿を読み込んで正しい（と信じた）タグをつける作業は、真剣にやろうとするとそう簡単にはいかないハズなんですよ。マークアップを生業としているみなさん、大丈夫ですか？

デザインとコンテンツは切り離せる

いろいろ書いてますが、つまりは「見た目」（CSS）がボタンひとつで切り離せるようになった今、デザインだけじゃなく「コンテンツ」（HTML）もしっかり気合い入れて作り込まないといけないよね、ってことです。どっちが大事でどっちが要らないとかって単純な話ではなく。

冒頭に書いた「デザインの重要性はそこそこ」という言葉は、「Webにおけるデザインで重要なポイントは『見た目の美しさ』ではない」と言い換えることもできます。読みやすい工夫だったり適切なコントラストだったり、そういった「使いやすさ」がベースにあって、その上でさらに美しくて印象的な装飾がほどこされていれば言うことないね、というレベル。

昔話ばかりで恐縮ですが、かつては1ページごとに細かいデザインを変えるのが当たり前でした。そうしないとユーザーに飽きられるとみんな信じていたわけです。でも女子高生も老人もブログを使うようになって、「肝心なのは見た目じゃなく内容」だってことにみんなが気づいたんだと思います。たとえ同じデザインフォーマットの中におさめられていても、ある日のエントリーはおもしろいし、別の日はおもしろくない…こともありますよね。

ちなみに私の日常巡回リストには「見た目が美しいサイト」が一切入っていません。
ほぼ毎日欠かさず見るのは、ニュースサイトとか誰かのブログ。で、「おもしろそう」と思った記事はInstapaperに登録します。登録した記事は移動中にまとめて読みます。
こんな閲覧方法をとっている私のようなユーザーにとっては、そのサイトがどんなに美しい装飾で覆われていても目に入りません。私が欲しいのは、私にとって大切なのはコンテンツなんです。

Webは、デザインとコンテンツが切り離せる希有なメディアです。
当たり前だけど、印刷物とは違うのです。

Webデザイナーの明日

「美しい装飾の優先順位が低いなら、デザイナーの価値はどこにあるのか」と思われるかもしれません。

もちろん、あります。ありありです。
私みたいにデザインセンスの無い人間はそもそも、見る人に「使いやすさ」どころか感動を与えるようなデザインなんて実現することはできないのです。まさに、餅は餅屋。

もし目の前のWebデザイナーさん（もしくはご自身）が「見た目の美しさ」 だけに意識を向けているのなら、その意識を「使いやすさ、機能美」にも向けることが必要です。どうやったらユーザーに「使いやすい」と感じてもらえるのか。これは、持ち前のセンスだけに頼っていては実現できないでしょう。継続的な研究や情報収集が必要です。また、時には基本のデザインセオリーを勉強し直さなくてはいけないかもしれません。

そして、Webデザイナーが知らなくてはいけないことはグラフィックソフトの使い方だけじゃありません。
CSS3で新たに追加されることになるプロパティ、どんなものがあるか知ってますか？
jQueryがどんなものなのか自分の言葉で説明できますか？
Wordpressのインストールをやったことがありますか？

「Photoshopチュートリアルまとめ」みたいな記事をいくら熱心に読んでいても、Web全体の技術を知らないと新しい表現の可能性を見逃します。誰かがつくったサイトを見てから試すのでは、すべてが後手後手になりますよね。
別に、コードを書く必要なんて無いんです。「何ができるのか」くらいは知っておきましょうよ。

—–

てなわけで、まだ頭の中で考えていることの1/10もまとまってない気がするのですが、とりとめがなくなっていきそうなのでこの辺で。

内容は、タイトルどおり大変興味ぶかいものでした。その中から印象的だったお話をいくつかピックアップします。

色彩設計のポイント

機能性

ここで言う「機能性」とはユーザビリティを指す。ただしユーザーに「見えて」いることが前提。

• 文字、図の読みやすさ
• リンクの分かりやすさ
• 視線の誘導（どこを見せたいのか）
• 区別のしやすさ（情報パーツ）

視覚的な訴求力

• 配色の調和、美しさ
• 印象を残す（美しいだけでは印象が残らない）
• 心理的な効果

色彩戦略

• 業種、商品、人物に合った色
  歯医者のサイトなら、濃い色は避ける→たとえば赤い色だと印象が強烈すぎる、痛そう…
  色と形はセットで認識される
• ユーザーの期待に応える
• 競合との兼ね合い
• リニューアルの際、すでに売れているサイトの色を無理に変える必要はない
• いま現在アクセスが少ないのであれば、大胆な色彩変更にチャレンジする価値あり
• 可能ならロゴの色変更にも踏み込む

配色コンセプトの策定

• 色はくわしく決める
• その色を使う理由をはっきりさせる
• 色名や色の由来などを添えると説得力が増す
• 色の話は、できれば書類にする（それぞれのパソコンを前にして色の話をしても意味がない）
• カラーバリエーションを提出するのはプロ失格？
• 使う色の分量をあらかじめ決める（不満があれば分量を調整する）

運用

• 最初の段階で絞り込んだ色以外は使わない
• クライアントの「好きな色」も少し入れておく（交渉術として）
• クライアントが更新していく場合には特に、テキストについてのカラーパレットをつくって支給する

坂本さんのお話は終始実践にもとづいた内容で、大変参考になりました。
色彩設計は「良いサイト」を実現するためだけでなく、クライアントによる不条理なダメだしをされないための、つまり制作者の武器になるという意味でも重要だということがよくわかりました。

制作全般に言えることですが、つくり手が感覚にたよっていては、当然ながらクライアントも同じように感覚でものを言うことになります。たまたまセンスが合えばなんの問題はありませんが、そうでなければ泥沼です。

なぜそうするのか、そうすることにどんな目的があるのか。
そういった確認をひとつひとつ積み重ねていくことにより、制作者と発注者がともに気持ちよく仕事を進めていけるのではないでしょうか。

発注者への説明は制作者の責任であり、説明するには確かな知識が必要です。坂本さんの最新著書「ウェブ配色 コーディネートカタログ」をあらためて読み返すとともに、色辞典を一冊買おうかなと思っています。

—–
15:20追記
Webページにうすーく背景色をひいておくと印象に残りやすい、というお話も「ほう！」と思いました。