Slide 1

Slide 1 text

チームと開発するためのモック Hatena Engineer Seminar #33

Slide 2

Slide 2 text

伊藤拓 id:takuwolog ノベルチーム アートディレクター, デザイナー

Slide 3

Slide 3 text

今回の話 チームメンバーと スムーズに開発するための モックについて

Slide 4

Slide 4 text

モックの思想

Slide 5

Slide 5 text

モック チームのための設計図

Slide 6

Slide 6 text

チーム プロデューサー マネージャー エンジニア デザイナー 株式会社KADOKAWA

Slide 7

Slide 7 text

設計図 ⁨機能がわかる 状態がわかる 文言がわかる 外見がわかる

Slide 8

Slide 8 text

チームのための設計図 チームの誰でも モックを見れば なにを作るのか だいたいわかる

Slide 9

Slide 9 text

前提 ) モックはFigmaで作っていまÈ ) 企画ごとにFigmaファイルを分けています

Slide 10

Slide 10 text

モック

Slide 11

Slide 11 text

OSごとに作り分ける

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Android ⁨⁩→ iOS → Tablet →

Slide 14

Slide 14 text

作者にギフトを贈る いつも応援いただきありがとうございます!ギフト を励みに頑張っております!w 果名太郎 カクヨムサポーターズパスポートに加入すると、作家に ギフトを贈れるようになります。加入するには、ブラウ ザでカクヨムにアクセスしてお申し込みください。 サポーターズパスポートについて 作家にギフトを贈る いつも応援いただきありがとうございます!ギフト を励みに頑張っております!w 果名太郎 カクヨムサポーターズパスポートに加入すると、作家に ギフトを贈れるようになります。加入するには、ブラウ ザでカクヨムにアクセスしてお申し込みください。 サポーターズパスポートについて Android iOS Tablet 作家にギフトを贈る いつも応援いただきありがとうございます!ギフトを 励みに頑張っております!w 果名太郎 カクヨムサポーターズパスポートに加入すると、作家に ギフトを贈れるようになります。加入するには、ブラウ ザでカクヨムにアクセスしてお申し込みください。 サポーターズパスポートについて 作家にギフトを贈る いつも応援いただきありがとうございます!ギフトを 励みに頑張っております!w 果名太郎 カクヨムサポーターズパスポートに加入すると、作家に ギフトを贈れるようになります。加入するには、ブラウ ザでカクヨムにアクセスしてお申し込みください。 サポーターズパスポートについて 2133 応援 21 応援コメント ギフト

Slide 15

Slide 15 text

機能ごとに分ける

Slide 16

Slide 16 text

エピソードビューワー機能をリニューアルした時のモック

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

第21話 お昼にします 3,246文字 21 / 130 動作確認物語 〜全ては検証のために〜 エピソードタイトル 作品タイトル 表示中のエピソードの文字数 読書中のエピソード / 全体のエピソード数

Slide 19

Slide 19 text

遷移を表現する

Slide 20

Slide 20 text

二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき た専門の鉄砲打ちも、ちょっとまごつい て、どこかへ行ってしまったくらいの山奥 でした。  それに、あんまり山が物凄ものすごいの で、その白熊のような犬が、二疋いっしょ にめまいを起こして、しばらく吠うなっ て、それから泡あわを吐はいて死んでしま いました。 「じつにぼくは、二千四百円の損害だ」と 一人の紳士が、その犬の眼まぶたを、 ちょっとかえしてみて言いました。 第1話 山の中 3,246文字 1 / 130 動作確認物語 〜全ては検証のために〜 9:30 9:30 目次 動作確認物語 〜全ては検証のために〜 果名太郎 完結済 全6話 2016年5月31日更新 始動編 プロローグ 第1章 第1話 注文が多そうな注文が多そうな注文が多そうな 注文が多そうな 第2話 いろいろな注文 第2章 第3話 やっぱり様子がおかしいぞ 第4話 がたがたがたがたふるえだして 後日談 第5話 どうにかこうにか エピローグ タップ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

状態やパターンを表現する

Slide 23

Slide 23 text

エピソードタイトル長い場合 第21話 お昼にしますが今日& 3,246文字 21 / 130 動作確認物語 〜全ては検証のために〜 今いるエピソード 第21話 お昼にします 3,246文字 21 / 130 動作確認物語 〜全ては検証のために〜 作品タイトルが長い場合 第21話 お昼にします 3,246文字 21 / 130 動作確認物語 〜全ては検証のために〜動作確認物語 〜全て& 最新のエピソードにはバッジを表示 最新 第130話 どうにかこうにか 3,246文字 130 / 130 動作確認物語 〜全ては検証のために〜 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき た専門の鉄砲打ちも、ちょっとまごつい て、どこかへ行ってしまったくらいの山奥 でした。  それに、あんまり山が物凄ものすごいの で、その白熊のような犬が、二疋いっしょ にめまいを起こして、しばらく吠うなっ て、それから泡あわを吐はいて死んでしま いました。 第1話 山の中 3,246文字 1 / 130 動作確認物語 〜全ては検証のために〜

Slide 24

Slide 24 text

9:30 目次 動作確認物語 〜全ては検証のために〜 果名太郎 完結済 全6話 2016年5月31日更新 始動編 プロローグ 第1章 第1話 注文が多そうな注文が多そうな注文が多そうな 注文が多そうな 第2話 いろいろな注文 第2章 第3話 やっぱり様子がおかしいぞ 第4話 がたがたがたがたふるえだして 後日談 第5話 どうにかこうにか エピローグ 9:30 目次 動作確認物語 〜全ては検証のために〜 果名太郎 5話まで無料で公開中 連載中 全6話 2024年6月5日更新 第2話 いろいろな注文 第3話 やっぱり様子がおかしいぞ 第4話 がたがたがたがたふるえだして 第5話 どうにかこうにか エピローグ 第129話 なんとかなった 新たな扉 第130話 どうにかこうにか 第131話 どうにかこうにか 第132話 どうにかこうにか 第133話 どうにかこうにか 第134話 どうにかこうにか 第135話 どうにかこうにか 9:30 目次 新たな扉 第135話 どうにかこうにか 9:30 目次 大見出し・小見出しがある場合 カクヨムネクストの作品 目次を開いた時の挙動について 最新話のエピソードの場合

Slide 25

Slide 25 text

タイトル タイトル タイトル タイトル 未読のエピソード 既読のエピソード 今いるエピソード 未読 既読 今いるエピソード 限定エピソード 限定エピソード 限定エピソード 読んでる最中に退会した等 既読

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

それでもモックは完璧じゃない

Slide 28

Slide 28 text

最初 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30 動作環境物語〜...

Slide 29

Slide 29 text

現行のトップバーでは作品タイトルは出ていませんでし たが、新ビューワーでは6〜7文字程度だけでも出した かったでしょう? 長いタイトルもたくさんあるので気になってます。 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30 動作環境物語〜...

Slide 30

Slide 30 text

現行の上部バーでは作品タイトルは出ていませんでした が、新ビューワーでは6〜7文字程度だけでも出したかっ たでしょうか? 長いタイトルもたくさんあるので気になってます。 タイトルなしにもできるんでしょうか? 先に聞け案件で申し訳ないです 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30 動作環境物語〜...

Slide 31

Slide 31 text

現行の上部バーでは作品タイトルは出ていませんでした が、新ビューワーでは6〜7文字程度だけでも出したかっ たでしょうか? 長いタイトルもたくさんあるので気になってます。 できます、ではなしで行きましょう! タイトルなしにもできるんでしょうか? 先に聞け案件で申し訳ないです 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30 動作環境物語〜...

Slide 32

Slide 32 text

変更 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30

Slide 33

Slide 33 text

二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30 iOSは左端の←で前の画面に戻る、とはならずに、閉じる ボタンでモーダルを閉じる感じでお願いしたいです。現 状は右端に閉じるボタンがありますので、ボタンの位置 をご検討いただいた上、iOS版のmockも作成いただけま すでしょうか。

Slide 34

Slide 34 text

iOSは左端の←で前の画面に戻る、とはならずに、閉じる ボタンでモーダルを閉じる感じでお願いしたいです。現 状は右端に閉じるボタンがありますので、ボタンの位置 をご検討いただいた上、iOS版のmockもおいていただけ ますでしょうか。 デザイナーの負担軽減のためにmock作成するの少し減 らしたいと個人的に思っています。 例えばプラットフォーム標準でいいところはエンジニア がデザイナーに確認しつつよしなにするなどです。 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30

Slide 35

Slide 35 text

iOSは左端の←で前の画面に戻る、とはならずに、閉じる ボタンでモーダルを閉じる感じでお願いしたいです。現 状は右端に閉じるボタンがありますので、ボタンの位置 をご検討いただいた上、iOS版のmockもおいていただけ ますでしょうか。 デザイナーの負担軽減のためにmock作成するの少し減 らしたいと個人的に思っています。 例えばプラットフォーム標準でいいところはエンジニア がデザイナーに確認しつつよしなにするなどです。 デザイナーリソース足りないので提案ありがたいです! 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:30

Slide 36

Slide 36 text

これまでOSごとに全てのモックを作っていました ※ スライド13 OSごとに作り分けるより Android ⁨⁩→ iOS → Tablet →

Slide 37

Slide 37 text

この量をiOS, Tabletは大変…

Slide 38

Slide 38 text

iOS用に置き換' & アイコ & テキストスタイル 標準コンポーネンÉ & TopAppBar→NavigationBar 二人の若い紳士しんしが、すっかりイギリ スの兵隊のかたちをして、ぴかぴかする鉄 砲てっぽうをかついで、白熊しろくまのよ うな犬を二疋ひきつれて、だいぶ山奥やま おくの、木の葉のかさかさしたとこを、こ んなことを云いいながら、あるいておりま した。 「ぜんたい、ここらの山は怪けしからん ね。鳥も獣けものも一疋も居やがらん。な んでも構わないから、早くタンタアーン と、やって見たいもんだなあ。」 「鹿しかの黄いろな横っ腹なんぞに、二三 発お見舞みまいもうしたら、ずいぶん痛快 だろうねえ。くるくるまわって、それから どたっと倒たおれるだろうねえ。」  それはだいぶの山奥でした。案内してき 9:41 􀅑 􀈂 􀆄

Slide 39

Slide 39 text

まとめ

Slide 40

Slide 40 text

チームメンバーとスムーズに開発するために S モックはチームのための設計3 S モックを見れば何を作るのかだいたいわかG S チームメンバーと一緒にブラッシュアップする