新デザインにリニューアルしたMSDNオンライン(1)

MSDNオンラインのトップページがリニューアルされた。単に外見が変わっただけでなく、大量に存在する既存のコンテンツをいかにして分かりやすく見せていくか、アクセス性を改善するか、といった観点からなされたリニューアルといえる。

そこで今回は、リニューアルされたMSDNオンラインのポイントについて見ていくことにしよう。

ステップ・バイ・ステップ方式のデザイン

新しいMSDNオンラインのトップページは、すでに英語版で取り入れていたものと同様に、「クライアント」「Web」「クラウド」「モバイル」の4分野をトップに大きく並べて、その下に「ご利用ガイド」「最新ニュース」「おすすめコンテンツ」「MSDNサブスクリプション」といったリンク集をまとめた形になっている。たとえば、「おすすめコンテンツ」の中にある「Code Recipe」は本連載の第2～3回で取り上げたものと同じだ。

新たにトップにドドーンと並べられた「クライアント」「Web」「クラウド」「モバイル」の4分野は、いずれもステップ・バイ・ステップ方式で開発者向けに情報を提供する流れになっており、デザインも共通している。

つまり、冒頭で「○○開発をはじめる」とした上で、開発作業の概要、そこで必要になるツールやテクノロジーの概要、ツールやテスト環境の入手、具体的な開発事例、さらなる知識の増進・深度化、といった流れをもたせている。4分野のいずれでも、初めて開発に取り組む人を意識した構成になっている点では共通しているといえる。

もちろん、リンクされている記事の内容は分野ごとに異なる。たとえば「Web開発」であれば、開発ツールはVisual Studio、関連するテクノロジーとしてはSilverlightやASP.NET、情報源としてはIIS TechCenter(おっと、これはTechNet Onlineだ)の話が出てくることになる。

もちろん、すでに経験を積んでいる人であれば、最初の方の話は飛ばして、自分が必要とする段階からアプローチすればよい。ステップ・バイ・ステップ方式にすることで全体の流れが見えやすくなっているので、その中のどの段階からアプローチすればよいかが把握しやすいというわけだ。

情報を見やすくするための工夫いろいろ

このように、マイクロソフトの製品やテクノロジーについて学習の手段をいろいろ用意するだけでなく、MSDNオンラインを初めとするWebサイト上のリソースについては、情報の見やすさや使い勝手を向上させるための取り組みが進んでいる。

たとえば、ASP.NET、Visual Studio、Silverlight、.NET Frameworkなど、一部の製品やテクノロジーについても、レイアウトは異なるもののステップ・バイ・ステップの考え方を取り入れて、ナビゲーター付きの画面構成を導入するとともに、トップページの内容をシンプル化している。

以下に、ASP.NETデベロッパーセンターとSilverlightデベロッパーセンターの例を示す。両者を比較してみると、基本的なデザイン・レイアウトが共通になっている様子が分かる。今後、他のコンテンツについても同様のリニューアルが図られていくことになるのだろうと期待したい。

こうすることで、初めてそれぞれの製品やテクノロジーに触れる人でも、段階を追って学習を進めやすくなるというわけだ。トップページをシンプル化することで「情報の山」に埋もれて「どこから手をつけたらいいんだ!?」となる問題を軽減できる利点もある。

また、分野が異なる別のコンテンツに移動する際には、各ページの最上部にあるカテゴリー一覧を活用したい。MSDNオンラインの場合、以下のカテゴリーが存在する。さらにカテゴリーによっては、二段目にサブカテゴリー(?)とでもいうべきリンクが並んでいる場合もある。

• ホーム
• ライブラリ(MSDNライブラリのこと)
• ラーニング
• ダウンロード
• サポート
• コミュニティ
• MSDNサイトマップ

つまり、これらが「横方向」の移動を担当するリンクだ。これらは従来から存在していたが、それぞれのカテゴリー内における見通しが今ひとつ、という認識があったのだろう。そこで、ステップ・バイ・ステップ方式の記事構成を取り入れることで、カテゴリーごとの「縦方向」の移動を容易にしたのが、今回のMSDNオンラインのリニューアルである。と、そういうことではないだろうか。