Title: 2.7 のビジュアルデザイン Author: JOTAKI, Taisuke Published: 2008年10月18日 Last modified: 2010年12月9日 --- 日本語 * [テーマ](https://ja.wordpress.org/themes/) * [プラグイン](https://ja.wordpress.org/plugins/) * [ニュース](https://ja.wordpress.org/news/) - [ドキュメンテーション](https://ja.wordpress.org/support/) - [フォーラム](https://ja.wordpress.org/support/forums/) * [概要](https://ja.wordpress.org/about/) * [参加・貢献](https://ja.wordpress.org/get-involved/) * [このサイトについて](https://ja.wordpress.org/faq/) * [WordPress を入手](https://ja.wordpress.org/download/) [ WordPress を入手 ](https://ja.wordpress.org/download/) [ニュース](https://ja.wordpress.org/news/) 2.7 のビジュアルデザイン 2008年10月18日 [JOTAKI, Taisuke](https://profiles.wordpress.org/tai/) による # 2.7 のビジュアルデザイン --- 以下は、2008 年 10 月 17 日に書かれた WordPress.org 公式ブログの記事、「[The Visual Design of 2.7](https://wordpress.org/development/2008/10/the-visual-design-of-27/)」 を訳したものです。 --- やっと来ました、みなさんお待ちかねの瞬間が！他の機能面とともにハックすることによる 無粋さに我慢と自制の長い月日をみなさんに耐え忍んでもらいましたが、Crazyhorse の残り のインターフェースの実装がほぼ終わりつつあります。（本当にそんなにつらかったのかしら？） Automattic の年２回のオフサイトミーティング（私たちにはオフィスがないので）の今週、 みなさんが切望していたビジュアル（訳注: 管理画面の見た目、インターフェース）がプレゼン ができる段階まで完成し、承認されました。みなさんが気に入ってくれれば幸いです。Matt Thomas と Andy Peatling のビジュアルの才能に最高の敬意を表します。こうしたデザイン は 2.7 の他の部分にも及び、今後数週間のうちに実装されると思います。 さて、見た目はついに決まったのですが、どのような動作をするのでしょう？特にメニュー システムはハッカーズとテスターズのメーリングリストで話題となっていたので、この機会 に私たちがどのようにプランを立てたのか説明したいと思います。 ご存知のように、2.7 のゴールのひとつは、サブメニューにアクセスするための新しい画面 の読み込みの回数を減らすことでした。よく利用される画面を１回もしくは最大でも２回 のクリックで表示させるようにしたかったのです。ナイトリービルドをお使いの方は、メニュー を広げたり縮めたりすることができる矢印のコントロールに慣れたことでしょう。また、 縦にに開閉するばかりではなく、横幅も最小化できるアイコン付きのボックススタイルに も慣れたことと思います。横幅の最小化はある種の「上級者モード」を提供するためにアイコ ンの断片を残しますが、必ずしも上級者である必要はありません。こうして本物のボタン スタイルができ（アイコンはまだ決定ではありません。すぐにでも新しいアイコンがいくつか 追加されると思います）、メニュー機能が確定しました。 [2.7 の新しい投稿画面 – 未完成（オリジナルの画像を参照してください）](https://wpdotorg.files.wordpress.com/2008/10/newpost.png) 各セクションのヘッダーは、左側のアイコン、青いリンクテキスト、そして右側のエリア にホバーしたとき、もしくはのメニューが広げられた状態のときに表示される矢印アイコ ンの３つのパーツから成っています。矢印アイコンはヘッダーに小さく収められていて、 お気に入りメニュー（訳注: 右上の「Add New Post」）も同じような構造になっていること がお分かりになるかと思います。この部分をクリックするとメニューが広がり、そのセクション の選択肢が表示されます。もう一度クリックするとメニューが閉じられます。青いリンク テキストをクリックするとそのセクションの最初の選択肢の画面を直接開き、そのメニュー のセクションが開いて他の選択肢を表示します。セクションアイコンをダブルクリックすると メニューがアイコンリストを残して水平方向に閉じられます。この状態でそのアイコン上 をホバーすると各セクションのメニューを表示するので、１回のクリックでたいていの画面 に移動することができます。メニューが閉じているときにアイコンをダブルクリックすると、 そのセクションの最初の画面を開きます。メニューグループを分けているラインに付属し ている小さな矢印アイコンも、水平方向の拡大/縮小機能を使用するための開閉ボタンとして 動作します。 メニューシステム利用方法のこの多様さは、上級者にも初心者にも同じように便宜を図る ことを目的としています。初心者にとっては通常のように青いリンクテキストをクリック すれば予期されたとおりに動作しますし、上級者にとってはナビゲーションにより多くの オプションを用意することでよりカスタマイズされた操作が可能になります。この成果を 私たちと同じくらいみなさんにも気に入ってもらえることを願っています。この成果はまもなく Trunk に実装されます。 下の画像は新しいダッシュボードのスタイルで、来週早々にも詳しく説明したいと考えてい ますが、こうしてプレビューをすることによってそれまでに新しいデザインへの期待を高め ていただければ何よりです。 [2.7 ダッシュボード（オリジナルの画像を参照してください）](https://wpdotorg.files.wordpress.com/2008/10/dashboard.png) ### 共有: * [ Facebook ](https://ja.wordpress.org/2008/10/18/the-visual-design-of-27/?share=facebook) * [ X ](https://ja.wordpress.org/2008/10/18/the-visual-design-of-27/?share=twitter) * [ メールアドレス ](https://ja.wordpress.org/2008/10/18/the-visual-design-of-27/?subject=%5B%E5%85%B1%E6%9C%89%E6%8A%95%E7%A8%BF%5D%202.7%20%E3%81%AE%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3&body=https%3A%2F%2Fja.wordpress.org%2F2008%2F10%2F18%2Fthe-visual-design-of-27%2F&share=email) ## “2.7 のビジュアルデザイン” への2件のフィードバック 1. [わーどぷれすっ！ » 2.7: パブリックベータを準備中](http://wp.tekapo.com/2008/10/19/27-getting-ready-for-public-beta/) 2. [2008年10月19日](https://ja.wordpress.org/2008/10/18/the-visual-design-of-27/#comment-1525) 3. […] The Visual Design of 2.7（日本語訳: 2.7 のビジュアルデザイン） […] 4. [WordPress | 日本語 » WordPress 2.7 “コルトレーン”](http://ja.wordpress.org/2008/12/11/coltrane/) 5. [2008年12月11日](https://ja.wordpress.org/2008/10/18/the-visual-design-of-27/#comment-1719) 6. […] 2.7 のビジュアルデザイン […] [前 WordPress 2.7 ワイヤフレーム](https://ja.wordpress.org/2008/10/03/ordpress-27-wireframes/) [次 WordPress 2.7 の新しいダッシュボード](https://ja.wordpress.org/2008/10/21/the-new-27-dashboard/) ## カテゴリー * [Announcement](https://ja.wordpress.org/category/announcement/) (77) * [Community](https://ja.wordpress.org/category/community/) (47) * [Cousins](https://ja.wordpress.org/category/cousins/) (3) * [Design](https://ja.wordpress.org/category/design/) (1) * [Development](https://ja.wordpress.org/category/development/) (279) * [Documentation](https://ja.wordpress.org/category/documentation/) (3) * [Events](https://ja.wordpress.org/category/events/) (25) * [Features](https://ja.wordpress.org/category/features/) (13) * [Focus](https://ja.wordpress.org/category/focus/) (1) * [General](https://ja.wordpress.org/category/general/) (23) * [Hosting](https://ja.wordpress.org/category/hosting/) (2) * [Meta](https://ja.wordpress.org/category/meta/) (11) * [Month in WordPress](https://ja.wordpress.org/category/month-in-wordpress/) ( 7) * [Podcast](https://ja.wordpress.org/category/podcast/) (2) * [Releases](https://ja.wordpress.org/category/releases/) (396) * [Security](https://ja.wordpress.org/category/security/) (76) * [Testing](https://ja.wordpress.org/category/testing/) (24) * [Themes](https://ja.wordpress.org/category/themes/) (4) * [Updates](https://ja.wordpress.org/category/updates/) (7) * [User Interface](https://ja.wordpress.org/category/user-interface/) (13) * [WordCamp](https://ja.wordpress.org/category/wordcamp/) (9) ## 購読する メールアドレスを入力… * [WordPress とは](https://ja.wordpress.org/about/) * [ニュース](https://ja.wordpress.org/news/) * [ホスティング](https://wordpress.org/hosting/) * [プライバシー](https://ja.wordpress.org/about/privacy/) * [ショーケース](https://wordpress.org/showcase/) * [テーマ](https://ja.wordpress.org/themes/) * [プラグイン](https://ja.wordpress.org/plugins/) * [パターン](https://ja.wordpress.org/patterns/) * [Learn](https://learn.wordpress.org/?locale=ja) * [サポート](https://ja.wordpress.org/support/) * [開発者](https://developer.wordpress.org/) * [WordPress.tv ](https://wordpress.tv/) * [参加・貢献](https://make.wordpress.org/) * [イベント](https://events.wordpress.org/) * [寄付 ](https://wordpressfoundation.org/donate/) * [Swag ](https://mercantile.wordpress.org/) * [WordPress.com ](https://wordpress.com/?ref=wporg-footer) * [Matt ](https://ma.tt/) * [bbPress ](https://bbpress.org/) * [BuddyPress ](https://buddypress.org/) [ 日本語 ](https://make.wordpress.org/polyglots/teams/?locale=ja) The WordPress® trademark is the intellectual property of the WordPress Foundation. * [X (旧 Twitter) アカウントへ](https://www.x.com/WordPress) * [Bluesky アカウントへ](https://bsky.app/profile/wordpress.org) * [Mastodon アカウントへ](https://mastodon.world/@WordPress) * [Threads アカウントへ](https://www.threads.net/@wordpress) * [Facebook ページへ](https://www.facebook.com/WordPress/) * [Instagram アカウントへ](https://www.instagram.com/wordpress/) * [LinkedIn アカウントへ](https://www.linkedin.com/company/wordpress) * [TikTok アカウントへ](https://www.tiktok.com/@wordpress) * [YouTube チャンネルへ](https://www.youtube.com/wordpress) * [Tumblr アカウントへ](https://wordpress.tumblr.com/) Code is Poetry.