MDN Web Docsのデザインが新しくなってる！！！


## この記事に書かれていること
MDN Web Docsのデザインが一新されていたので、リリースブログの抜粋と日本語訳です。

https://developer.mozilla.org/ja/

![mdn.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1006362/b874aa47-1fad-6e3d-b821-0d9558244e9c.jpeg)



## 変わったところ要点
リリースノートで言及されていた変更点を抜粋しました。

### トップページ
- 検索機能の強化
- 最新記事とよく読まれている記事のセレクションを表示
- GitHubコンテンツレポへの最新の投稿を表示

### 記事ページ
- 色とテーマの統一
- HTML、CSS、JavaScriptなどの主要セクションの表示改善
- コントラストの向上など、アクセシビリティの向上
- ダークモードトグルを追加し、モードの切り替えを容易にしました。
- ページ内ナビゲーションの常時表示
- ブラウザの互換性データの表示方法を見直し

### その他
- ロゴの変更
- MDN を拡張した、プレミアムサブスクリプションサービスのMDN Plus 追加予定


## MDNのリリースブログ
https://hacks.mozilla.org/2022/03/a-new-year-a-new-mdn/

以下、日本語訳です。
※画像やリンクなどは省略しています。

今日、MDNウェブサイトにアクセスされた方は、その外観がかなり変わっていることにお気づきでしょう。私たちは、それが良い違いであることを望んでいます。では、説明しましょう。

MDNは16年の歴史の中で、初期のWikiから最近のGitHubに支えられた静的サイトへの移行まで、様々な変化を遂げてきました。その間、MDNは有機的に成長し、45,000人以上のコントリビューターや数多くの開発者、デザイナーを擁するようになりました。ユーザーエクスペリエンスがウェブサイト全体でやや一貫性を欠くようになったのは、当然のことでしょう。

2021年半ば、私たちはMDNのデザインを近代化することを考え始め、4万4千の記事をできるだけ簡単にナビゲートできる、クリーンで魅力的なウェブサイトを作ろうと思いました。ナビゲーションのしやすさを向上させ、すべてのページで統一されたルック＆フィールに重点を置き、ユーザーにとってよりホリスティックな体験を作りたいと考えました。

### コミュニティにフォーカスした新しいホームページ
MDNコミュニティは、私たちのコンテンツが高品質で信頼できるものであることを証明しています。MDN のコンテンツは、精査され、議論され、場合によっては議論されることもあります。誰でも MDN に貢献することができます。コンテンツを書いたり、変更を提案したり、バグを修正したりすることで、MDN に貢献できます。

私たちは、この素晴らしいコミュニティを認め、祝福したいと考え、ホームページをそのための完璧な場所としました。

新しいトップページは、「コミュニティ」と「シンプル」というコアコンセプトに重点を置いて作られました。検索機能を強化し、ページの中心的な要素としながら、最新記事とよく読まれている記事のセレクションを表示するようにしました。

また、GitHubコンテンツレポへの最新の投稿を表示し、MDN貢献者にスポットライトを当てるコントリビュータースポットライトを追加しました。

### 記事ページのデザインを変更し、ナビゲーションを改善
MDNのコアコンテンツプレゼンテーションが包括的なデザインレビューを受けてから、実に5年が経ちました。この間、MDN のコンテンツは、コンテンツの新しい構成方法、ドキュメントの新しい構築方法と書き方、そして新しい貢献者によって、進化し変化してきました。そのうちに、ドキュメントのルック＆フィールは、それが読まれ書かれる方法からますます切り離されるようになりました。

ドキュメントのあり方を根底から覆すようなことはありませんが、MDN上のほとんどの視覚的要素に愛と注意が向けられ、より一貫性のあるドキュメントが作成されていることがおわかりいただけるでしょう。この再設計は、MDN のコンテンツにその価値を与えるものです。

- 色とテーマの統一
- HTML、CSS、JavaScriptなどの主要セクションの表示改善
- コントラストの向上など、アクセシビリティの向上
- ダークモードトグルを追加し、モードの切り替えを容易にしました。

特に、いくつかの微妙な改良と利便性には自信があります。たとえば、ページ内ナビゲーションは常に表示され、スクロールしながらページのどのあたりにいるのかがわかるようになっています。

また、ブラウザの互換性データの表示方法を見直し、より一目でわかるようにしました。ブラウザの互換性データから期待される詳細情報を表示するオプションも用意しました。ぜひご覧ください。

そして、私たちはそれだけにとどまりません。私たちが行った作業は広範囲に及び、現在出荷しているデザインに磨きをかけ、改善する機会はまだたくさんあります。

### コミュニティが選んだ新しいロゴ
デザインの変更と、WebDocs以外のMDNの拡張の両方に取り組み始めたとき、新しいロゴが必要な時期であることに気づきました。MDN のアイデンティティを強化し、Mozilla の現在のブランドと一致させながら、現在の MDN を表現する、モダンで簡単にカスタマイズできるロゴが必要でした。

ブランディングのスペシャリストであるLuc Doucedameと密接に協力し、8つのロゴ候補に絞り込み、ユーザーのコミュニティに呼びかけ、お気に入りのロゴに投票するよう呼びかけました。わずか3日間で10,000票以上の投票があり、"MDN people's choice "として皆様にご紹介できることを嬉しく思います。


優勝は選択肢4の「Mモノグラム」で、アンダースコアを使い、コードを書くプロセスを表現しています。投票してくださった皆さん、ありがとうございました。


### MDNに期待すること
### コンテンツを最も必要とする場所に届ける
近年、MDNコンテンツは、WikiからGitへの移行、HTMLからMarkdownへの変換など、作者にとってより洗練されたものになってきています。これは、より強力で使い慣れたツールを使って、より構造化され一貫性のあるコンテンツを作成することができる貢献者たちにとって恩恵となりました。

より良いツールが揃ったことで、ようやく読者にとってより目に見えやすく、体系的なメリットを構築できる状態になりました。たとえば、多くの読者は MDN のサイト・ナビゲーションではなく、お気に入りの検索エンジンを使って MDN をナビゲートしていると思います。それはわかります。歴史的に、wiki は大規模なコンテンツアーキテクチャの取り組みを非現実的なものにしてきました。しかし、私たちは今、サイト全体の構造とナビゲーションを改善することに、これまで以上に近づいています。

将来的には、新しいツールを活用して、ナビゲーションの改善、標準化やサポートのまとめ、開発者が最も必要とする場所（IDEやブラウザツールなど）へのMDNドキュメントの埋め込みなどを検討する意欲的な計画を持っています。

### 近日公開MDNプラス
MDNは、標準、コード、ツールなど、Webサイト制作に必要なあらゆる情報を提供する信頼できる中心的なリソースとして、高い評価を得てきました。2015年、私たちは、通常のMDNリファレンスやガイドの資料と対になる有用な資料を提供することを目的として、ラーニングエリアを作成し、中心的なリソース以上のものになる方法を探りました。

2020年には、そこに初のフロントエンドデベロッパーの学習経路を追加しました。 この学習エリアは、現在、MDNの月間ウェブトラフィックの10％を占めており、ユーザーから多くの関心とエンゲージメントを得ることができました。このことがきっかけとなり、私たちは、コミュニティのためにこの分野でさらに何ができるかを考えるようになりました。

昨年、私たちはユーザーを調査し、MDN体験に何を望むかを尋ねました。最も要望の多かった機能は、通知、記事のコレクション、MDN でのオフライン体験などでした。私たちが見た全体的なテーマは、ユーザーが自分に合った方法で MDN の膨大なライブラリを整理できることを望んでいるということでした。

私たちは、MDNの無料のWebドキュメントやパーソナライズされた機能など、ユーザーのニーズを満たす方法を常に探しています。今後数ヶ月の間に、MDN をカスタマイズしたいと考える Web 開発者から寄せられたフィードバックに基づいて、MDN を拡張し、プレミアムサブスクリプションサービスを追加する予定です。MDN Plus の詳細については、今後の情報をお待ちください。

### MDNコミュニティの皆様、ありがとうございました。
新しいロゴに投票してくださった何千人もの方々、そしてこの旅を始めてから初期のベータテスト段階に参加してくださった皆様に感謝します。また、Open Web Docs のパートナーの皆様には、デザインの変更について貴重なフィードバックをいただき、MDN のコンテンツに日々貢献していただいています。皆さんのおかげで、このようなことが実現できました。私たちは、MDN での体験をさらに向上させるために投資を続けていきます。


## 所感

MDNは信頼性も高く、レファレンスにも学習にも使えるので、とてもみやすくなって嬉しい限りです。
新しく追加予定のサブスクサービスがとても気になります。

料金などで検討するかもしれませんが、試してみたいなと思っています。