基本は以下。

1. 宛名
2. 自分の名前と挨拶
3. 本文
4. 締文
5. 署名

で、特に本文の中身の序列順が重要。

• 重要ないいたいことを先(上)に持ってくる。
• いくつかある場合は項目に分ける。(さらに子要素としていくつかあるなら、その中でまた項目に分ける。)
• 出来るだけ個条書きにする。

「本メールでは何を伝えたいか・聞きたいか」をまず最初に。その後、いくつかの項目に分けて伝えていく。その中でも「一番聞きたいこと」「これをやって欲しい」など、相手にアクションを求めるものを先に記載する。
これはまずはじめに読み手に心構えを持たせるため。ただ何の目的もなく読んでいくとどこが重要なのか後になって気づき読み直す必要が出てくる。これからこの話をするからねとまず伝えた上で話を進めると、受け手も何に注目してみていくべきか注意して読み進めることができる。
また、長々と文章を追っていくのは、意外と面倒なもの。文字量が多いだけでパッと見うわっとなるし。出来るだけ箇条書きになっている方が、読み手の時間も短縮されるし、伝わりやすい。書き手にとってもいちいち文脈を考えて敬語を間違わないように気をつけて…とやっていくより、先に「以下に列挙しますのでご確認お願いいたします。」とでもして、(敬語は使わずに)箇条書きにした方が時間短縮。

株式会社〇〇〇〇　誰其様

牧野工房の大杉です。
お世話になっております。

2点ほど確認したい点がございますので、以下に記載いたします。
誠にお手数ですが、ご確認くださいますよう、お願いいたします。

1) 公開日を教えてください。
※もし決定していれば。
※スケジュール調整の参考のため。

2)以下のどの部分をh1とすべきか？
・ヘッダー部 企業ロゴ
・ヘッダー部 紹介文「◯◯◯◯の◯◯は〜」
・各ページの見出し
※SEOの観点からサイトによって違うので確認まで。
※特に指定がなければ「ヘッダー部 企業ロゴ」部分とする。

以上、何卒よろしくお願い申し上げます。

署名

ただ、簡略化しようとしすぎて、重要なことを省かないように注意。
あまり補足がややこしくなるようならば、伝えたい項目だけ先にメールしてしまい、後から口頭(電話など)で伝えればよい。

少々複雑ですので、お電話にて補足させていただきたいと思います。
本メールをご確認いただけましたら、
大変恐縮ですが、お電話いただけますでしょうか？
私の方は〇〇時以外はいつでも大丈夫です。

いきなり電話してしまうと、事前情報がないのですぐに頭が切り替わらなかったりややこしくなるが、この方法だと難しい話も、まず何についての話かを念頭に置いた上で話に入ることが出来る。
相手にかけてもらうのだから、自分はいつなら受けれるか伝えておくのも礼儀だろう。電話しろといわれてかけてみたら打ち合わせで外出戻りも分かりませんなんて言われたら腹が立つでしょ？
あと、ちょっとコスいが、これだと電話代は相手負担なのもおいしかったりする。

意外ときちんと理解せずになんとなく使っている人が多いだろうと思うのでエントリー。

TO

宛先。
必ず読んでもらいたい・返信等なんらかのリアクションが欲しい相手。

CC

カーボンコピー。
一応読んでおいてもらいたい・返信はなくてもイイけどログとして流しておきたい相手。
送信者全員にアドレスが見える。

BCC

ブラインドカーボンコピー
他の送信先にアドレスを知られたくない相手。
ヘッダー情報から削除されるため送信者にアドレスが見えない。

まず、BCCにするべきかから考えると解りやすい。他に誰に送ったか知られたくないという「隠し事」的な意味合いだけでなく、逆に隠さなければ失礼(というか個人情報漏洩)になる場合もある。例えば年賀メールなどの同報メールの場合、CCやTOでみんなに送ってしまうと送られた相手の立場としても見ず知らずの人にアドレスが知られてしまう訳で好ましくない。そういう場合は、BCCにする。

それ以外の相手はCCかTO。ただし、CCにした相手には返信の義務はないと認識すること。あくまでコピーを一応渡しているのだ。なので、必読して返信を貰いたい相手はTOになる。つまり、全員から返信を貰いたい場合は、CCではなく全員をTOに含めるのが正解。

何かを実行しようとした際、俺は目的を忘れるなと強く押していた。
何の為に今それをするのかを常に念頭に置いた上で行えば、結果が逸脱しないからだ。

ただ、広義で考えていると、文頭のようなことを思った。

結局、今、俺らが携わっている仕事はすべて、金が目的だろう？
じゃあ、金儲けのためであれば、やってもやらなくてわからんようなことはやらなきゃいい。
すべて、より優れるがコストの掛かる方法よりも、それよりは劣るがコストが掛からない方法を選んで進めればいい。
金儲けが目的ならばそれが最善だろう。

金儲けの為だと言い切れるのなら、逆にそれはそれですごいし、必要最低限を見つけて仕組みを作ってくれ。
もちろん、その際は携わる者たちに金儲けのための思想をきっちり伝えなければただの悪質業者になっちまうと思うけどな。

でも、そんなきっぱり金儲けのためだけにやってる奴なんてなかなか居ないだろう？
当初は何らかの志があって始めたはずだ。

Webに身を置いているものにとって、サイトを作るということはどういう事か、今一度よく考えて欲しい。
今何故そのサイトを作っているのか？

小さくとも、志があるのであれば、それを常に忘れないでくれ。
さすれば例え歩幅は小さくとも、一歩ずつ前へ進むだろう。

なんてでかい口を叩く割りには為っていない自分に嫌気がさしつつも、今週も頑張ろうと思った月曜の朝。

解決法

1、対象ファイルをコピー
2、コピー元ファイルを削除
3、コピーしたファイル名を任意の名前に変更

例）index_IMG_01.jpgの場合
1、index_IMG_01.jpgをコピー　（Copy of index_IMG_01.jpg等適当な名前でOK）
2、元のindex_IMG_01.jpgを削除
3、コピーしたファイル（Copy of index_IMG_01.jpg）をindex_img_01.jpgに変更

なぜSEOスパムとされる可能性があるといわれているか

間違わないで欲しいのが、画像置換を行う行為自体はSEOスパム行為ではない。文字を飛ばしても画像に置き換えているんだから、装飾のために見た目を変えているだけで、画像置換自体は文字情報を隠しているという訳ではないので、装飾のために行っている画像置換はSEOスパム行為ではない。ただ、この画像置換で使っているCSSテクニックで、テキスト情報を画像に置換して表現しているのではなく、「見た目は隠してあるからそんな情報が埋め込まれていることは分からないんだけど、実はSEO効果を狙ってHTMLにテキストが埋め込まれている」ということを行うことができ、これは明らかにSEOスパム行為である。この行為が増えた場合は、検索エンジンがこれをSEOスパムと判別するようになるかもしれないので、これと同じテクニックを使っている前者を区別するすべが難しいため、SEOスパムとされてしまう危険性があるとされている。

アクセシビリティの為に、例えば音声ブラウザの為に、見た目上は見えないんだけど音声ブラウザで読み上げると「ここからナビゲーションです。」といった情報を出すというのもあるけど、これも上記の画像置換と同様にSEOスパムとされる危険性はあるとされている。スパム行為じゃないのにね。

実際に画像置換のテクニックを使っていたサイトが、SEOスパムとされて検索エンジンに表示されなくなったりしたという話は聞く。ただ、これの真偽は、SEOを生業としていない俺には分からない。

そういや、例えばスペーサーにテキストを入れて記述しまくるSEOスパムとかあったけど、スペーサー使うとSEOスパムとなっちゃう危険性があるからスペーサーは使わないって話は聞いたことないな。

文書構造と装飾をHTMLとCSSに分けるべき

例えば見出しの場合、見出しとは「それ以下のコンテンツが何を表しているかを簡潔に表し、文章を読みやすくするもの」なので、デザイン性はHTML文書としての情報には含まれず、「それ以下のコンテンツが何を表しているか」までが文書としての情報なので、テキストでマークアップしてデザインはCSSで再現するべきだとうい考え方がある。

これには利点がある。
同じHTMLで状況に応じてデザインを変えるということができる。例えば、iPhoneで見たときに見出しも画像でマークアップしてたら、重いし、デザインも変えれない（それこそimgを背景画像で置換すれば変えれる）けど、分けてあれば解決する。他には同じHTMLでCSSだけ変えて、まるっとサイトデザイン変えることもできる。blogなんかでは偶にある。

これらのことから、俺個人の理想としては、ロゴや挿入画像などのビジュアルも含めてコンテンツであるから、その見た目でその幅その高さであることまでが情報としてHTMLにマークアップされるべきであり、imgでwidthとheightとaltを設定すべき。見出しやリード文・背景などは、ビジュアルはHTMLに記述されるべきではないから、テキスト等でマークアップしCSSで装飾すべき。よって画像置換も現状で出来るCSSのテクニックとして全然有りだと思うが、そもそも、フォントとか画像にしないと駄目なデザインじゃなくて、デバイスフォントでも見栄えのよいデザインをすればいいじゃんと思う。なんなら、サイトにフォントを埋め込む？方法もあるよね。現状で使えるもんかは置いといて。
ていうか、SEOスパムなんてあるから問題になるわけで、今使えるCSSの仕様を最大限に利用して装飾を制御しようという試みは非常におもしろく素晴らしいことで、本来は問題視されることではないと思う。

因みにGoogleは、自サイトのロゴをdivと半角スペースでマークアップして背景画像として表示している。文字を飛ばしたり文字の上に被せたりしている訳ではないが。
もしかすると、画像置換がスパムと認識される可能性があるから、こうしているのだろうか？
しかし、これではHTML文書としてはどうかと思う。

こういう考え方に対するいいわけ

自分でいいわけ的にこういう考え方に対して反論してみる。

そのwebサイトにとってその情報はどんなものとしてHTMLに記述されるべきかと考えてマークアップすればよいって考え方をすれば、ある意味文書として情報だけHTMLに記述しているともいえるんでない？

そのwebサイトにとって、「そのデザインであることも含めて見出しとしての情報」であれば、例えば、印刷時にもそのデザイン通り表示したいってことは、「そのデザインであることも含めて見出しとしての情報」なのだから、そこまでを記述してHTML文書としてなりたつからimgでマークアップすればよい。

現状は「そのデザインであることも含めて見出しとしての情報」であるケースが多いように思う。「いかなる状況下においてもそのデザインであること」は重要視されるし、リニューアルの際は、コンテンツや構造自体が変わる。コンテンツや構造が変わらずにデザインだけ変えたいなんてケースは稀だ。

コーダーとしてはどうするか

以前は、普遍性が高いものだけ画像置換を行っていた。例えば、グローバルナビや各カテゴリの見出しを画像置換するし、それ以下の階層の見出しになると数も多くなって工数が多くなり対応しきれないため行わない。理由としては、冒頭の理由以外に以下の2点があったから。

• imgで入れると変な隙間が出るときがあるので飛ばした方が逆に工数がかからない場合がある
• 印刷時はそれ用のレイアウトを用意するようになるだろうと考えていた

しかし、現状は、以下の3点から通常は画像置換を行わないとしている。

• 噂の出所が増えてきた
• 今後altもすべての検索エンジンが検索対象に含む可能性はある
• 「印刷時にブラウザ表示と同じように表示したい」という要望が多い

検索エンジンがCSSまで読むことはないんじゃないかなと思うけど、SEOを生業としていない俺はそこまで詳しくもなく動向も読めず答えはだせないので、より無難な選択をすべきだろう。また、もし印刷時にブラウザ表示と同じようにしたいという要望が後から出てきたときの工数を考えると、かなりの手間になってしまう。よって、通常は画像置換を行わないという選択をしておいて、もしSEOやCMSなんかの運用上の理由で、画像置換を使ってくれという場合に使用するとしておくのが妥当だという結論。

まとめ

なんだか色んな話をまぜちゃってめちゃくちゃになってる気もするが、結局は、SEOはトレンドもあるので明確な答えは存在せず、都度対応するしかないんじゃないか、と思う。そのサイトで画像置換を行うかどうかは、今後の対応の工数と現時点での効果を比較し、妥当だと思われるところで手を打つのが無難なんじゃないかな。

画像置換については以下のメリット・デメリットをふまえた上で、そのサイトにとってどうすべきかを検討し、使用するしないを決定すべき。特に指定やこだわりがない場合は、imgで入れておくのが無難。

メリット

一枚のHTMLファイルからいろんなデザインを再現可能

HTML自体が軽くなる

再利用性が高くなる

デメリット

SEOスパムとされる可能性があるかもしれない

何もしていない場合の印刷時など、CSSオン・画像オフ環境で表示されない

MacBook を買って、いくつかwebオーサリングソフトを試してみた。結果、表題の件に行き着いた。なんだかんだで、Dreamweaver がいい。
というのは、あるかないかによってコーディングスピードに大きく関わってくる4つの機能を併せ持っているからだ。

1. 他のファイルとリンクしているファイルを移動したときにパスを更新
2. スニペット+キーバインド +閉じタグの補助+使用しているid/class名入力補助
3. 選択したテキストを囲んでタグをつける
4. 選択したHTMLタグに適用されているCSSプロパティの表示

上に挙げた4つの機能はどれも重要で、これらすべてを兼ね備えたものは他になさそうだった。

例えば、Codaというソフトはかなり気に入った。見た目が Mac らしくてとても美しい。ただ、機能の拡張性はないように思う。2のかわりに文字列tabで登録したコードを入れることができるのだが、3ができない。マークアップの際は、テキストを原稿からコピーしてきてからタグ付けというフローも多くなるためかなりのスピードダウンになる。2と3の併せ技はとてもすばらしいのだ。これは、vimのプラグインで凄く快適にできるようだが、これはオーサリングソフトではなくエディタなので、1や4はできない（と思う）。

1や4については、小さいサイトを制作している時はよいが、大きなサイトを制作するにつれて効果が大きくなってくる。中には途中でディレクトリ構造を変えなければならないときもある。CSSだって量が増えると意図しないところにかかっていたりする場合もある。これは特に複数人でやっていると、しっかりルール決めしていても、自分が思っても見ないところでハマったりするものだ。どこに書かれたどんなプロパティを継承しているかをいっぱつで見分けれるのは、そんな場合に効果絶大だ。

Dreamweaver は「</」を入力したらタグを閉じる、という設定にできるところもよい。これができないと、いちいち閉じタグをすべて打たなくてはならない。細かい機能としては「&」を入力すると、コードヒントで特殊文字がでてくるのもよい。

ただ、これは使用した Dreamweaver CS4 が試用版だからかもしれないが、Dreamweaver 8 の時にはできていたファイル一覧から画像をCSSファイルにドラッグするとパスが入る機能が使用できなかった。今までできてたものができなくなるとは何事だ？
また、環境設定で設定した文字コードと違うコードで記述されたCSSファイルを編集するときに文字コードを誤って認識、且つ、ツールバーなどから文字コードを変更することはできずいちいち環境設定を開かなければならない。というエディタとしては最悪な部分も併せ持つ。
その他CS4になって追加された機能のすべてを試した訳ではないが、よいと思ったものは何一つ無い（コード手打ちだからなのかもしれないが）。
コードナビゲータなんかは文字を入力している最中に出てきて打ってるコードが見えなくなる。うざいのでオフにした。
しかしながら、これらを差し引いても上記4つの機能を兼ね備えているということは重要であり、Dreamweaverが優れていると感じた次第だ。

次回は「Dreamweaver のこれだけはやれ！」を書こうかな。