確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
勝手にリデザイン：新宿高層ビルの館内施設案内板
9/8/2011勝手にリデザイン：新宿高層ビルの館内施設案内板Twitterで、あるサイン（案内板）のことが話題になっていました 。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方に目的を伝え、撮影可否についても尋ねましたが、撮影はNGとのことでした） それで、記憶を頼りに書いてみた館内図がこちらになります。案内板Aが問題となる案内
スマホUI考3 ～ ジェスチャ入力について | fladdict
スマホUI考１ 〜 ボタンについて スマホUI考２ 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
プログラマのためのUXチートシート — ありえるえりあ
はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の 「Windows ユーザー エクスペリエンス ガイドライン」 「ガイドライン」 主に「コントロール」 の抜粋です。 以下の基準で抜粋しました Web UIに応用可能 実用的かつ具体的 自明ではない プライマリUIを目立たせる プライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミット ボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンド ボタン、コマンド リンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。 ユ
SIGIXD 2nd Googleにおけるインタラクションデザイン - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ SIGIXD 2nd ------------------------------------------------------- http://sigixd.org/2nd.php Googleにおけるインタラクションデザイン ＃川島さんの示唆に富んだ話がすばらしかった。 川島 優志氏 シニアウェブマスター・アジア太平洋マネージャー: "Behind the web design & Doodle creation" Judy Shade UX Researcher: "UX at
マイクロソフト、身ぶりによるコントロール技術を手がけるCanestaを買収へ
Microsoftが、身ぶりでデバイスを操作できるようにする技術を手がけるCanestaを買収することが、米国時間10月29日に明らかになった。 買収の金銭的詳細は公表されていないが、Canestaの最高経営責任者（CEO）であるJim Spare氏が声明の中で述べているように、「今後10年間に、あらゆるデバイスでナチュラルユーザーインターフェース（NUI）による入力が一般的になることに疑問の余地はほとんどない」ことを、Microsoftによる今回の買収は示唆している。「エンタープライズから消費者向け製品まで広範な領域をカバーするMicrosoftの、市場での存在感とUNIへの積極的な取り組みがあれば、われわれの技術を最大限に開花させる多くのアプリケーションにこの技術が幅広く採用されることを確信している」と、Spare氏は語っている。 Canestaは、ノートPC、ゲーム機、テレビの前に人
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
「iPadは使いにくい」：米のUI専門家が批判 | WIRED VISION
前の記事 ネットは「偏った意見」を強化するか：研究結果 「米国初の洋上風力発電」：反対運動で難航 次の記事 「iPadは使いにくい」：米のUI専門家が批判 2010年5月13日 IT コメント： トラックバック (0) フィードIT Brian X. Chen 『iPad』はインターフェースの勝利と称されている。しかし、あるユーザビリティーの専門家はこのほどiPadについて、インターフェースに一貫性がなく明確でないという批判を発表した。インターフェースに標準が設定されていないため、それぞれのアプリが違ったように動くのだという。 一部からは「ユーザビリティーの王様」とも呼ばれるJakob Nielsen博士は今週、『iPad』の使いやすさを評価する93ページのレポートを発表した。このレポートは、34種類のアプリとウェブサイトをテストした7人のユーザーからのフィードバックを基に作成されている。
「情報過多の時代」の鍵は「キュレーション」 | WIRED VISION
前の記事 Twitterから「自分の新聞」を生成するiPadアプリ 「情報過多の時代」の鍵は「キュレーション」 2010年5月17日 メディア コメント： トラックバック (0) フィードメディア Eliot Van Buskirk ドイツにあるGermanisches Nationalmuseum／画像はWikimedia Forrester Research社のアナリストSarah Rotman Epps氏は、Arstechnicaの記事等において、iPadは「キュレーティッド・コンピューティング」の時代の幕開けを告げるものだと評して話題になった。しかし、「キュレーションの時代」は、「キュレーティッド・コンピューティング」よりずっと前から始まっている。 [「キュレーティッド・コンピューティング」とは、機能が絞られているが、使いやすい機器のことを指す。キュレーションとはもともと、博物館や
fallinstar.org
We’re getting things ready Loading your experience… This won’t take long.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
TechCrunch | Startup and Technology News
イケハヤ公式サイト | Web3・AI・投資・ビジネスの最新情報
TechCrunch | Startup and Technology News
https://jp.techcrunch.com/2010/08/11/20100810gmail-contacts/
【Tech Founders Japan】 Foodspottingから学ぶユーザーエクスペリエンス設計の勘所 - IDEA*IDEA ～ 百式管理人のライフハックブログ
