スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI
スマートフォンなどのモバイル用サイトを簡単に制作できるようにするJavaScriptベースのフレームワークを紹介します。 先日リリースされたiOS5にも最適化されています。 ChocolateChip-UI [ad#ad-2] ChocolateChip-UIで用意されているエレメント あらかじめ用意されているエレメントは数多くあります。 ツールバー ナビゲーションバー ボタン アイコン ナビゲーションリスト テーブルビューアー セレクションリスト スイッチコントロール ポップアップ プログレスバー アクティビティインディケーター アクションシート セグメントコントロール スライダー カルーセル スクロールパネル ページングコントロール テキストを並べても分かりにくいと思うので、下記にキャプチャでご紹介。
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
ウェブサイトのユーザビリティを改善する 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 ユーザー向けのコンテンツを書くことには独特
iOS 5の丸いボタン 人は何故丸いボタンを好むのか？
そこには目と脳の働きが関係していました！ iOS 5、新デザインの1つには設定メニューにあるボタンの変更があります。iOS 4の角丸のデザインよりもさらに丸っこいボタンになっています。そして、人はどうやら丸いボタンの方を好むそうです。その理由は目と脳の動き。四角い物よりも丸い物の方が目に止まりやすく、脳が認識しやすいと言われています。中心窩の人の目は丸い物の方が四角い物よりも数段早く処理できるのだそうです。人が丸っこい物を好むのは、目と脳が重労働を強いられないより楽な動きだからなのです。又、丸い物は中心に注意を集めるので、中のコンテンツ（文字や記号等）に目の意識を集中させることができます。四角は逆に外へと注意をひきます。つまり、iOS 4の四角ボタンのデザインだと外へと注意をひかれているのに逆らって中に持って行かないといけません。iOS 5の丸ボタンならば自然と中へと意識がいく、目にも脳に
勝手にリデザイン：新宿高層ビルの館内施設案内板
勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
MOONGIFT : 多機能、高性能なjQuery UIウィジェット「Wijmo Open」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
Wijmo Openはメニューやカレンダーなど多彩なウィジェットを提供するjQueryプラグイン。 MOONGIFTはこう見る Wijmo Openは多数のウィジェットが提供されている。この手のライブラリは増えつつあるが、大事なのはどれくらいのパターンに対応できるかということになる。Wijmo OpenはWebアプリケーション全体を規定する訳ではないので、足りないものは他のjQueryプラグインで補えるのが利点になる。 テーマ機能もあるので、いわゆる○○臭は抑えられると思われる。Webアプリケーションはもとより、ちょっとしたイフェクトやデザイン（ウィザード形式の処理など）を実装するのにも役立つと思われる。 [/s2If] Wijmo OpenはjQuery製のオープンソース・ソフトウェア。今後、モバイルのネットワーク利用が当たり前になったり、SaaSが隆盛になっていけば、Webアプリケーシ
現在のFacebookのUIがいかに話になってないレベルか - MIZの日記
http://d.hatena.ne.jp/shi3z/20101015/1287124685 のブコメでのid:shi3z さんとの会話に触発されて、Facebookとmixiのユーザーへの配慮の差を比較してみた。 技術寄りの人たちが根本的に誤解しているのが、「動きが速い」とか「豊富な機能」とかにとらわれて「迷わない」ことの重要さが吹っ飛んでいるということ。 とりあえず、一般人視点になりきってユーザーテスト。 あくまで「なりきり」だから、おそらくほんまもんの初心者が見たらこれの100倍は問題点が噴出するはず。 トップページ 文面 mixiの場合は上部の「mixiについて」できっちりSNSの概念を説明している。 Facebookのトップページは「できること」の具体的説明に乏しい。 トップページに登録フォームを置くことで使用開始までのステップを短くしたいのはわかるが、こういうものをユーザーへ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
