インターフェイスって大事だよね、という話 - ポエツ | poets

Logs

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
「デザイン」とは、外形・外観の視覚的装飾のみを意味するのではなく、機能性や使い勝手に直結するものだ、ということは繰り返し述べた。

ある機能が装備されていても、気づかれにくい場所、使いにくい形に置かれていては本領を発揮しない。

自分が好きな服を着ると心が弾むという人は結構いる。人目よりもそちらが優先、というのは私もそうなんだけど、その服を着た自分を見るのは周囲の人たちである。

ウェブデザイン、もしくはブログのスキンも共通する点はある。
背景にどんな画像を使うか、文字色・文字サイズをどうするか、というのはサイトの、管理人の個性・好みであるから是非はない。
ただ、もっとも注意しなければいけないことは、サイトのナビゲーションは管理人が使うものじゃなく、本来、閲覧者こそが使うものということだ。

ブログにどんな機能が付けられるか、という考察は(どんなページ階層のサイトができるかと併せて)私の好む論題である。
でもどんな機能をつけても、置く場所や見せるカタチによって使い勝手は一変してしまう。ここにこそ装飾(デザイン)のおもしろさがあると思うのだ。
けど、いかんせん、ここはコンテンツが薄すぎてナビゲーションの考察対象としては不向きです。

自家用スキン『hamlet』では、モード別の表示形式切換を全面的に取り入れたのだが、各モードに移行するためのナビゲーションが、他の(コメントなどの)メニューと並んでいる、という問題があった。同列・同階層に位置づけすべき項目ではない。
「機能はついているけど、わかりにくい」の典型だと思う。その点で、各モードへの遷移にタブを採用している『chameleon』(プレビュー)は、まったく適切なデザインと言える。

そこで『hamlet』の装飾面を改装したのが、自家用『ophelia』である。
『chameleon』への憧れコミでタブメニュー化した。特徴としては
1)サイトタイトルと各モードメニューが同じ階層にある。
2)『chameleon』型のタブではなく、タブブラウザ型の「ぶらさがりタブ」。

1、の要因によって、同じ機能・ナビゲーションがまったく違う位置づけになったと思う。
その点では、「カテゴリ」を記事タイトルより前に独立して配置したことも、同じような効果はある。ただこのサイトはカテゴリ読みするほどコンテンツはない…。

ただ飽きっぽいから、また改装したんだ、というのは真実に近いのだけど、さらにナビゲーションの考察を推し進めてみたのが『ophelia2.0』だ。その割にはフツーの2カラム態のよう。というかただの2カラム。
サイドバーのある自家用スキンは初の試みだ。長らく採用していたメニューの水平配置も廃した。
理由はメニュー配置の分散化を避けるため(いままでは上下に分散してた)と、メニュー階層の上下を、別の形式で表現するためだ。

タブメニューはwebページの階層を示すのに優れた表現だった。
ただ(階層差別化上の必然ながら)、タブで開いたページの中に別レベルのメニュー項目があることになる。

『ophelia2.0』では、左カラムに垂直に、階層(レベル)順にメニューを並べた。
1、サイトタイトル

2、モードメニュー

3、一般メニュー

これでタブ部分が独立してしまうことを避けつつ、メニューレベルの差別化もある程度実現できたような気がする。
モードメニューの表現はオンマウス時の動きも含めて、ウェビンブログのスキン『website』と似ているが、これにも一応意味がある。

[キャプチャさせてもらったウェビンブログさんの『website』]

コンテンツ(記事本文)がある右メイン部は1ピクセル罫で囲まれているのだが、モードメニューが跳び出す表現は、このコンテンツボックスにプラグが接続されて表示が変わるイメージである。
モードが切り替わった後は、そのメニューが「接続されている」ビジュアルになるのはタブデザインと同様だ。

この部分のインターフェイスについては、〈webデザインでは1ピクセルもズレないように作るのは困難だし、その意味もない〉、のですが自分のブラウズ環境で確認できるかぎりこだわってみた。
誌面レイアウトの際には、きれいなデザインの基本として、延長線を引いて配置要素のツラ位置を揃えろと、先輩デザイナーからよくアドバイスされたものです。

[余談]
ユニークかつ優れたインターフェイスといえば、アップルの「iPod」のクリックホイールですが、深い階層からいっきにトップメニューに回帰する方法がない(そうだっけ?)と言われています。

[参照]
■Life is beautiful「iPod の UI を UIEngine で作ってみた」
(iPodのインターフェイスがシミュレートされています)
■絵文録ことのは「デザイナーがウェブの文字サイズを小さく固定したがる理由」
(・紙のデザイナーとウェブデザイナー>「1ピクセルたりともずれないようにやってください」)
■てんぽ「1. タブであること」

[カテゴリ]*blog-logy*ブログデザイン考

comment


  管理者にだけ表示を許可する

ネットカフェで検証してみた

これでwinIEもOK、、、なはず。

winIE、ほしくなってきちゃったなあ。

と、思ったらSafariでNG。
Safariに合わせますわ。

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

trackback

用FC2,寫部落格日誌也都簡單阿!

検索語抽出

ポップアップ・コメント

poets designed

Ajax検索
AD

台湾留学 完全サポート

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。