開発者のみなさん！devnetがリニューアルされましたよ！
このたび、サイボウズ製品の開発者向けポータルサイト「cybozu developer network」のデザインの一部が刷新されました。
デザインを監修したサイボウズのsim03から、改修に込めた想い・ポイントを語ります！
もう新デザインには触れられましたか！？
今回のリニューアルでは、主に以下のポイントを刷新しました。
- 扉ページ（kintone APIなど）
- サイドナビ（ドキュメント系ページ、Tips系ページなど）
- 閲覧中のページのドキュメント種別、カテゴリ情報（記事詳細ページなど）
迷わず情報にアクセスするための "導線確保" や "構造理解の補助" を目指しました。
能動的・効率的なサイト回遊を促して、より良い開発体験を提供したい…
そんな思いで今回のリニューアルに取り組みました！
刷新した各ポイントについて、一緒に見ていきましょう〜。
扉ページ
キリンやウサギのイラストが可愛らしい旧デザイン。初めて公開されたのは約3年前です。
カスタマイズをより身近に感じてもらうため、動物のイラストをあしらっていました。
課題感や分析結果
⚠️課題1：頻繁にAPIを活用して開発される方に最適化されていない
初めてサイトを訪問された方への親しみやすさよりも、APIを用いたカスタマイズを頻繁にされる方への ニーズの優劣に応じたコンテンツ配置、アップデート情報のキャッチアップのしやすさ が重要になってきているはずです。
⚠️課題2：メインビジュアルが、ファーストビューを占領している
利用状況をヒートマップで見てみました。以下はイメージ図です。
熟読エリア、クリックエリアが上部に集中しています。
また、ほとんどのユーザーが下部まで辿り着かずに離脱していることが分かりました。
APIアップデートなど、開発者にとって重要な情報があまり認知されてないと伺えます。
改修ポイントと工夫した点
🔍改修1：ファーストビューの高さを軽減
メインビジュアルの高さを抑え、少しのスクロールで全容が把握できるように。
🔍改修2：構成の見直し
初めてサイトへ訪問したユーザーに知っておいてほしいコンテンツを最上部に掲載。
また、APIアップデートなど、開発者にとって重要な更新情報も上部に移動しました。
🔍改修3：トップページに掲載していたピクトグラムを適切に利活用
トップページには「ドキュメント」「Tips」「SDK & Tools」「AI」など、そのコンテンツ応じて、ピクトグラムを併記しています。
▼トップページのピクトグラム
これらのピクトグラムは、トップページにしか掲載されていませんでした。
普段サイトを利用するとき、ピクトグラムを注視する人は少ないでしょう。
ですが、一定のルールのもとで適切にピクトグラムが掲載されていると、ユーザーは無意識に "現在地" や "状況" を認識し、より快適にサイトを回遊できるようになります。
期待する効果
ユーザーのニーズに応じて、優先順位をもたせてコンテンツを案内できるように
サイトの構造を意識させ、現在地の認知を補助できるように
サイドナビ
サイドナビは、コンテンツの特性に応じ、アコーディオン なし / あり を設けました。
アコーディオンなし ver
Tipsなど、読み物コンテンツは、アコーディオンなし のサイドバーに変更しました。
（例：Tips／一覧ページ、Tips／記事ページなど）
課題感と分析結果
⚠️課題1：カテゴリの階層構造が不明瞭
長年の運用でカテゴリ構成が複雑化。"親>子>孫" が認識しずらい状態でした。
⚠️課題2：利用状況に則していない（カテゴリを横断するようなページ遷移はほぼない）
Tipsのサイドナビの利用状況を見てみると、同一カテゴリ内の記事への遷移が多く、カテゴリを横断するような使われ方はあまりされていませんでした。
またTipsの特性として、複数カテゴリ、あるいは異なるカテゴリの記事同士を、俯瞰して見るような利用シーンはあまりないと考えました。
改修ポイントと工夫した点
🔍改修：利用状況に則したUIに変更
アコーディオンを撤廃し、閲覧中のページと同カテゴリのページのみを並列して掲載。
必要な情報のみを見比べられるようになりました。
期待する効果
ユーザー行動に即したUIへ変更したことで、より快適なUXを提供できるように
アコーディオンあり ver
APIドキュメントなど、カテゴリの分類が重要と思われるコンテンツは、従来のデザインと同様にアコーディオンの形式を採用しました。
（例：APIドキュメントなど）
課題感と分析結果
⚠️課題1：カテゴリの階層構造が不明瞭
アコーディオンなし ver と同様、旧デザインは階層構造が不明瞭でした。
⚠️課題2：ユーザーにとって意味のないページ遷移が発生
旧デザインだと、クリック可能な領域が、"見出し"を含む左側 / "▼"の右端 という構成になっており、"見出し"を含む左側 をクリックした際、アコーディオンの開閉だけでなく、ユーザーにとってはあまり意味のないページ遷移が発生していました。
改修ポイントと工夫した点
🔍改修1：階層構造を認識しやすく
アコーディオンの仕様自体は旧デザインから引き継ぎつつ、"親>子>孫" の関係性を感覚的に認識できるようなデザインに変更。
🔍改修2：クリッカブルな領域を棲み分け
アコーディオンの親となるボタンには、"遷移すべきページが存在する" ものと "遷移する意味がない" ものの2種類があります。
前者については、下線テキストをクリックするとページ遷移が発生し、下線テキスト以外の領域をクリックするとアコーディオンが開閉する、という仕様を採用しました。
期待する効果
APIの全容を、俯瞰して認識しやすくなるように
機能をできる限り簡素化し、直感で操作できるように
カテゴリ情報の明示
課題感と分析結果
⚠️課題：閲覧中の記事のスペック（製品種別、ドキュメント種別、カテゴリなど）が不明瞭
昨年のユーザーアンケートにて「REST APIだと思って読み進めていたら、JavaScript APIだった」というような声が寄せられました。
改修ポイントと工夫した点
🔍改修1：製品種別を明示
各ページの上部に製品種別を掲載。
🔍改修2：閲覧中のページの記事種別、カテゴリを明示
各ページのスペック情報（ドキュメント種別、カテゴリ）を掲載。
期待する効果
記事スペックを把握することで、サイトの論理的な構造を認識できるように
記事が属するカテゴリを遡ったり、下ったりしやすいように
改修全体を通して
今回は "導線確保" や "構造理解の補助" を念頭にデザインを改修しました。
この取り組みが、開発者のみなさんの 能動的・効率的なサイト回遊 に寄与し、引いては "開発体験の向上" につながればと思っています！
cybozu developer networkでは、今後もUI/UXの観点から改善を続けていきます。
開発者のみなさんの日々の利用状況や、声がサイト改善の糧になります。
ぜひcybozu developer networkの新しいデザインに触れてみてください！
そして、感想や要望をこの記事のコメントで教えていただけると幸いです！
より良い開発体験を…！