家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手..
家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手にとらない。 Androidは論外だった。 アプリにはだいたい主要な画面が4つか5つほどあり、簡単にいうとその画面を行き来しながら利用する物が多い。 年寄りにとって一番利用しやすいのは画面がリニアに進むということだ。 アプリをタップしたら常に最初にメニュー画面、メニューからボタンを押したら目的の画面のように進まなければ、そこで理解がむずかしくなる。 アプリによってはアプリタップ後、最後の画面を表示してくれる物も多い。そういうのは年寄りには難しい。まずは元に戻りたいと思うようだ。 スタート画面が設定されているのもあればない物もある。 アプリによってはしばらく時間があると普段とは違うメッセージが出る物もある。 タップでボタンが表示される奴は論外だ。タップの仕方によりボタンが出ない・出るで教える最中に喧嘩になる。 タップ
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
パソコンのキーボードは何で微妙な配置になっているんですか？文字のキーのところを見ると微妙な角度でキ - パソコンのキーボード... - Yahoo!知恵袋
パソコンのキーボードは何で微妙な配置になっているんですか？ 文字のキーのところを見ると微妙な角度でキ パソコンのキーボードは何で微妙な配置になっているんですか？ 文字のキーのところを見ると微妙な角度でキーの下にキーがあったりします。 何故でしょう？
ENTEREAL
// 上記インプット要素に対し // 下のJSを実行するだけ <input type="text" class="form-control" id="Date"> // $('#Date').datepicker(); オプション設定 上記のサンプルはオプションを一切設定せず、デフォルトのままです。 デフォルトのオプション設定では、ほとんどが英語表記になっていますので、日本人ユーザのために日本語表記に変える部分を中心に記載します。 詳細は、(英語ですが)本家ページをご参照ください。 http://api.jqueryui.com/datepicker/ ここでの設定値 $('#Date').datepicker({ dateFormat: 'yy/mm/dd (DD)', yearSuffix: '年', showMonthAfterYear: true, monthNames: ['1月
DatePickerDialogで日付の選択範囲を指定 - Qiita
DatePickerDialogで日付の選択可能な範囲を指定する方法。 Webにもあまり情報がなかったので、メモ。 // 現在の日付を取得 Calendar calendar = Calendar.getInstance(); int year = calendar.get(Calendar.YEAR); int month = calendar.get(Calendar.MONTH); int day = calendar.get(Calendar.DAY_OF_MONTH); DatePickerDialog dlgDatePicker = new DatePickerDialog(this, year, month, day); // 最大値 // 月は0が1月となる。 GregorianCalendar maxDate = new GregorianCalendar(); maxD
Datepicker のカレンダーで選択できる日付の範囲を設定
jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。選択できる日付の範囲を設定したい場合は、minDate オプションと、maxDate オプションを使う。 実装例（サンプル） 日付: 実装例（サンプル）の動作について 「日付:」の右側の、テキスト入力欄をクリックすると、今月のカレンダーが現れる。 カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。 をクリックすると、次月のカレンダーになる。 をクリックすると、前月のカレンダーになる。 本日の1週間前から、本日の1カ月10日後までの範囲を指定してある。範囲外の日付は選択できない。 実装例（サンプル）のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場
Datepicker | jQuery UI 1.10 日本語リファレンス | js STUDIO
jQuery UIのDatepickerはページに高機能なカレンダー型の日付選択のUIを追加します。 オプションによって、日付フォーマットや言語の選択、選択できる日付の範囲の制限、 ボタンやナビゲーションの追加などのカスタマイズをすることが出来ます。 デフォルト設定では、関連付けられたテキストフィールドにフォーカスされた場合に DatePickerはカレンダーを小さなオーバーレイで開きます。 インラインカレンダーについては、単純にdivまたはspanにDatePickerを指定してください。 DatePickerはいくつかの機能的なCSSを必要とします。 このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。 キーボード操作のサポートについて カレンダーが開いている場合、下記のキーコマンドが利用可能なります。 PAGE UP 前の月に移動します。 P
jQuery UI - デートピッカー - jQuery 入門
日付を入力する時には、カレンダーをみながら入力したい場合が多いものですよね。 最近のアプリケーションでは日付の入力項目では、キーボードからの入力を許可すると同時にカレンダーが表示される場合も少なくありません。 jQuery UI のデートピッカーウィジェットを使うと、簡単にカレンダーを利用できます。 基本的な利用方法 次のテキストボックスを日付の入力項目とします。 このテキストボックスに日付を入力するために、テキストボックスにフォーカスがきたときに、カレンダーを表示しています。 カレンダーから日付を選択すると、カレンダーが閉じて選択した値がテキストボックスに入ります。 ちなみに、このカレンダーは Ctrl + 矢印キーなどでキーボードからも操作可能です。 このようなカレンダーの表示をどのようにしたら実現できるでしょうか。実はこの動作はデフォルトの操作そのままなので、ほんの一行でできてしまい
UIデザイン・プロトタイピングのセミナー交流会に行ってきました #popapp - ぬんびりぶろぐ
2014年9月10日、渋谷ヒカリエのDeNAさんで開催された UIデザイン・プロトタイピングのセミナー交流会 行ってきました 100名定員のところ268名参加希望が来ちゃうという人気ぶり！ はじめて見たときに、iPhoneだけでプロトタイピングできちゃうスゴイ！！と衝撃だったプロトタイピング用アプリ「POP」を開発したBenさんのお話と、あの凄腕デザイナーでデベロッパーな深津さん(@fladdict)が登壇するのだから、この人気も納得です スケジュール 17:30 開場 18:00 – 18:10 オープニングトーク 18:10 – 18:40 POPとUS式のアプリデザインについて by Ben Lin 18:40 – 19:25 ペーパープロトタイピング入門 by fladdict 19:25 – 19:40 会社および事例説明 by DeNA 19:40 – 21:00 交流会 PO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル技研 || 研究開発情報
Material UI