はてなブックマーク

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

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

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

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

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

SVGのパス(線)の一部の色を変える SVGのパスの色を一部変える方法を教えてもらったので備忘録としてまとめました time2014/03/29 hatenabookmark- 今、こんな感じの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

ウェブアクセシビリティは未来像から伝え始めましょうぜ ウェブアクセシビリティの教育の話。ウェブ制作を学び始める人がウェブアクセシビリティに興味やイメージが湧くように、それが実現した未来に何が待っているのかというところから伝え始めたほうがいいんじゃないでしょうか time2014/02/04 hatenabookmark- WCAG20とかニールセンも、言ってることはステキだけど、「象牙の塔感」みたいのがあって、それが色々と敷居を高くしてる気はする。ユーザビリティの教科書なのにユーザー離脱率が高いというか。もう少しローエンド向けに書いてくれないと考えが末端まで普及しないんじゃないかとか。 — 深津 貴之 (@fladdict) 2014年 2月 4日 深津先生のこのツイート、割と同感でリツイートしたんですけど、ローエンド向けにとはまた違ったところで感じるところがあったのでその辺りの話とか、じ

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

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

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

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

ウェブはつながることで強くなれる（地域観光情報編） 地方政府が作っている観光情報をうまく役立てるために、旅程構築サービスの上に地方政府の観光情報を載せようという試み time2013/12/15 hatenabookmark- この記事はWeb Accessibility Advent Calendar 2013の15日目の2本目の記事です。1本目の記事はこちら。 さて、私は旅行が好きなほうで、季節が変わるごとにどこかに出かけたりするんですね。 それで、ある程度がっしり計画を立てる派なので（もちろん自由時間は作りますけど）、行きたいところを付箋に洗い出した上で、、電車のダイヤ（自動車免許がないのでレンタカーが選択肢にない）を見つつ、Powerpointの旅程表に落としていくわけです。 これが結構骨が折れる作業なのですが、本筋とはあんまり関係ない話なので端折ります。端的にいうと、地方は鉄道で

ウェブはつながることで強くなれる（ご飯屋さん情報編） 数々のブログやウェブサービスで見られる美味しい飲食店情報を、どんなサービスでも利用できるように可搬性を高めることで、データそれ自体の活用性、価値が高まるし、そうしていくことでウェブ全体がより有用になっていくのではないかという話 time2013/12/15 hatenabookmark- この記事はWeb Accessibility Advent Calendar 2013の15日目の1本目の記事です コンテンツはもうウェブには充分すぎるくらいあるのだけれど 僕は割とランチを楽しみにしていて、勤務先の新宿界隈にある美味しいランチがある記事はよくブックマークしています（まあ、遠くて昼休みには行けない店のほうが多いのですが・・）。そういう記事をさっき調べてみたのですが、本当にいっぱいあるのですよね。 ただ、実際にそのブックマークを開くかとい

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

5分でわかるユーザビリティに配慮したデザインとユーザエクスペリエンスデザインの違い ある人が何かのタスク（この記事では送別会の幹事）に取り組む際に、「ユーザビリティに配慮したデザイン」ではある一つのモノの使い勝手をよくしていこうと考えますが、「ユーザエクスペリエンスデザイン」はその人が取り組む際の行動全体を俯瞰してみて、その俯瞰視点から最適な環境のあり方を考えようとする、という違いがあると思っています。そのことを具体例を使いながら説明してみました。 time hatenabookmark- 仕事ではウェブサイトやアプリのUX改善に携わっているのですが、先日、友達（ユーザビリティ/UXデザインの専門家ではない）に自分の仕事について聞かれてちょろっと答えたことがありました。ただ、いまいち腑に落ちなかったようで「結局、そのユーザビリティを良くすることとユーザエクスペリエンスを良くすることの違いっ

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

記事を読んでもらうために要約をつけよう 多くのウェブサービスで本文の抜粋が使われていますが、内容を把握するには十分ではない、ということをビフォーアフターで考えてみます。届けたい人に情報を届けるために要約をきちんと書いておきましょう time2013/01/27 hatenabookmark- ウェブ上のデザインパターンとして、あるページ（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改善にあたって、そのサイトで解決すべき問題をユーザ体験から発想・定義すると良いと思っていますが、それは具体的にどういうことかということを、趣味のお菓子作りでの体験を例にして説明してみようと思いました。 途中で出しているクックパッドの改善デザイン案の全体については、以下よりご確認下さい。 このスライ

勝手にリデザイン：新宿高層ビルの館内施設案内板 新宿のとある高層ビルの館内案内標識が話題に。後学のために、仕様・問題点を整理、改善案の作成を行ってみました time2011/09/08 hatenabookmark- Twitterで、あるサイン（案内板）のことが話題になっていました。新宿のあるビルの案内図のようですが、わかりづらいことが問題になっているようです。 …確かにこれはわかりません。トイレを探している時に遭遇したら結構辛いと思いますね。でも、なぜわかりにくいのか、どういう改善案が考えられるのか、もう少し考えてみることにしました。 仕様 まず、この図から読み取れる情報だけでは何が「正解」かわからないので、実際の現場に足を運んでみました。 そして、館内をぐるっと見学してみて、大体の施設の配置を把握してきました。（ちなみに、ビルの中をウロウロしてると普通に不審者だと思うので、警備員の方