人間のために分かりやすい実用的なURLを設計する方法

Post on:2011年4月14日

検索エンジンなどの機械のためではなく、人間のために分かりやすいURLを設計する方法を紹介します。

サイトのキャプチャ

URL Design

[ad#ad-2]

下記は各ポイントを意訳したものです。

はじめに

あなたは、URLの構造を設計するのに時間をかけるべきです。この記事を読んだ後で、あなたに一つだけ覚えておいてほしいことは、URLの構造を設計するのに時間をかける、ということです。

URLデザインは簡単ではなく、正しい解決方法があると言うことはできません。しかしそれは、他のデザインと同じです。良いURLデザインがあり、良くないURLデザインがあり、そしてその中間もあります。

しかし、それは素晴らしいURLデザインを作ることに対して、最善の試みがないことを意味するものではありません。
私が数年間かけて学んだURLデザインの最善の試みを紹介します。

URLを設計する理由

ブラウザのURLバーは、モダンブラウザにおいて人々を惹きつけるものになりました。それは単にシンプルなURLバーという存在だけでなく、URLの一部を入力するだけでいくつかの候補を完全なURLで表示します。
例えば、URLバーに「resque issues」と入力するだけで、私のブラウザではいくつかの候補を表示します。

URLはユニバーサルです。Firefox, Chrome, Safari, Internet Explorerなどのブラウザをはじめ、iPhone, Androidなどでも機能します。これはウェブにおける一つのユニバーサルシンタックスです。このことを当然のこと、と考えないでください。

あなたのサイトに訪れる一般的なユーザー（専門的ではない）でも、URLを元に90%はナビゲートすることが可能であるべきです。これを達成するためには、あなたのURLが実用的である必要があります。多くのシンプルなルールがそのために役立つことでしょう。

トップレベルのセクションは重要

どんなURLでもトップレベルのセクションは、とても重要です。私の考えでは、どんなサイトでも最初に論議するべきものです。それは、他の技術的なことよりもずっと前に、です。
これは、トップレベルのセクションがあなたのサイトがどのように機能するのか根本を変えてしまうことがある、ということです。

それは大げさだと思いますか？
例えば、1,000,000のユーザーがその大きい影響について後で考えるかもしれません。Facebookのユーザ名の初公開がどれだけ大きなものであるか考えてみてください。
利用できるURLは不動産のようなもので、トップレベルのセクションはその中でも最も良い土地と言えるでしょう。

URL構造を増強する方法

Namespacesは、継続的な利用で簡単に覚えていることができる実用的なURL構造を増強する素晴らしい方法です。ここで言う「Namespace」とは、ユニークなコンテンツを規定するURLの部分を意味します。

例：

https://github.com/defunkt/resque/issues

上記のURLのNamespaceは、「defunkt/resque」です。これが有用な理由は、そのURLの後がいきなりトップレベルのセクションになるからです。この後ろは「/issues」でも「/wiki」でも異なるNamespaceの元で展開することができます。

Namespaceは、きれいにしておいてください。また、効果的であるためには、ユニバーサルである必要もあります。

クエリの文字列

あらゆるサイトのURLにあるクエリの文字列を今までに見てきました。クエリの文字列とは、今みているページに一工夫加えることで、好みに従って調整することができるURLのドアノブのようなものだと考えてみてください。それは、アクションのフィルタリングやソートのために素晴らしく機能するでしょう。例えば、「sort=alpha&dir=desc」とすることで、ソートとフィルタリングを実行することができ、URLバーにも簡単に記憶させることができます。

クエリの文字列について、もう一言だけ。
クエリの文字列を使ったページは、クエリの文字列が無い場合でも機能するべきです。それは異なるページを見せるかもしれませんが、きちんとコンテンツを表示するべきです。

URLにはASCIIを

文字コードがASCIIではないURLは、英語サイトにとっては大変なことになります。
世界には、数多くの文字コードが存在します。その中にはURLにASCIIではない文字列を使用していることもあります。

[ad#ad-2]

URLは検索エンジンのためにではない

URLにキーワードを詰め込んでいるサイトは数多くあります。

例：

http://guitars.example.com/best-guitars/cheap-guitars/popular-guitar

この種のURLは、SEO目的では素晴らしいものだったかもしれません。Googleは2003年のアップデートでこれらのURLのランキングに与える価値を取り除きました。しかしながら、SEO業者は未だにあなたに多くのキーワードをURLに詰め込むようにアドバイスをするかもしれません。
この方法は間違っています。彼らを無視してください。

追加のポイント

  • アンダースコア「_」はよくありません。
    ダッシュ「-」を使うようにしてください。
  • 短くて、一般的で、省略していない周知のワードを使ってください。

URLは検索エンジンのためではなく、人間のためのものです。人々のことを考えて、設計してください。

URLは合意

URLには、長期間にわたり予測可能なロケーションから目的を果たすためのものです。以前に訪れたビジターは自身がつけたブックマークから同じものを見るためにURLを入力することもあります。

ページがローンチした後には、URLを変更しないでください。
やむなくURLを変更する場合は、リダイレクトを使用してください。

全てがURLを持っているべき

理想としては、あなたのサイトの全てのスクリーンがもう一つのタブブラウザで同じスクリーンがコピー&ペーストで再現させるべきです。これはHTML5のブラウザヒストリーとJavaScriptがでるまで可能ではありませんでした。そして、ここにその新しい方法が二つあります。

  • onReplaceState
    ブラウザの「戻る」ボタンに影響されないままにしておいて、ブラウザの履歴で最新のURLに置き換えます。
  • onPushState
    新しいURLをブラウザの履歴の上に入れます。URLバーのURLを置き換え、ブラウザの履歴に加えます（「戻る」ボタンに影響を与えます）。

onReplaceStateとonPushStateをいつ使うべきか

これらの新しい方法は、アンカー要素だけでなく、URLバーで全てのパスを変更することを許可します。これは戻るボタンのエクスペリエンスを作りあげる必要があるということです。

どちらを使うべきか決めるためには、この質問をあなた自身にしてみてください。「そのアクションは新しいコンテンツを生みだしますか？　または同じコンテンツの異なる表示ですか？」

  1. 新しいコンテンツの場合
    onPushStateを使用するべきです。
  2. 同じコンテンツの場合
    onReplaceStateを使用するべきです。
    例：ソートとフィルタリング

最終的にはあなた自身の判断に委ねるものですが、このルールは80%はあてはまるものでしょう。何を見るためにいつ「戻る」ボタンをクリックするのか、考えてください。

リンクはリンクらしく

<a>と<button>のようにエレメントをリンクするたくさんの機能があります。それらのリンクをマウスの真ん中ボタンでクリックしたり、[command]キーを押しながらクリックすると、新しいウインドウで開きます。また、<a>をホバーした際にはステータスバーにURLを表示するでしょう。onReplaceStateとonPushStateを使用する時には、この挙動を破らないでください。

  • AJAXのリクエストのロケーションをアンカー要素のhref属性に記述してください。
  • 真ん中ボタンのクリックや[command]クリックにはJavaScriptのクリックハンドラーに「return true」を記述してください。

クリックハンドラーにスクリプトの条件文を加えるとよいでしょう。
jQueryを使ったスニペットを紹介します。

JavaScript

$('a.ajaxylink').click(function(e){
  // Fallback for browser that don't support the history API
  if (!('replaceState' in window.history)) return true

  // Ensure middle, control and command clicks act normally
  if (e.which == 2 || e.metaKey || e.ctrlKey){
    return true
  }

  // Do something awesome, then change the URL
  window.history.replaceState(null, "New Title", '/some/cool/url')
  return false
})

再利用できないURL

デベロッパーのコミュニティなどでは、再利用できないURLを生成することを好んでいました。そういったURLをここでは「POST-specific URLs」と私は呼び、それはコミュニティのフォームでサブミットボタンを押した際にブラウザのアドレスバーで見かけるURLのことです。このURLはコピー&ペーストして、新しいタブで見ようとしてもエラーを出します。

こういったURLは、もはや弁解の余地はありません。「POST-specific URLs」はリダイレクトとAPIのためのものであり、決してユーザーのためのものではありません。

素晴らしいURLの例

サイトのキャプチャ
  1. URLにはASCIIのみを使用して生成します。
    例：defunkt, resque
  2. 「pull」は「pull request」の省略で、元のワードが容易に想定できる短い一つのワードを使用します。
    例：pull
  3. 「pull」がリクエストした数値は「defunkt, resque」にスコープされます。
    例：175
  4. アンカーはスクロールしているポジションを示すもので、決して隠れているコンテンツではありません。
    例：#issuecomment-619615

ボーナスポイント

このURLは同様に多くの異なるフォーマットを持っています。「patch」「diff」のバージョンもチェックしてください。

おわりに

私は新しいJavaScriptのAPIを使用して、デザイナーとデベロッパーがURLを設計することに時間をかけることを望みます。URLはしばしば無視されがちですが、あらゆるサイトのユーザビリティの重要な部分です。サイトの見栄えのデザインを変更することは容易ですが、URLの構造のデザインを変更することはずっと困難なことです。

私はここ数年をかけて、URLが変化するのを見てきました。時にはAJAXによってURLが犠牲になったこともありました。
そして、最終的に私たちは、ページのレンダリングにパフォーマンスとユーザビリティを備えた筋の通った洗練されたURLがデザインされた地点にいます。

sponsors

top of page

©2024 coliss