スクロールは制御するな - Weblog - Hail2u.net
WWD Japanのウェブサイトがリニューアルして、スッキリした見やすそうな印象のものに変わった。しかし実際のところ見やすさは見せかけだけで、ナビゲーションをクリックしても見当違いのタブに切り替わったり、ニュース一覧からニュースをクリックしたら、要約ページへ移動するだけで、本文へはもう一度クリックしなければならなかったりする。中でもひどいのがMobile Safariでの閲覧だ。 このウェブサイトではスクロールをほぼ自前で制御しようとしているため、常にこのようにMobile SafariのURLバーとツールバーが上下にそれぞれ表示され続ける。その上、最上端にロゴとグローバル・ナビゲーション、最下端に広告がそれぞれ固定位置であるので、コンテンツの領域がかなり制限されている。iPhone 5SやSEどころか6+や7+でさえも致命的なのではないかと感じられる狭さだ。 とにかく文書を読ませようとい
ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」:phpspot開発日誌
ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 2009年10月30日- ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」。 普通、数値入力というと、ボックスに直接入力したり、ボタンを連打したりして上下させますが、このSpinBoxを使えば、画像上でクリック→上 or 下にドラッグすることで簡単に数値の調整が出来ます。 デモページ 名前の通り、jQueryベースで作成されていますので比較的簡単に使うことが可能です。 以下のエントリを参照してください。 HowToSetupJapanese - jquery-drag-spinbox - Project Hosting on Google Code
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
【ハイクオリティ】iPhone Toggle UIをCSSとjQueryで実現 ≪ JavaScirpt ≪ MOMA Labs
三度の飯よりiPhoneが好き！松本です。iPhoneがつながらないと誇張抜きでテンパリます。 かなりクリーンなソースでiPhoneのトグルスイッチを実現しているコードがあったのでご紹介します。なんてクールなんだ！ iPhone向けのサイトも多くなってきている昨今、これからガシガシ役に立つんじゃないでしょうか。 百聞は一見にしかず、まずはデモサイトをご覧ください。 ダウンロードとインストール iPhone Toggle Switches // Elijah Millerの【Download】から必要ファイルを一式落とします。 jQuery版とprototype版が用意されてるのも素晴らしいですね。私はjQueryに傾倒しているのでjQueryを選択。 HTMLの内で次のようにJavaScriptとCSSを読み込みます。 1 2 3 4 5 <head> <script type="jav
リンクとボタンの使い分け - ウェブユーザビリティ.JP
金曜日, 10 月 12th, 2007 | Author: sibsiv | (0) (0) (0) (0) Total: 0 一昔前のウェブサイトでは、「リンク＝単純なページ遷移」「ボタン＝データに対するアクション」という分かりやすい区別が存在しましたが、近年ではjavascriptの利用などにより、リンクでフォーム機能を実現することが多くなりました。 これにより、昔のような制限に囚われずにサイト設計・表現を行なえるようになりました。 しかし、その一方で、利用者側の立場からすると、ボタンやリンクを見たときに、それがどのような動作を行なうものなのかを簡単には判断できなくなってしまいました。 設計の幅が広がったことはとても好ましいことですが、単純な見た目だけに囚われることなく、利用者の立場に立って考えなければユーザビリティは損なわれてしまいます。 設計をする上では、どちらを使ったほう
日付や時刻の十の位と一の位を別々に選ばせるフォームは劣悪
日付や時刻の十の位と一の位を別々に選ばせるフォームは劣悪 2009-07-29-3 [Design] カレンダーの日付や時間を選ぶフォームで、 十の位と一の位を別々に選ぶタイプのやつは、 繰り上がるときにものすごく面倒。 例えば、29日になっているやつを30日にしたい場合、 2→3, 9→0 の二回の操作が必要になる。 前述のフォームは某乗り換え案内サービスのやつ。 下記のものはYahoo!の乗り換え案内のフォーム。 時刻は別々なのでダメダメだけど、日付はこっちの方がマシ。 願わくば、日付の後に「次の日」ボタンがあればいいかな（時刻のところには「▼(次)」と「▲(前)」がある）。 乗り換え案内だと次の日のことを調べる場合が多いので。
複数選択のドロップダウンにチェックボックスを付ける·Dropdown Check List MOONGIFT
「神は細部に宿る」。ほんのちょっとした機能だからと見過ごすのではなく、ほんのちょっとしたことだからこそ誠心誠意作り込んでいくといったような意味合いが込められた言葉だ。コンピュータのGUIインタフェースはまだここ十年、二十年の話でありまだまだ改善の余地は大きい。 ドロップダウンリストが便利に！ 例えばファイルのアップロード、一つ一つファイルを指定するなんて愚の骨頂だ。さらに複数選択のドロップダウンも選んでいる途中のちょっとしたミスで全ての項目が非選択に戻ったりする。これも問題だが、解決策としてDropdown Check Listがある。 今回紹介するオープンソース・ソフトウェアはDropdown Check List、ドロップダウンリストにチェックボックスを付けるというjQueryプラグインだ。 これは良いアイディアだ。Dropdown Check Listを使うとドロップダウンの複数項目
UIデザインガイドラインのまとめ : could
UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G
UIデザインガイドラインのまとめ - everything might happen tomorrow - yhassy - builder by ZDNet Japan
デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日本語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction Guidelines Windows UX チームが公開し
【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (1) シンプルでかつ強力なウィジェット群 | エンタープライズ | マイコミジャーナル
7月3日に掲載した記事「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」ではjQuery UIの簡単な概要と、jQuery UI/SliderとjQuery API/CSSを組み合わせたサンプルコードをいくつか紹介した。簡単なコードを追加するだけで、工夫次第でさまざまな使い方ができるUIを作成可能ことがおわかりいただけたと思うが、jQuery UIには他にも汎用性の高いコア機能とウィジェットが用意されている。本稿ではその中でもとくに興味深いウィジェット「Datepicker」「Dialog」「Tabs」を紹介する。 なおWebブラウザ実行環境と使用したJavaScriptファイルは次のとおり。 Microsoft Windows XP SP3 / Microsoft Internet Explorer 7 FreeBSD 8-current / M
サイト内にウィンドウを開く「Prototype Window 」
サイト内にウィンドウを開く「Prototype Window 」 Prototype Windowはウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。 Prototype WindowはPrototype.jsを拡張するUIライブラリです。 また、「script.aculo.us 」のエフェクトも利用することが可能です。 利用方法 まずは、配布ページよりPrototype Window 本体をダウンロードします。 ダウンロードしたファイルからwindow.jsとprototype.jsをhead要素内などで読み込みます。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="window.js"></script> 次にテー
チェックボックス 対 ラジオボタン
間違いその 1 は、この記事のテーマそのものだ。ラジオボタンを使うべきところで、チェックボックスを誤って使っているということだ。上記の 2 つの選択肢は互いに排他的なので、1 つの選択肢だけが選べるラジオボタンを使うべきだ。 間違いその 2 は、そもそも 2 つの質問をしていることと、それを大きくて、言葉数の多い枠に入れていることだ。ここでは、短い 1 つ質問をするほうが、ずっとよい。「はい、私にその他のお薦めの製品、ソリューション、サービス、講習会などの情報を送ってください。」といった具合だ。 皮肉にも、1 つの質問にした場合はチェックボックスを使うのが正しい。なぜなら、ユーザは yes か no かを答えることになるからだ。eコマースサイトでのユーザテストから導き出された推奨事項では、チェックボックスの初期値はブランクにすることになっている。そうすれば、さらに情報提供を希望するユーザは
【ハウツー】ゼロからはじめるModalBox - ModalBoxでつくるMacOS X風ダイアログ (1) ゼロからはじめるModalBox - ModalBoxでつくるMacOS X風ダイアログ | パソコン | マイコミジャーナル
ModalBoxとは? ModalBoxはMacOS X風のダイアログを表示するライブラリです。ダイアログ内に表示する内容は非同期通信で読み込まれます。表示できる内容はHTMLファイルやテキストファイルのみで、単純に画像を表示することはできません(*1)。ModalBoxはHTMLファイルを表示するためダイアログには決められたボタンだけでなく様々な情報を表示することもできます。また、ModalBoxはprototype.jsライブラリとscript.aculo.usライブラリを利用しています。 ModalBoxはこのURLにあるページからダウンロードすることができます。 ModalBoxのダウンロードサイト ページ上にある「Download latest version」の囲みの中にある「ModalBox 1.5.3」をクリックするとダウンロードが開始されます。ダウンロードしたファイルはZ
コマンドリンク
アプリケーションで用いるコマンド（命令）は、ボタンでもリンクでも表現できるようになってきたので、どちらが適しているかを決めるには、昔よりも多くの説明が必要とされる。しかしながら、重要なコマンドにはやはりボタンを用いるのが一番だ。 Command Links by Jakob Nielsen 2007年5月14日 今よりも物事がシンプルだった時代には、ウェブサイト向けガイドラインの数々が存在し、その一方でアプリケーション向けガイドラインの数々が存在していた。そして両者は明らかに別物だった。たとえば、ユーザーの選択肢を表現するためには、以下のような別々のルールが示されていたのだ： ウェブサイトでは、リンク（アンダーラインを引いた色つきテキスト）を用いてナビゲーションを提供すること。 アプリケーションでは、メニューやボタンを用いて機能を提供すること。 ウェブサイト向けとアプリケーション向けのガイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.8-p.info/2009/03/textfield-js