Orangebomb

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜

僕が務めるGMOペパボの同僚、@hfmが産んだ キャリアキーノートという取り組みがあります。キャリアキーノートとは、

先輩の個人史 (キャリア) を紐解いてもらう中で、その根底に一貫して流れる基本的な考え方 (キーノート) を学ぶ場

というものです。要するに「これまで自分が歩んで来た道のりの過程で生成された自分の根幹部分を、他者に共有する 資料 およびその 発表の場 」だと僕は認識しています。詳しくは@hfmの記事 キャリアキーノートとはなにか をご覧ください。

今年の春、会社に新卒の7期生たちが入社しました。その後の新卒研修の中で、各職種から1名ずつ発表する方式のキャリアキーノートのパートがあり、僕がデザイナー枠として参加できることになりました。今回はそこで発表した内容を掲載します。なんやかんやで公開し損ねてました。僕が学校を卒業し、就職し、そして今に至るまでどんな道を歩み何を得たのかがわかります。

迷い彷徨った先で見つけた自分の進むべき道〜キャリアキーノート2017〜 from Keita Kawamoto

ヒューマンアカデミー、当時は長崎校が出島にあったんです。今はなくなってしまいましたが…。四つ折りにする紙の話、実際に7期生たちがやってみたところ、2/3がその通り中央よりほんの少し上に点を打っていました。残りの1/3は本当の中央に点を打っていたので、 「人間は本当の中央より ほんの少しだけ上を中央と感じがち」というところでしょうか。みなさんも試してみてくださいね。

資料発表中の様子

社内のことなんてどうでもよくない?のくだりは、「視野が社内だけに留まってどうすんだよ世の中を見ろ、もっと広く見ろ、そして得た学びで社内でぶつかった問題を解決すべきだ」と捉え、ゴニョゴニョ悩む時代は幕を閉じました。最高。誤解を生みそうなワードでしたが、社内のことなんてほっぽり出せ、という意味ではありませんでした。

この資料を作るために過去を振り返って以降時折思い出すのが、恩師の言葉です。

君のポートフォリオは5、6年前の手法だよ

幸いなことに、今僕はデザイナーとして働くことができている。しかし、その実力とは?働けてさえいればいいのか?あの頃とは違う。…本当に?

これから完全に新しく何かをデザインするとする。その結果、もしかしたら今でも5、6年くらい前のレベルのままなのではないか?今の自分は、最大の自分か?見た目だけがデザインではないから、装飾スキルが古いか新しいかとかいうよりも、トレンドだのなんだのとかそんな話でもなく、 設計 という本当の意味でのデザイン能力は、現時点の自分にとって最大か?

本質的な デザイン ということに、新しいも古いもないのかもしれない。ただ、この言葉を思い出すたびに、今の自分が本当の全力なのか、見つめなおします。

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 / Design Casual Talks #2

ロリポップ!レンタルサーバーというホスティングサービスがあります。2001年に開始したサービスで、もう15年以上続いています。僕はそのロリポップ!を提供しているGMOペパボに勤めていて、ロリポのデザイナーをやっています。

15年以上続いてきた老舗サービスを、生まれ変わらせる必要がある。そういう問題に直面し、福岡支社長・マネージャー・エンジニア・デザイナー・カスタマーサービス・インフラエンジニア・ディレクター・特別顧問という関係者全員が集い生まれ変わらせるプロジェクトを始動させました。

結果開始からリリースまで1年ほどかかりました。デザイナーのひとりとして最初から最後まで携わった身として、共同主催でやったデザイン勉強会 Design Casual Talks #2 にて僕の視点で見たロリポップ!リブランディング というタイトルで発表しました。

15年以上ずっと大きな変化をすることができなかったサービスをどのように生まれ変わらせたのか?

僕の視点で見たロリポップ!リブランディング〜開始からリリースまで〜 from Keita Kawamoto

イベントの様子

前回よりも多くの方にお越しいただけて、とても楽しい勉強会になりました。 経験不足によりいろいろ失敗しご迷惑をおかけしてしまって申し訳なかったのですが、でもやっぱりデザインの勉強会は最高だなというところが正直な感想です。もっと福岡のデザイン界隈が盛り上がりますように!

入り口の様子 受付の様子 ビール 発表の様子1 発表の様子2

所感

ブランディングを行う際にも、例によっていかに 言語化 することが重要かを再確認しました。 発表時間が15分だったのでこのような省略された内容になりましたが、取り組んだ1年には膨大な学びが他にもまだまだありました。 今後まだお話しできていない部分もアウトプットしていけたらと思います。

リリース後、約束を守るために言語化した軸を中心にプロジェクトを進行中です。まだまだパワーアップしていくので、よければ今後のロリポップ!にご注目ください。

影があるとなぜ立体だと認識するのか?インターフェイスの仮説を脳科学から考える

デザインをするとき、様々な仮説に基づき、設計する。「影があれば浮き出て見えるので、影の有無によって主張レベルをコントロールできる」「黄色は主張する色なので、このコンテンツにふさわしい」「色は薄くしたりグレーにすれば非アクティブと認識する。アクティブなものだけ色を濃くしよう」など。

理解できるし、正しいはずだ。

でもどうして、 影があれば浮き出て見える のだろう?僕にはその説明ができなかった。錯覚するから?ならばなぜ錯覚する?実際は平面でしかないじゃないか。

自分の作ったものを人に説明するとき前述のような解説をするが、心の中では、どこか腑に落ちない感じがしていた。「自分自身がそう感じるから、誰もが同じはずだ」本当にそうだろうか?

謎を謎のままにして進めることをしたくなかったので

  • 影があれば浮き出て見えるのはなぜか
  • 色は薄くしたりグレーにすれば非アクティブと認識するのはなぜか

今回はこの2点の事象について調べてみた。

出典・参考文献

以下の文献の情報を参考にしました。

まとめ終えて

実はこの資料は2015年にGMOペパボの社内デザイナー勉強会にて発表したものだ。「ブログを作りたいから、それまでとっとこう」と思ってアップロードしていなかった。ようやく実現できた。 ブログを作るのが楽しいものだからテンプレートをいじくりまわすことにばかり時間を割いてしまったり、いざ投稿しようと思ったら先にSSL化しないとまずいと気付いたり。まだ溜まっている投稿ネタがいくつかあるので、近いうちにそちらも公開したい。

このスライドを作ったことによって、人間が錯覚する 理由 の一部がわかった。すごく面白い。 デザイナーが作ったものを利用するのは同じ人間だ。なので、人間の仕組みについてよく理解しておいた方が絶対にいいものが作れるはずだ。 僕はこれからも疑問に持ったことは一つずつ解決していきたい。 「そこまでしないといけないの?」というより、純粋に僕自身にとってめちゃくちゃ面白い。

アクセシブルにするならSlideShareを選ぶべき?SlideShareへのアップロード方法

Keynoteなどでスライドを作成し、スライドのSNSへアップロードし、シェアする。多くの人が行なっているこの行動、場合によってはスライドの中身にアクセスできないことがあるという事実を知った。そこで、そのようなことが起こらないようにアクセシブルなスライドにするにはどうすればよいのか?という部分に関し調査・検証を行なったので記録する。

アクセシブルとは?

まずは アクセシブル という単語について。

アクセシブルデザインは、高齢者・障害のある人々の利便性を配慮しつつ、健常者の利便性も確保することを目的として、従来の設計を高齢者や障害のある人々のニーズに合わせ拡張することによって、製品、サービス、建物などがそのまま利用できる潜在顧客数を最大限に増やすための設計ということができます。これにより、ビジネス拡大の効果を得ることが可能になりますが、ビジネスを最優先させるのではなく、高齢者や障害のある人々の利便性を高めることが主たるねらいです。 アクセシブルデザインは、ISOにおける ガイド71 の議論において、高齢者・障害のある人々が健常者と同様に社会システムにアクセスできる言葉として定義されています。

出典:共用品推進機構 - アクセシブルデザイン関連JIS・基本規格

このように書かれることが多いが、僕は どのような条件であろうと誰しもが同じようにコンテンツにアクセスすることができること という認識をしている。僕にとって「障害者対応」という言葉は本質的ではなく、目が見えなかったとしても、耳が聞こえなかったとしても、テクノロジーを利用すれば健常者と同じようにコンテンツを参照できるのだから、当然そうあるべきである、というもの。(似て非なるもの、というか。やっていることは同じかもしれないが、捉え方の問題)

アクセシビリティと、スライドのアップロードに関する事情

ここからは、スライドとアクセシビリティの関係について。

(1)SpeakerDeckでは情報(スライドの内容)にアクセスできない

以前、スライドをSpeakerDeckにて公開した時に、スクリーンリーダーユーザーである @ma10 さんが以下のようなツイートをなされていた。

驚いていると、 @magi1125 さんからアドバイスのメッセージをいただいた。

  • SpeakerDeckはスライドを画像として表示するのみである
  • テキスト情報として内容にアクセスすることができない

なんてこった…

(2)SlideShareの場合は中身を読みテキストとしてWebページ上に表示される

SpeakerDeckに関しショックを受けたところで、「SlideShareならばその問題が起こらない」という情報も得た。

  • 文字を画像にしない等、適切な方法でSlideShareにアップロードすればスライド内のテキストを抜き出してくれるため、スクリーンリーダーユーザーでも内容を把握することができる
  • スクリーンリーダーで読み上げることが可能=視覚以外でアクセスが可能

しかし、SpeakerDeckだと起こる困ることは起こらなくても、SlideShareにはSlideShareならではの困ることがあるのであった。 僕はスライド作成にはKeynoteを使っている。困る問題とは、Keynoteバージョン6以降で生成したPDFをSlideShareにアップロードすると、作ったスライド上からテキスト部分がすべて表示されなくなってしまう、という問題だ。実際はそこにあるけどただ映らないのみ。スライド外にテキスト出力はされていた。 今回、どのようにすれば問題なくSlideShareにアップロードすることができるのかを調べた。

Keynoteで作ったスライドをSlideShareにアップロードする手順

そのうちSlideShare側がバグを解消してくれるのでは?という点に関して。KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 - Qiita / 公式の回答 によると、残念ながら前述の文字が消える問題を解決する対応は時間がかかるようで、こちら側が頑張らないといけない… @magi1125 さんがツイートしていた解決策をベースに進める。

この検証では以下のバージョンを使用する。

  • Keynote バージョン7.2(4582)
  • Adobe Acrobut Pro DC バージョン 2017.009.20058

結論から言うと、

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。 今回行なった手段は、

  • Adobe Acrobat Proを用意(少なくとも2016年8月時点での最新版が必要?)
  • Keynote ファイルプリント → 形式で Save as Adobe PDF を選択
  • Adobe PDFの設定は 標準 を選択・保存
  • Adobe Acrobat Proで展開、無用な余白をトリミング・保存
  • SlideShareへアップロード

という流れ。画面を見つつ解説すると

keynoteの画面

まずはKeynoteメニューの ファイルプリント

keynoteメニュー

左下にある PDFSave as Adobe PDF に変更する。Adobe PDFの設定は 標準 を選択。

プリント画面

Adobe Acrobat Proで先ほどのファイルを開き、右側の検索窓から トリミング と検索(どこにあるかわからなかったので検索した方が早かった)。その後 ページをトリミング を選択。

Adobe Acrobat Proの画面

トリミング範囲を指定した後、詳細画面が表示される。16:9のスライド場合、 余白の制御 は上下 21ミリ ほどで綺麗になった。ページ範囲の項目では すべて を選択。これで全ページに同じトリミングが適用される。その後保存すると、PDFの完成。

トリミング詳細画面

完成したPDFをSlideShareへアップロードすると、文字も消えておらず無用な余白もない綺麗な状態かつアクセシブルなスライドにできる。 次に、Adobe Acrobut Proが手に入らず、使わないでやる必要がある場合の方法を記載する。

Adobe Acrobut Pro を使わない場合

Adobe Acrobut Proを使わず、SlideShareへスライドをアップロードするにはどうするとよいか?

(1)Keynoteの場合(文字が消えるバグの回避法)

  • Keynoteの書き出しの イメージ を選び、すべてのページを画像で書き出した後、全ページにひとつずつ画像をかぶせ、通常のPDFで書き出し、アップロードする
    • 余白問題は解消され、スクリーンリーダーでも読める状態
    • しかし画像だと多少文字がギザる、大きな手間がかかると言うデメリット
    • とてもナンセンスな印象
  • ヒラギノなどOS Xの標準フォント以外のフォントを使う( KeynoteのスライドをSlideShareにアップロードすると日本語が表示されない問題 より )
  • 文字が消える事象が起こるKeynote6より前のKeynote5以前を使う?(手に入るかはわからないが…)

(2)Keynote以外の場合(おそらく文字が消えるバグは起こらない)

  • Googleスライド
  • その他スライド作成アプリケーション

などの手段がある。

完璧は難しい。「割り切ること」も重要なこと

今回の件を調べるにあたり、SlideShareにアップロードできたと言っても、「それだけで完全にアクセシブルなのか?」という疑問を持っていた。

  • SlideShareでは自動出力されたテキスト情報は改行や段落がなくなるので認識しにくいと思うが、テキスト情報だけで読む人は、どのように脳内補正している?
  • テキスト情報の内容は重複してもいいのか?(差分表現で、差分箇所以外は同じものを何度も掲載することになる)
  • 図解に関しどのようにテキスト化すればいい?
  • 自分一人ならすごく気にすればこれらを解決できるかもしれないが、人に続いてもらえるようなフレームワーク化とか無理では…

などということについて頭を抱えおり、ちょうどそのころ参加した勉強会 !important #04 -特盛!アクセシビリティスペシャル- でお会いした @magi1125 さんにこのことを相談させていただいた。すると、

  • 全く読むことができない という状況から 読めるようになった それでけでも大きい変化だと割り切ることも大事
  • 完璧 は難しいこと。そしてスライドの作成者次第な部分が大きすぎる

という回答をいただいた。割り切るという視点が欠けていたため、目が覚めたようだった。

余談1.SlideShareにアップロードしたスライドを削除する方法

テストで文字が消えてしまったスライドを削除しようとしたところ、消すまでにかなり迷った。(バグなのか、 EditDelete presentation では消えないことがあった) 最終的には SlideShare ファイルを削除する | LinkedInヘルプ にたどり着くことで解消できた。

  • SlideShare にサインイン
  • 右上のプロフィール写真にマウスをポイントし、 My uploads を選択
  • 削除するプレゼンテーションの左上のチェックボックスをオンに
  • 削除 をクリック

とのこと。

余談2.一応ある?SpeakerDeckのスライドをスクリーンリーダーで読む方法

こういう裏技も一応あるようだ。 SSSSLIDE…スライド集約サイト?

所感

アクセシブルにするためにこのような努力が必要である今の状況には不満がある。 Keynoteの文字が消える問題の解決対応がまだ先になりそうなSlideShareも、テキストデータが出力されないためにスクリーンリーダーでは読むことができない状態であるSpeakerDeckも。ただPDFで出力してアップロードさえすればスライドの内容になんの無理もなく誰もがアクセスできるようになる未来を望んでいる。 …と言いつつ、自分の携わっているものがすべてアクセシブルかと言われると違う。もっと頑張らないといけない。もっと勉強と実験を繰り返し、関わるものを可能な限りアクセシブルにしなければ。

そして、この件で相談に乗っていただいた @magi1125 さんには本当に感謝しかありません。ありがとうございます!

【7/20追記】Acrobutでのトリミングなしで済む方法

この記事を公開したところ、@magi1125 さんからフィードバックをいただけた。

カスタムサイズで160/90mm or 160/120mmに設定して「AcrobatでPDF保存」的なのを選ぶ。

いろいろ試行錯誤したもののここがどうしても実現できなかった。

わからなかったこの部分の解決方法を教えていただけた…!圧倒的感謝。(僕は印刷画面UIが苦手っぽい。 ページ属性 という項目の意味が理解できなかった)

Keynoteの以下の プリント の設定画面のところで下部にある 詳細を表示 から進む。

プリント画面

ダイアログ中段の Keynote と書かれたセレクトボックスで ページ属性 を選択。

プリント詳細画面 ダイアログ中段のセレクトボックス

用紙サイズのセレクトボックスでA4 になっているところを カスタムサイズを管理... に変更。

用紙サイズの変更

新しいサイズを設定できるので、左側の + から新規サイズを追加する。 90mm 160mm と指定すればOK。 (4:3のスライドの場合 160mm 120mm と指定すればよい)

用紙サイズの変更画面で専用のサイズを指定

こうすれば、Acrobatでトリミングせずとも余白がない状態で出力できる。形式は前述の通り Save as Adobe PDF ! そのあとはSlideShareアップロードすればOK。

目標設定が下手な自分と、デザイナーのアウトプットに関するヒント

僕は目標を立てるのが下手だ。ついでに言うと、自己評価も下手だ。 評価面談を行う上司やシニアデザイナーにはいつも迷惑をかけていた。今回も、例によって「あとはやるだけだ!」という目標設定はできていない。 それに対し、プライベート活動に関する目標を立てるのは上手だ。なぜならば、自分のやりたいことがたくさんあるから。とにかくやりたいことに対し、モチベーション全開で向き合うだけでよかった。ただ、なんとなくあっちこっち行き当たりばったりで軸がないような気もしていた。

去年は公私ともに悩んだ結果、自分が本当にやりたいことをやっとの思いで言語化することができた。「わからない」をなくす というのがそれだ。 これに至ったのは、「自分が作ったものが、誰かにとっては使い物にならない」ということがあり得ることが嫌だったからだ。「なにこれ、よくわかんないんだけど」という言葉を聞いたら、かなりショックである。しかし、必ずそれがあるのも事実だ。 僕は誰でもストレスなく使えることを追求することが好きで、だから人間そのものの特性ついてもっと知りたいし、視覚障害など晴眼者とは違う条件下での利用にも対応できるようにしたい。

仕事の目標を立てることに現在進行形で悩んでいる。締め切りはとっくに過ぎているが、プロジェクトの関係で、もっと戦略が具体的になってから定義する手筈になっていた。 が、しかし。具体的になったとしても、評価者が悩まず高評価をつけてくれるような自己評価をすることができる目標設定はできないだろう。

何に困っているのか?それは「言い回し」だ。ハッキリ数字が出る目標設定は簡単だ。それに達成しているか・いないかの2択だけでいい。今回の目標が改善タイプであればそのように数字の変化を軸にした目標を設定すればよいのだが、今回は改善タイプではない。新しくモノを作ることで期間ギリギリ(計測期間を確保できない)のケースだ。 よって、「作り上げる」タイプの目標設定をする必要がある。

「○○を作った」「○○で成果を出す」では、定量的ではないので評価者が評価をしにくい。解釈次第では、あとから結果がいくらでも変化することになる。 どうにか、上手い言い回しはないだろうか?評価判定がしやすい目標設定とは? 他の人の評価シートを眺めていても、真に上手なのか、評価者によってはその人も「評価しにくい目標」という判定になるのではないか、それ自体の判断すら曖昧だった。なので説得力 に関しても重要だった。

そこで、「作り上げる」タイプの目標設定が上手な人を探した。そのためにまず「上手であると判定できる人」を探す必要があった。 僕はデザイナーだが、以前からエンジニアの評価シートを眺めることが好きだった。職種柄、言語化に長けているからだろう、読んでいて気持ちが良かったのだ。 僕が勤めるGMOペパボには、シニア・プリンシパルエンジニアという上位職のエンジニア @matsumotory さんがいる。 技術者と研究者の狭間で得たたったひとつの教訓 2016 というスライドを読んでからファンになってしまって、スライドやissue、ブログ記事などをよく眺めてさせていただいていた。 @matsumotory さんに「作り上げる」タイプの目標設定について尋ねてみたら、想像以上に多くのことをアドバイスしていただけた。今回いただいたアドバイスを自分の中に取り込み、自分なりの解釈をし以下に記録する。

「作り上げる」の目標設定・達成のためのヒント

1. アウトプット・フィードバックを繰り返し「説得力」を獲得すること

作って公開・作ったものを社外で発表・自社サービスへ導入。エンジニアの王道スタイルという印象のあるこのパターン。 しかし、ただ作ればいいというわけではない。自分だけしか価値を感じない結果に終われば、それは自身の評価には繋がらない。その疑念を払拭する意味も含め、大事なことはアウトプットでそれを測ること。アウトプットし、それに対する社外のフィードバックを受け…というその繰り返しによって社外でも一定の評価を得られれば、それが社内評価での 説得力 となる。

2. 考えをまとめるだけでコンテンツになる

「これ( FastContainerアーキテクチャ概論 )とか何も作ってないですけど、考えだけをまとめたものですが、ちゃんと一つの作り上げたものに見えますね。それをベースに提案する、などがその先でしょうか」

ライブラリ・ソフトウェア作成以外には、上記のような設計や思考、アーキテクチャをちゃんと整理してアウトプットするなどがある。なので「プログラミング言語が扱えないから、エンジニアみたいに全部自分で作り上げるなんてできない!」などと嘆く必要はない(とはいえデザイナーもフロントエンドに特化している人ならばひとりでやってしまいそうであるが)。 設計こそデザイナーの本来の役目。ターゲットユーザーに対してインターフェイスがどのように機能するか。使いやすさはこれが一番か。誰でもアクセスできるか。セオリーに則っているが、もっとこうしたらこれまで以上に利便性が向上するのではないか。 考え始めたらアウトプットに繋がる題材はゴロゴロ存在する。

3. 社外へのアウトプットは「一般化」で解決する

やっていることを一般化して整理する、ということをやれば社内業務の出来事も社外へ向けてアウトプットすることができる。 Webオペレーションエンジニアのアウトプットと開発力 にも書かれている。 一般化とは、業務で生み出したもの・やったことを、組織に依存しない手法、コード、テクニックへと変換し誰でも問題なく参照できるようにすることだと僕は認識した。 一般化をすることで、会社的に出していいものか…まずいかなあ…などというアウトプットに対する足枷を外すことができる。

4. 提案したものをちゃんと作り上げる

細かくアウトプットしていく、というのがどのケースにおいても重要。 細かくアウトプットし、フィードバックを得て磨き上げる。その先で説得力を獲得する。 そしてそれを経て提案し、ちゃんと作り上げるまで実行する。

まとめ

目標設定のための「言い回し」に関する具体的な答えを見出せるまでには至らなかった。 しかし、

  • 将来、説得力を獲得している
  • 将来、設計や思考がまとまっており、伝わる状態になっている
  • 将来、提案が実行され(取り入れられ)作り上げられるものがある

これらを意識していけば自ずと言い表せるようになるはずだ。 一般化して考える癖をつけることと、自分の業務と社外の内容を重ね合わせるように努力して生産性を高くしていくことに注力するとよくなる。

僕はこの出来事を経た後も、変わらず目標を立てることも自己評価も下手くそだろう。何かに気づいたからその後一気に好転するくらいデキるやつなら、こんなに悩まずともきっとそのうちできていた。 大事なのは、すぐにできるかできないかではない。 これからも何度も失敗を積み重ねていく中で、今回得たことを忘れず継続していくことだ。 すると、失敗の先にきっと成功があるだろう。

matsumotory:今日のこの話を自分なりにブログエントリにかいてみるというのがよいかもです。忘れても見直せるように。自分の言葉で書くというのが大事だったりしますね。 kawamoto:わかりました! 最後の最後にこのアドバイスをする @matsumotory さん、さすがだった。

目が見えない状態を想定したUI設計

視覚がない、弱い人はどのようにサイトを利用しているのか、使っているのはどんなインターフェイスなのか。ずっと気になっていたというのもあり、「目が見えない状態を想定したUI設計」という内容で、主催した勉強会 Design Casual Talks #1 で発表をしました。

インターフェイスとは目で見えるものだけではなく、音声だけで構成されるインターフェイスもある。では僕らがページを作るとき、具体的にどうすればいいのか?

出典・参考文献

すべて2016年9月時点(スライド作成時)の情報を参考にしました。

まとめ終えて

イベントを前に、とにかくアクセシビリティに関する多くの情報を得たくて、コーディングWebアクセシビリティを購入しチェックしました。買ってよかった。

スクリーンリーダーをどのように使っているのか、WAI-ARIAの具体的な実装はどのように進んでいくのか、まだまだわかっていないので今後も調査・学習を続けていきたい。

Archives