[JS]脚注をデスクトップ・タブレット・スマフォそれぞれで最適に表示するスクリプト -sidenotes
デモページ：幅480pxで表示（左：テキスト、右：脚注） テキストと脚注は相互リンクされているので、行き来できます。 sidenotesの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script> <script src="js/jquery.sidenotes.min.js"></script> Step 2: HTML 脚注をつけたい箇所に「class="footnote"」を加え、脚注へページ内リンクを設定します。 <article> <p>脚注をつけたい箇所<sup id="fnref:notes1"><a href="#fn:notes1" class="footnote">1</a></sup></p> <p>脚注をつけたい箇所<sup id="fnre
スマートフォン向けのサイトデザインでとっても大切な5つのポイント
J Taylor Design スマートフォンにおいて、スクリーン上のクリック（つまりタップ）無しに使うことは考えられません。ナビゲーションはユーザーが必要とすることが得られるように、明確な進路を与えるべきです。 ナビゲーションで重要なことは二つ。 まず、ナビゲーションが視覚的にタップ可能に見えるか確認してください。見た目をボタンやリストのようにしたり、矢印などを加えてもよいでしょう。ただし、スマートフォンではtitleのテキストをホバーで表示したり、ホバー時のエフェクトを適用できないので、それ無しでも押すことができるように見えることが大切なポイントです。 もう一つの重要なことは、ラベルです。 「戻る」というラベルがあれば、ユーザーは戻ることを期待します。これは当たり前のようですが、ユーザーにとってラベルが何を意味するか分かることを確認してください。 ラベルを有意義にするポイントは、シンプ
ウェブサイトのユーザビリティを改善する 7つの方法 | Startup Dating [スタートアップ・デイティング]
Mashable 日本語訳記事は、株式会社gumi の提供でお送りします。株式会社gumiは、拡大著しいソーシャルゲーム業界において、高い技術力と強固な運営体制をもとに、スマートフォン／フィーチャーフォン向けにゲームを提供するSAP（ソーシャル・アプリケーション・プロバイダ）です。我々は、日本はもちろん全世界に向けて、次世代のエンタテインメントを提供するリーディングカンパニーとして、グローバルNo.1を目指します。エンジニアをはじめ多数のポジションで絶賛採用中です。 All reproduction of the Mashable content is licensed by PARS International. (c)2011 Mashable, Inc. All rights reserved. 【翻訳 by Conyac】【原文】 Web ユーザー向けのコンテンツを書くことには独特
U-site
日記調査：長期間のユーザー行動と体験の理解 ニールセン博士のAlertbox 8月9日 読了までに約15分 参加者は日々の活動をその都度記録し、リアルタイムのユーザーの行動やニーズについてコンテキストに基づいた知見を提供する。 このサイトについて UXリサーチや市場調査の手法やコツ、結果や知見を紹介しています。 詳細 新記事公開は、Twitter・Facebook・RSSで随時、メルマガで月1回通知します。 Twitter Facebook RSS メルマガ YouTube、始めました 黒須教授のユーザ工学講義 7月25日 読了までに約5分 2024年5月にYouTubeチャンネルを開設し、そこで「黒須のユーザ工学入門」を連載することにした。講演や講義とは違ってもっとオープンにして、広い範囲の人たちに話を届けたいという気持ちがあったのだ。
Av-jyo.com
The domain av-jyo.com maybe for sale. Click here for more information. Av-jyo.com Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Web Designing Courses AVI DVD Player Online Data Protection MatchMaking Services Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Privacy Policy
デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン:phpspot開発日誌
jQuery SelectBox plugin デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン。 次のようないい感じのデザインで、かつ、１つのselectボックスを変更すると他のselectボックスの内容を変更できるイベントハンドラの設定が可能。 イベントハンドラに、onOpen, onClose, onChange といったメソッドにその処理を書いておけばカスタマイズが可能です。 以下、サンプルコードです。実装がカンタンな上に後から見たときに分かりやすい。JavaScript最高です 関連エントリ 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 レイアウトに関する強力なjQueryプラグイン６つ 超かっこいいmarquee2.0を実現するjQ
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
紙デザインとWEBデザインの違いを考えてみた | Maka-veli.com
よく本とかでも書かれていますし、 人によって考え方が違うのであまり書く気なかったのですが、 自分の勉強のタメにと、思った事を書いてみます。 作法が違う 良く出るお話。 紙デザインは媒体によって大きく求められる物が変わります。 雑誌 新聞広告 チラシ パンフレット 看板 専門誌 ここではあれてこれらも紙デザインと呼ばせて頂きます。 これらは大きく目的が分かれる事があります。 広告系にはインパクトが、事業案内などのパンフレットには 中身をしっかり伝える可読性とブランディングが、など。 逆にWEBサイトは オフィシャルサイト 販促サイト SEOランディングページ など、どれも当然「WEBページ」というくくりなので、 そこまで違いは無いにしろ、その中での目的がはっかり分かれます。 しかし、 紙とWEBで大きく分かれる特徴としては WEBサイトはSEOやユーザビリティ、アク
パンくずのデザイン集と概要やデザインのポイント
ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。
ウェブページのどこがクリックされやすいかテストできるオンラインサービス -navflow
ランダムページでテスト 「start test」をクリックし、次ページで「start when ready」をクリックするとテストが始まります。 ランダムにページが表示されるので、クリックしたい箇所をクリックするとテストの終了です。 利用の手順 登録（無料）をおこなった後、下記のフローで利用できます。 Product Tour デザインのアップロード 一つの登録で複数のデザインをアップロードすることができます。 テスターがテストをします テストはコミュニティのメンバーが行うか、あなた自身が行うかを決めることができます。 テストの結果 テストの結果はグラフを使用したビジュアル的な分かりやすいものです。
ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | 初代編集長ブログ―安田英久
また、ページの描画にかかる時間が3秒を超えると、40％の消費者がそれ以上待つのをあきらめてしまうとのこと（ただし、こちらも実際のデータでは、最も多かったのは「4秒超」の60%）。 では、ページの表示時間を特に気にするのはどんな層の人でしょうか。 調査によると、よくオンラインで購買活動を行う人ほど気にするようです。 そのネットショップへの愛着に影響する要素としてページの表示時間を挙げた人の割合は、オンラインで購買をする全体では52％ですが、年間1500ドル（約14万円）以上をオンラインで使う人では61%でした。つまり、よくネットで買い物をする人ほど、ページ表示の時間を気にするのですね。 次に、売上とページ表示速度の関係を。 ネットショップの表示が遅いからという理由で買うのをあきらめたことがある人は全体の1/3にも上りました。 ネットショップに対して不満を感じている人の23%は、不満の理由とし
ユーザがつい読んでしまう表現方法とは？ (ユーザビリティ実践メモ)
これまで実践メモでは、ウェブライティングの基礎など、ユーザにとって読みやすい文章表現についていくつか考察してきました。 ウェブライティングの記事一覧 今回は、訴求ポイントをFAQ形式で表現することで、ユーザに内容まで読まれやすくする方法をご紹介します。 このサービスでは、ただ子どもを預かるだけでなく、子どもの発達を考えたサービスを行っています。しかし、こうしたこだわりの説明文をコンパクトにすることは難しく、見出しでも曖昧な表現になってしまいがちです。 このページの場合、改善前はユーザは見出し以下の文章まで読まず、独自のサービスを訴求できませんでした。 そこで、特長の説明をQA形式にしたところ、ユーザは文章部分まで読むようになり、他社と違うサービス内容を理解するようになりました。 こういった、QA形式の文章がよく読まれるという行動は、弊社のユーザ行動観察調査の中で多く確認されています。 この
最後まで見てもらえる動画、4つのコツ (ユーザビリティ実践メモ)
一般家庭へのブロードバンドの普及、映像配信技術の発展から、近年、動画を用いるサイトが急増しています。 そこで今回は、ニュースや商品紹介・手順紹介など「解説系動画」において、ユーザに最後まで見てもらうためのコツをご紹介します。 動画の再生時間は約2分以内に収める 様々な動画でユーザビリティテスト（ユーザ行動観察調査）を行った結果、大半のユーザが1分半から2分の時点で停止ボタンをクリックしました。 動画は、文章のように斜め読みをして自分のペースで見ていくことができないという特徴があります。ですので、余り長く続くとユーザが飽き、関心が他に移ってしまいます。メッセージは簡潔にまとめるようにしましょう。 最初の3秒が命運を決める 一般的にユーザには「情報を効率的に収集したい」というニーズがあり、動画についても同様に、再生が始まった瞬間に「これを見るか否か」を判断しています。 よって、本題から始めるこ
動画で情報を提供する際の注意点 (ユーザビリティ実践メモ)
サイト内で動画を使って情報を提供する手法には、 ・ 情報をより具体的に伝えることができる ・ 表現が豊かになり、より強いインパクトを与えることができる といったメリットがあり、主にニュースやエンターテイメント性の高いコンテンツの提供に適しています。 本日はこの「動画での情報提供」を行う際に配慮すべき点について整理しました。 １．テキスト情報をあわせて用意する読み込みに時間がかかる動画コンテンツは、再生が開始されるまでにどうしてもユーザを待たせてしまいます。ネットブックやスマートフォンがますます普及すれば、このケースはより多くなるでしょう。 テキストや画像によるキャプションや補足説明など、動画以外の情報もあわせて用意することで、動画再生までの待ち時間にユーザの興味がそがれないよう配慮することが重要です。 ２．最初の数秒で、ユーザの心を捉える必要のない動画を長時間見せられることはユーザにとって
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツール – creamu
サイト上でのユーザーの動きを知りたい。 そんなときにおすすめなのが、『userfly』。ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツールです。 これはすごい感じですね。いろんなサイトでも話題になってるし。 ユーザーのマウスがどこからどう動いて、どこをクリックして、キーボードで何を入力したかを記録して、動画で見せてくれます。すげぇ。 デモが以下から見られるので、ぜひ試してみてください。一連の操作の後、自分の動きを動画で見ることができます。 Try the demo 料金は、無料プランで10の動画記録、30日間保存。1ヶ月25ドルの有料プランでは、1,000の動画記録、60日間保存となっています。1,000もあればかなりのデータになりそうですね。実際に人を使ったユーザビリティーテストのユーザ数はそんなにいかないと思うので、ひとまず無料プランでもよさそうですね。 ぜひ使っ
WEBアプリケーション作成に使われる４３のコントロールパターン:phpspot開発日誌
43 Essential Controls for Web Applications | UX Booth WEBアプリケーション作成に使われる４３のコントロールパターンがまとまっています。 ４３のパターンが網羅されているので、部分的に、どういうインタフェースが良いか？という点について迷った際にエントリを眺めるだけで参考になる部分がありそうです。 オートサジェスト カルーセル カレンダー、スケジュール グラフ、チャート コンボボックス スライダ ４３と言わずもっとありそうな気もしますが、ある程度のパターンを知っておき、適材適所のUIを考えてユーザビリティを上げるのに役立てることが出来そうですね。 それぞれのUIにも沢山のインタフェースがあると思いますが、その場合は「パーツごとのデザインが盛り沢山で参考にできるPattern Tap」で紹介したPatternTapなどを更に参考に出来そうです
「ランディングページ」の盲点 (ユーザビリティ実践メモ)
■1ページ完結型「ランディングページ」はコンバージョンまでに詳細な検討を要する商材に弱い 近年、広告をクリックした際に表示されるページとして、コンバージョンへのリンク以外を極力張らず、1ページ内で訴求を完結させる、いわゆる「ランディングページ」が普及しています。 この1ページ完結型の「ランディングページ」には、他ページへの離脱を防ぐというメリットがあり、基本的には１回の訪問で直接コンバージョンさせることを狙っています。 しかし、この1ページ完結型の「ランディングページ」が全ての商材に有効だとは限りません。まずは、この「ランディングページ」が有効な商材と、有効ではない商材の例を以下に整理しました。 ＜有効な商材＞ ・直感的にコンバージョンしやすい商材 （例）コスメ・食品等の消耗品、キャッシングなど シンプルな比較軸で選べる商材や、衝動買いしやすい商材など、１ページの情報量でコンバージョン可能
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
