[こかげ] フォント : Nu みちしるべ
概要 「Nu みちしるべ」は、日本の道路標識に基づいて作ったフォントです。標識の数字に興味を持ったのが切っ掛けで作りましたが、数字だけだとフォントとしてあまり面白くないので、周りの赤い円を含めて自動的に組み立てられるように作り込んでみました。道路標識の全種に対応しているわけではないです。用途は…何かあるでしょうか。 標識を自動的に組み立てるには、アプリケーションが OpenType‐フォントの高度な機能に対応している必要があります。非対応のアプリしか持っていない場合、手動で画像編集をして部品を組み立てる事になりますが、その部品としてフォントを利用できます。 ウエブブラウザーも今のところ対応状況が微妙なので、次の見本は崩れて表示されてしまうかも知れません。「直接編集」や「自動着色」を切り替えてみると表示が改善する場合があるようです。（なお「直接編集」を無効にした場合、文字列の書き替えは左上の
ダッシュボードで上手に情報を可視化するためのガイドライン
JustinはUsabilityGeekの創始者であり、使いやすい記憶に残るオンライン体験の創出において15年以上もの実績があります。 システムが完全なものになるにつれ、定性的なデータや定量的なデータもまたさまざまな頻度・複雑さでを取得できるようになります。このような状況では、情報の可視化がさらに重要になります。 端的に言うと、情報の可視化（information visualisation）とは、抽象的なデータをユーザーが理解できるように可視化し、さらにデータ間の関係性を理解できるようにすることです。 デザイナーの役割と情報の可視化 デザイナーの役割は、ユーザーにとってわかりやすい方法でデータを表現することです。これには、課題や制約、データを表現するために利用できるスクリーンサイズという制限が伴います。 もしデザイナーがユーザーが理解しやすいデータを作成できないと、ユーザーがデータを利用
UXデザイナー深津貴之が語る身も蓋もない組織論!? 「ユーザー目線のない会社からは逃げるしかない」「それでもそこでがんばりたいなら……」 | HRナビ by リクルート
PCやスマートフォンを開けば、そこには不愉快なUIが至るところにあふれている。さして文章が長くもないのにページが4分割されているニュース記事（腹立たしいことに4ページ目はたった1行だったりする）、サッカーのハイライト動画でシュートの行方をカメラが追い始めた瞬間に始まる動画広告、場面転換をするたびにCMが挟み込まれ、もはやCMを見ているのかゲームをしているのかわからなくなるアドベンチャーゲームアプリなど……。 さらに不幸なことは、ウェブメディアの編集部や動画配信者、ゲーム制作会社の制作現場にいる人たちにとっても、これは決して愉快な状況ではないということだ。罵詈雑言混じりの苦情が書かれたユーザー評価欄やSNSを見ながら彼らは言うだろう。「誰が好き好んでこんなUIを作るものか」と。 関わる誰から見てもおかしなUIは、それでもなぜ量産され世の中のストレスを増幅させ続けているのだろうか？ その負のス
Devices — Facebook Design Resources
Designing for many platforms Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device. We'll release different cate
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
デザインには直感とデータどちらを採用すべきか？ デザイン会社 ビートラックス: ブログ
求められる結果に対して最良のプロセスを導きだすのがデザイン、及びデザイナーの仕事。では、数字として結果に繋がらないデザインに価値は無いのであろうか? どんなに見た目が良いデザインでも売り上げに繋がらなければ優れたデザインとは見なされないのか? 逆にどんなに美しく無くても、クリック数やコンバージョンの高いページや広告は素晴らしいのであろうか？ このような議論はデザイナーの間では普遍的にかわされている。 場合によっては「見た目のクオリティーを犠牲にしても良いのでとりあえず問い合わせ数のアップするページをデザインして下さい」等の依頼がクライアントから来るケースも少なくは無い。 クライアントの目的を果たしたいと思うと同時に、素晴らしいデザインを世の中に生み出したいと感じているデザイナーの立場からすると常につきまとうジレンマである。 そもそも優れたデザインを施す必要性がどこにあるかを考えた時に、端的
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
「クックパッドの良心」とも言われるユーザーファースト推進部 池田拓司氏が実現する“ブレない”サービスづくりとは - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
クックパッドのユーザーファースト推進部 部長でデザイナーの池田拓司さん。多摩美術大学を卒業後、ニフティに入社。その後、はてな を経て2012年にクックパッドへ入社しました。 社内のメンバーから、「新規事業が増える中で、クックパッドらしさを守る“クックパッドの良心”」と表される池田さん。彼が言語化し、社内外に対して守り抜く「クックパッドらしさ」とは。 生活に近いサービスをつくりたい デザイナーとして新卒入社したニフティで3年間働いた後、まだ当時10名ほどだった はてなに転職した池田さん。より生活に近いサービスをつくりたいという思いで、7年間勤めた はてなからクックパッドに転職しました。 2014年4月に「デザイン部」は名前を変え「ユーザーファースト推進部」に。社長直轄の部署であるため、お客様の声が経営陣にも届きやすい体制が出来ています。現在はデザイナーを中心とする8人のメンバーで構成されるチ
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
分かりやすく、使いやすいデザインを生み出す工夫 先生：池田 拓司
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/344/room ーーーーーーーーーーーーーーーーーーーーーーーRead less
スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する | fladdict
顧客や上司、ユーザーの場当たりな要望に対応しつづけると、どんなアプリもゴミアプリになる。たとえそれが理にかなった要望であっても。 なぜなら面積の限られたスマホでは「一画面の機能数とボタン数」が、使い易さと品質に深くリンクしているからです。 ということを、エラい人にプレゼンするのがお仕事の今日この頃。でも毎回毎回、同じことを説明するのがシンドイので資料をブログにまとめたいなぁと思うなど。 思考実験として、ここでは架空事例としてTwitterアプリを例に考えてみる。 何かの間違いで、日本の大手メーカーがTwitterを買収すると・・・UIデザイナーが体を張らないと99%ぐらいの確率でこうなるのです。 ここがオリジナル Request1: ダイレクトメッセージをトップ階層に ユーザーからの真っ当な要望。実際にはサービスの本質ではないのですが、要望はかなり多いはず。 ただTwitter社的にはme
食品容器ますます進化、開けやすさでも真価 : ニュース : グルメ : YOMIURI ONLINE（読売新聞）
酒造会社が相次いで採用した「エアホールドパウチ」。パウチの端の「空気の柱」部分を持つとつぎやすい＝鷹見安浩撮影 食品の容器が、進化している。「もっと持ちやすく」「手が汚れないように」。各メーカーは容器の細かい部分にまで工夫を施す。ユニークな容器も登場している。 「新時代の容器」と呼ばれるしょうゆボトルがある。キッコーマンの二重構造ボトルだ。ボトルの中に内袋があり、しょうゆはその内袋に入っている。「しょうゆが空気に触れない構造。酸化を防ぎ、おいしさを保てる」という。 ボトルは柔らかいプラスチックで、手で押すとしょうゆが出る仕組み。手を緩めるとボトルは元の形に戻るが、内袋はしょうゆが出た分だけ小さくなっている。開封後も９０日間は鮮度が保たれるという。同社は一昨年から、「いつでも新鮮」シリーズにこのボトルを採用。生しょうゆなど９商品に使われている。 最近、増えているパウチ入りの製品。パウチは瓶や
見分けがつかなくて困ります。薬作り職人のブログ
「見た目がすごく似てて、取り違えの可能性が高いもの」ってのは世の中たくさんあります。私が最近体験したのはこんな感じ。 お風呂入っていて、シャンプーが無くなったので、目の前に合った詰め替え容器の中身をシャンプー容器に入れ替えました。で、その中身を頭につけてゴシゴシ頭を洗ったんですが、、泡が出ない。 そう、シャンプーとコンディショナーを入れ間違えました。私の家のお風呂には、シャンプーとリンスの詰め替え容器を常備しています。この詰め替え容器の外見があまりによく似ていたので、コンディショナーをシャンプーの容器に入れてしまったのです。気がついた時には全量移し替えてしまったあと。。コンディショナーの容器にもう一度入れ替えるのは面倒、ということで、現在はシャンプー容器に「コンディショナー」とマジックで書いてそのまま使ってます（シャンプー容器用に、新品のシャンプーをもうひとつ買いました）。 どれくらい似て
世界一うざい「ページTOPへ戻る」が実装されました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの副社長、ゴウです。 この度、LIGブログに「ページTOPに戻る」機能が実装されました。 どのサイトにでもある、普通の要素だと思うのですが、今回、我々は“ウザさ”にこだわって作ってみました。 ページ右下にある弊社エンジニアの段田をクリックすると… ゴゴゴゴゴ… ドドドドドドドド… という感じで、段田が天に登るラピュタのように上昇していきます。 俺が知る限り、ここまでうざったい「ページTOPに戻る」は無いと思いますし、今回の開発にはデザインとJSの実装で4日ほどかかっており、「うざい」という以外に感想が無いような機能の実装に大切な会社のリソースを割いてしまった事をこの場を借りてお詫び申し上げます。 とは言え、この機能の一番下に、広告領域も設けてあります。 時間にして2秒ほどしか見えない上に、クリックをするにはそれなりの慣れと反射神経を必要とするのですが、今回特別にこの広告枠
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
心地よいUIの温度 - 言葉と気遣いで高めるUI -
新着記事
Tumblr
