日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
ログインボタンって本当に必要？ UIの常識を検証する
会員登録制サイトに欠かせないログインボタン。ヘッダーの右上に設置されていることが多いですが、購入などのアクションを起こした時点でログインフォームを表示するようにしておけば、ユーザーにわざわざ「ログインボタン」をクリックしてもらう必要性は薄れます。 ユーザーが明示的にログアウトしない限り、ログイン状態を維持しておくのも有効です。後日再訪問したときには「ようこそ○○さん」などと表示し、ログイン状態が続いていますが、購入や登録情報の閲覧など高いセキュリティが必要なアクションでは再度認証を求めます。わざわざログインしないでもパーソナライズされた情報が表示されるので、ユーザーにとって利便性が高く、運営側にも「会員の行動履歴を取得しやすい」「ターゲティングによりコンバージョン率が上がる」などのメリットがあります。 このように、「ログイン」「ログアウト」ボタンはどの程度目立たせればよいのでしょうか？ 今
キーワードは「モードレス」！Macの『メモ帳』がパソコン初心者に優しい5つの理由 | マミオン有限会社-パソコン・数学研修、法人研修
先日のメールマガジンでもお伝えした、 英語を習うために「Macbook Air」を購入したシニア女性。 メールや検索から始め、その後も順調にパソコンと仲良くなってきているようです。 そんなとき、「そろそろパソコンで英語を打つ練習がしたい」と相談を受けました。 うーん、Macにもいろいろエディタソフトはあるけれど、どうしようかな…。 とりあえず、Macの標準ソフトである「メモ帳」でいいか。 そんな風に適当におすすめした「メモ帳」ですが、実はこのソフトには、パソコン初心者でも使いやすいソフトウェアを設計するためのヒントがいくつも隠されていたのです。 今回はそれらについて、一部Windowsと比較しながらまとめておきたいと思います。 1. 保存がないから失敗しない「いま入力したものは、『保存』しなければ消えてしまう。」 「『保存』するときは、『ファイル名』をいちいち考えなければならない。」 シニ
ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
わかりやすい「エレベーターの開閉ボタン」ってどんなんだろうね？ | fladdict
Twitterで「ボタンと間違いやすいサイン」について呟いたら・・・ いつのまにか「間違いやすいエレベーターボタンのデザインの話」に巻き込まれてたでござる。 面白そうだったので、自分でも考えてみたり。コアコンセプトは以下のような感じ。 安全側にマージンを設ける 表現の為に安全を犠牲にしない 迷ったらコンサバに。チューニング芸で頑張る。 視覚的／言語的にハンディキャップがある人にリスクを負わせない。「ってか、そこは周囲の人で吸収する社会にしようぜ！」という思想を、そこはかとなく埋め込む。 ボタンの文言とか 「開く＆閉じる」や「開＆閉」は、漢字が似てて視認性が悪いのでボツ。「あける＆とじる」や「あける＆しめる」は、「る」が被るのでボツ。「Open & Close」は視認性が悪いし子供がわかんないのでボツ。 で「ひらく」と「しまる」に決定。 「とじる」や「しめる」じゃなくて「しまる」にした最大の
アップルウェブサイト｢Apple.com｣の15年の歴史をスライド（全141枚）でどうぞ
アップルウェブサイト｢Apple.com｣の15年の歴史をスライド（全141枚）でどうぞ2013.01.27 19:007,552 そうこ ここにアップルの歴史あり ウェブサイトのトップページには歴史があります。世に送り出されてきた多くの製品のデビュー時の姿があります。それは、企業の歴史そのもの。多くの本のマーケティングを務めるCharlie Hoehn氏が、今までのApple.comページをスライドショーにまとめています。その数なんと141スライド！ ちなみに、過去ページ観覧に使ったツールはこれ、Internet Archive Wayback Machine。 15年もの間、アップルのサイトは大きな変化なくクリーン＆シンプルを保ったデザイン。メインの製品を大きくみせる、そこに過剰な説明文やコピーは不要。大きな変化と言えば、2000年にメニューバーを上部に移動させたことと、2007年Le
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
お洒落を目指して、使いづらくなるサイトが多い件。 : ひろゆき＠オープンSNS
【教えてくん】コミュニティーなのです。 なんかニュースとかあったらここに書こうかと思ってますよ。とりあえず、おいらのブログ お洒落を目指して、使いづらくなるサイトが多い件。 : ひろゆき＠オープンSNS ひろゆき＠オープンSNS (ひろゆき＠オープンSNS) 投稿者, @ 2013-01-10 10:57:00 お洒落を目指して、使いづらくなるサイトが多い件。 はてなブックマークという、ソーシャルブックマークサイトのデザインが変わりました。 http://b.hatena.ne.jp/ なにやら、最近、サイトをお洒落にするってのが流行ってるみたいなんですよね。 iPhoneやらのappleがやってるデザインが流行のきっかけだと思うんですが、シンプルなので、使い方が直感的にわかり使いやすいので、説明が無くても使えるし、しかもお洒落と、デザインを考える人達から憧れられてるようです。 んで、はて
iTunesカードをカメラで読み取り可能にしたApple流UIとUXへのこだわり
なんでも無いようなことが幸せだった、と歌ったのは某ロックバンドですが、なんでも無いことにも幸せを感じられるようにすることはデザインの役割だと信じています。 というわけでタイトルの通りiTunesカードをフロントカメラで読み取ってみたのですが、このちょっとした作業（普通はまさしく作業でしかない）にすら「楽しさ」を盛り込んでいるAppleはすごいなー、と思ったお話。 ちょうどiTunesカードがお得に買えるっていうのでまとめ買いしてきた いつもお世話になっているなまら春友流の春友さんがキャンペーン中だと教えてくれたのでヨドバシカメラへダッシュ。 ヨドバシカメラ（店舗）でも iTunesカード2枚目半額キャンペーン中（12月16日まで） iTunesカードのアクティベート（有効化）がフロントカメラ認証でとんでもなく楽になってて感動した！ 個人的に2枚目半額（トータル25%OFF）は超まとめ買いチ
勝手にユーザビリティ評価#1： Microsoft Surface 初見編
日本では未発売のMicrosoft Surfaceを購入し、イード社内で触ってみました。Windows 8/RTのメトロUIは、GUIクロームを極力排除したシンプルで平面的なUIが特徴的ですが、実際に触ってみるとユーザビリティ上の問題がいくつか浮かび上がってきました。 U-Site編集部 2012年12月21日 HCD新人部員のTです。 日本では現時点で未発売のMicrosoft Surface（RT、32GB、キーボードカバーなし）を米国法人経由で購入し、イード社内で触ってみました。通常、弊社では、クライアントからご依頼をいただいてからユーザビリティ評価を行いますが、今回はイードHCD部新人の私・Tを中心に、「勝手に」ユーザビリティを評価してみました。 なお、Windows 8/RTのデスクトップの機能はキーボードとマウスで操作する前提で設計されていると思いますので、いわゆるメトロUI（
ミーバースはゲームに革命を起こすか
Wii U発売され1週間。毎日楽しく遊んでいるが、一番起動頻度高いのが、Wii Uに搭載されたSNS、Miiverse(ミーバース)だ。 簡単にいえばWii Uで遊んでいる最中にいつでも呼び出せる任天堂専用のTwitterのようなものだ。 使い方は非常にシンプルで、ゲームプレイ中にゲームパッド(もしくはリモコン)のHOMEボタンを押して出てくるメニューから呼び出すだけ。 Wii U本体に備わっているフレンド機能とは別に、「フォロー」機能があり、好きなユーザを1000人まで登録できる。 別々の機能なのに似たようなシステムなのでわかりづらいが、フレンドはネット対応ソフトでの対戦やWii Uチャットを行うための機能で、フォローはその人のミーバース投稿を見るための機能だ。 余談だが、フレンド機能についてはわかりづらい部分やユーザインタフェイスが直感的じゃない部分があり、改善の余地を感じる。 現時点
Windows 8 — 初心者にもパワーユーザーにも期待はずれのユーザビリティ
見えない機能、低下した発見しやすさ、二重の環境による認知的な負荷、シングルウィンドウのUIからくる能力の低下、低い情報密度。ひどいものだ。 Windows 8 — Disappointing Usability for Both Novice and Power Users by Jakob Nielsen on November 19, 2012 日本語版2012年12月6日公開 先日発売されたWindows 8とSurfaceタブレットでMicrosoftはユーザーインタフェース戦略を転換した。フィーチャークリープ訳注と言えるくらい、強力なコマンドを重視するGatesが主導した伝統的GUIスタイルからMicrosoftは軟化したが、今度は必要な機能を隠しながら、大きな色とりどりのタイルで画面を覆いつくし、ユーザビリティを妨げている（訳注： フィーチャークリープとは、電子機器やソフトウェ
Office 2013のタッチ操作の基本の基本:Office 2013(オフィス2013)の使い方
Office 2013は、タッチ操作でかなりのことができるようになっています。 ショートカットキーをバリバリ使いこなしているような人ほど、タッチなんて使わないだろうと考えてしまうかもしれませんが、実際にOfficeをタッチ操作してみると、予想以上にいろいろなことができて便利です。 細かな箇所を選択するにはマウスのほうが、入力はキーボードのほうが便利なことを否定しませんが、Office 2013を使うのなら是非ともタッチ操作も試してみていただきたいと思っています。
Windows 8の文句を言う前に使ってほしいショートカットキー4つ - あのに・すなる
■本エントリの結論 ●Windows 8は、従来のWindowsに慣れたユーザーには使いにくい。とくに電源を切るのは面倒。●しかし、それをカバーするショートカットキーが用意されている。これを使えば7までとは別ベクトルとなるが、かなりスムーズに操作できる。 1. Win+Bキー……デスクトップを表示。 2. Win+Qキー……アプリケーション一覧を表示。 3. Win+Iキー……電源オフが含まれるメニューを表示。 4. Win+Xキー……スーパー管理メニュー(仮)を表示。便利!!!!!! (上記は省略表記。たとえばWin+Bは[Windows]キーを押しながら[B]キーを押す) ●北方謙三先生が人生相談で「ソープへ行け」と言ったように、Windows 8の操作で怒ったり悩んだりする前に、これらのショートカットを使ってみるとよい。 ■北方謙三先生は人生相談で「ソープへ行け(まずはそれからだ)」
Big! Bad! Ugly? - 0th Impression - Galaxy S III SC-06D : 404 Blog Not Found
2012年09月24日14:00 カテゴリ書評/画評/品評 Big! Bad! Ugly? - 0th Impression - Galaxy S III SC-06D 一年前に入手したHTC EVO WiMAX ISW11HTとWindows Phone IS12Tのうち、一台がIPhone 5に化けたので今月のうちにもう一台の方を解約しようとしたらなぜかこれに化けていたので(笑)。 化けた理由は、MNP。端末代金3万円引きの月々サポートが3465円。しかも「音声通話なし」というプランが組めるため、端末を一括で買った場合月々の料金はここまで下がる。 Xiデータプランフラットにねん4,935円 SP Mode315円 月々割-3465円 合計2835円 なんとモバイルルーターよりも安いのだ。ちょうどDTIハイブリッドモバイルプランもリプレイスしたいと思っていたので渡りに船というわけで。 な
Microsoft Word - ユーザビリティガイドラインv1.0_r6.doc
ユーザビリティガイドライン 1.0 版 2011/4/25 株式会社 NTT ドコモ ソシオメディア株式会社 1 © 2011 NTT DOCOMO, INC. & Sociomedia,Inc. All Rights Resereved. 目次 1. 1.1. 1.2. 2. 2.1. 2.2. 3. 3.1. 3.1.1. 3.2. 4. 4.1. 4.1.1. 4.2. 4.2.1. 4.2.2. 4.2.3. 4.2.4. 4.2.5. 4.2.6. 4.2.7. 4.3. 4.3.1. 4.3.2. 4.3.3. 4.3.4. 4.3.5. 5. 5.1. 5.1.1. 5.1.2. 5.2. 5.2.1. 5.2.2. 5.2.3. 5.2.4. 5.3. はじめに.....................................................
ソシオメディア | モードレス・ユーザーインターフェース
ソシオメディアは、良いUXを実現するためのアプローチとして、モードレス・ユーザーインターフェースを提唱しています。 モードレス・ユーザーインターフェースの考え方は新しいものではなく、皆さんが普段接している GUI や、その開発手法であるオブジェクト指向プログラミングのコンセプトにもともと備わっているものです。ただしこれまでUIデザインのノウハウとしてはあまり明文化されてきませんでした。そこで、私達が実践に努めているモードレスUIデザインの方法論をまとめてみます。ここに述べるUIデザインのノウハウは、実効性の計りにくいプロセス論ではなく、UIの成果物に直結する具体的なデザインパターンである点に着目してください。 モードレス・ユーザーインターフェースの利点 UXに関する様々なメソッドの中で、意思決定の上流における要求分析や、実装に直結した視覚表現等についての方法論は多く議論されてきました。しか
クックパッドデザイナー片山育美さんが語る「ユーザー目的を達成するためのUI」とは — [画面遷移ワークショップvol.2 レポート] | Startup Dating [スタートアップ・デイティング]
前回、5月に開催した「画面遷移ワークショップ」。その第二回を開催しました（前回の様子はこちら）。二回目となる今回は、日本最大の料理レシピサイト、クックパッドのUIデザイナー、片山育美さんをゲストにお招きしたトークセッション。後半には前回同様ソーシャルゲームの分野で活躍中のポケラボさんからお題を提供していただき、画面遷移を考えるワークショップを開催いたしました。 前半に6月にStartup Datingにインタビュー記事が掲載されて、大きな反響を呼んだ片山さんは、クックパッドに4人しかいないデザイナーの一人。片山さんはクックパッドのPCサイト、iPhoneアプリ、Androidアプリ、iPadアプリなどのデバイスに対応するデザインなども担当しているそうです。仕事以外にも、趣味がアプリ開発だという片山さん。最近制作した「恋人クイズ」というアプリは現在20万ダウンロードを超えているそうです。 こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
TechCrunch
