「ちょっと」という長さではなくなってしまいましたが。
ごきげんようです。今日はWeb屋な毎日考です。

前に、表記の揺れについて考える（前編） (07/06/26)という記事で、サイト内の文言ルールは統一した方がいい、そもそもバラバラだと気持ち悪くないスか？ ええ？ …というお話をしました。

表記の揺れの話、後編が滞っているのはさておき、今回は一人で作っているときもさることながら、複数人でサイトを更新（運用）するとき特に気をつけたほうがいいと思うことについて、かいつまんでお話しします。表記のみならず、複数人で運用するからこその「作り」の統一感は欲しいところです。

もちろん私がこんなところで書くまでもなく、各社さん、各部署さん、各Webユニットさん、フリーの方、サイトルールなりコーディングルールなりを作って制作にあたっていることでしょう。もし参考になるものがあれば教えてください。

まず、前述の「前編」で触れた表記の話。
英数字、記号、スペースの全半角、固有名詞。そして重要視したいのが、日本語の漢字・かなの表記。「問い合わせ」もしくは「問合せ」といった表記の違い、「漢字を開く」といいますが、これについては非常に参考になる記事があったので、挙げさせていただきます。

• 表記規則：企業サイトで使用する「ひらく漢字」「ひらかない漢字」（コリス）

このほか、いくつか挙げていきますね。
本当はひとつずつじっくり書いてみたいのですが、そうなるといつになるか分からないのでねー。うん。私のことだから。気になるものは、後日記事にしようと思います未定未定。（予防線張りすぎ）

ファイル管理

ディレクトリ名、ファイル名の付け方を統一する

ファイル名に2バイト文字を使わない、大文字を使う・使わないなどの認識。まあ、小文字で統一しておくのが無難ですよね。

製品案内のページを「seihin」とするか「products」とするか。日本語のローマ字読みか英語か。ローマ字の場合「hu」か「fu」？ 「shu」か「syu」？ なども。各人のクセってありますが、組む人によって違うというのもかっこわるい話です。

画像ファイルの名前は、種類によって「title_xxx.gif」「txt-01.gif」「bg_green.gif」など付けたほうがわかりやすいかなあと。名前付けはこれに限った話ではないんですが、いかに作った人以外にもわかりやすくするかだと思います。

ファイル名や画像の名前に続けて連番を付ける場合、「01、02」か「1、2」か。その区切りはハイフンかアンダーバーか、もしくは入れないか。などなど。

ディレクトリ、ファイルの置き方を統一する

CSSを入れるディレクトリはルートに置き、サイト内のすべてのCSSファイルをそこで統括するか、もしくはコンテンツごとにCSSを格納するか。サイトやコンテンツによって管理しやすさはさまざまなので、どちらとも言えません。

イメージやフラッシュ、JavaScriptなどの置き場も同様です。また、会社によって違うのがイメージファイルの置きディレクトリは「img」か「image」か。フラッシュは「flash」か「swf」か、などですね。（そういや最近は使わないけど、透明gifも会社によって「spacer.gif/space.gif」「pix.gif」の二通りに分かれていました）

ファイルのバックアップとバージョン管理

ファイルを直接さわる、ローカルでいじっていたものを上書きするなどの場合は、必ずオリジナルのバックアップを取ることを前提付けておきたいですね。ディレクトリごと取るにしても、ファイル単位で取るにしても、バックアップの場所やバックアップファイル名を決めておく。これにより、そのファイルがいつのバージョンなのかをみんなが把握できます。重要ですよね、バージョン管理。

コーディング

HTML・CSSファイル中のインデント、改行

付けるか、全く付けないか。付けるとすれば、スペースなのかタブなのか。改行はどのような場合にどれだけ空けるか。

属性

altの付け方の同期。また、title属性を必須にするかや、属性のおおまかな順番など。（あるべき属性がないのは問題外）

同じサーバ上のファイルへのリンクパスの書き方

ルートディレクトリからの相対パス（ルート相対パス）か、相対パスか。使い分けるのであれば、どれはどのようなケースか。（グローバルナビゲーションのみ、ルート相対パスを使うなど）

CSSのクラス/id、要素名

margin/padding、width/height、border/bgなどの大まかな順番。要素の書き方って人それぞれで、オーサリングツールかエディタ手打ちかによっても変わっていくので、完璧に揃えるのは難しいと思うけど。

例えば色に関するクラスで、class="color01"、class="color02"などと順番に付けていくのか、それだと字面だけで色が推察できにくい（オーサリングツールを使っていない場合）ので色名やRGBで付けるか。ファイル名同様、ローマ字読みか英語か。

新しくクラス/idを作る場合や既存のクラス/idに修正を加える場合の取り決め。日付や更新者の名前を書くとか、必ず文末（もしくはセクション末）に書くとか。

コメントアウト

個人サイトもさることながら、企業サイトの運用ではこれをいかに使うかというのがやっぱり鍵だと思います（本来のコメントアウトの主旨から外れているとしてもね）。詳しく書くと長くなるので、使う場合は分かりやすく冗長になりすぎないコメントを。

その他運用

原稿のリライト

いわゆる「クライアントさんの元原稿をページに流し込み」という作業をしている場合、誤字脱字や間違いと思われる記述、サイトルールに合わないと思われる箇所、どこまでをリライト（修正）の範囲とするか。もしくは、原稿至上主義とするか。前もってクライアントさんとの認識の同期を取っておく。

機種依存文字の扱いをどうするか。元原稿で数字の箇条書きに丸付き数字やローマ数字が使われていたりします。これを括弧付き数字などに直すか、画像で再現するか。これについては文字参照で実現できるものもあるようですが、私は使ったことはありません。

セルフチェック、ブラウザチェック、動作/表示確認

セルフチェックって流して見てしまいがちですけどね(笑)
とにかく、自分の作ったものは全てが間違っているものとして疑いの目でチェックすること。これはディレクターさんがチェックする際にもお願いしています。

サイトとして、表示できますよとうたっているOS/ブラウザでのチェックは必ず。テキストだけならともかく、CSSやJavaScriptをいじった場合は必須ですね。Flashの場合は、バージョンに気をつけること。フォントの大きさやボックスの幅などは解像度にも気をつける必要があるし、さらに読み上げリーダ/ブラウザに対応しているサイトは、もっと多くのコーディングルールが存在しますよね。あー疲れる。（言うな）

コーディング環境

オーサリングツールの設定とか、ブラウザのフォントサイズ・表示サイズとか、サイト制作/運用に関わる人たちの環境はできるだけ同じにしておくと後で楽です。エディタについても、半角/全角/インデント/改行などの記号が見えるものを使ってもらったりね。例えば、全角スペースって基本的に使わないので、IMEの設定から全員、変えておいてもらうなどはしていました。（全角スペースは単語登録で十分だったり）

などなどなどなど。
まだあると思いますけど、思い出したらまた。

環境によっていろいろなルールが存在します。必ずしもこれらが合っていると言うことではありませんのでご了承を。

まあね、ファイル管理やコーディングについては、既存のディレクトリ構成やソースを見れば、おおよそ見当付くことがほとんどなんですよ。だけどきちんとルールにしておかないと、いや、しておいてさえ、トンチンカンなことしてくれる人多いんだよねえ。悲しいかな。

情報の共有

とにかく、複数人で同じサイトのコーディングや運用をしていくために一番大切なのは「意識」の同期を取ること。そしてもちろん情報の共有をすること。いろいろなことを透明にしておくこと。つまり、情報を見えやすく、わかりやすくしておくこと。

社内などではメールやメッセンジャーなど、「作業に入るよ」「作業が終わったよ」などをいろいろなツールでスタッフ各位に報告し合っていると思います。コーダーの間ででも、ちょっとCSS調整したよとか、ルール付けを変えてみたよとか、小さなことでも共有しあっておく必要は本当に感じましたね。

まあその、制作していると、どうしてもコーディング上標準外というかイレギュラーというか、せざるを得ないこともあります。ありました。そりゃ無ければ素晴らしいと思いますけど、急ぎで直接スタイルを記述しちゃうとか、調整は後回しで「とりあえず組む」みたいなこと。そこらのあいまいさ加減、…うーん、適切さ加減というかな、なども同期。息切れ、めまいにナントカ。

なんといいますか、コーダー（デザイナー）のレベルがほぼ一定、それ以上ということは往々にして無いわけですね(笑)。それをどううまくホウレンソウして、制作・運用にあたるかが難しいんですけど。

作った本人にしかわからないCSSとか、いつの間にか先祖返りしたトップページとか、CSSを知らずにいじられて他のコンテンツのレイアウトが全部崩れちゃってるよとか、修正前の画像に戻したいのに見つからなくてまたかき出し直しとか、アカンイヤンバカンって感じですよ。ね。

コーディングも大変だ。
そんな感じで、本当に息切れしてきたのでそろそろ。
では、また。

<< B級レシピ、麻婆じゃない茄子ぶっかけ丼 | main | やっぱり竹が好き 「備長炭と竹炭を使い分け…る？」の巻 >>