SUKEDACHI DESIGN NIGHT発表スライド

デザインチームと他部門の【関わり方への課題】を解消するためにイベントを主催した話

Transcript

2. 助太刀もデザインチームも成長するにつれて という課題をチーム内で感じていました。 デザインチームが あまり知られていないのでは？ 何をできて どう依頼すればいいのか どんなコミュニケーションを取ると良いのか
3. 今日の”DESIGN TEAM NIGHT”を通して 助太刀デザインチームを知ることで、 をお伝えできればと思います！ 事業成長に貢献するためのデザインの力と そのためのコミュニケーション
4. 本日のアジェンダ B 助太刀デザインチームがやっているこ%  依頼フローと制作過È @ 質疑応答
5. 1. 助太刀デザインチームが やっていること
6. 1. やっていること すべてのタッチポイントに向けてデザインしています！ プレスバナー メルマガバナー ブログサムネイル ノベルティ CM監修 サービスサイト LP 営業資料 スライド 助太刀アプリ 法人管理画面(BE) 助太刀社員 ヘルプページ マニュアル リリースノート 導入 認知 検討 維持
7. 1. やっていること 制作物は大きく分けて2種類 コミュニケーション デザイン UI/UXデザイン
8. 1. やっていること コミュニケーションデザイン 伝えたい情報がターゲットへ適切に・魅力的に届くようにデザインする。 どうすれば行動してもらえるか？をデザインで考える。 例：バナー、チラシ、ノベルティ、スライド資料、サービスサイトなど
9. 1. やっていること 2E AL 直近のデザイン例
10. 1. やっていること 直近のデザイン例 PM OPS
11. 1. やっていること 直近のデザイン例 マーケ オウンドメディア
12. 1. やっていること 直近のデザイン例 HP事業
13. 1. やっていること 直近のデザイン例 HR 広報
14. 1. やっていること 直近のデザイン例 総研 総務
15. 1. やっていること ご紹介した通り… デザインチームはほぼ全ての 部署と関わって仕事をしています！
16. 1. やっていること 他にも… アイコンイラスト HP掲載画像ガイドライン スライド等で使えるようにアイコンのバリエーションをたくさん追加。 たくさん使ってくださいね！ HPに掲載する上での適切な画像 選定について説明
17. 1. やっていること UI/UXデザイン ユーザーが使いやすく、満足してもらえるようにサービスや画面をデザインする。 （UI：User Interface、UX：User Experience） 例：助太刀・助太刀社員の法人管理画面や、助太刀アプリなど
18. 1. やっていること 直近のデザイン例 REセルフサーブ 受発注統合
19. 1. やっていること プロダクト開発を進める上でデザインのルールや仕組みを取り決めたもの。 一定水準を満たし、一貫性のあるデザインを作成できる。 デザイン・開発工数の削減もできるので施策に集中できるようになる。 Apple（Human Interface Guidelines） / Google（Material Design） 他にはPayPay、デジタル庁、Adobe、Dropbox、SmartHRなど デザインシステムを公開している企業： デザインシステムも制定中 デザインシステムって？
20. 1. やっていること 例1：カラー定義 例2：ボタン定義 制定がなく100色まで膨れ上がっていた カラーを、選定・検証 画面内の優先度を主軸にボタンの定義を見直し。 また、大きさやアイコンを入れた時など、パターン別に定義。 制定例（まだ暫定）
21. 1. やっていること 鋭意制制定中！ 良いプロダクトを届けるために 引き続き頑張ります！
22. 2. 依頼フローと制作過程
23. 2. 依頼フローと制作過程 通常業務って、 どんなことが あるんでしょうか？ プロジェクトの 進み方 どんな画面で デザインしているのか、 作業風景みたいです！ どういう背景、 理由でこのデザインにしたのか 普段どうやって 情報収集されてますか？ アンケートでは、業務内容や依頼のフロー、 制作過程に関するご質問を多くいただきました！
24. 2. 依頼フローと制作過程 依頼フローについて解説しつつ、 業務内容や実際の制作過程について ご説明していきます。
25. 2. 依頼フローと制作過程 現在の運用では、 と で 依頼フローが異なります。 コミュニケーションデザイン UI/UXデザイン 今回は、コミュニケーションデザインを中心に説明してきます。
26. 2. 依頼フローと制作過程 コミュニケーションデザインの依頼フロー デザイン チーム 1週目 デザイン作業 必要に応じてMTG ヒアリング 提出 フィードバックや 修正依頼 2週目 依頼者 #design相談で起票 （金曜まで） 使用・提出など 工数の決定・担当割り振り
27. 2. 依頼フローと制作過程 コミュニケーションデザインの依頼フロー デザイン チーム 1週目 工数の決定・担当割り振り 2週目 依頼者
28. 2. 依頼フローと制作過程 必要な情報を確認し、デザイナーが作業開始できる状態にする。 例：不足している情報・素材はないか、ある場合はいつ頃に出揃うか 　　どんなシチュエーションで使用されるか、サイズ指定はあるかなど ノベルティ作成やチラシ等の入稿が必要な際は、業者選定・入稿期限や見積もりも確認。 また、現在作業しているタスクの兼ね合い、それぞれの得意領域や希望などから、 タスクをデザイナーに振り分けていく。 工数の決定 / 担当割り振り
29. 2. 依頼フローと制作過程 依頼の例 スライドを1枚作成して欲しい ・普段使用しているスライドに差し込みたい ・図式にしてわかりやすくしたい ・助太刀の強みをアピールしたい ・これまでに作成した資料で流用できるもの 　はないか？ ・スライド1枚だが、図式作成の時間を
 　考えると、工数は⚪︎日くらいにしよう ・必要な情報は揃っているか？ デザインの工数を割り出す タスクを振り分けできる粒度にする 依頼者 リーダー
30. 2. 依頼フローと制作過程 担当割り振り ・タスクA確認待ち ・タスクB作業中（長期） ・タスクC未対応 ・タスクD作業中 ・タスクE作業中 ・タスクF確認待ち ・タスクG作業中（長期） デザイナーA デザイナーB デザイナーC リーダー「今回のデザインは提出希望日まで余裕があるので、 タスクの空き状況的にCさんにお願いしよう！」
31. 2. 依頼フローと制作過程 コミュニケーションデザインの依頼フロー デザイン チーム 1週目 デザイン作業 2週目 依頼者
32. 2. 依頼フローと制作過程 実際にデザインを作っていきます。 必要な場合はリファレンスも探します。 デザイン作業時に使用するツール Photoshop Figma Illustrator デザイン作業
33. 2. 依頼フローと制作過程
34. 2. 依頼フローと制作過程
35. 2. 依頼フローと制作過程 検討したボツ置き場 検討中のデザイン 製作中はこんな感じ
36. 2. 依頼フローと制作過程 デザイン時の脳内思考例 支給された画像のトリミングが 難しすぎる…！ 色味も全体と合わせよう！ このくらいの余白を取りたいのに 行数がここだけ多い…！ 写真の並び的には 人ではない方がバランスいいかな？ 指定されたカラーだと 視認性が保てない。 どの部分で使用しようか… 文字をここで改行すると、 右の要素とのバランスが悪い…！ 文字をここで改行すると、 右の要素とのバランスが悪い…！ ここの色を黒にすると、 全体の配色バランスが合わないなあ
37. 2. 依頼フローと制作過程 デザイン時に発生する苦労事 支給された画像のトリミングが 難しすぎる…！ 色味も全体と合わせよう！ このくらいの余白を取りたいのに 行数がここだけ多い…！ 写真の並び的には 人ではない方がバランスいいかな？ 指定されたカラーだと 視認性が保てない。 どの部分で使用しようか… 文字をここで改行すると、 右の要素とのバランスが悪い…！ ここの色を黒にすると、 全体の配色バランスが合わないなあ この作業を完成度が高くなるまで 続ける ＝ デザインの作業
38. 2. 依頼フローと制作過程 画像は直感的に理解できるものを 使用しているか 余白の取り方は自然か？ デザインに合った余白感か？ 自然な視線誘導が作れているか？ ブランドカラー・フォントを 守れているか？ 視認性は保たれているか？ フォントは適切なサイズか？ ジャンプ率は不自然でないか？ 見た時に魅力を感じてくれそうか？ 細部までいっぱい考えて作ります！ 作成サイズや媒体、目的によっても考えることが変わります 要するに…
39. 2. 依頼フローと制作過程 「デザイン＝つくること」と考えがちですが… デザイナー 依頼者 バナーを作って欲しい！
40. 2. 依頼フローと制作過程 「デザインで解決すること」が我々の仕事です デザイナー 依頼者 背景や課題 バナーを作って欲しい！ 手段は合ってる？ どんな解決をすればいい？
41. 2. 依頼フローと制作過程 目標達成のためにデザイナーが力を発揮するには ・依頼の経緯、背景 ・達成したいゴールは何か ・誰が、どこで、いつ見るか（どう思って欲しいか） を依頼時にお伝えください！
42. 2. 依頼フローと制作過程 依頼経緯によってデザインが変わる スライド スライドに差し込みたい ・前後のフォントサイズや配色が 　一致するように作る ・スライド移動時の整合性をとる ・1枚完結で作成する 1枚ペラで作成
43. 2. 依頼フローと制作過程 達成する目標によってデザインが変わる 資料 お問い合わせに繋げたい！ ・お問い合わせにつながるような 　優先度付けや視線誘導をつくる ・閲覧時に魅力を感じられるような 　デザインを作る ・文字数のバランスを考える ・イラストやアイコン、画像の使用 　を検討する ・伝えたい部分を協調する 分かりやすく説明したい！
44. 2. 依頼フローと制作過程 誰が、どこで、いつ見るかによってデザインが変わる チラシ バナー パソコンで？紙で？ 打ち合わせ中？展示会中？ 2C？2B？
45. 2. 依頼フローと制作過程 デザインチームの貢献例① 制作したメルマガから受注創出
46. 2. 依頼フローと制作過程 高速道路看板でのきっかけでお問い合わせ デザインチームの貢献例②
47. 2. 依頼フローと制作過程 とはいっても、デザイン依頼時に どんな情報が必要なのかわからない場合もあるかと思います。 依頼前・後でも構いませんので、 気軽にお声がけください！
48. ３. 質疑応答
49. 3 . 質 疑 応 答 の前に いただいたアンケート結果を 発表していきます！
50. 3 . 質 疑 応 答 助太刀デザインチームってどんな印象ですか？（一部抜粋） 助太刀における全ての
 デザインを司る天才集団 個性豊かなイメージ！ 顧客が見る「助太刀
 サービス」を作ってくれ てるチーム プロ集団 コミュニケーションが 盛んだと感じます メンバーの皆さんの 熱量が高い かっこいい 関わりが少ない部署なので もっと知りたいです
51. 3 . 質 疑 応 答 助太刀デザインチームってどんな印象ですか？（一部抜粋） 助太刀における全ての
 デザインを司る天才集団 個性豊かなイメージ！ 顧客が見る「助太刀
 サービス」を作ってくれ てるチーム プロ集団 コミュニケーションが 盛んだと感じます メンバーの皆さんの 熱量が高い かっこいい 関わりが少ない部署なので もっと知りたいです ありがとうございます！！ 励みになります
52. 3 . 質 疑 応 答 制作物への満足度（アプリ・助太刀社員/法人画面） 制作物への満足度（バナー・ウェブサイト・ノベルティなど） 満足している 53.8% そこそこ満足している 30.8% 普通 15.4% 満足している 80% そこそこ 満足している 20%
53. 3 . 質 疑 応 答 最後の自由記述欄にも たくさんのあたたかいコメントをいただきました 次は、いただいた質問にお答えしていきます→→→ お答えいただいた皆様、 ありがとうございました！
54. 3 . 質 疑 応 答 モチベや「デザインしてよかった！」と達成感が得られる時は？ やはり高い評価をいただけると嬉しいです。 依頼があった会社から次の依頼があると、前回の仕事を評価いただけたのだなと感じます。 また仕事をした担当者が別の担当者を紹介してくださったり、他の会社を紹介してくださる時も同じよ うに感じます。 デザインした成果物で効果（数字）が上がることは勿論ですが、 自分が制作したモノを見て、依頼者に「おぉ！」と言ってもらえると嬉しいです。
55. 3 . 質 疑 応 答 まずは説明が不十分なのであれば申し訳ないですし、今後は意図含めてお伝えできればと思っています むしろ意図教えて下さい！っていうのは失礼ではないのでどんどん聞いて下さい！ フィードバックについては意図を含めてフィードバックでしていただければと思います 第一印象で「なんか違う」と感じたら、それはそのまま伝えて欲しいです。 そこから「どう違うか・何が違うか」を擦り合わせて、同じ方向を向いて進めるようにしたいです。 最終的に良いモノを作るために一緒に頑張りましょう。 どういう背景、理由でこのデザインにしたのかを説明して欲しい / デザインにはどうやってフィードバックすればいいですか？
56. 3 . 質 疑 応 答 普段どうやって情報収集されてますか？ よく閲覧するのはPinterestです。 他、muuuuu.orgやAwwwardsのようなリンク集も参考にしています。 トレンドは少しずつ変化しているので、自身の感覚がずれないよう日常的にデザインを見ないといけま せんね。 Xや書籍で学ぶものも多いですが、 普段使うアプリはもちろん、電車広告や家具建物、案内標識からスーパーの陳列まで、生活する上で目 にする人工物はすべてデザインされたものなので、アンテナをできるだけ様々なところに持つようにし ています。
57. 3 . 質 疑 応 答 CS側からどんな情報があれば役に立てるか知りたいです！ 機能面はもちろん、どこに不便さ・使いにくさを感じているか、どこが億劫になっているかなど、 ユーザーからの声があればぜひ日報などに書いていただいたり、ご相談等いただければ嬉しいです。 また、ご自身で使っていて「ここで時間を結構取られる、よくミスしてしまう、操作が直感的に理解で きなかった」などあればぜひ遠慮なく教えてください！ ユーザーの一次情報が取りづらい立場なので、ユーザーさんの声とか届けていただけるとうれしいで す！プロダクト関連でいうと、行動フロー上で助太刀ではなく〇〇のサービスつかってるよ〜とか他の プロダクトをどんな風に使ってるかなども聞きたいです
58. 3 . 質 疑 応 答 今までで一番困った依頼 何もかもが決まっていないのに「シュッとしたやつをなる早で」お願いされた時？ 後から出てきた偉い人の一言でひっくり返る、とか。 時空が歪んだ依頼とか。後出しの要件追加とか。 具体的な案件は控えますが、総じて、制作要件に対して充分な期間が確保されないと、良くない結果に なります。 そうした場合デザイナー側としては、これだけの工数がかかるのだと説明する必要がありますね。 また、代理店の担当者→その上司→エンドクライアントの担当者→その上司 といった具合に、発言権を持つ人物が後から登場する場合も良くない結果になりがちです。
59. ご参加いただき ありがとうございました！