はてなブックマーク

1/10/2015格安SIMカードを条件で絞り込んで比較できるサービスを作りましたタイトルの通り、“SELECT SIM”という格安SIMカードを種類、料金、月間通信量などで絞り込んで比較して選べるサイトを作りました。 理由 MVNO同士を比較してみたかったから Javascript MVCフレームワークの勉強をしてみたかったから 訪日外国人に向けた情報インフラの整備 MVNO同士を比較してみたかったから 現在IIJmioのSIMカードを利用していて、月3000円前後で3デバイス分通信できるのが気に入っているのですが、他のメーカーはどうなのかと比較してみたいと思ったのが一つですね。実際やってみたら、まあ今の選択でよかったぽい感じでしたが。 比較の観点は、自分自身が選ぶときに気にしていたポイントを載せています。 種類（データ通信/データ通信＋通話） 月額料金 月間通信量 通信速度 違約金 そ

12/20/2014東京の鉄道路線図SVGを作りました＆パブリックドメインで配布しますIllustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0 )としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図 がとても好きで、自分もこういうものを書いてみたかったからです。なんというか10年,20年たっても色褪せない美しさを感じるんですよね。これできたの1930年代です

12/14/2014情報活用度という点からWebアクセシビリティを考えてみるWebアクセシビリティの記事でブログをつなげる Web Accessibility Advent Calendar 2014  14日目の記事です。自分が大事だと考えているアクセシビリティの要素が世間的に話されるアクセシビリティの話ではあんまり話されていないような気がしていて、ちょっとその辺の話を改めてしてみたいと思います。 内容がよくても伝わらない 人にものを伝える時って大きく2つの要素があって「話の内容」と「伝え方」があります。内容が良くても、伝え方が悪ければ伝わるものも伝わらなかったり、逆に伝わっても話がつまんなかったりします。この２つが満たされて有用なコミュニケーションができるってわけです（なんか就活セミナーみたいですね） Webもまあこれと同じで、伝える内容と伝え方があります。僕はそれぞれ「コンテンツ」と

12/2/2014カスタマージャーニーマップって日々更新されるものなんだろうなという話カスタマージャーニーマップをUXデザインの成果物みたいに捉えると「皆で集まって話し合って作ってみました」「おしまい」といった静的なものになってしまいやすい、でもそういう一過性のものではなくて、むしろ運用して継続的に更新されていく動的なものですよね？という話です。 しかしそうは言ってみたものの、自分は受託ビジネスの中にいて、サービス事業者のビジネスとはまだ少し距離感があり、実際は動的なものとしては使えてないという実情があります。なので、実践的な立場ではなく、理念的なところから話している点、ご了承ください。 買い物していた時の出来事 いきなり話が飛ぶようなんですが、具体例を出して話させてください。 この前、無印良品のお店で買い物してたんですね。ただ、日曜の閉店2時間前ってこともあって、人が多くて、レジ前に50

11/15/2014早稲田大学サイトのリニューアルにモヤっとした話早稲田大学のサイトが2014/11/5にリニューアルされた のですが、それについていろいろと議論が巻きおこっているようです。 まずは事実を整理 同大学曰く「国内大学のWebサイトの主流であった“文字中心”の情報伝達から、写真や動画、ピクトグラムなど、視覚に訴える要素を効果的に配した構成に一新」（プレスリリース から）した リニューアルしたのは主に一般・父母向けのサイト。受験生や在学生向けのサイトは別に存在し、そこへは外部リンクの形で飛ばす形としている。 推奨ブラウザを Windows(8,7,Vista)の場合、IE10以上、Mozilla Firefox最新バージョン、Google Chrome最新バージョン、Mac(OSX 10.6以上)の場合、Safari 5.0以上 と比較的新しいブラウザに絞っている（このサイトにつ

3/29/2014SVGのパス(線)の一部の色を変える 今、こんな感じのSVG鉄道路線図を作っています。 図の中で運休中の部分は色を変えたいなと思ったのですが、どうやらこの一本一本を構成する path 要素は一色だけで途中から色を変えるってのはどうも難しいようです。 SVGのパス（path要素）の一部分だけ色を変えたい。例えば、この路線図のA〜Bだけ色を変えるとか https://t.co/FyeF7Z6AOt — Hashimoto Naoki (@hashcc) 2014, 3月 25 対象の図形はこんな感じ。 コードを抜粋 <g> <path fill="none" stroke="#C30D23" stroke-width="15" stroke-linecap="round" stroke-miterlimit="10" d="M53.9,265.1v-71.7 c0-5.5,3

2/4/2014ウェブアクセシビリティは未来像から伝え始めましょうぜ WCAG20とかニールセンも、言ってることはステキだけど、「象牙の塔感」みたいのがあって、それが色々と敷居を高くしてる気はする。ユーザビリティの教科書なのにユーザー離脱率が高いというか。もう少しローエンド向けに書いてくれないと考えが末端まで普及しないんじゃないかとか。 — 深津 貴之 (@fladdict) 2014年 2月 4日 深津先生のこのツイート、割と同感でリツイートしたんですけど、ローエンド向けにとはまた違ったところで感じるところがあったのでその辺りの話とか、じゃあどうするのよってあたりについて書いてみます。 当たり前だけどアクセシブルなのはいいこと まず前提として、コンテンツをアクセスしやすくすることは、基本的にはいいことづくめだと思います。 将来出てくる機器も含め、いろんな機器に対応しやすくなる（=Futu

1/18/2014そこそこユーザビリティの高いフォームを作った去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで”そこそこ”と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプトは書いてません） CSSフレームワークとして bootstrap3 を利用しています。 主な機能 入力必須箇所の強調、および入力検証 requ

1/18/2014ウェブサービスの問題報告コストが高くて報告されない問題対策ウェブサービスにバグを見つけた時に運営元に報告しようか迷った挙句、報告しない（あるいはできない）ことがよくあります。どういう場合かというと、こんな感じです。 アカウント登録フォームの問題のような利用段階が浅くてモチベーションが低い場合 （Aと似ているけど）問題箇所が一回しか通らないので報告しづらい問題の場合 問題が起きる環境を明示しないといけないが、その手間が面倒な場合 住所、氏名、電話番号など個人情報の入力を求められるため、記入に躊躇してしまう場合 報告フォームがなく、メールアドレスや電話でしか問い合わせできない場合 報告フォームに辿りつけない。問い合わせ先が不明確だったり、法人向けだったりする場合。 良い改善案に辿りつけない場合（これはユーザビリティ屋さんに特有の問題・・） 4〜6は問い合わせに関する単純なユー

12/5/2013Sassのサーバサイド自動コンパイラ 今日から使える！ Sass/compass ゆるめ勉強会 最近、このスライドを見てからSassをちょっとずつ使い始めているのですが、悩みどころなのがSassのコンパイル。 もちろん、ある程度ツールを使うことで自動化はできるものの、うちにはWindows1台とMac2台があり、各環境ごとに用意しなければならないのがちょっと煩わしいなと感じます。 便利になるとはいっても、逆にそれで管理コストが増えるのはちょっと面倒。 そもそも、CSSの延長線上にあるものなのであれば、あんまり変換とかコンパイルとか考えたくないですよね。サーバ側に配置したら、自動で勝手に透過的にコンパイルして表示されるくらいがいいですね。 幸運にも、サーバサイドでSassファイルをCSSに動的にコンパイルするライブラリはいくつかあったので、ラッパーを作ってみました。要するに

12/22/2013Webアクセシビリティの広さと深さこういう言い方が適切かわからないけど、Webアクセシビリティにも広さと深さがあるなと思う。 広さとは、ある文書がどれだけ扱いやすい、接近しやすいかということです。 例えばプログラミング言語にとっては、PDFはライブラリなどを使わないことにはアクセスしづらいですし（狭い）、一方でMarkdownのようなプレーンテキスト であれば、どんなプログラム言語からでも容易にアクセスできます（広い）。 また例えば人間にとっては、Wordで書かれた文書はWordを持っていないとアクセス出来ないのでこれも狭いといえるでしょう。 深さとは、文書内の特定の情報に対するアクセスのしやすさです。 例えば、ある文章のキーワード、タイトルなどの情報がすぐにわかれば、区民が区役所の文書にアクセスする際に探しやすくなります。また区役所内の方が文書にアクセスする際には、タ

12/15/2013ウェブはつながることで強くなれる（地域観光情報編）この記事はWeb Accessibility Advent Calendar 2013 の15日目の2本目の記事です。1本目の記事はこちら。 さて、私は旅行が好きなほうで、季節が変わるごとにどこかに出かけたりするんですね。 それで、ある程度がっしり計画を立てる派なので（もちろん自由時間は作りますけど）、行きたいところを付箋に洗い出した上で、、電車のダイヤ（自動車免許がないのでレンタカーが選択肢にない）を見つつ、Powerpointの旅程表に落としていくわけです。 これが結構骨が折れる作業なのですが、本筋とはあんまり関係ない話なので端折ります。端的にいうと、地方は鉄道で移動する場合、便数があんまりないところがあり（1,2時間に1便とか）それが旅程を組む上でのボトルネックになるので、試行錯誤をしないといけなくてたいへんだとい

12/15/2013ウェブはつながることで強くなれる（ご飯屋さん情報編）この記事はWeb Accessibility Advent Calendar 2013 の15日目の1本目の記事です コンテンツはもうウェブには充分すぎるくらいあるのだけれど 僕は割とランチを楽しみにしていて、勤務先の新宿界隈にある美味しいランチがある記事はよくブックマークしています（まあ、遠くて昼休みには行けない店のほうが多いのですが・・）。そういう記事をさっき調べてみたのですが、本当にいっぱいあるのですよね。 ただ、実際にそのブックマークを開くかというと、あまり開きません。昼休みになって、ビルの階下に降りてごはん屋を決めるまでのその間は、ブックマークをガツガツ開いて状況にピッタリのお店を探すには少し短すぎるからです。 多くの飲食店情報ページは情報掲載量も違いますし、Googleマップや食べログなどユーザが利用したい

12/14/2013UXデザインとレイヤー思考UX Advent Calendar 2013 というユーザエクスペリエンスに関する記事をみんなで書いて繋いでいこうという趣旨の企画があるのですが、今年はこれにのっかって、UXデザインに関する記事を書いてみることにします。 UXデザイン(UXD)や人間中心デザイン(HCD)は勉強してみて、自分の仕事（UIデザイン）で日々役立ってると感じるんですが、それはUXデザインの手法を知れてよかったというより、その考え方や視点を得られてよかったというものですね。 いろいろあるのですが、今回はレイヤー思考というのについて書いてみたいと思います。 天気予報のベストなUIって? UIデザインのディスカッションは、しばしばそこだけに視点を限定してしまって近視眼的になりがちです。 例えば、天気予報会社がスマホ用の天気予報アプリを作ろうとなった場合、最初のスクリーンで

5分でわかるユーザビリティに配慮したデザインとユーザエクスペリエンスデザインの違い仕事ではウェブサイトやアプリのUX改善に携わっているのですが、先日、友達（ユーザビリティ/UXデザインの専門家ではない）に自分の仕事について聞かれてちょろっと答えたことがありました。ただ、いまいち腑に落ちなかったようで「結局、そのユーザビリティを良くすることとユーザエクスペリエンスを良くすることの違いってなんなん？」と聞かれてしまいました。 僕も数年前は同じ質問をしていたと思うのですが、最近こうかなあと思って話したことを（あんまり文書にしたこともなかったので）備忘録として残しておきます（大阪出身なので関西弁です）。ちなみに話し言葉なので厳密さは犠牲にしてます。 そやなー、例えばさ同じ会社の誰かが退職したとするやん？で、送別会やるやんね。そうすると、行きたいって人のメンバーの予定を調整するのに調整さん とか使う

3/11/2013良いユーザ体験を目指すためにはアクセシビリティが大事だという話ユーザ中心デザイン とか、ユーザ体験デザイン とかの勉強をしてかれこれ3年くらいになるんですが、そのためには情報のアクセシビリティが良くなることが特に大切だと最近は思ってるんですね。 で、今日はその理由とか、じゃあどうアクションするよ、みたいなところを書いてみます。 Google glassとアクセシビリティ まずは、「アクセシビリティとユーザ体験ってどう関係あるのよ？？」と思った人向けに小話をひとつ。 少し前にGoogleのメガネ型情報機器 Google Glass（以下、Glass）のデモ動画が公開されて 、話題になりましたね。面白い動画なので未見の人は一度見てみてください。 動画の中で気になったところを見ていきましょう。 車移動でのナビゲーション。どの通りを曲がればいいのか、その通りは何m先か、あと何分く

1/27/2013記事を読んでもらうために要約をつけようウェブ上のデザインパターンとして、あるページ（URL）に対して何か言及するというものがよく見られます。 そこでは、おそらく読者が内容を推測しやすいように（読むべきかどうかを判断しやすくする）という配慮からか、ページ内容の”抜粋”を入れています。 しかし、この抜粋って内容をある程度つかむためにどこまで有用なのでしょうか。ちょっと例を挙げながら見て行きましょう。 抜粋表示の一例 facebook の例。冒頭の数百時が使われています。タイトルにある3つの設計思想が書かれていればよりわかりやすかったですね。 このパターンの祖はおそらく検索エンジンでしょう。ただ、説明文からはタイトル以上のことはあまり読み取れません。 はてなブックマーク は内容冒頭の数百字を抜粋しているようです。新聞社など、先頭に記事の要約を持ってきている例は別として、そうでな

ユーザ体験は頭だけでなく、心や体でも理解しよう ペルソナ・シナリオやUXマップなどのコミュニケーションツールは、サービス設計には役立ちますが、それにはそこで書いた期待やムードを論理的だけでなく、感情的にも理解できている必要があるでしょう time2012/12/17 hatenabookmark- 少し前に、長谷川恭久さんのポッドキャストでコンテンツとコンテキストというテーマの話を聞いたので、思ったことを少し書いておきます。 Automagic episode.66「コンテキストは未来。コンテンツは今。」 まず、恭久さんの話を整理しておきますとこういう話です。 「コンテキストは未来。コンテンツは今。」と書いたことへの補足。 コンテキストは未来といっても今考えなくていいという意味ではない。今考えるべきコンテキストもある。 まず、コンテキストにはテクニカルな部分と人間的な部分の2つがあると思う

8/21/2012スマートフォンで横長な画像を挿入した時、その部分だけスクロールできるようにするUIPCサイトにある画像をスマートフォン向けに載せる場合、その画像を縮小したり、分解したりして載せるかと思います。ただ、以下のようになかなかうまくいかないケースもあるでしょう。 サイズが横長なため（横スクロールを起こさないよう縮小するが）、比較的横幅が狭いスマートフォンでは小さく表示せざるを得ない 地図や案内図など分解することが難しい 例えば、こんな画像です。 札幌市営地下鉄路線図 西荻窪さんぽMAP そんな時に役立つUIを少しこさえてみました。 画像のサイズは保持しつつ、かつページ全体では横スクロールを起こさずに画像がある部分だけ横スクロールするというものです（AppStoreのスクリーンショットのUI、といえばおわかりの方もいらっしゃるでしょうか） 試しに以下のページ（http://goo.

キッチンからUXデザインを考える―体験して、追体験して、デザインしよう UI改善をユーザ体験をベースにして行う、ことをクックパッドのUI改善案という例を交えて説明してみました。また、そのユーザ体験も想像するのではなく、自身で体験してみるというのも場合によってはひとつの手かもしれません。 time2012/08/05 hatenabookmark- 会社のLTの場で何か話そうと思って作ったんですけど、書いてるうちに明らかにLTの分量じゃなくなってきたのでこちらで公開しておきます。 ウェブサイトのUI改善にあたって、そのサイトで解決すべき問題をユーザ体験から発想・定義すると良いと思っていますが、それは具体的にどういうことかということを、趣味のお菓子作りでの体験を例にして説明してみようと思いました。 途中で出しているクックパッドの改善デザイン案の全体については、以下よりご確認下さい。 このスライ

9/8/2011勝手にリデザイン：新宿高層ビルの館内施設案内板Twitterで、あるサイン（案内板）のことが話題になっていました 。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方に目的を伝え、撮影可否についても尋ねましたが、撮影はNGとのことでした） それで、記憶を頼りに書いてみた館内図がこちらになります。案内板Aが問題となる案内