[JS]JavaScript無しでも動作するダイナミックなタブコンテンツ
JavaScriptがオンだとダイナミックにコンテンツが切り替わり、JavaScriptがオフでも正常にコンテンツが表示されるタブコンテンツを実装するチュートリアルをCSS-Tricksから紹介します。 Dynamic Page / Replacing Content デモページ 上記デモではJavaSciprのオン・オフに関わらず、タブをクリックするとそれに対応したコンテンツが表示されるようになっています。 仕組みはオフ時にはタブをクリックするとページ遷移し表示され、オン時にはAJAXを使用してコンテンツを表示しています。 タブ箇所のHTMLは、下記のようになります。 HTML <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li><a href="index.php">Home</a></li> <l
[JS]ホバー時にリンクのさまざまな情報を表示するスクリプト -HoverAttribute
テキストリンクにマウスでホバーをすると、リンク先のURLやテキスト情報をアニメーションで表示するスクリプトをafEkenholm Web Designから紹介します。 HoverAttribute jQuery plugin デモ HoverAttributeのデモ 表示できるものはhrefやrelやtitileなど属性内のデータで、URLのフォーマットやアニメーションを変更することができます。
Re:ユーザーの動き。
ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック＝トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近
サイトのユーザビリティ上の問題を手っ取り早く発見するためのコツ 5ヶ条 - Feel Like A Fallinstar
サイトのユーザビリティがあがれば、成果に良い影響がでることは既に広く知られています。 でも、意外と「効率よく」改善する方法ってあまり見たことがなかったのでエントリー。 クリティカルな課題を手っ取り早く発見するためのポイントです。 ファーストビューのみに絞って重点的にチェックする 共通化されたフッターに改善の余地がないかチェックする 細かい文章は読まず、文章を「塊」として捉える フォームの課題は、とにかく真っ先にチェックする トップページのチェックは最後に回す 1.ファーストビューのみに絞って重点的にチェックする ユーザが、ファーストビューより下のコンテンツをじっくり読む可能性はぐんと下がります。 （ブログは除く） ユーザビリティ上の課題でクリティカルなものは、ファーストビューに集中することが多いです。 ファーストビューでしっかり興味をひきつけてしまえば、その下が多少問題でも、大きな破綻は起
“フッタートライアングル”でコンバージョン率を狙う【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ClickHeat | Installation
Links LabsMedia ホーム ClickHeat ホーム ダウンロード (on Sourceforge.net) Installation & upgrade デモ (login/password: demo/demo) 寄付 ClickHeat | インストール・アップグレード方法 インストール 1) 書庫を解凍後、サーバにアップロードする。（書庫にはあらかじめ /clickheat/ ディレクトリがあるので解凍後直接アップロードしてください） 2) ディレクトリを直接ブラウザーで呼び出す。（http://www.yoursite.com/clickheat/index.phpとする） 3) 画面指示に従う ※ バージョン1.xでは、javascript コードが変更されました ので、バージョン0.xからアップグレードする人はページに貼り付けたコードを変更する必要がありま
30のユニークなコメント欄デザイン
ソーシャルブックマークのコメント機能や、Twitter などのマイクロブログサービスにその場を奪われてしまっているブログのコメント欄ですが、まだまだ工夫次第で楽しいものになりますよ、ということで。30のユニークなコメント欄デザインを集めた記事がありました（via swissmiss）： ■ 30 Must See Comment Designs for Web Designers (Creating a blog web design blog) コメント欄がユニークな30のブログについて。冒頭で「コメント欄のデザインはアートだ！」という名言（？）が飛び出したりしています。とりあえず先に30個を箇条書きにしてみると： alwaysBETA AudetteMedia Baekdal Bartelme Blog Design Blog Dale Anthony Darkmotion Eliti
RedLine Magazine : jQueryでパンくずをうまくスペースに収める
jQueryでパンくずをうまくスペースに収める jQueryとプラグインを使ってパンくずを限られたスペースにうまく収めるネタ。動きもいい感じ。 >>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.って書いてある通り、深い階層になってて、すごい長い名前が付けられたページのパンくずに対応できるようにって趣旨みたい。 >>サンプルページ 英語だとこのままでいいんかもしれんけど、日本語だとデフォルト指定の状態で隠れてる状態が最初の１文字目の半分くらいしか見えないから、jquery.jBreadCrumb.jsの中の最後のいろいろ指定する部分「previewWidt
機能の豊富さとユーザの関与
ユーザの関与が深まるほど、アプリケーションはより多くの機能を維持できる。しかし、大部分のユーザの関与のレベルは低いものだ ―― 特に、機能の数よりもシンプルさの方を重視しなくてはならないウェブサイトの場合は。 Feature Richness and User Engagement by Jakob Nielsen on August 6, 2007 どんなユーザーインターフェースをデザインするにしても、重要な決定事項のうち一つは機能の多さとシンプルさの兼ね合いに関わってくる。機能が増えるほど、システムがより複雑になるのは避けられない： 機能はユーザに明示されている必要があるので、画面がより煩雑になる。 メニューのサイズや数のどちらか、または両方が増えるほど、必要な機能を見つけるのが難しくなる。 機能には説明が欠かせないので、ヘルプシステムやマニュアルのサイズが膨れ上がる： ドキュメントは
ケータイ livedoor ニュース"リニューアル" : LINE Corporation ディレクターブログ
こんにちはモバイルを担当していますタルです。 つい最近モバイル版 livedoor ニュースのリニューアルを担当させていただいたので そのことについて今回書かせていただきたいと思います。 リニューアルとは「なんのために（何を目的に）やるのかということが重要」とよく言われてますが 今回のリニューアルは 2つの改善テーマをもってリニューアルいたしました。 ・UI（ユーザビリティ含む）改善 ・AdSense 改善 ケータイのページは見せられる画面が小さく、限られているのでその中で、そのコンテンツで見せるべきものの優先順位を PC よりもはっきりとしっかりとつけなくては単調で何も伝わらないページになってしまいます。 【01】画像を出来るだけ削除 （基本的には１００K端末をメインターゲットにして作ればよいが それでも７０Kと30Kでは表示される速度がかなり違うので、そのページで何を 優先して伝えたい
ヘッダーにも記事一覧を設置するブログデザインの小技 | SiMPLE*SiMPLE
ヘッダーにも記事一覧を設置するブログデザインの小技 May 24, 2007 2:20 PM written by 8maki ブログのインターフェースも多種多様になってきています。ヘッダー部分も主種様々な工夫がなされていたりしますよね。今日はその中の一つをご紹介。 Gizmodo Japanのヘッダーには人気の記事一覧がおり込まれています。 また、lifehack.orgでは最新記事一覧が表示されます。 ブログの記事一覧はサイドバーに設置するのが一般的ですが、訪れたらまずはじめに目がいくヘッダーにも設置することで、どういった記事を書くブログなのか、初めての人にもアピールしやすくなります。 それにヘッダーって常に目に付く場所ですから、いきなり個別記事ページを訪れた人に対しても他の記事をアピールすることができます。 他にもヘッダーやフッターなどをうまく使ったブログレイアウトがあったらご紹介し
成功するショッピングサイトに必要な17の新常識 | POP*POP
SEO関連の話題を扱っているseomoz.orgにて興味深い記事がありました。「17 New Rules for Successful E-Commerce Websites」です。 ショッピングサイトを作るときにはどういった点に気をつければいいか、かなり参考になるのではないでしょうか。 以下に詳しくご紹介（あまり好きではないですが、説明の都合上、元記事からそのまま画像を拝借しています）。 ユーザーがどこにいるのか教えてあげよう ユーザーがトップページ以外にいる場合、どのセクションにいるのかわかるようにしましょう。パンくず型のナビゲーションも有効です。 選択条件を解除できるようにしよう ユーザーは一般的に選択条件を追加しながらサイトを見ていきます。そうした選択条件はすぐにはずして元に戻れるようにしておきましょう。 一般的な並び替え方法はきちんと用意しよう ユーザーが選択しやすいように「価格
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
小粋なインターフェースを実現する25のコード （パート3） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
シリーズもの第三弾が発表されていました。ウェブ製作に使えるちょっとした小技集です。パート1と2もあわせてどうぞ。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 今回も全部で25個ありますが、気になったものをいくつかピックアップ。 ↑ Flickrのようにクリックするとその場で編集できるようにする方法。 ↑ テキストがフェードイン、フェードアウトしていくような効果を作る方法。 ↑ CSSだけで上のようなボタンを作る方法。 ↑ CSSだけでリストをこのようなツリーのようにする方法。 全部見たい方は以下からどうぞ。一度試しておくと技の幅が広がりそうですね。 » 25 Code Snippets for Web Designers (Part3)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee
Phenomena Entertainment
IDEA * IDEA
角丸や矩形だけではない、タブ型ナビゲーションのデザイン集 | コリス
http://youmos.com/news/css_step_menu
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos