スマートフォン対応サイトを設計するときのノウハウ (1/3)
Webサイトの制作は、一般的にサイト設計／構造設計→画面設計→デザイン制作→HTML/CSS制作→JavaScript開発といった手順で進めます。 スマートフォンサイトの場合も基本的な手順は同様で、各設計工程を経て制作していきますが、PCとも携帯電話とも違うスマートフォンの場合、サイト設計段階でも注意すべき点が多くあります。今回は、スマートフォンサイトを設計する際のポイントを解説します。 スマートフォンサイトの構造設計 「構造設計」とは、Webサイト全体の各ページのつながりを考え、いわゆる「サイトマップ」を作成する作業です。 トップページから連なるWebサイトにおいて、利用者に見てもらいたい情報を探しやすく整理し、Webサイトの目的に応じた「ゴール」への誘導を考えます。 入口は検索エンジン対策（SEO）重視で考える 一般的な携帯電話ではカメラ機能と2次元バーコード（QRコード）が普及してい
jQueryGlobe - jQuery Plugin - Feature List
I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release a plugin that came from my personal need - Feature List. This jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget. You can see the demo at this page, and you can download the complete source code with examples from here. What’s So Great About this Plugin? Slick
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
50 Examples of Pixel Perfect Button Design | Inspirationfeed
Buttons are always an important part of any website. The button’s main goal is to attract the user into performing an action you want them to. Meaning to sign up, purchase now, log in, vote up, and etc. Not only do they attract users, but they also add a mood to the overall website design. There are a huge variety of button designs out there. In this roundup we have collected some of the most beau
iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ
iPhone･iPadのWebアプリケーション開発を相変わらず研究しています。 最近のiPhone･iPad Webアプリケーション開発と言えば「Sencha Touch」ですね。リリースされてから何だかんだ言い訳して、ガッツリ勉強することから逃げていますが、まぁそろそろ（本当に）ガッツリ研究していこうと思います。 と、冒頭でSencha Touchの話になりましたが、今回はjQueryのプラグインです。 jQueryのiPhone Webアプリケーション開発と言えば「jQTouch」ですが、Sencha Touchに比べると用意されているUIもイベントなんかも少ないんですよね。HTMLを書き書きするだけでサクサク作れちゃうところはいいのですが、もうちょっとSencha TouchみたいにいろんなUIを使いたいところです。 そこで、jQueryでもCarousel風のUIをサクサクッと作れ
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
Five Second Test
Five second testOptimize the clarity of your design or message by measuring first impressions and recall. What is a Five Second Test?Five second testing is a user research method that help you measure a users first impression of your design. It’s commonly used to test a users recall and assess if your design is effectively communicating it’s intended message. Why is Five Second Testing important?F
山中俊治の「デザインの骨格」 » iPhoneを使いこなす赤子
骨展忘年会の土佐さんによるオタマトーン演奏もすごかったですが、もう一つ地味にすごい光景を見てしまいました。 参加者の一人がつれてきた一歳半のお子さんが、ふと父親のiphoneに手を伸ばしたのです。まだほとんど意味のある言葉も話せないのに、左手でそれを持ち、右手の人差し指でキーをスライドさせて、こともなげにロックを解除させました。唖然として見ていると、そのままアプリ一覧をスクロールして、ipodアプリを立ち上げ、自分が映っているビデオや、家族の写真を拾いだしてきて、こちらを見てにっこり。 画面の３分の一ほどしかない小さな指が、右に左に写真をスルーする様は圧巻です。それに飽きると、別なメディアアート系のアプリを立ち上げて、父親に見せたりもしていました。 特に教わる事もなく、見よう見まねで触っているうちに使いこなしたのだとか。他のケータイは使えないそうです。 少し前に、工学部の学生と、アップルは
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
グーグルが新しい検索結果UIをテスト中、画面が3列に
グーグルが検索結果を表示するページの新しいユーザーインターフェイスをテストしています。いままで2列だった検索結果が3列になり、左側にはカラフルなアイコンとともにメニューが並ぶようになりました。 これがその新しい検索結果の画面です。 広い画面の活用を狙ったか 新しいユーザーインターフェイスの特徴はなんといっても左側のメニューです。画像やニュース、ブログなど目的別の検索結果へのリンクが目立つようになり、すばやく切り替えられるようになりました。 さらに、関連キーワードでの検索、1時間以内、24時間以内、1週間以内などの時間での絞り込みも分かりやすい位置に表示されるようになっています。 これは広い画面での検索結果の画面のユーザービリティの向上と、大量の検索結果から効率よく目的のページを発見しやすくする効果を狙ったものだと思われます。 左側にメニューを並べるユーザーインターフェイスはYahoo!もト
ユーザーのニーズを把握する7のフリーのHeatmapツール
ヒートマップとはクリックした場所を 把握する為のアクセス解析の類で 物を言わないユーザーの行動 パターンを把握し、ユーザビリティに 繋げる為に使用されます。決して 熱い地図とか情熱大陸の英語版 等ではないです（分かるがな そんな便利なヒートマップですが、多くは有料のサービスで以前は 無料版もあった有名なCrazy EggもＡｌｌ有料に なってしまったので無料で使用出来るヒートマップのサービスや ソフトウェアを７つご紹介します。 ClickHeat 個人的には一番使いやすい印象でした。インストール型ですが、 インストールも簡単で日本語化されています。GPLで配布される オープンソースのアクセス解析ソフトで、PHP、MySQLで動きます。 使用法ClickHeatをDLして解凍、フォルダごとアップロードします。フォルダ名はClickHeatとします。 http://example.com/Cl
Mozillaの独自拡張CSSは使わないでください - Web標準普及プロジェクト
Mozillaの独自拡張CSSは使わないでください Mozillaは標準準拠を基本方針として開発されていますが、独自にCSSのプロパティをいくつか定義しています。 -moz-border-radiusや-moz-box-resizingといったものです。混乱を避けるため、独自拡張したプロパティは"-moz-"で始まっています。 そのほとんどはMozillaのGUIのために作られたものです。MozillaはCSSによってGUIの外見を定義しており、 W3Cの仕様にあるCSSのプロパティで足りない部分は独自のプロパティで補っています。 また、将来のCSSに対する提案として実験的に実装されているプロパティもあります。 これらのプロパティは一般のWebページで使うべきものではありません。 プロパティ名が突然変わり、使えなくなってしまうこともありえます。 Internet Explorerの独自拡張
規約や注釈など、「見せたくない要素」をうまく扱う画面設計 4つのポイント - Feel Like A Fallinstar
久しぶりにユーザビリティねたを続けて。 企業のサイト特有の事情として、「ビジネス制約の関係から（載せたくもないものを）画面に載せないといけない」ことが多くあります。 具体的には 事情を知らない誰か（※詳細はご想像ください）が、「これ入れないといけないだろう」と言う → そういう人に限って、最終決定の権限を持っていたりして、、、 利用規約などの説明を延々行わなければならない サービス紹介の過程で、どうしても自社が弱いスペックも見せざるを得ない といったところでしょうか。 そこを何とかうまくやりくりするのも画面設計のスキル。 見せたいものと見せたくないものを両立させている画面を今日は紹介したいと思います。 1. 右カラムを有効活用する Doda転職サポートお申し込みフォームの例です。 「利用規約などの説明を延々行わなければならない」を綺麗に回避したページ。 通常1カラムで組むフォーム部分の右側
フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar
ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
10 jQuery Custom Scrollbar Plugins
たった5秒でウェブサイトがどんな印象を与えられるかテストできるサイト「Clue」 | ライフハッカー・ジャパン
GizmoCrunch - Your Daily Byte of Tech Discovery
23歳の「元」Apple・UIデザイナー - tatsdesign's posterous
Internet Marketing Blog
携帯Flashの使いやすさを損なわない、携帯Flashサイトのユーザビリティ基礎（第10回） | モバイルサイト構築のユーザビリティいろは
