はてなブックマーク

この記事はこまどりさん主宰の Service Design Advent Calendar 2017 22日目のエントリーです。 ここまでサービスデザインスプリントのことを書く人がいない感じだったので、テーマとして選んでみた。また、最近ずっと考えているフレームワークと問いの関係を切り口に、そのあたりの観点で書いてみたかった、というのもある。 考えながらちまちまと書き足していたら長くなってしまったけど、別記事に分割しちゃうよりひとつの記事にまとめておきたい内容なので、長くてもこのまま出しちゃう。長くてごめんなさい。各セクションの見出しは以下の通りなので、つまみ読みしていただくのもよいかと。 サービスデザインのためのスプリントとは Service Design SprintとGoogle Ventures Sprintの共通点 Service Design SprintとGoogle Vent

UX Tokyo Advent Calendar 2014、15日目のエントリとして。 普段、自分の活動や仕事にUXという冠を掲げることを好まない。だが、ワークショップのデザイン（WSD）をする時は例外だ。純粋に何かを「体験」してもらうための時間をデザインするのがワークショップデザイン。純度の高いUXデザイン（UXD）と言えないこともないんじゃないか、と思っている。 しかし、果たして本当にそうなのかな？　いやいや、そうだろどう考えても。なんて、ただ思っているだけでは気持ちが悪いので、この機会にちゃんと考えておくために、hcdvalue が公開しているUX白書(日本語訳版).pdfを参照しつつ、WSDとUXDの関係を改めて捉え直してみたい。 ちなみにワークショップという言葉に対する印象や定義は、おそらく人によって違うだろうが、ここでは私がワークショップデザイナーとして普段デザイン・実施してい

ホワイトボードが好きだし、ヌーボードが好きだ。そんなこんなで、マーカーをいくつか持っている。持っているものを使ってみたうえでの感想を紹介したいと思った。 ヌーボードには欠かせない主力選手 コクヨとパイロットのイレイザー付マーカーは外せない。ほとんどこのどちらかしか使っていないと言ってもよいくらい。太さと書き味が違うので、時と場合に応じて使い分けをしている。 どちらも大変お気に入りなのだが、ことパイロットは本当に細さがありがたくて、細かく書き込む必要がある時には本当に便利。細いのに発色もよいので、一家に1セットはあっていいホワイトボードマーカーだと思う。 どちらもマグネットが付いているのに、ヌーボードにしか使っていないので、あまりその便利さを発揮できていない。でもきっと何かの役に立つ日が来るだろう。 主役じゃないけど重宝している名脇役 特に長いことお世話になっているのはIKEAのマーカー。色

そろそろ git-flow 自分用にまとめておく必要がある。 とは言っても、git-flow 自体は何も難しくない。環境が古いと動かないので、環境構築とかアップデートで挫けることはあるかもしれない。あとはそもそも git のお作法を知らないと、git-flow 自体も難しく見えると思う。私はそれらのものたちを Homebrew で管理している派。 インストールの手順等は別の機会に譲るとして、ここにはまっさらなリポジトリで git-flow を使いはじめる際の流れだけをまとめる。 まずは init まず init する。init すると「まだブランチがないから今作りましょう」と言われ、「プロダクションリリースは master でいいですか？」「その前段階は develop でいいですか？」とフランクな感じで訊かれるので、さくさくエンターで答える。 $ git flow init あらかじめ使

先ほどsongmuから git-new-workdir の存在を教わり、ちょっと試してみた。 git-new-workdir とは いちいち個別にcloneしなくても、共通の.git から複数のワーキングディレクトリを持てるというもの。.git を個別に落としてこないので、軽いし管理も楽。 ということで、git-new-workdir が便利というエントリを参考に、試してみることにした。私の環境では git-core の contrib が存在しなかったので、それを作るところから。 $ mkdir /usr/local/share/git-core/contrib/workdir GitHubに必要なものをもらいに行く。何もあげられないのに、いつもいつももらってばかりで申し訳ない気持ちになる。ありがとうありがとう。 $ wget [リポジトリURL] そしてシンボリックリンクとかの設定をす

VirtualBox絶賛使用中なのだけれど、いままでParallelsしか使ってこなかったので、お作法を知らない。そして初CentOS。デザイナーにはハードルが高すぎる。 しかしやらねばならぬ時がある。 というわけで、ファイル共有すら一苦労だった件についてのメモ。 Mac上にあるファイルをVMに持っていきたい まず軽い気持ちでドラッグ＆ドロップしてみた。無理。わかってはいたが、無理。 共有設定をしてみた 次にいろいろ見てみて、VirtualBoxのメニュー「Devices > Shared Folders」というのを発見。共有を試みてみる。Transient Folders に共有フォルダのパスを追加するのだ。 追加ボタンを押すと、パスと名前を設定する画面が出てくる。Mac OS X上の共有したいフォルダ（設定さえされていればどこでもいい）を設定する。都度勝手に表示してほしいので、オートマ

このエントリは CSS Preprocessor Advent Calendar 2012 の4日目です。 さて、日頃モックアップやプロトタイプと呼ばれるものを作る時に、CSS Preprocessor ってIA（インフォメーションアーキテクト）にこそ便利なものなのでは？　とよく思う。今回はそのことを書きたい。要するにコードとか技術的なあれこれは一切出てこないお話。 CSS Preprocessor を使用するメリットおさらい 先人のブログから引用しておさらいをする。 セレクタの構造をわかりやすくできる 変数を利用して特定値をキーワード化できる ベンダープレフィックスを付与できる 汎用的なスタイルを再利用できる SassやLESSを導入するメリット | Good thinking 制作の工数が減る 運用が楽になる クオリティが一定になる Sass を今すぐ実務で使おうよ！ « NAVER

某ピクセルグリッド社の外村さんから『ノンプログラマのためのJavaScriptはじめの一歩 (WEB+DB PRESS plus)』をご恵贈いただいた。11月7日発売とのことだが、ノンプログラマとして読んでみた感想を。 構成がわかりやすい 外村さんのエントリ「ノンプログラマのための JavaScriptはじめの一歩」という本を書きましたでも紹介されているように、一冊を通してひとつのサンプルプログラムだけが用いられている。文法の説明をひとつひとつ追って、改めて読み方を示し、最終的には組み立て方まで持っていくという構成。 「よし、勉強しよう！」と思ってリファレンスを読みはじめるのだけれど、点と線をつなげられないばかりに組み立て方まで到達できないで終わる… というパターンはよくある。本書は組み立て方まで誘導されているのがわかりやすかった。 手を動かしながら読み進めたほうがいい 本当にはじめの一歩

首相官邸ホームページの件があちこちで話題になり、様々な立ち位置の人がたくさんの意見を述べていた。そこから派生して、アクセシビリティ界隈の話も聞こえてくる。 水無月ばけらさんが『首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要』という記事を書いていらっしゃった。その中で、以下の記述があった。 トップページ中央に「復興に向けて」という緑色の文字がありますが、見た瞬間に読みにくく感じます。 計測してみると背景色 #fff に対して前景色が #9acc35 で、コントラスト比を計算すると1.9:1しかありません。これはJIS X 8341-3:2010の7.1.4.3を満たしません。 この件について、チェックツールで見るとどうなるのかをあまり意識したことがない方も多いと思うので、いくつかのチェックツールで簡単に見た内容を以下にメモしておきたい。 Colour Contrast Anal

MacBookProでも同じ設定をしてあるのだけれど、人任せに済ませてしまった部分が大きいので、新しく購入したMacBookAirは自分で設定してみることに。 これは自分の環境用の手順メモであり、初心者としての記録であり、基本「デザイナー」の立場でのセッティングなので、プログラマーの人には参考にならないと思う。 手順メモ（作業順） Homebrewのインストール HomebrewはRubyで記述されたインストールツール。とりあえず以下を叩けばOK。 ruby -e "$(curl -fsSLk https://gist.github.com/raw/323731/install_homebrew.rb)" 簡単・シンプルで、MacPorts よりは楽だと思った。いいことずくめ。 Homebrewから必要なもの一式インストール $ brew install コマンドを使うと、さくっとインスト

ずっと社内メンバーに任せっぱなしだったSassとかCompassとかのことをようやく簡単に教わったり教わったり教わったりしたので、忘れないうちにまとめておくのエントリ。 ひとことだけ結論を書いておくと、これらのものたち超便利。 Sassとは Sassとは Syntactically Awesome Stylesheets の略。日本語に訳すと「構文的にイケてるスタイルシート」。 簡単に言うとCSSを記述するためのメタ言語で、Rubyで動いている。Railsを使っている人には当然便利だし、別にRailsを使っていなくても使える。 Mixinとかなんとかいろいろあって、CSSプロパティの集合をあらかじめ定義しておいて、複数のルールセットに適用することができる。 書き方などの細かいことは割愛するが、変数を指定したり関数っぽい感じでいろいろ書けたりする。軽いスクリプトが書ける人なら誰でも使える。関

Android端末のdevicePixelRatio[to-R] を見ると、devicePixelRatio="1.5" のデバイスがたくさんある。私の愛機も "1.5"。しかし、"1.5" であるが故に起こっているに違いなさそうな問題がある。（勝手にそう思ってるけど、違ってたら教えてほしい） シャドウがおかしくなる問題 text-shadow にも box-shadow にも言えることなのだけれど、line-height や shadow の数値設定によって、おかしな挙動をする。よく見ないと気付かないかもしれないけれど、シャドウの加減がおかしい。 html { -webkit-text-size-adjust: none; } body { font-size: 100%; line-height: 1.5; } h1 { margin: 5px; font-size: 140%; te

これも今さら感があるけど、フォーム入力の時に「次へ」って押してくと次のフィールドにぽんぽん飛んでくれるけど、ラジオボタンは飛ばされる件。それが仕様というか、正しい挙動なのだろうか。 イベント自体発生してなさそうなので制御も難しそうだけど、JSでゴリッと工夫したらできるのかな？　どちらにしてもナチュラルな状態ではどうにもできなそう。

昨年の今頃、色のアクセシビリティ・チェックツールをいくつか紹介した。あれから JIS も改訂されて色のチェックするための基準も変わった。 Colour Contrast Analyser aDesigner の2つが新JISに対応していることは紹介済みなのだが、もうひとつ WCAG Contrast checker という Firefox のアドオンも色チェックの際には有効だ。 WCAG Contrast checker アドオンを有効にすると、ステータスバーに色のパレットみたいなアイコンが常駐する。それをクリックするとサイドバーが展開される。 テキストを選ぶと、背景色と文字色の組み合わせを見て判定結果を表示してくれる。以下はText selectorで選んだ項目のチェック結果イメージ。 意外と見逃しがちな a:hover 時などの数値も取ってくれる。当ブログホームなどで使用しているhov

去る1月27日、昨年オープンしたソフトバンクさんの Ustream Studio 渋谷で行われた Ustream ライブ配信に出演し、つたないながらもモデレーターを努めさせていただいた。 ハーモニー・アイさんの『見えない・見えにくい人にもiPhoneやiPadは使えるの？ 実際にやってみよう！』というタイトルで、iPhoneやiPadがまったく見えない人・見えにくい人でも使えるのかどうか、実際に使っている様子をデモ配信するという番組。 Ustream アーカイブ 当日のソーシャルストリームはTwitterのハッシュタグ#harmonyiからご覧いただける。 また、当日の配信の録画がハーモニー・アイさんのアカウントでアーカイブされているので、見逃した方や見直したい方はこの機会にご覧いただけるとうれしい。 Ust中に使用したスライド 私が担当した説明部分で使用したスライドもアップしておく。iP

さて、チェック済の方も多いかと思うが、@amachang の『フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か』を読んだので、試してみた。 詳しくは @amachang のエントリに全て載ってるのだが、一応自分用にメモ。 OGP (Open Graph Protocol) とは ウェブサイトの情報を表すメタデータをHTMLに付加する記述方法なのだそうで、SNSサイトなどで多く使われている。 The Open Graph Protocol によるとRDFaがベースになってるみたいなことが書いてあるが、書き方はやっぱりRDFaに似てる感じ。MicrodataとかMicroformatsとかとはちょっと違って、meta要素として記述。メタデータを扱うので、名前空間も必要になる。 とりあえずやってみる @amachang のを参考にしつつ

日本アイ・ビー・エム株式会社 東京基礎研究所 アクセシビリティ・センターが主催する「アクセシビリティ・フォーラム2009 〜10年目のWebアクセシビリティー 次の10年に向けて、今考えること〜」に参加してきた。 メモして帰ってきた内容をざっくりとまとめたが、長い。ざっくりとはいえ、長い。 IBMの取り組みの歴史 創立以来、障害者を雇用。社員が円滑に仕事ができるよう、音声出力タイプライター、点字プリンタなどを開発。視覚障害者向けのソフト、音声認識ソフト、ホームページリーダーなどを開発。社会に還元するための「アクセシビリティフォーラム」を98年から開催。 情報バリアフリーに関する総務省の取組 総務省 情報流通行政局 情報通信利用促進課 課長 平林 正吉 さん 誰もがICT（Information and Communication Technology）を利用しやすい環境整備の施策について

自治体Webサイトユーザビリティワークショップに行ってきた。これから先の電子政府ユーザビリティ・ガイドラインや公的機関の動きを追っていくためにも、是非とも参加したかったワークショップだった。 ウェブサイトユーザビリティ入門 まずはワークショップ…