2019年04月25日カテゴリ:Webサイト運用

こんなHTMLファイル名は嫌だ!知らないと恥ずかしい「名付け」の問題(後編)

こんなHTMLファイル名は嫌だ!知らないと恥ずかしい「名付け」の問題(後編)

Webサイトにとって「名前」がどんな役割を担っていて、うっかりするとどんな問題がおきるか?については前編で解説しました。
訪問者にとってわかりやすく、管理者にとって合理的な「名前」は、具体的にどんなところに注意すれば良いか、名付けの処方せんをご紹介します。

ざっくりわかる処方せん

  • 日本語NG

    これはもう、「絶対」です。
    ファイル名に日本語というか、マルチバイト文字を使うことは避けましょう。

    ファイル名がカタカナ以外の半角英数記号ではない場合、URLとしてはそのファイル名を一旦UTF-8でエンコードし直し、さらにパーセントエンコードした文字列に変換しなければなりません(RFC3986 2.5, URL Standard 4.4)。Wikipediaの日本語な記事のURLをコピーして、貼り付けてみるとやたらと長い記号を交えた文字列になってしまう、例のアレです。パーセントエンコードされた状態は扱いにくいだけでなく、パスの指定をミスするなどの事故につながりかねません。

    無難なのは英語にしておくことですが、適切な翻訳語がない固有名詞などの場合、ローマ字綴りでもよいのでアルファベットにしましょう。さらに、大文字は使わず、小文字だけにしておくことです。使う文字もa-zと0-9、半角ハイフン、半角アンダーバーとドットに限定しておきましょう。この範囲を使えないOSはそもそも使い物にならないので、後日サーバが切り替わってファイルを移動しなければならなくなった時にも困りません。

    あと、英語にしたら違和感があるような場合は、遠慮せずに他社の例を参考にしてみましょう。
    例えば会社概要だけでも、

    • /company/information/
    • /ja/jp/about/company/profile/
    • /company/overview/
    • /about.html
    • /outline.html
    • /jp-ja/company-japan-over-facts

    など、いろいろな形が使われています。

  • インデックスは省略すべし

    後日Googleアナリティクスなどでアクセスを解析する場合、あらかじめURLが正規化されていると便利です。

    このため、インデックスページについては /index.html や /index.php などのファイル名を省略するようにしましょう。通常のWebサーバでは、URLを「/」で終わらせていた場合、自動的に「インデックスファイル」を参照して表示します。「インデックスファイル」としてどのファイル名を使うかはサーバ毎に設定できますが、通常index.htmlとかindex.phpとかに設定されていると思います。

    仮にサーバの設定が変更になり、「インデックスファイル名」がindex.php から index.php7 になったらどうなるでしょうか?

    既存のリンクすべてを書き換えなければならなくなってしまいます。同様なことはOSやサーバを乗り換えた時に起こりがち。したがって、極力インデックスファイル名は省略するようにしておいたほうが、長期運用には有利です。

  • 詳細情報のページでは抽象的なものを避ける

    会社情報関係でも、いわゆる会社概要の表だけがあるページと、その下層に複数のページ(沿革とか経営理念とか)を持っているためにインデックスページになっている場合では、適切な名前の抽象度が違います。

    インデックスになるページ(カテゴリーページなど)は、下層に含まれるページ群を包括する意味の語を当てる方がよく、これらは情報設計の中でも分類法とも関連するのでこちらの記事もご参照ください。

    そして、インデックスではない下層のページ(詳細ページ)においては、そのページ独自の内容について表すことができる語を選んであげる必要があります。その場合、できるだけ具体的な言葉を選んであげるとよいでしょう。実際に記事を編集する時、「company-history.html」と「info05.html」のどちらが作業ミス・検証ミスが少ないかは明らかです。一方で「company-history.html」が会社の地図を表すページだった場合、多分グッダグダになるでしょう。

    例えば事業所の紹介のページで、「埼玉営業所」が大宮にあった場合を考えましょう。その場合、

    • /company/branch/saitama-office.html
    • /company/branch/saitama-omiya.html

    などとなっていれば、かなり適切なネーミングになると思います。

  • 変化を収容できるようにする

    未来のことは誰にもわからないのですが、もしも大宮の埼玉営業所の事務所が手狭になり、引っ越したいけどちょうどいいところが見つからず、とりあえず西大宮に分室を作っちゃったりする場合、分室のURLはどうなるべきでしょう?

    実はこのような場合に、URLの良し悪しがかかわかってくるわけです。

    • /company/branch/saitama-office-annex.html
    • /company/branch/saitama-nishi-omiya.html

    といった感じでしょうか?埼玉をよくご存知であれば、saitama-nishi-omiya.html に、そこはかとない「分室感」が出てるのは明らかだとは思います。しかしながら、対象とする訪問者が全国基準であるならば、 saitama-office-annex.html の方が圧倒的にわかりやすいのではないでしょうか。一方であくまで「分室」であることを考えると、営業拠点としては埼玉営業所の一部であるわけですから、新たにページを作らない、という方針もアリです。

    さて、さらに発展が著しく、分室はそのまま、所沢に第三営業所ができてしまったらどういうURLにしましょう?

    • /company/branch/saitama-third-office.html
    • /company/branch/saitama-tokorozawa.html

    会社としては三番目の事務所だから「第三営業所」が自然かもしれませんが、初めて訪れたユーザーに「第三」が持つ格下感が必要でしょうか?実際には埼玉西部をカバーするのでしょうから、西部感あふれる saitama-tokorozawa.html の方が良いかもしれません。というか、そもそも営業所の名前自体、第三営業所ではなくて、埼玉西部営業所とかの名前にすべきだったかしれません。その場合はsaitama-office-west.html などでしょうね。

    場所に注目した説明になっている場合、近隣に増殖した営業所を1ページにまとめてあげるという手もありますが、営業所ごとに営業時間が違ったりする場合はページを分けた方が良さそうです。その場合、別なことを示す文字列を入れる場所をあらかじめ決めておくと、迷わずに済みます。

    順番や前後性によりどうしても数字を使う場合、番号は1桁ではなく2桁以上にしておくべきです。1と2の間に10がくるの、嫌ですよね?

  • CMSの操作に気をつける

    便利なシステムや機能は、ユーザーから学習や注意する習慣の必要性を忘れさせがちです。

    最近は乗り換え検索のおかげで地下鉄の路線図が頭に入っている(最新の状態に更新されている)ことは珍しいのではないでしょうか。というか、そもそも電話番号なんて覚えないですよね?昭和の時代は公衆電話にかじりついてジーコロしてたわけですが。
    そんなわけで、ファイル名を自動的に付けてくれるCMSの機能には十分に注意しましょう。

    中には記事タイトルの日本語をそのままファイル名のデフォルト値にしてしまうこともあるし、元のファイルをコピーしてテンプレートがわりにした時に、自動的に「copy_」という接頭辞をつけてくれる(システムとしては別名をつけないと扱えないので当然ですが)機能により「名前をつける」というプロセスを忘れてしまわないようにしてください。特にニュースリリースとかについては、外部からの流入のことを考えると二度と変更できないので、注意が必要です。

    当ブログでも初期の頃の記事でよく読まれている「post-12-150204」(「Webサイトリニューアルの目的を明確にするために~ユーザーをカテゴリに分けて考えるの巻(前編)~」)があり、非常に残念です。リダイレクトして新しいURLに変更しても良いのですが、アクセス解析の際に過去の履歴が分断されてしまうためこのまま残すことになってしまいました。

    しかも、前編と後編に別れているのに、後編も「post13-150204」というなんの関連性もない(あ!しかもこっちだけハイフンがない!!!)という、返す返すも残念で恥ずかしい限りを晒しております。

「名付け親」になる楽しみ

「名前」は、インターネットの上で何かを指し示す際に必要であり、ユーザー(人)も検索エンジン(も一人のユーザーと考えたほうがよい)も共通理解できることが大切です。

特に詳細ページにあたる「エンティティ」には固有化された名前が必要です。

そのページの情報を必要とするユーザーが想起できるキーワードでたどり着け、意味のあるコミュニケーションになるように、そのページの運命に対応したものを選び出してあげるのは、そのページの文字通り「名付け親」になる、ワクワクする仕事の一つです。どうか、名付けられたページが改名を望んで家裁に駆け込むような名前をつけないですみますように。

で、この記事のファイル名はどうしたらいいでしょうね?

やっぱり「naming問題2 のコピー最終_final2.html」ですかね?(もちろん、冗談ですよ)

Getting Betterとは

企業の忙しいWeb担当者の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICA Lab.のWebサイト構築サービスについてはこちら
https://www.imagica-imageworks.co.jp/web/

「株式会社IMAGICAイメージワークス」は、2018年10月1日に「株式会社IMAGICA Lab.」となりました。

トップへ