デザイナーとエンジニアの垣根を取り払いたい人のための勉強会!Collabo Tips(コラボチップス)に参加してきました!
(ブログまとめ枠で参加したので、早速まとめ。何かミスやご要望がありましたらお知らせ下さい。

「デザイナーとエンジニア」の相互理解を深め「良いもの作り」への参考になる話が沢山でした!
便利ツールのお話などは、全般的に役立つところです。

デザイナー側、エンジニア側それぞれから合計14名(+最後に!?)の、各5分(6分過ぎたら強制終了)のLTどんな話題が飛び出したのか!?
参加者のツイートなどの引用も交えながら、まとめて行きます。

 ※スライドなど、確認次第に随時リンクを追加していきます。
 ・8/5 記事内リンク整備
 ・8/6 LT概要2と4と11、グラフィックレコーディングにリンク追加、修正。
 ・8/7 LT概要1と11にBlog記事へのリンク追加、関連リンク集に1件追加。

コラボチップス-グラフィックレコーディング-03
 リアルタイムに描き出されていったグラフィック・レコーディング

本記事は以下の内容で構成しています
前書き(ここです)
全15のLT概要

(各LT概要の中で、Amazonへリンクしている書籍について、アフィリエイトリンクは含まれてはおりません。)
 

会場はFiNCさん。運動から始まる、健康ともコラボする勉強会!

今回の会場は、スマートフォンに特化したヘルスケア関連のアプリやサービスを開発されているFiNCさん。
なんとジムやエステの設備も兼ね備えたオフィスです。

最初は噂の「ウェルネスタイム」から始まりました!
資格を持ったトレーナーの方の指導の元、軽い運動で血流を良くし、集中力を高めます。

PCに向かいっぱなしのデザイナー&エンジニアには、日頃の運動不足を切実に感じて唸りつつも、体に優しい幕開け。

■もくじ:LT登壇者と発表内容

LTの登壇者とタイトルは以下の通りです。発表順に並べています。

( )内は、発表者がどちらのサイドか、主にどちら向けか、どんな内容か、iOSかAndroidかWebかで特に限定範囲があれば記載しています。

1:Motoki Naritaさん「お互いのツールを使ってみよう」
  (エンジニア/エンジニア、デザイナー双方向け・iOS)
2: ゆこびんさん(主催者)「デザイナーさん向け Size class 導入」
  (デザイナー/主にデザイナー向け・iOS)
3:Hiroyuki Setoさん「エンジニア主導でMaterial Design化を進めた話」
  (エンジニア/双方向け・Android)
4:cocoponさん「エンジニアでもデザインがちょっと楽しくなるかもしれない フォントの話」
  (デベロッパ&デザイナー/主にエンジニア向け・フォントから知るデザインの面白さ)
5: yoneappさん「コードが書けるようになる」
  (エンジニア/主にデザイナー向け・コード学習の手引き) 
6:Ryo Usamiさん「GitHubすら知らなかったデザイナーがデプロイまでするようになった訳」
  (デザイナー/主にデザイナー向け・コード理解の手引き)
7:Kenさん「Creativeな作業時間を確保せよ!!」
  (エンジニア/主にエンジニア向け・エンジニアのための時間術)
8:Reiko Gotouさん「自分で出来ることを増やしてみるというのは、結構楽しかったという新米iOS開発者の小話」
  (エンジニア/主にデザイナー向け・相互理解の方法・iOS)
9:Yoshiki Kojimaさん「共創をドライブさせる、ユーザーを向いたモノづくり」
  (元Webデザイナー現エンジニア/双方向け・ツール、チームについて)
10:h_matuhisaさん「1年間で起きたデザイナーとエンジニアの変化」
  (エンジニア/双方向け・開発全般のこと・Web)
11:matsu_saoさん「デザイナーだけどコーディングできないとダメ?」
  (デザイナー/主にデザイナー向け・キャリアデザイン・Web)
12:tomomasa_masuzawaさん「エンジニアからデザイナーさんへお願いしたいこと」
  (エンジニア/主にデザイナー向け・制作上の注意点・iOS・Android)
13:おかぴさん「新人デザイナーが学んだこと」
  (デザイナー/主にデザイナー向け・制作全般について)
14:Daiki Matsudateさん「Sketchとその仲間たち」
  (エンジニア/双方向け・デザイン→コードに関する便利ツール)
15:あきおさん(主催者)「エンジニアには本当にデザインのセンスが無いのか?」
  (エンジニア/主にエンジニア向け・デザインの原則とコードの関係性)

■1:Motoki Naritaさん「お互いのツールを使ってみよう」

実はアプリ道場でお世話になってました^^

会社でiOSエンジニア、個人でもアプリクリエイターとしてApp Storeにて「ベスト新着 App」のトップを飾った事もある、デザイン性にも優れたカメラアプリ「リボカメ - Revolver Camera」をリリースされているMotoki Naritaさん。



エンジニア、デザイナーと一言に言っても各業界で様々。
今回は「モバイルアプリ」で主に「iOS」の話としての内容。

何が垣根なのか?
とあるツイートからお互い専門家であるゆえに起こる理解不足の例を垣間見る。

「エンジニア/デザイナーは何を大切にしているか?知った方が良さそう」
大事にしていることを知る方法」として、お互いの使用しているツール(エンジニアならXcode、デザイナーならPhotoshopやSketchなど)をお互いに使ってみる!ことを提唱。

デザイナーの仕事、エンジニアの仕事、線を引くのは簡単。
だが、実際の仕事には線引きするのは難しい部分もある。
お互いが歩み寄る事で、最も大事な問題をより良く解決し、大きな成果がだせるのでは?

という事で、「歩み寄ろうよ」という、今回の勉強会の導入にまさにピッタリなLTでした。


このスライドに出てきたデザイナー円とエンジニア円の重なっていく図は、このあとも度々出てくる事に。(図が被った!?とザワザワするTwitterのタイムライン) 

今回集まった皆さんが持っている共通イメージでありました。

・追記: Motoki NaritaさんのBlogで今回のLTに関する記事はこちら(8/7 追加) 

■ 2:ゆこびんさん(主催者)「デザイナーさん向け Size class 導入」

実はアプリ道場でお世話になってました^^

フリーのデザイナー&イラストレーターであるゆこびんさんは、「もっと知りたいリンゴあれこれ」を運営するAppleブロガーでもあります。

iOS開発には切っても切れないXcode、swiftにおける「Size class」のススメ的な手引き。
途中でXcodeからのデモもあり!熱意のこもる展開で5分をオーバー。
 

Android端末ほどでは無いにしても、AppleもiPadに新サイズが出てきたところで、iOS端末も全てを見渡すと画面サイズの種類が結構な多さに。

同じようなデザインで難しくないと思うかもしれないが、機種や画面サイズ調べての制約を作るのは大変!
工数やメンテナンスのしやすさも大事。

解決策は?
「Size class」にあり!


コード書かなくても制約を作れる。

Size classとAutoLayoutを知って、シンプルなデザイン設計を心がけよう!

■ 3:Hiroyuki Setoさん「エンジニア主導でMaterial Design化を進めた話」

株式会社ノハナのAndroidエンジニアであるHiroyuki Setoさん。
iOSが先に出ていて、そのデザインをそのまま使って放置されていたAndroidアプリを何とかカッコ良くしようとデザイナーさんを巻き込んで試行錯誤していった実体験の話です。

1:ガイドラインをひたすら読む!
https://material.google.com/
これを読まずしては語れない

2:社内勉強会をする
・布教と洗脳は大事
・デザイナーは強制参加
・コーディングの話は一切しない!

3:アプリの修正
・デザイナーにMaterial Designを教えながら
・まずカラーパレットを定義 ←これから始めるのがオススメ
・ブレストしながら画面設計
・実装は気合
・下位互換は地獄!

4:結果
・半年でデザイナーが辞めた!! ←Σ(゚д゚lll)
・進捗は50%くらい
・気がついたら自分がUIをやっていた

・・・との事で、エンジニア、デザイナーで協力してのAndroidアプリ開発に取り組んだ結果は悲しいものもあったようですが、自身がデザインの楽しさに目覚めたり成長したとのこと。

デザイナー絶賛募集中!
エンジニアさんも募集中!だそうですので、我こそはという方はぜひ。
・Wantedly内のノハナさんの募集ページはこちら

■4:cocoponさん「エンジニアでもデザインがちょっと楽しくなるかもしれない フォントの話」

デベロッパにしてデザイナーのcocoponさん。
フォントを通して、エンジニアもデザインの面白さを知ろう!という事で、フォントにフォーカスした内容で、さらに実際にオススメ本を持参されてました。
・cocoponさんのBlogにも今回のLTについての記事があります(8/6 追記しました)

 


<ありがちな小話>
デザイナー「ラインハイト(行の高さ)をデザインのPSDに合わせて欲しい」
エンジニア「UILabelにそんなプロパティない。そもそも、そんな細かな話どうでもいいじゃん?」

これは勿体無い!

どこまでが「細くてどうでもいい事なのか?」エンジニアには判断がつかない。
無理に勉強する必要はないけど、デザインも面白いものだよ!

<エンジニアがフォント沼にはまっていった流れ>
・入り口→「フォントのふしぎ
 ページいっぱいに印刷された、違いの解らない「S」の文字を見て衝撃を受ける。
 デザイナー(フォント)のこだわりと尊さを知る
・もっと知りたい!→「欧文書体 その背景と使い方
 有名フォントの解説、時代ごとの書体の遷移など細かい話
・実際に文章を組んでみたい!→「欧文組版 組版の基礎とマナー
 どのくらいの行間が読みやすいのか?実践的内容

<むすび>
エンジニアリングの領域、デザインの領域、同じくらい面白いもの。
どちらもより良いものを作りたいのは同じ
相手の領域の面白さを知って、協力して良いものを作っていこう

■5:yoneappさん「コードが書けるようになる」

学生の頃からiOSの個人開発を始め、その後スタートアップの共同創業者を経て、iOS&Railsのフリーランスとして活動しているエンジニアのyoneappさん。 
「コードが書ける」ようになるための手引きを、難易度を示して順序だててくれました。

【コードが書けるようになるとは?】
・何らかのものが作れる
・仕事になる

【コードを書けるようになるには?】

<Webで考える初期難易度>

フロントエンド
バックエンド
HTML/CSS

jQuery

Java
Java Script
Ruby・PHPなど
 
 
<アプリで考える難易度>
・難易度は「中」〜「高」
 フロントとバックが絡んでくる

<アプリ+Webで考える難易度>
アプリ
Web
難易度「中」〜「高」
難易度「高」
 
「高」を2つ一気に勉強する事になる。
最初はアプリ+Webの連動はやめた方がいい。


入りやすく、仕事にしやすい「HTML/CSS」から始める。
アプリにチャレンジ!
バックエンドにチャレンジ!
・サービスをリリースする
  課題を1つに絞る、その解決策になるもの(シンプルに絞る)
公開する!(最重要)
 →「コードが書ける」と言える

【まとめ】
 何かを作って公開する、または仕事にする=コードが書けるようになる

エンジニアとデザイナー、教えあう事が大事!
(デザインを教えてくれるデザイナーさん求む)

■6:Ryo Usamiさん「GitHubすら知らなかったデザイナーがデプロイまでするようになった訳」

高校生からそのままWANTEDLYの3人目のデザイナーになったというRyo Usamiさん。
(その関連記事がこちらのWantedlyさんのBlog記事にあります)


WANTEDLY / FEED」がメイン。
Android、iOSアプリのデザインに、エンジニアBlogにも執筆。

WANTEDLYでは、デザイナーがHTML、Sass、Rails、Android、iOSでコードを書いている。
ロジックだけのコミットもたまに。

最近、自分でデプロイまでするように。
自分で出来るなら、自分でやろうと考えた。

【なぜコードを書くのか?】
・完全に自分のため
・良いUI+かっこいいデザインの実現

高速なサービス開発をしていると、デザイン崩れが出てくる。
仕組みとして、良いUIや適切なユーザー体験を担保出来るように。
ゆえに、コードを書く!

【WANTEDLY のワークフロー】
・チームのKPI設定
・MTGで大まかな施策決定
・上記を元にデザイナーがUI/UX設計
・大きい施策は時間をかけてMTG
ーーーこれ以降はGitHub上でーーー
・エンジニアが実装
・実装完了
・コードレビュー
・デザイナーからデザインレビューが飛んでくる
・・・・などなど(以下割愛にて失礼します)

GitHub上でエンジニア、デザイナー双方がやり取り
 
【他の仕組み】
・mixinライブラリ
 ボタンが崩れている問題に自動的に対策する
・Style周りのコードのリファクタリング
・デザインの保守のためにコードの提案もしていく(デザイナーからエンジニアへ)

【まずコードを読めることを目指す】
利点
・GitHubでデザイン確認ができる
・細かいUXの確認が出来る
・自分でローカルで試す事も出来る

【どうやってコードを読めるように?】
 読みまくる!!

【まとめ】
全ては良いプロダクトにするために!
気になったら近くのエンジニアに聞いてみよう。

■7:Kenさん「Creativeな作業時間を確保せよ!!」

建築学科を卒業してFiNCのAndroidエンジニアになったKenさん。 
クリエイティブとは何か?から紐解くエンジニアとデザイナーの協力効果。
エンジニアのための時間術。


クリエイティブとは?
→こだわり
 
「Less is more」 (建築家:ミース・ファン・デル・ローエ)

使用しているiPhone 4Sの要素を分解してみた。
少ない要素で出来ていた。

これをAndroid、iOSのネイティブアプリで言うなら、
いろんなコンポーネントを作りまくらずに、利用ケースに合わせて数ケースしか作らない
→作ったら、直さなくても良いものを作れないか?

Less is more は、シンプルであるだけでなく「クリエイティブを加速する」もの


「God is in detail」(神は細部に宿る)

意味のあるところに時間をかけられるようになりたい。

ただの新機能ではなく、1つ1つのカスタマイズの結果に意味を持たせることに、とことん時間をかける。

【まとめ】
1:Less is more
 ・(コンポーネントの)共通化
 ・機能美

2:God is in detail
 1で作った時間で、こだわりに時間を使う!

共通化はエンジニアとデザイナーが一緒にやらないとできない

■8:Reiko Gotouさん「自分で出来ることを増やしてみるというのは、結構楽しかったという新米iOS開発者の小話」

オーディエンス枠で参加しようと思ったらいっぱいになったので、登壇するしかない!とLT参加。ファショナブルなiOS開発者のReiko Gotouさん。

コダック大喜利テイストなスライドはこちら(↓)からGO!

【第1の問題】
先方にデザイナーがいて、デザインしてくれる開発体制。
先方デザイナーはiOSの素材の使われ方やルールを知らなかった!
このデザインを通すと、コーディング中に死ぬ!!」(モチベーションが保てない)

<解決策は?>
iOSヒューマン インターフェイス ガイドライン」(iOS HIG)の必要最小限のページをピックアップして読んでもらう。
・ヒューマン インターフェイスの原則
・アプリケーション設計戦略
・iOSテクノロジーの使用に関するガイドライン
・標準で用意されている各UI要素(タブやツールバー等)の使い方

アップル公式の標準アプリを使い込んでもらう(iOS HIGに沿っている)

<結果>
用語を理解してもらい、話が通じるように。
before「下からパーンって出てくるあれ」→after「アクティビティビューコントローラー出したい」

読んでみると、iOSとして推奨されている作りをしているかどうかの判断がつくようになる。
企画×デザインの打ち合わせ段階でこの内容を踏まえてくれると、とても楽

【第2の問題】
デザイン部に頼むより自分でやった方が早い?

<相談した>
・Photoshop使えるので簡単な文言変更なら自分で出来る。
・Sketch3使って素材書き出ししてみたい。←Illustratorは使ってなかった
上司からOK。

 <Sketchを使って良かった点>
・学習工数が2時間とかですむ。
・iOSアプリ開発のために作られている
・サイズ別の書き出しが楽!
・デザインという観点が必要のない作業的な事はこちらでやる方が早い
・これになれたら趣味開発がはかどりそう

■9:Yoshiki Kojimaさん「共創をドライブさせる ユーザーを向いたモノづくり」

元々Webデザイナー→フロントエンジニア→ソシャゲ開発→UI会社→株式会社トレタでBizDev、朝活に凝っていて早朝からBlog執筆→ジム→会社へという生活を送るYoshiki Kojimaさん。

TECHNICAL CREATOR.com」というBlogでまさにエンジニアとデザイナーのための情報を発信されています。
今回のLTの詳細もこちらの記事に。


今回はコラボの話。
近年は開発が大規模化している。
様々な開発職種の他に、企画やビジネスサイドも合わせると1アプリに100人規模のものも。

【コラボレーションツール】
開発をまとめるために、役立つ各種ツール

<コミュニケーション>

<ドキュメント管理>
esa

<プロジェクト・タスク管理>

<プロトタイピング>
Experience Design(Adobe)

しかし、「ツールの導入では、根本的な問題は解決しない!」

【チームを支え、ドライブさせるものは何か?】
それは、「ユーザー

自分たちのサービスを使ってくれている人が何に困っているのか?
これをみんなで考えていく。

「ユーザーには簡単に会える」
 ユーザーイベントの開催、SNS、道端で声をかける…など。

【いいものを作りたい】
広告主・上司・株主 < ユーザー
ともすると左側に左右されるが、本来は「ユーザー」が大切

【オススメの映画】
「アベンジャーズ」を目指そう
最初はとても仲が悪いが、全人類(アベンジャーズにとってのユーザー)のために1つにまとまる。

<お知らせ>
株式会社トレタではiOSエンジニアを募集中!(WWDC参加補助制度あり)
・Wantedly内の募集ページはこちら

■10:h_matuhisaさん「1年間で起きたデザイナーとエンジニアの変化」

株式会社みんなのウェディングh_matuhisaさん。
みんなのウェディングで実際に起きたここ1年での怒涛の出来事からの話。
 

【みんなのウェディングについて】
・目指していること→みんなの「大切な日」を増やす
 (社員さんの名刺には、それぞれ記念日が表記されている)
・Webサイト中心のサービス
・ユーザーファーストなサービスを作り続ける
・正しい製品を正しい作り方で
・昨年、クックパッドに買収→変化が起きる

【起きた変化】
・ParlからRuby on Railsへの移行→サービスを素早く届けられるように
・ユーザーインタビューの実施と共有
 ディレクター中心にesaに共有、エンジニアも議論に参加
・ユーザー価値の設計
 何のために何を作るのか?をデザイナーとエンジニアでも共有。
・プロトタイプの作成
 デザイナーもエンジニアもPrott使用
・デザインレビュー
 issueでデザインチームが議論。エンジニアも参加
・勉強会/読書会の実施
 会社サイトのBlogにも内容発信
・デザインガイドラインの作成
 デザイナーとエンジニアによる改善のプルリクエスト
・Zeplinの活用
・アジャイル開発
・組織の変更
 3人くらいの小さなチームを増やした
・ワークフローの変化
 チームで解決していく!
・デザイナーとエンジニア
 エンジニアはデザイナーの領域の話もしてみたり
 デザイナーはマークアップの仕事をしたり
・チーム
・起したい変化
 エンジニアがデザイナーの領域に近づく

【まとめ】
起きた変化は1年のこと。
エンジニアもデザイナーも目指していることは変わらない事への認識、理解

■11:matsu_saoさん「デザイナーだけどコーディングできないとダメ?」

株式会社はてなmatsu_saoさん。Webサービスデザインにてご自身がコーディング(HTML/CSS)を始めたのは1年前のこと。この経験からの最近話題になりがちなこのテーマについて。
 

【出来た方がいいのか?】
これまでの経歴
1:グラフィックデザイン:3年(Photoshop、Illustrator使用。DMツール、広告中心)
2:アプリUIデザイン:カジュアルゲーム(Photoshopでモックアップ作成)
ここまでコーディングなし
Webを始めてからコーディングを始めた

結論個人的にはどっちでもいいと思う
 ・理想を言えばキリがない
 ・プロフェッショナルに任せる
チームや組織で取り組むべき仕事に注力した方がいい。

大事なのは「問題点の整理」

デザイナーがやれることが増えているが、それはいつまで続くかわからない。
・目の前に集中すること
・興味あること
これを切り分けてやった方がいいと思う。

【なぜ自分はやっているのか?】
会社の方針と自分の興味が合ったから
 ・はてなのデザイナーは、デザインとコーディング両方やる

できる事が増える→色々な話が出来る

【まとめ】
・直近必要でなければ、得意な部分を伸ばす方が良い
・コーディングに興味あるなら、やってみた方がいい
・その方が楽しく出来る!

楽しくデザインしていきましょう!

・追記: matsu_saoさんのBlogで今回のLTに関する記事はこちら(8/7 追加) 

■12:tomomasa_masuzawaさん「エンジニアからデザイナーさんへお願いしたいこと」

アプリ開発をされているtomomasa_masuzawaさん。開発現場の実体験からの話。
「Androidをdisっている訳ではない」発言が度々飛び出してました。

環境
・開発チームとデザインチームに分かれている
・意思疎通が難しい
・企画とデザイン決まってから開発にくる

お願いしたいこと
・フォントは大きめに、できればシステムの文字サイズ設定変更に対応しましょう
 iOSの場合、11pt以上が推奨。個人的には17pt(デフォルト)がいい。
 文字の大きさ変更:Dynamic typeの例:iOS7以降で使える。iOS9で使えるサイズ増えた。
 UITableViewの高さは可変にする。
 Androidのフォントサイズ指定は高さの調整は面倒
 例外:ボタンは変更しない方が良い

・独自フォントはやめた方が良い!
 Dynamic typeが効かない

・ボタンには文字を入れましょう
 その方が分かりやすい

・iOSとAndroidでの同一デザインはやめましょう
 ユーザー インターフェイス ガイドラインが違う。
 同一デザインでは、どちらかのユーザーには使いづらくなる。

・見えない機能は気づかれません
 長押ししたら出てくる機能は使われない。気づかない。

■13:おかぴさん「新人デザイナーが学んだこと」

高校生から会計に営業の仕事をこなし、その後大学生とサービス立ち上げ、現在はFiNCでデザイナーをしているおかぴさん。
まったく違う分野からデザイナーになった経験からの話。

【苦労してきたこと】
エンジニアとのやりとりで苦労
 指示書で苦労。伝わらない(これまで作った事がなかった)
 画像の書き出し(サイズ、命名法則間違いが多々あった)
結果、進行が遅くなる
わかりにくい、再現されない。

【ガイドライン】
・Zeplin(PhotoshopやSketchで作ったデータをUPするとマージンとか割り出してくれる)
・Sketch
・GitHub(チェックリストを上げる)

【コミュニケーション】
密に(席が近い)
漏れなく(デザインレビュー)
丁寧に(ガイドラインと指示書)
エンジニアに分かりやすく伝えること

【まとめ】
(今回の話は)デザイナーが寄り添う
エンジニアもデザイン原則を知ることで寄り添う

結果、早く良いプロダクトが作れるようになる

■14:Daiki Matsudateさん「Sketchとその仲間たち」

iOSエンジニア歴5年のDaiki Matsudateさん。FiNCの人じゃないけど、FiNCの勉強会には3回参加していて、FiNCの勉強会名物(?)「ウェルネスタイム」もよく知っている。


デザインをもらって、プログラマは何をしているのか?
実装には手間と時間がかかる。

垣根を越える
・デザイナーがStoryboardを作る
・エンジニアがSketchを触る
場合によっては修正作業が大変 ←これは良くない

垣根を越えるのは何のため?
お互いの作業を楽にする ←これが大事
・デザイナーがgitを使う
・エンジニアが(デザインの)補助ツールを使う

色やフォントがソースでダウンロード出来る


エンジニアがUIを組むのは時間がかかる
・パーツ置く
・座標/サイズを整える
・色をつける
↑これらの部分は単純作業

SketchからStoryboard作れたら楽なのでは?(単純作業の自動化)

・画像を自動でインポート
・フォントファイル、ダウンロード出来る
・パーツを自動配置
・画像はAssetsに自動的に格納してくれる ←便利!

Zeplin、Sympliほぼ同じ値段。

【まとめ】
・プログラマがUI組むのは時間がかかる
 →単純作業はツールで解決
 「動き」に時間を使える
エンジニア、デザイナー両者とも作業時間が減るのがベスト
 どちらかの負担が増えてはいけない。
・日頃からコミュニケーションを取りましょう

■15:あきおさん(主催者)「エンジニアには本当にデザインのセンスが無いのか?」

実はアプリ道場でお世話になってました!^^

なんとビックリ!最後に主催の一人、派手髪が特徴のあきおさんのLTも!
現在FiNCさんのプロジェクトに関わりながら、自身のアプリ開発に、初心者向けのiOSアプリ開発講座「アプリ道場」も開催しています。
Blog「卵は世界である」にはiOSアプリ開発に関する様々なTipsも充実しています。


エンジニアとデザイナー、相手がどんなことを気にしているのかをお互いに知っていると「話が早い」状態を作れるのでは?

エンジニア氏「私には、デザインのセンスがなくて・・・」
これは、本当か?

最近「ノンデザイナーズ・デザインブック」を読んだ(オススメの書籍)

デザインの原則
・コントラスト
・反復
・整列
・近接


これらの「デザインの原則」、実はエンジニアはいつも目にしていた!?
それは「ソースコード」
ソースコードにはこのデザインの原則の4要素がすべて入っていた!

エンジニアは「きれいなコードを書きたい!」と考えている
この「きれいなコード」にあるのはデザインのセンスでは?

きれいなコードはこの4要素が入っているので、見やすく分かりやすく、きれい。

実はエンジニアもデザインの原則的なセンスを持っている。
「きれいなコードを書きたい」気持ちで、デザインを見れば、分かるし出来る!


最後に、エンジニアだけどデザインを学んで自作アプリのアイコンをカッコ良くした例として「MosaicCam モザイクカメラ」のアイコン変遷を挙げられてました。

「デザインを知れば多少は良いアイコンが作れる」と言われてましたが、多少どころかモザイクカメラのアイコン、こちらのデザイナーのためのiOSアイコンギャラリーサイトiconDropにも載ってます。(現在2ページ目)

こちらがモザイクカメラのアプリアイコン。内容の分かりやすさと色合いが素敵!

MosaicCam - モザイクカメラ

■グラフィック・レコーディング

会場のスクリーン横には、ホワイトボードに模造紙が貼られたものがセッティングされて、グラフィックレコーディングが行われていました!

なんと、この5分というとっても凝縮されたLTの内容を発表されているそばからその内容がガンガンと絵と文字になってまとまっていく、驚くべき名人芸!

一番大事なエッセンスが見やすく分かりやすくまとめられていて圧巻でした。

1枚目 
コラボチップス-グラフィックレコーディング-01


2枚目
コラボチップス-グラフィックレコーディング-02
 

この素晴らしいグラフィック・レコーディングを作成されたのは株式会社goodpatchのUIデザイナーのn さん
グラフィックレコーディングは趣味から始めたとのことですが、現在は社内外で精力的に活動されているようで、納得のクオリティ!

記録と記憶に残って、見ていると良いアイディアも浮かんできそうです。
 (8/6 リンク追加、詳細を追記)
 

■関連リンク集やハッシュタグなど

・早くも当日のうちにTogetterにまとめが!koogawaさん作成

haranicleさんBlogまとめ記事Collabo Tips #1 にいってきたよ

ハッシュタグ#CollaboTipsです。(リンクからTwitterの検索結果に飛びます)

イベントページこちらです(connpassに飛びます)
 今後も続けていきたいそうですので、要チェックです!

shunsukekyuwaさんのQiitaまとめ記事記念すべき第1回CollaboTipsまとめ(8/7 追加)

■交流会+おまけ

交流会は、アルコールにソフトドリンク類とケータリング。
フロアにキッチンもあるスペース!

交流会


折角の機会だからと、急遽オフィス見学ツアーも開催。
エンジニア席は椅子も机も高級で機能的なものが!
社内のところどころにバランスボールなどもあったりして、自由な形でお仕事出来るようです。

特徴的な打ち合わせスペースみたいなものの1つは、人気漫画のハンター×ハンターに出てくる旅団のアジトをモチーフにしているそう。遊びココロも満載♪


個室ジムや、エステ設備(詳しくはこちらのサロン案内を)もあって、有資格者のトレーナーさんに、栄養士さんも居て、IT系企業のイメージを180度ひっくり返すような、カッコイイだけではないウェルネスなオフィス!

FiNCさんではエンジニアを始め人材を募集中とのことです。
 ・または、Wantedly内のFiNCさん募集ページ
をご確認ください。 

■感想

私はどちらかというとゲーム系デザイナー&イラストレーター(他諸々も担当)で、昨年にソシャゲ開発のプロジェクトで、デザイナーもゲームエンジン理解したりエンジニアとの共通言語を持った方が良さそうと感じてました。
あと今はiOSの個人開発でswiftを学習中です(アプリ道場17期卒。秋には自作アプリをリリースする!目標)

そんなこんなでとっても興味あっての参加!
 
どちらかというと非ゲーム系アプリにWebサービス開発の話が主流ですが、「デザイナーとエンジニアの相互理解による、より良いもの作り」の根本テーマの共有に、チーム単位やワークフローの話、便利ツールの話や各職種の視点からの考察や体験談など、業界を超えて参考になる話が満載でした。

5分のスピーディなLTも、どれてもとても興味深く、楽しい機会でした。
 

エンジニア、デザイナーがお互いに集まっての勉強会の機会は貴重な機会だと思うので、引き続き盛り上がっていってほしいところです。

今後、今回のをきっかけに、新しい取り組みなどを始めた結果のLTとか出てきたら、更に濃くなっていきそうですね! 


 ー◇ー 展示・イベント情報  ー◇ー
空想幻獣展 Reset バナー 300

空想幻獣展 〜Reset〜 vol.3
 日時:2016年8月27・28日(土・日) 11:00 〜 19:30
 場所:デザインフェスタギャラリー East 101 
 ※入場無料(両日とも 15:00までは入場制限あり。無料ですが事前チケットの入手が必要です)

 87名の作家による「幻獣」テーマのイラスト、造形、雑貨・アクセサリーの展示です。 
 展示の公式サイトはこちらです。 

〜*〜*〜 Koi-fumiのSNS各種 〜*〜*〜
 Twitterはこちら
 Instagramはこちら
 pixivはこちら