優れた URL デザインの例

カイル・アスターがその理由を語る 思慮深い URL 設計が重要 (2010 年):

URL はユニバーサルです。Firefox、Chrome、Safari、Internet Explorer、cURL、wget、iPhone、Android で動作し、付箋に書き留めても使用できます。URL は Web の唯一のユニバーサル構文です。これを当然のことと思わないでください。

URL の遍在性を思い出させてくれるこの言葉は、とても気に入っています。URL は、ブラウザ バーに入力するだけのものではありません。さまざまな方法で使用されています。

• スクリプトやスクレイピング、その他のプログラムによるデータ取得のターゲットとして。
• 参考資料として、物理的な書籍の脚注や付録に印刷されています。
• スキャン可能な QR コードや IoT デバイスのボタンなど、物理媒体を介してアクセス可能な実行可能なトリガーとして。
• さらにもっと！

素晴らしいURLデザインの例を振り返ると^[1] 私が長年にわたり遭遇した URL の中で、見たときに立ち止まって「わあ、これは本当にすばらしい！」と思ったものをいくつか挙げてみます。

スタックオーバーフロー

StackOverflow は、コンピューターと人間のニーズをうまくバランスさせた URL に出会った最初の場所だったと記憶しています。

URL は次のようなパターンに従います。

/questions/:id/:slug

:id 質問の一意の識別子ですが、内容については何も明らかにしません。 :slug一方、は、質問を人間が読める形で言い換えたものであり、実際に Web サイトにアクセスしなくても質問を理解することができます。

美しさは :slug URL 内のオプションのパラメータです。例:

stackoverflow.com/questions/16245767

質問の内容については何もわかりませんが、サーバーがその固有のコンテンツを簡単に見つけて提供できるようにする有効な URL です。

しかし、StackOverflowは :slug URL の一部であり、これにより人間はその URL にあるコンテンツをすぐに理解できるようになります。

stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript/

前述のように、 :slug オプションです。サーバーが対象のコンテンツを検索して提供するために必須ではありません。実際、URL を壊すことなく、時間の経過とともに簡単に変更できます (これは非常にエレガントだと思います)。

確かに、これは欺瞞的に使用されることもあります。たとえば、これは上記と同じ URL ですが、まったく異なるコンテンツを示唆しています (リンクは壊れていません)。

stackoverflow.com/questions/16245767/how-to-bake-a-cake

しかし、何事にもトレードオフはあります。

スラック

Slackが製品について人々に知ってもらうためのマーケティングキャンペーンを開始したときのことを覚えています。彼らはマーケティングキャンペーンの言語を使いました。 「Slack は…」 — ページのコピーとURLの両方で、例：

• slack.com/is
• slack.com/is/team-communication
• slack.com/is/everything-in-one-place
• slack.com/is/wherever-you-are

ストーリーテリング キャンペーンのデザインを URL 自体にまで取り入れるというこの取り組みに、私はとても興味をそそられたのを覚えています。

それ以来、私は自然言語の文章を作ろうとするURLにいつも喜びを感じてきました。 slack.com/is/team-communication — 一連の階層的なキーワードを連結するのではなく — slack.com/product/team-communication。

URL の文構造を使って面白いことをするといえば…

ジェシカ・ヒッシェ

ジェシカ・ヒッシェは、 .is ドメイン（ アイスランド、 どうやら）。

ジェシカヒシェ

彼女は、サイト全体でこの楽しい三人称の「私は」を巧みに使っています。たとえば、メインナビゲーションの「About」をクリックすると、次のページに移動します。

jessicahische.is/anoversharer

楽しいですね！ mydomain.com/about も明確ですが、「about」を説明して文章構造で表現するという気まぐれなところが気に入っています。

彼女のメインナビゲーションの名詞はすべてこのパターンに従っており、個々の作品も同様です。たとえば、彼女のホリデー料理パッケージングの仕事の 1 つに関するこの記事の URL は次のとおりです。

jessicahische.is/sofulloffancyポップコーン

楽しい！

製品としてのURL

私はいつも、URLがドメインセマンティクスにうまくマッピングされているサービスが大好きです。たとえば、 GitHubのURLはgitのセマンティクスに非常によく適合している git の 3 つのドット diff 比較のように:

/:owner/:project/compare/ref1...ref2

例えば

github.com/django/django/compare/4.2.7…main

技術的な製品の場合、ユーザー インターフェイスを必ずしも見ることなく Web サイトをナビゲートできるこの機能は、すばらしい超能力です。

NPMも似たようなもの。 react-router NPM でパッケージを検索できますか? NPM のホームページにアクセスしてクリックしたり、検索ボックスを使用したりする必要はありません。サイト構造に慣れれば、次の方法でパッケージを検索できることがわかります。

/package/:package-name

例えば

npmjs.com/package/react-router

パッケージの特定のバージョンを検索したいですか?

/package/:package-name/v/:semver

例えば

npmjs.com/package/react-router/v/5.3.4

こうしたショートカットは、特定の製品を使用するときに非常に便利です。NPMの場合、 package.json 特定のバージョンに固定されている特定のパッケージの詳細を検索する必要がある場合は、必要なバージョンを識別し、URL バーに詳細を入力するだけで、そのパッケージの NPM の詳細に移動できます。

NPM CDN unpkgのように これらのセマンティクスにも従うのが得意です。公開されたパッケージのファイルが欲しいですか? unpkg のホームページには次のように書かれています:

unpkg.com/:package@:version/:file

このような場合、 URLは商品そのものでもよい そのデザインはより重要になる^[2]。

あなたのは何ですか？

これらは私が長年使ってきた、または見てきた URL の例です。他にもあると思いますが、皆さんのお気に入りは何か知りたいです。ブログに載せてください!