11月15日 UIにもこだわりたいWeb開発者のためのデザインメソッドに参加した

日時：2012年11月15日（木）19:00～21:00
会場：パソナグループ 本部 8F イベントホール
関連：Find your Ability ! forデベロッパ #7 UIにもこだわりたいWeb開発者のためのデザインメソッド

感想など

本編とキャリアビジョンの2部構成でしたが、どちらもよい勉強になりました。

[本編]
BootstrapやjQuery Mobileの使用前後の画面例とコードが提示されて、スタイリッシュで時間をかけないというのはわかりやすくてよかったです。
ただ、元々のデザイン（内容やボタンの配置）がまずいと、それらを使用しても使いづらいので、「目新しくないよくある」デザインにするために参考にした情報や気をつけたことなどを、質問すればよかったなと思いました。

[キャリアビジョン]
仕事のこだわりやダメパターンなど私には耳が痛い話が多かったですが、なるほどと思うことが多くてよかったです。
「自分の仕事の価値を理解して、他人に説明できる」は重要だと思いました。自分の仕事の価値を知らないと、ただやるだけでモチベーションや効率が低いだろうし、価値が低い仕事をずっとやりつづけることもありえる。また、他人に説明できないと、たとえ価値が高い仕事をしても、全く評価されないことになって残念だし、続かないなと思いました。
特にデザイナーみたいに、エンジニアもポートフォリオを持ち歩くはなるほど思いつつ、デザイナーのポートフォリオって具体的にどんなものか知らなかったり。
また、これを書いていて、ポートフォリオの話は、技術ブログやGitHubアカウントに履歴書や職歴などを記載してアップすることと同意義なのか、別のイメージなのかが気になったりしました。

まずは、写経するなりして簡単なものをBootstrapやjQuery Mobileを使ってつくってみようかと思います。

本編

クレック株式会社の崎川さんの発表。
WebとスマホアプリのUIデザインについて、「docci」というアプリ開発での経験を交えて話をされました。
「docci」では、PhoneGap + jQuery Mobile で開発したそうです。


エンジニアにデザイン力は必要か？
- Yes であり No である（場合による）

エンジニアによるデザインの必要性
- コンシューマー向けの凝ったデザイン
　- (No) デザイナーに任せるべき
- 運営向けの管理画面、プロトタイプ、テスト画面
　- (Yes) デザイナーに任せる程のコストがかけられないが、重要な画面は、エンジニアでもデザインすることが必要
　　- 管理画面：
　　　- ヒューマンエラーの軽減のため
　　　- 作業効率の向上のため
　　- プロトタイプ：
　　　- 提案時に、見た目で損をしないため
　　- テスト画面：
　　　- 可読性の向上のため

どんなデザインをすべきか？
1.スタイリッシュ
　- 目新しくない見慣れたものであること
2.時間がかからない
　- デザインよりも、もっと時間をかける場所が他にある（コーディングとか）

スタイリッシュで時間がかからないデザインをする
- Web
　- Bootstrap
　- （簡単なサンプルの例をいくつか挙げて説明がありました）
- スマホ
　- jQuery Mobile
　- （簡単なサンプルの例をいくつか挙げて説明がありました）

便利なサービス
- codiqa
　モックアップをブラウザ上でさくっと作れるサービス
- StyleBootstrap
- lavishbootstrap
　Twitter Bootstrapのデザインを簡単に変更出来るWebサービス

ユーザーへのテストがデザインが決まらないとできないというのは残念
jQuery Mobileなどを使って、そこそこのデザインでテストを進める

開発での苦労
- jQuery Mobileとデザイナーが作成したcssが衝突
　- 一箇所を修正すると別の箇所のレイアウトがくずれるということが何度も発生
　- デザイナーがjQuery Mobileに詳しくなかった
　- 準備や打ち合わせ次第
- jQuery Mobileを使うと他のフレームワークへの移行が難しい
　- jQuery Mobile用のDOMを作成してしまう


質疑：Bootstrap、jQuery Mobile以外に比較検討したものはあるか？
- Bootstrap以外は考えられなかった。
（補足：検討したものはあったが、他は足りない機能が多かった）
- jQuery Mobile以外にSencha、Zeptoを検討した。
　- Sencha：機能不足だった
　- Zepto：即席性が低かった
- 全体のバランスがよかったのが、BootstrapとjQuery Mobileだった。
- 社内にjQuery Mobileに詳しい人がいたのも理由の1つ

質疑：デザイナーとの作業はプロセスは？
- ページのモックをパワーポイントで作成し、APIの仕様を用意して打ち合わせた
- デザイナーからあがってきたものを社内でユーザーテストを繰り返した
- ユーザーテストで出た問題をデザイナーとすりあわせて修正していった

質疑：テストに使用した端末は
- 主に社内で社員が所有する端末でテストした。
- 外部のテスト会社で10機種の端末でテストした。
　- 10万程度かかった
- Androidでのテストは、同一端末でもアップデートの適用有無のバージョン違いで挙動がかわることがある。

キャリアビジョン

株式会社ネットプライスドットコムの今井さんの発表。
経歴・経験と仕事のこだわりや採用で重視している点などを話されました。
自分が「エンジニアであるか？」について、振り返って考えた内容でした。


僕はエンジニアか？

エンジニアもポートフォリオを持ち歩く
- 過去のお仕事
- 運営しているサイト
- エンジニアブログ
- GitHubのコード

仕事でのこだわり
- 会社の向かうべき方向に先回り
- 効率的に「無駄なこと」をする
- 自分の仕事の価値を理解して、他人に説明できる
- アイデアは話す。そして形にする
　- 自分の考えたことは他人も考えているから
　- 背水の陣。言ったからにはやる

エンジニアにしかできないこと
- CREATION
　新しい価値を具体的に見える形にすること
- ACCELERATE
　加速させること、拡大させること
- LEVERAGE
　ひと一人の力をはるかに凌ぐ仕事をできるようにさせる

ダメパターン
- 「知っている」だけ
　- 経験ではない
- 「使ったことある」だけ
　- なんのためにつかったのか
　- つかってどんな価値を得たのか
- やりたいけどやってない
　- 技術に対して興味が薄い
　- 実行力がない

エンジニアの道具
- システム設計ができる
- コーディングできる、コードが読める
- サーバーが管理できる
- etc

- 道具をさびつかせないようにする
- さびついた道具しか持っていない人と働きたいか？
- 道具をなんのために使うのか？
- 道具を使って何ができるのか？

その他

パソナさんでやっているということもあって、本編以外にキャリアビジョンという2部構成でした。

本編は、崎川さんが主で発表・質疑応答して、今井さんが補足説明をするような感じでした。
また、iPhoneアプリの申請を行ったときの苦労話もありましたが、メモしていないので、記載できませんでした。

キャリアビジョンは、スライドの流れがはやくて、メモをとるのが難しかったのです。気になったものだけをなんとかメモした感じでした。