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

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

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

モックの思想 

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

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

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

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

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

モック 

OSごとに作り分ける 

No content

Android ⁨⁩→ iOS → Tablet → 

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

機能ごとに分ける 

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

No content

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

遷移を表現する 

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

No content

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

エピソードタイトル長い場合 第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 動作確認物語 〜全ては検証のために〜 

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 目次 大見出し・小見出しがある場合 カクヨムネクストの作品 目次を開いた時の挙動について 最新話のエピソードの場合 

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

No content

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

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

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

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

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

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

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

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

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

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

この量をiOS, Tabletは大変… 

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

まとめ 

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