ワーロック・リポート 「ジョジョ展 in S市杜王町」へ行く

2012 年も
はや 8 ヶ月がすぎた。
今年はあの有名な『ジョジョの奇妙な冒険』の連載 25 周年とかで
日本や世界のマスコミは大さわぎだが
たいていの人々は晴れ晴れとした気分ではないにしても
いつも生活しているように夏をむかえた。
ということで、累計来場者数 30,000 人を超えて、盛況のうちに幕を閉じた荒木飛呂彦原画展 ジョジョ展 in S市杜王町に行ってきました。
思い出として、ここに記しておきます。
2012.08.03
「S市への行き方はいろいろあるけど、今回は覚悟を示すような道を進みたい。しかし、既に席がなくてチケット2枚は買えない。」 | 東京駅へのタッチ
東京から仙台への「向かい方」はこうだ。

12時20分発
S市行き やまびこ129号 指定・グリーン車・禁煙席
2枚ー
販売機のボタンを押し間違えないように操作して予約
9号 グリーン車 8A・8B 並んだ2席

しかし、今回は 12 時を回ると少し遅い。

2 席確保するのも難しい。
やまびこ 129 号に乗るだけでも良しとしよう。

そして最も重要なのは
このすてきな青空を眺めることであり
移動する景色をゆっくり楽しむことなのだ

それ以上に重要なことが この世にあるのか?

駅に着いたなら、そこからは徒歩だ。

「今回の『仕事』の住所はS市の駅前から約2kmの距離。景色も楽しんだことだし、もうバスや電車に乗る意味はないー歩いて行こうー」 | 仙台駅へのタッチ


「ジョジョ展 in S市杜王町(90分待ち)」 | せんだいメディアテークへのタッチ
新しいシャツとネクタイは買っておいた。
服装には気をつけないといけない。

あのなぁ〜
何だい君たち そのカッコーは?
そんなんでいいのか?
ここは先人の作品の眠る場所だ
漫画ファンなら敬意を払え
イケてないんだよ!
タイを締めろ!
ウエストコーストでスケボーでもしに行くのか?

原画の展示はビーティー、バオー、ゴーシャス・アイリンから始まり、第 1 部から順に。
「in S市杜王町」だけあって、第 8 部と第 4 部は別枠で後方に。
会場内は撮影禁止だが、唯一、ブチャラティチームと並んで撮影をすることは許可されている。

誰も彼らと並んではいなかったが。
会場内の様子が分かるメディア記事を貼っておこう。
ジョジョ展:”聖地”仙台で28日から 原画や等身大フィギュア、露伴の仕事場など初公開 – MANTANWEB(まんたんウェブ)
コミックナタリー – 仙台ジョジョ展は明日から!杜王町MAPや荒木の仕事机も
仙台で「ジョジョ展」開幕–あの「OWSON」も限定オープン – CNET Japan
一回りしてから物販会場(グッズも大半が売り切れて在庫なし)に寄ってホテルへ。

「やれやれ。やはりしばらくこの町に…滞在することになりそうだぜ。」 | 江陽グランドホテルへのタッチ
杜王グランドホテルは見当たらなかったが、グランドホテルには泊まっておかなければならない。
一休みしてから、市内巡り。
ここにはいろいろあるからな…。
「屋敷幽霊の代わり」 | 東北大学へのタッチ
「この裏が広瀬川だったので康一くんとヤスホの代わり」 | 仙台市民会館へのタッチ
「宇宙人の代わり」 | 西本願寺仙台別院へのタッチ
「吉良吉影の代わり」 | 勾当台公園へのタッチ
「エメラルドスプラッシュの代わりと晩ご飯」 | 牛たん炭焼 利久 花京院店へのタッチ

続きを読む

#hcdvalue ワークショップ UXのためのUIデザイン

コミュニティ hcdvalue のワークショップに行ってきました。
ワークショップは久しぶりな気がします。
講師はクラスメイト@aokaoq さん
テーマは「UXのためのUIデザイン」です。

スライドもアップされているので、開発者視点で整理しながら振りかえってみようと思います。
UX と UI をユースケースでつなぐ

UX = ユーザー体験
語られる言葉は、体験です。
UI = ユーザーインターフェイス
語られる言葉は、インタラクションであり、ビジュアルであり、アーキテクチャです。
ユースケース
ユーザーがUXを達成するために行う最小単位の行動を指します。
表現としては、(ユーザーが)○○する。(ユーザーが)△△を する。

今なお混同されがちな UX と UI ですが、実際に設計・実装する際はきちんと分けて考える方が良いと思っています。
そこを分けた上で、ユースケースで「つなぐ」という視点が今回、特に感心(感動)したポイントです。
着眼点にセンスがある…というか実務で磨かれた「技術」のようなものを感じました。
ここを個人的に解釈し直してみると、こうなります。

  • UX ⇒ 実現したい、創り出したい「体験」 ⇒ 要件定義(として捉え直す)
  • そのために必要なユーザーの「行動」 ⇒ ユースケース
  • 行動において「操作対象」となるもの ⇒ UI

更に UI の向こう側に実装 / ソフトウェア / システム / プログラムなどと呼ばれるものの「振る舞い」があります(ここは今回のテーマとは別の領域)。
要件定義としての UX からスタートして、設計と実装がユーザー側に進む UI デザインと、システム側に進むシステム設計。
こう考えると、UI デザインのプロセスがとても腑に落ちました。
具体的には 5 つのプロセスがあるので、順に見ていきます。

挙げる
2つに分ける
優先順位をつける
つなげる
描く

ユースケースを挙げる
まず、ユースケースを挙げて行きます。
要件定義からユースケースを抽出する…と考えると、ソフトウェア開発者にとっては馴染みのフェーズ。
意識するのは、その粒度です。
例えば Twitter クライアントを例にすると、「ツイートする」や「ダイレクトメッセージをチェックする」ような粒度。
「編集ボタンをタップする」や「OKボタンをクリックする」は細か過ぎるようです。
構造化シナリオでいうとアクティビティとインタラクションの間くらいとのこと。
オブジェクトの操作ではなく、ユーザーの行動を記述すれば良さそうな気がしました。
ユースケースを2つに分ける
ユースケースが抽出できたら、それらをプライマリとセカンダリの 2 つに分けます。
最終的には 4 つに細分化できました。(下記、A~D)。

  • 分類1.プライマリユースケース
  • UX を実現するためにユーザーが必ず行うこと(A)
  • 分類2.セカンダリユースケース
    • プライマリのためにユーザーが行う必要があるもの(B)
    • サポートすることでより良い UX が提供できるもの(C)
  • 不要なユースケース(D)
  • 再び Twitter クライアントを例にすると、A「ツイートする」、B「アカウント登録をする」、C「タイムライン上でサムネイル画像を見る」「ダイレクトメッセージのプッシュ通知を受け取る」、D「現在位置を更新する」という感じでしょうか。
    C や D は実現しようとする UX によって変わってくるでしょう。
    現場ではついつい多くのユースケースを C に入れてしまいがちです。
    しかし、ここはキリッと D に入れることで、アプリやサービスが目指すところを明確にした方が良いでしょう。
    また、「できないこと」は「やらないこと」と切り分けて、残しておくとのこと。
    ユースケースに優先順位をつける
    分類が終わったら、その中で更に優先順位をつけます。
    優先順位が高いものは以下のようなユースケース。

    ユーザーが期待するユースケース(何をしたいか?)
    ユーザーがよく行うユースケース (何を行うか?)

    もし、ここでペルソナが用意されているようなら「ペルソナに聴く」こともできるでしょう。
    あるいは「シナリオ」に記述されているかもしれません。
    優先順位をつけることは「ユーザーにとって必要なことを知る」ことにつながります。
    ユースケースをつなげる
    そして、ユースケースをつないでフローを作ります。

    分類1は少ないステップで達成できることが大切です。
    分類2で分類1のユースケースを妨げないようにしましょう。
    優先度優先度の高いものは、分類1の中でもより最短でたどり着けるようにしましょう。
    優先度の付け方に迷ったものは、フローを分けるべきかもしれません。

    最初はユーザー行動のフローとして見ることができますが、一定のユースケースをまとまりとして見たり分けてみたり(ワークショップでは分けませんでしたが)することで、画面や画面遷移が浮かび上がってきます。
    この時点でユースケースの粒度を再考してみるのも、ひょっとしたら良いのかもしれません。
    個別で上げていたユースケースをフローとしてつなげることで、新たに見えてくるものがありますし、「フローにしてみたが、つながらなかった」という場合は、ユースケースが足りなかったとも言えるでしょう。
    ここまでは実務でも繰り返しやっているところだろうな、と思いました。
    画面を描く
    いよいよ具体的に画面を描いていきます。

    分類1のユースケースが含まれる画面を優先的に描きましょう。
    分類1は画面上のわかりやすい位置に置くことが大切です。
    分類2は二次的なユースケース、もしくはよりよいUXを提供できるものですが、必須でないものです。
    そのため、分類1を優先したレイアウトにしましょう。

    UI を描くこと自体は慣れていないと難しいところですが、「質的変換」のプロセスだと考えれば納得できます。
    エンジニアなら、ここまでで作ったフローがあれば、更に UML なり Excel 方眼紙なりを踏まえるなどして、設計から実装へと進むことができるでしょう。
    今回は UI デザイナーが進む道をワークショップで体験しているということですね。

    続きを読む

    参加のまちづくり演習 2012年春 4/7 #cacp

    4月7日 参加のまちづくり演習 2012年春(神奈川県)
    このメッセージだけで感極まって涙をこらえるしかなく、あとのことは覚えていない。

    (笑い)
    最初に笑いを入れるのが、私のスピーチのこつです。

    中埜さんが、私に何か短いスピーチを話して欲しいと言ってきました。
    もちろん、彼の感じているのは、今回の地震や、津波によって、今の日本が大変な状況に直面しているということです。これは、中埜さんからの情報ですが、日本人は、この災害で大きく自信を失い、どうして、復興すれば良いのか道すら見失いかけているということでした。
    実際には、日本のことだけではないのです。アメリカも同じなのです。
    未だ、はっきり口に出す人は、少ないですが、英国も同じ状況なのです。
    多くの国々で、人々が同じような失望感にとらえれていると言うのは、おおげさではないのです。
    問題は、では、どうすればよいのかです。

    私は、ずっと長い間、あるものを、求めてきました。
    それは、美しさとは何か、そして、正しさとは何かということです。
    大変子供っぽい疑問ですが、私はもう十分、年をとりましたし、そう言われてもかまいません。
    私の助言は、何かを決定するとき、何かの行動をするとき、何かを作り出すときに、そういった活動すべてに、いつでも、それが、本当にあなたの内部からにじみでる美しさに裏付けられているかと、問うことです。たとえそれが、何かの行動でも、発言でも良いです。それは、絵を描くときであっても、歌を詠うときでも、何であっても–それは、老人をバスに乗せるために手伝っている時でも、同じ問いです。
    心の内部からにじみでる美しさにあなたは、今貢献しているかと、問う事です。
    この問いを、真剣に行うならば、全てに変化が起こります
    もちろん、これを最初に聞いたひとが、「ええっ、それに何の意味があるんだい?」と問うてくるでしょう。また、「そんなことは、馬鹿げている」と一笑にふす人もいるでしょう。しかし、この現実的な美に直面するならば、まず、あなた自身が変わるでしょう。次に、それを見ている人々が変わるでしょう。
    そして、その事を考えていた人々が変わるでしょう。
    そのとき、新しい道が開けるのです。
    これは、単純なことですが、大変、力があるのです。なぜなら、これは、心の底から産まれてくるものだからです。日本語でいう「こころ」からです。
    ですから、この助言は、とってもささやかな事ですが、貴方自身の人生をも変える事でしょう。
    あなたがたは、世の中のいたるところに、散らばっている小さな美しさを見つける努力をしてほしいのです。ちょうど、今、私たちがこの台所で、話し合っていたように『あの樹の枝の葉の間の漏れ日が美しい、かわいい』と。

    それは、大げさな事ではありません、大いなる事なのです。

    この小さな景色を探し続けること、その小さな行為を求め続けること、小さなこころの感動を感じ続けること、そのために、人生に貢献するように生きて行くことは、なにものもそこから、切り離すことはできません。お金が、そのなかで、とっても、醜い方法で、それを、切り離そうと、多くの場合そうしてくるでしょう。

    しかし、あの緑の樹々の葉の木漏れ日は、決してあなたの「こころ」から、切り離すことはできないのです

    ありがとう。
    クリストファー・アレギザンダー

    120408a.jpg 120408c.jpg 120408e.jpg
    120408d.jpg 120408b.jpg

    タロット・リポートのユーザビリティ改善

    バージョン 1.5 の残りの変更点の解説です。
    今回の変更は「分かりやすい方に振る」をテーマに実施しました。
    カード解説の追加がまさにそうなのですが、今回はユーザビリティ的なところをまとめて。
    まず、「タロット占い」の初回起動時にタロット占いについての説明を追加しました。
    120406a.jpg
    「そもそもタロットが分からない」という声を多く聞いたので、テキストベースでも追加しておこうということで。
    ここから「占いを始める」で通常メニューに遷移します。
    以降は右下の i ボタンをタップすることで再表示できるようになっています(ヘルプ表示はこのタイプに統一しました)。
    そして、タロット占いのメニューを変更しました(左)。
    120406b.jpg 120406i.jpg
    右が 1.4 までのものです。
    これまでのものは展開法(タロット占いのタイプ)ごとに分けていたのですが、ここも「そもそも〜」ということで、「ユーザーが何をしたいのか」でラベルを付け直しました。
    実際は見ての通り LATCH 的におかしな事になっていますが、「ワン・オラクル」より「今日の運勢」の方がタップしやすい(入口で迷わない)のでは、という判断です。
    また、選択肢そのものを減らすために、「ヘキサグラム」に内包できる「大三角形の秘宝」と旬を過ぎた「年環の数理」を削除しました。
    このメニューはまだまだ改善の余地があると思うので、早くさとりんに何とかしてもらおうと思います。
    そこから進むと、各展開法の説明へ(初回のみ)。
    120406c.jpg
    「占ってみる」で更に占う対象の選択や入力の画面へ。
    120406d.jpg 120406j.jpg
    ここでは「フレンドカードを引く」を外して、ボタンをひとつにしました(左)。
    この 2 個のボタンに迷う姿も数多く見てきたので、ようやく外せたという部分でもあります。
    結果、フレンドカードを使うにはエリオの部屋(設定。ここも名前を戻そうかなと思っています)で設定が必要になりました。
    120406e.jpg
    設定周りでは「正位置モード」を落としています(短命だったな…)。
    120406f.jpg
    あと誕生日設定は解除と保存でボタン色を変えてみましたが、まだどうもしっくりきていません。
    フレンドカードはアルカナと対応づけた結果、画面レイアウトも合わせました。
    120403a.jpg 120406k.jpg
    各操作ボタンはナビゲーションバーの編集ボタンからアクションシートを呼び出して…という iOS の作法にのっとりました。
    あと、気づいた人がいるか分かりませんが、ヘキサグラムの結果画面にあるテキストラベルの位置を微調整しました(左)。
    120406h.jpg 120406g.png
    これは、さとりんに「カードとラベルが均等に配置されているから、どれがどのラベルか分からない」と教えてもらったところ。
    ここまでやって、ようやく分かってきた感じです。
    書籍を読んで理屈は知っていても実装に反映されていないとか、解決策が思いつかないなどの課題の方が。
    こういう部分はもっと拾っていきたい。
    あと、やっぱり使っている人(の指の動き)に迷いが見えることが多々ありまして、「早く直さないとなー」と思わされて、春。
    そんなタロット・リポートのセールは 4/8(日)まで。
    この先の長い改善の旅を共に行きましょう。

    ジョジョのエピソードで解説するタロット – XVI : 塔

    120404e.jpg

    塔は突然訪れる苦難を暗示します。
    しかし、それは必然的に、あるいは必要だから起るもの。
    このカードは人生で幾度か経験するそんな辛さの象徴です。

    一般的にタロットの中で、「塔」は最も不吉なカードとされています。
    正位置でも逆位置でも悪い暗示ですし、『ジョジョの奇妙な冒険』第 3 部に出てくる「灰の塔」のイメージもよくありません。
    しかし、タロット・リポートを作るにあたって、タロット関連の本をいろいろ読んでみたところ、実はそうでもなさそうです。
    確かに、災いというか痛みのようなものを暗示していますが、それは「次の希望」や「気づき」に繋がるものです。
    また、アルカナの順序からも、悪魔による束縛が塔の崩壊によって解放され、星の希望が見えてくる…と解釈することもできます。
    これを端的に表すエピソードが『ジョジョの奇妙な冒険』第 1 部にあります。
    周りにやられっぱなしのポコに姉がビンタをくらわすシーンです。
    120404a.jpg
    このビンタこそ正に「塔」が暗示しているものです。
    120404b.jpg
    この「痛み」によって、ポコは甘んじていた状況(悪魔が暗示するもの)から抜け出すきっかけを得るのです。
    この時のポコにとっては、きっと必要な事だったのでしょう。
    120404c.jpg
    そして、ポコが得た気づきという希望(星が暗示する啓示)は、未来への行動に繋がっていきます。
    120404d.jpg

    ねーちゃん!あしたって いまさ!

    この他、第 4 部の康一と承太郎のシアーハートアタック戦もそうですね。
    康一の過信が承太郎を負傷させ、状況を悪化させていきます。
    120404f.jpg
    120404g.jpg
    120404h.jpg
    ここでは女教皇が暗示している「観察」が状況を打開するキーになっています。
    この手の話は他にも結構あると思うので、ストーリーのパタンとして名前をつけることもできるでしょう。
    タロット占いも、出たカードから人が置かれている状況を読み取っていくパタン・リーディングと言えるのかもしれません。
    この話はまた別の機会に。
    タロット・リポートで「塔」にあたるフレンドカードを作る時に困ったら、あなたにとっての「人生の教師」や「厳しい教師」を思い浮かべてみて下さい。

    フレンドカードが入れ替えられるタロット・リポート ver.1.5.1

    どーも、四月愚者にどれだけの人が気がついてくれたか心配な WarlockReport です。
    1.5 になったばかりのタロット・リポートですが、 1.5.1 にアップデートしました。
    バグ修正だけのつもりだったのですが、フレンドカードの入れ替え機能も追加しておきました。
    フレンドカードの入れ替えができるようになりました
    「フレンドカードの入れ替え」というのは、任意のフレンドカードの順番を入れ替えて、対応するアルカナを変更するというものです。
    自動作成や検索でフレンドカードが出来上がったあとに、「この人は女帝というより悪魔のイメージなんだよなぁ(ぉ」などと感じることがあると思います。
    ないですか、そうですか。
    まぁ、そういう時に使う機能です。
    使い方は作成の時と同様に編集ボタンをタップして「カードを入れ替える」を選択します。
    120403a.jpg
    そうするとテーブル形式でフレンドカードが表示されるので、入れ替える 2 つをタップして下さい。
    120403b.jpg
    例えば魔術師の WarlockReport をタップして、
    120403c.jpg
    その後、戦車の LionChapeau をタップすると、このように入れ替わります。
    120403d.jpg
    この時点で入れ替えが完了します。
    いろいろ試して、しっくりくるフレンドカードのデッキを作ってみて下さい。
    その他の修正点は以下の通りです。
    「フレンドカード」の作成処理を調整しました
    Twitter API の不具合を回避する変更を適用しました。
    一部のボタンデザインを変更しました
    各操作ボタンがデフォルトのプレーンなものだったので、少しお化粧しました。
    細かなバグ修正を行いました
    その他、気になったところをちょいちょい修正。
    さて、ここから更にどう直していくか。


    アルカナに対応したフレンドカードを作るタロット・リポート ver.1.5

    アップデート解説の続きです。
    「フレンドカード」の作成仕様を変更しました
    まず「フレンドカード」のおさらいから。
    タロット・リポートでは、Twitter でフォローしている人をタロットカードに見立てた「フレンドカード」を作成することができます。
    フレンドカードを22枚作成すると、タロットカードとして占いに使うことができるようになります。
    自分固有の「タロットデッキ」を作るイメージですね。
    バージョン 1.5 では、その仕様を変更しました。
    具体的に挙げてみると…
    フレンドカードとアルカナが 1:1 で対応するようになりました
    これまでのフレンドカードはツイート数やフォロー数などを元に、正位置や逆位置の暗示を設定していました。
    そのため、様々なカードの暗示が混在するフレンドカードが出来上がっていました。
    今回、これをアルカナ 22 枚と 1:1 で対応するように変更しました。
    22 枚作成すればアルカナを網羅できるので、占いに使うにも、ペルソナのコミュごっこをするにもバランスよくなりました。
    もちろん、タロットカードの暗示を持つスタンド使いたちのデッキを作るのも良いでしょう。
    フレンドカードを作成すると対象者の物語が読めるようになりました
    世の中には、アルカナの 0 〜 XXI までを人間の成長や「愚者の旅」に見立てた物語があるそうです。
    これをベースにしたショートテキストを追加しました。
    120326c.jpg
    「アルカナ」の方にも入れる予定でしたが、少し機を伺うことにしてフレンドカードだけにしました(謎)。
    しばらくネタとして見守って下さい。
    暗示される行動や状況に対象者が絡んでくるようになりました
    例えば「愚者」には「自由で純粋な気持ち」という暗示がありますが、フレンドカードになると「自由で純粋な【ユーザー名】」という感じになります。
    120326e.jpg120326d.jpg
    これも話のネタとして。
    「フレンドカード」の表示 UI を「アルカナ」に合わせました
    アルカナと対応させた結果、UI も合わせる事にしました。
    120326a.jpg
    これにより、作成までの手順も少し変更になりました。
    フレンドカードを作成するには、まず「フレンドカード」の右上にある「編集」ボタンをタップします。
    その後、「おまかせ自動作成」か「ユーザー名で検索して作成」を選択します。
    120326b.jpg
    「おまかせ自動作成」は名前の通り自動で全てのフレンドカードを作成します。
    既にフレンドカードがある場合は、全て削除して作り替えるので注意して下さい。
    「ユーザー名で検索して作成」はこちらの通り。
    その他、細かいところでは、「Twitter API 不具合への暫定対処として自動作成でフォローしていない人も作成するようになった(1.5.1で解消予定)」「誕生日占い(生誕の数理)でフレンドカードが利用できるようになった」など。
    …こんなところでしょうか。
    ということで、是非、フレンドカードを作って占って(遊んで)みて下さい。
    App Store – タロット・リポート