Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
モーダルウィンドウはやめて！モバイルで最適なUIとは？ | UX MILK
モバイルサイトで最もフラストレーションのたまるユーザー体験の一つとしてモーダルウィンドウが挙げられます。PCサイトでは画面サイズが大きいので、モーダルウィンドウの表示に問題はありませんが、モバイルの場合はウィンドウが（ほとんどの場合）、画面外にはみ出てしまいます。ユーザーはモーダルの一部しか閲覧できず、閉じるのにも一苦労です。 また、画面上にキーボードが表示されている場合、閲覧は更に困難となります。キーボードは画面上に大きな面積を占め、ユーザーは自分が何を入力しているのかを確認するために、いちいちスクロールする必要が出てきます。もし、モーダルウィンドウで表示されているコンテンツを快適に見せたいのであれば、モバイルでのモーダルの使用は控え、代わりにアコーディオンを使いましょう。 アコーディオンはコンテンツをページ内に納めて表示するので、モーダルのように元のページにかぶさって表示されることはあ
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
［Android/iPhone編］独自のUIを構築してはいけない
iPhoneやAndroidが搭載されるデバイスの多くは、「タッチパネルディスプレイ」を全面的に採用している。これは指をディスプレイに触れて操作するもので、従来のPCや携帯端末とは操作方法が大きく異なる。マウスを使ってポインタを操作するというかつての見慣れたユーザーインタフェース（以下、UI）は全面的に見直されることになる。 マウスを使ってポインタを操作するのと、指で操作するのでは、操作の感覚が全く異なる。後者のほうがより直感的であり、肉体的だ。従って、アプリケーションの設計において、「いかにユーザーの立場に立ってUIを考えるか」ということが比較的大きなウェイトを占めてくる。UIの良しあしが、アプリケーションの使いやすさにそのまま直結してくるからである。 iPhoneアプリケーションの開発においては、米Appleがデベロッパー向けに定めた「iPhoneヒューマンインターフェイスガイドライン
アプリの設定は、初心者/上級者の２段階モードがいいんじゃないかと思う | fladdict
iPhoneアプリなり, Airアプリなりを作ってて思ったんだけど、特にiPhoneのような画面の小さい環境では、機能要望の取捨選択がムズかしい。 本来、ウィジェットというのは単機能特化が一番いいんだ思う。 ところが、ユーザーからの機能要望というのは限度がなく、その全てに対応すると、アプリケーションがあっという間にファットになってしまう。 ファットになったアプリは、既存のヘビーユーザーには歓迎される一方で、新規ユーザーにとっては害として働くことが多い。 まず、あれもこれもという多すぎる機能は、「何をすべきなのか」という本来のコンセプトを消し去ってしまい、それそのものの持っていた「体験」を台無しにしてしまう。結果、「何をしたいのか」が明確なユーザー以外には、きわめて使いにくい一品になってしまう。 また学習コストの大幅な増加も問題となる。iPhoneのような設定画面と、ヘルプを並列に見せること
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
ゲームソフト会社から見たiPhoneの魅力--「ここまで整ったプラットフォームは世界初」
アップルのiPhoneが7月11日、ソフトバンクモバイルからついに発売された。iPhone向けのアプリケーション販売サイト「App Store」には、日本企業により開発されたアプリも並んでいる。 そこに参入した企業の1つがハドソンだ。往年のヒットタイトル「ボンバーマン」をiPhone向けにリメイクした「BOMBERMAN TOUCH -The Legend of Mystic Bomb-（ボンバーマンタッチ ザ レジェンド オブ ミスティックボム）」のほか、物理計算で画面内の水の動きをリアルに表現しながら、端末を傾けたり画面に触ったりして水を動かし、パズルをクリアしていくゲーム「AQUA FOREST Powered by OctaveEngine Casual（アクア フォレスト）」など、新たなジャンルにも挑戦している。また、9つの数字を縦横1つずつになるように埋めていく「SUDOKU（
単色128X64ドットで3Dポリゴン描画、エイチアイ － ＠IT
2007/05/17 累計出荷実績が2億台を超えた携帯電話向けの3D描画エンジン「MascotCapsule」で知られるエイチアイは、組み込み向けの3D描画エンジンの応用範囲を、さらに広げたい考えだ。5月16日から18日の3日間、東京ビッグサイトで開催中の第10回 組込みシステム開発技術展で、同社は開発中の新製品をいくつかデモンストレーションしている。 3D描画エンジンの応用として、同社がターゲットにしたいのが、組み込み機器のメニュー表示やユーザーインターフェイスの3次元化だ。「MascotCapsule Widget」は、Windows Vistaに搭載されている視覚効果“Aero”に似た3次元視覚効果に似たミドルウェア。アプリケーションの切り替え時にサムネイルなどをパラパラと3次元空間で切り替えることができる。 MascotCapsule Widgetのデモンストレーション 5月14日
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://it.blog-jiji.com/0001/2009/11/accesselse-1c75.html
携帯サイト/フォームのmode属性、istyle属性 - 仙人の心得
新発想激速タッチペン入力ソフト！
Nokia mobile phones of the future (1)
Nokia's mobile phone of the future (2)