フォーム要素に半透明のナビゲーションを重ねるスタイルシート

Webサイト『コリス』さんは、すてき過ぎるのでリンク集に登録済です。

メモ

日付 サイト名 はてブ おすすめ 直リン
2008/09/08 フォーム要素に半透明のナビゲーションを重ねるスタイルシート  フォーム要素に半透明のナビゲーションを重ねるスタイルシート

コリスさんからの引用

CSSplayのエントリーから、スクリプトを使用しないで、フォーム要素に重ねて表示できる半透明のドロップダウン型のナビゲーションのスタイルシートの紹介です。

もっと記事を読むためにWebサイトへ飛ぶ »

半透明のナビゲーション

おぉ、すごい!ドロップダウンしているメニューが半透明になっている。

ただ、技術としてはすばらしいのだけれど、ドロップダウン型(プルダウンメニュー)は、「ビギナーが気付き難いから」という理由で、却下される場合もあるみたいです。

導入する場合は、ターゲットユーザのリテラシーを鑑みて、よく検討した方が良さそうです。

関連情報

コメント

コメントするには、サインインが必要です。

また、SPAM、誹謗中傷などの不快なコメントは、当方の判断で削除させていただきますので、予めご了承ください。

コメント(8)

| コメントする

こんにちは!登録してみました。
ちゃんと出来ました!

この半透明のプルダウン綺麗ですねー
惹かれてしまうなあ。こういうの大好きだ・・・

でも、仰るとおり使いやすいかどうかは別の話かもしれないですね。
こちらからもリンクされているcsshappylifeさんでも
ユーザーの動きってやつでプルダウンの事をお話されてました。
http://css-happylife.com/log/memo/000346.shtml
(RE:ユーザーの動き)

それでもやっぱり惹かれてしまう美しさですね。

user-pic

ひろこさん、こんばんは!
登録&コメントありがとうございます。嬉しいッス。(・∀・)

うん。かっこいいよね、半透明。
一家に一台欲しいな。

数ヶ月前くらいだったなかな、Amazonさんがメニューを、
プルダウンに変更したと思うのだけれど、
すんごく使い難くなった印象をもったよ。ブリンッ!なってまうねん。ブリンッ!って。

プルダウンは、省スペースになるけれど、
css happylifeさんの記事でも書いていらっしゃるように、
危険がいっぱいやね。

 ・各ページの認知度が下がる。
 ・操作性が落ちる。

導入には、腰が引けるなぁ。

こんばんは!
本当だ、ブリンッ!となっている!

「ブリンッ!」を念頭において閲覧した為、心の準備が出来ていたんだけど
いきなりブリンッ!だとかなりびっくりするかも。

パッと見るととてもシンプルなメニューだから
各ページの認知度が下がってしまうっていうのは本当にありそう。

自分は、プルダウンする事によって
下に隠れちゃったリンクとかが押せないってのがちょっと苦手かも。

お勧め記事の半透明のプルダウンは、「下になったのは押せない」っていう点では
変わらないんだけど、下に何があるか見えるっていうのがちょっといいなあ。


あれ、このプルダウンに隠れたやつって何だっけ、とか結構あるので。
というか、数秒前の事なのに記憶できないのがやばいけども。


ひろこさん、こんばんは。

そう、けっこうポイントを押さえないと、
「ブリンッ!」なってまうんですよ。←「ブリンッ!」言いたいだけやないか。

これって、サブメニューの方も、文字だけにリンクを入れるんじゃなく、
display: block;で箱ごとリンクの方がいいんじゃないかしら。

わざわざ、文字に合わせなあかんのよね。

折り畳み型のメニューもそうだけれど、
よほどそのサイトを愛してもらわないと、サブの項目までは、
なかなか覚えてくれないと思うんだな。

脳って、そんなに器用じゃない。

トランプゲームの神経衰弱が、横1面だけじゃなく、縦に重ねたら、
とんでもなく難しくなります。

メニューを適度な量にできるように、
サイトを分割することも、ひとつの方法かと思います。

プルダウンで、押せなくなる経験はないけれど、
読めなくなるときはあったなぁ。

空白部分がすぐに見付からないと、プルダウンが消せなくて困ったり、
空白部分だと思ったら、display: block;でリンクになっていて飛ばされたり、
あまり、いい印象がないんですよ、これが。

でも、確かに半透明になれば、読むことはできるかもしれないですね。

難易度高いッス。

>よほどそのサイトを愛してもらわないと、サブの項目までは、
>なかなか覚えてくれないと思うんだな。

あーわかる気がする。
それもあるし、使い勝手の悪さとかはあるけど
何か他のサイトにはないコンテンツがあったりとか
「ここのサイトじゃなきゃあかんねん」って感じじゃないと
やっぱり人は来なくなる気がします。
使いやすい方がいいしねえ。

企業のサイトとしては、取り入れるかどうかは賛否が分かれそうですね。
そういやadobeのサイトもプルダウンだけど、下に被っちゃうリンクとかが
ないので、これはあまり不便を感じた事ないなあ。

個人的には、個人サイト向けのテクニックだったりするかもなと思ってます。
何か趣味のサイトだったとしたら、「合うな」と思った人がいれば
多少使い方に戸惑っても来てくれるだろうし。

user-pic

ひろこさん、こんにちは。
コメントありがとうございます。

> 何か他のサイトにはないコンテンツがあったりとか
>
これは、耳が痛い。
結局のところ、もう何もかもそこに収束していくのよね。

常に独自性が、問われる。
ただやはり、普通の人には難しいんだなぁ。(´Д`;)

個人のWebサイトなら、成長の過程すらもコンテンツにできるけれど、
今後、ひろこさんが、ガンガン作っていくであろう企業のWebサイトなんかは、
なかなかそうもいかないよね。

明確に他社との差別化を行って、
その企業だからこそ出来ることを伝えなきゃいけない。

企業戦略がはっきりしている会社ならいいけれど、
口だけとか、どこかから借りてきたような理念の人たちとも話して、
導いていかなければいけない。

いわゆる普通の企業、もうひとつ特徴のない企業でも、
良いように魅せるというのは、大変なことよね。

ちょっと、プルダウンから話がそれたけれど、
エンジニアは、テクニックにばかりこだわってしまうと、
ユーザからも、クライアントからも相手にされなくなるような気がします。

趣味のサイトでも、企業サイトでも、「合うな」と思ってもらうことが大切で、
それを、橋渡しするのがエンジニアなのでせう。

決してテクニックありきではない・・・と、ひろこさんは言いたいのよね。
そう思います。(・∀・)/

>趣味のサイトでも、企業サイトでも、「合うな」と思ってもらうことが大切で、
>それを、橋渡しするのがエンジニアなのでせう。

深いのう・・・
本当にそうですね!

企業でも個人でもイメージ的なものでビジュアルも大事ですから
そこんとこのバランスが難しそうですよね。
使いやすくてもあまりに簡素なデザインではちょい寂しいし。
イメージにあってれば簡素でも何でもいいんですけどね。

そこらへんうまく出来る様になりたいなあ!

ひろこさんなら、出来るさ!(・∀・)/さー

イメージ、そうですね。最近は、ブランディングなどと言って、
企業イメージを、どのように良い印象で伝えるのか?なんてのも、
課題になっていますね。

ただ単に、デザイン的に美しいということではなく、
その伝えたい目的を輝かせるデザインであれば良いのかな。

華美でも、簡素でも、
目的にあっていれば、おっしゃる通り何でもいい。

実際は、時間に追われるし、コストにも見合わないし、
で、クオリティの維持は難しいみたいですけどね。

コメント入力欄

トラックバック

このページにトラックバックする場合は、次のURLをご利用ください。トラックバックでは、言及リンクが基本になります。

また、当方の判断により、削除する場合があります。

トラックバック(0)

トラックバックURLです。

http://kumacrow.s79.coreserver.jp/mt4_21/mt-tb.cgi/34