師走に入った。来年良いスタートを切るために一年を振り返るには良い時期だ。 さて、2015年の後半くらいから、フロントエンド・エンジニアとして「良い UI をつくる」ことに自分のリソースを集中させてきた。UI はここではウェブアプリケーションの UI を指す。 一年半をそれに費やしてきて、このあたりで、自分が考える、良い UI（ユーザーインターフェイス）とは何か、どうすればそれを実現できるのかを整理しておくのも悪くないなと思ったので書き留めておく。 良い UI をつくるには 良い UI をつくるには次の 2つが必要だと考える。 1 良い UI を定義できること 2 上記 1 を実装（実現）できること そう、いまから何をしようとしているのかというと、良い UI をつくるために必要な要素をツリー構造で整理しようとしているのだ。 ただし、以下に良い UI をつくるために必要な要素を分類しようと試み
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。 バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、他ではあまり見ないユニークな動きを実装できるものまで様々なタイプがあります。 中にはCSS3を併用したりそのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。 exValidation プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。 Validetta シンプルで軽量なバリデーションプラグイン。 jQuery Valideasy 見た目がシンプル
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
2013年10月02日11:39 意識高い 迷ったら難しい方を選ぶということ 最近考えていることなのですがちょっと書いてみます。意識高い系です。 例えば、「どう使うんだろ？？」とユーザが迷うようなページがあったときにどう解決するか。説明を追加したり、チュートリアルを入れたりといった方法もあれば、UIやUXといった見せ方を工夫することで解決するような方法もあると思います。 こういうときに最近考えているのが、複数の方法があって迷う場合、まず難しい方法にチャレンジする ということ。もちろん面倒なので楽な方がいいんですが、より難しい方法で問題が解決できると余計な情報を追加する必要も無いし、サイト全体が驚くほどすっきりして「どうして今までこうじゃなかったんだ」と腹落ちすることが多いです。また、難しい方法は本質的な解決策であることも多いように感じます。実装などの困難さを考えずにどちらがユーザにとって良
今年３月に「Mailbox」を買収し、ますます勢いに乗る「Dropbox」 時価総額40億ドル、ユーザー数1億7500万人と、とんでもない化け物ベンチャーの彼らですが、 実は広告にほとんどお金を使っていないということをご存知でしたか？ つまり、そこはグロースハックのアイデア宝庫のはず。 今回はそんな宝の山から７つのお宝を紹介します。 参考記事:The 7 Ways Dropbox Hacked Growth to Become a $4 Billion Company グロースハックって何って方はこちらの記事をどうぞ。 「グロースハック」とは １、登録に振り切ったサイト 初期の頃からDropboxのサイトはシンプルなものでした。 特徴を伝える２分間の動画とダウンロードボタンだけ。 幾度となく、レイアウトの変更はされていますが、基本的には動画の再生ボタンとダウンロードボタンのみです。 訪問し
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
UIとUXの意味と価値をもう一度考えよう。大ヒットアプリ、LINEのプロダクトデザイン担当者が、制作現場での具体的な開発手法を語った勉強会をレポートする 2012年11月7日、六本木ヒルズにあるアカデミーヒルズ49階で「第4回テックヒルズ UI、UXの衝撃 ～ユーザーを魅了するプロダクトの裏側～」が開催された。UIとUXの根本的で分かりやすい解説がなされ、大人気アプリ「LINE」ヒットの裏に隠された緻密なUI／UXへのアプローチ方法や、実際の開発現場のノウハウが学べる勉強会だった。Webサイトやアプリに限らず、ユーザーにとって魅力的なプロダクトを作るための知識が披露された。 UXを意識したUI設計を UX Tokyo（UX関連の実践家ネットワーク）所属で、ミクシィの酒井洋平氏は、自身の朝の通勤風景を撮影した動画をスクリーンに流した後、UIとUXの定義を次のように語った。 「UXとはユーザー
この三ヶ月ではてなブックマークiPhoneアプリの新バージョンとAndroidアプリを開発してきました。 両方共担当はエンジニアid:ninjinkunとデザイナーid:kudakurage、総合ディレクションid:nagayamaです。同じ開発者がiPhoneアプリとAndroidアプリ両方を作った事例として、なかなか面白いのではないかと思います。開発期間はちょうどそれぞれ一ヵ月半ずつでした。 自分にとってもブクマチームに移動してから初めての大きな仕事だったので、両方共思い入れがあるプロダクトです。開発話と一緒に、スマートフォンアプリを作る際の流れや、気を付けていることなどをまとめようと思います。（長いです） 開発プロセス iPhoneもAndoirdも開発の流れは基本的に一緒で、以下のような流れになります。 機能の検討 UIの検討 実装 ざっくり並べただけではWebサービス開発と変わり
A/Bテスト 申し込み数を増やしたいとか、商品を売りたいといった場合に 表現の異なるA案、B案 （場合によっては C案、D案・・・）を用意し、表示される確率を均等に分配し A案とB案どちらの方が効果が高いかを見極めるテストです。 メール、ウェブページ、バナー広告等 様々なコンテンツにおいてABテストは可能です。 ウェブでコンテンツ作る場合、結果は全て数値することができるので デザイン、コピーライティング等の表現に関して 可能であれば「何となくこっちの方がかっこいいからA案で・・・」と曖昧に決めるのではなく まず、A案 B案を用意して、両方やってみて、成果の高い方を、その後継続的に採用し テストを繰り返すことで、成果を上げられる可能性が上がってきます。 ABテストの実施イメージ メールマガジンのABテスト 本文一緒にしてタイトル
まとめです。 全ユーザーに公開となったGoogle Analytics のイベントトラッキング機能をまとめました。 追記：2018年2月22日 gtag.js では動作しません。＞＞公式ヘルプを参照する イベントトラッキングでは、PVとイベントを分離して計測できるようになります。推奨は”ga.js”なので要注意。 ページビューは「表示されたページのカウント」なのに対し、イベントは「どこをクリックしたのか（ページの表示は無くても良い）のカウント」なのが特徴。 つまり、「見たページ」のカウントと「見たいページ」のカウント、という言い方も出来ます。 Google Analytics イベントトラッキングで出来ること ・クリックのカウントを取れる （通常はページが表示されたというカウント一方、イベントトラッキングはAJAXやFLASHなどページ遷移がなくても取得可能。更にページビューと分離してカウ
Startup Datingでインタビュー連載を始めてみることになりました。さて連載の初回は、2011年に新卒としてクックパッドに入社し、現在UIデザイナーとして活躍する片山育美さん（@monja415）。片山さんが現職に就くまでの道のりや、クックパッドのUIに関する考え方、片山さんが手がけた具体的なUI改善の事例やヒントなどをたっぷりお伝えします。 美術大学で勉強、もともと職人になりたかった もともと絵を描くのが好きだし得意、高校のときから職人になりたいと思っていたと話す片山さん。美術大学に進学し、ファイン系とデザイン系でデザイン系を学ぶことを選択。ファイン系とは、絵画や彫刻などいかにも“アート”というもの。ファイン系が芸術だから、どこか自分の中で完結してしまうところがある。でも、職人って誰かのために技術を使える人なんじゃないか、と。情報デザイン学科を専攻し、サービスデザインやUXと言わ
こんにちはこんにちは！！ はまちや２ (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう？ プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 本日のテーマ： 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…（はいはい） フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた！) (これで送信、と…) ※エラー：住所を正しく入力してください (え、なんで！？) ※住所は全角で入力してく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
