SUKEDACHI DESIGN NIGHT発表スライド

by sugiyama

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

助太刀もデザインチームも成長するにつれてという課題をチーム内で感じていました。デザインチームがあまり知られていないのでは？何をできてどう依頼すればいいのかどんなコミュニケーションを取ると良いのか

Slide 3

Slide 3 text

今日の”DESIGN TEAM NIGHT”を通して助太刀デザインチームを知ることで、をお伝えできればと思います！事業成長に貢献するためのデザインの力とそのためのコミュニケーション

Slide 4

Slide 4 text

本日のアジェンダ B 助太刀デザインチームがやっているこ% 依頼フローと制作過È @ 質疑応答

Slide 5

Slide 5 text

1. 助太刀デザインチームがやっていること

Slide 6

Slide 6 text

1. やっていることすべてのタッチポイントに向けてデザインしています！プレスバナーメルマガバナーブログサムネイルノベルティ CM監修サービスサイト LP 営業資料スライド助太刀アプリ法人管理画面(BE) 助太刀社員ヘルプページマニュアルリリースノート導入認知検討維持

Slide 7

Slide 7 text

1. やっていること制作物は大きく分けて2種類コミュニケーションデザイン UI/UXデザイン

Slide 8

Slide 8 text

1. やっていることコミュニケーションデザイン伝えたい情報がターゲットへ適切に・魅力的に届くようにデザインする。どうすれば行動してもらえるか？をデザインで考える。例：バナー、チラシ、ノベルティ、スライド資料、サービスサイトなど

Slide 9

Slide 9 text

1. やっていること 2E AL 直近のデザイン例

Slide 10

Slide 10 text

1. やっていること直近のデザイン例 PM OPS

Slide 11

Slide 11 text

1. やっていること直近のデザイン例マーケオウンドメディア

Slide 12

Slide 12 text

1. やっていること直近のデザイン例 HP事業

Slide 13

Slide 13 text

1. やっていること直近のデザイン例 HR 広報

Slide 14

Slide 14 text

1. やっていること直近のデザイン例総研総務

Slide 15

Slide 15 text

1. やっていることご紹介した通り… デザインチームはほぼ全ての部署と関わって仕事をしています！

Slide 16

Slide 16 text

1. やっていること他にも… アイコンイラスト HP掲載画像ガイドラインスライド等で使えるようにアイコンのバリエーションをたくさん追加。たくさん使ってくださいね！ HPに掲載する上での適切な画像選定について説明

Slide 17

Slide 17 text

1. やっていること UI/UXデザインユーザーが使いやすく、満足してもらえるようにサービスや画面をデザインする。（UI：User Interface、UX：User Experience）例：助太刀・助太刀社員の法人管理画面や、助太刀アプリなど

Slide 18

Slide 18 text

1. やっていること直近のデザイン例 REセルフサーブ受発注統合

Slide 19

Slide 19 text

1. やっていることプロダクト開発を進める上でデザインのルールや仕組みを取り決めたもの。一定水準を満たし、一貫性のあるデザインを作成できる。デザイン・開発工数の削減もできるので施策に集中できるようになる。 Apple（Human Interface Guidelines） / Google（Material Design）他にはPayPay、デジタル庁、Adobe、Dropbox、SmartHRなどデザインシステムを公開している企業：デザインシステムも制定中デザインシステムって？

Slide 20

Slide 20 text

1. やっていること例1：カラー定義例2：ボタン定義制定がなく100色まで膨れ上がっていたカラーを、選定・検証画面内の優先度を主軸にボタンの定義を見直し。また、大きさやアイコンを入れた時など、パターン別に定義。制定例（まだ暫定）

Slide 21

Slide 21 text

1. やっていること鋭意制制定中！良いプロダクトを届けるために引き続き頑張ります！

Slide 22

Slide 22 text

2. 依頼フローと制作過程

Slide 23

Slide 23 text

2. 依頼フローと制作過程通常業務って、どんなことがあるんでしょうか？プロジェクトの進み方どんな画面でデザインしているのか、作業風景みたいです！どういう背景、理由でこのデザインにしたのか普段どうやって情報収集されてますか？アンケートでは、業務内容や依頼のフロー、制作過程に関するご質問を多くいただきました！

Slide 24

Slide 24 text

2. 依頼フローと制作過程依頼フローについて解説しつつ、業務内容や実際の制作過程についてご説明していきます。

Slide 25

Slide 25 text

2. 依頼フローと制作過程現在の運用では、とで依頼フローが異なります。コミュニケーションデザイン UI/UXデザイン今回は、コミュニケーションデザインを中心に説明してきます。

Slide 26

Slide 26 text

2. 依頼フローと制作過程コミュニケーションデザインの依頼フローデザインチーム 1週目デザイン作業必要に応じてMTG ヒアリング提出フィードバックや修正依頼 2週目依頼者 #design相談で起票（金曜まで）使用・提出など工数の決定・担当割り振り

Slide 27

Slide 27 text

2. 依頼フローと制作過程コミュニケーションデザインの依頼フローデザインチーム 1週目工数の決定・担当割り振り 2週目依頼者

Slide 28

Slide 28 text

2. 依頼フローと制作過程必要な情報を確認し、デザイナーが作業開始できる状態にする。例：不足している情報・素材はないか、ある場合はいつ頃に出揃うか　　どんなシチュエーションで使用されるか、サイズ指定はあるかなどノベルティ作成やチラシ等の入稿が必要な際は、業者選定・入稿期限や見積もりも確認。また、現在作業しているタスクの兼ね合い、それぞれの得意領域や希望などから、タスクをデザイナーに振り分けていく。工数の決定 / 担当割り振り

Slide 29

Slide 29 text

2. 依頼フローと制作過程依頼の例スライドを1枚作成して欲しい・普段使用しているスライドに差し込みたい・図式にしてわかりやすくしたい・助太刀の強みをアピールしたい・これまでに作成した資料で流用できるもの　はないか？・スライド1枚だが、図式作成の時間を  　考えると、工数は⚪︎日くらいにしよう・必要な情報は揃っているか？デザインの工数を割り出すタスクを振り分けできる粒度にする依頼者リーダー

Slide 30

Slide 30 text

2. 依頼フローと制作過程担当割り振り・タスクA確認待ち・タスクB作業中（長期）・タスクC未対応・タスクD作業中・タスクE作業中・タスクF確認待ち・タスクG作業中（長期）デザイナーA デザイナーB デザイナーC リーダー「今回のデザインは提出希望日まで余裕があるので、タスクの空き状況的にCさんにお願いしよう！」

Slide 31

Slide 31 text

2. 依頼フローと制作過程コミュニケーションデザインの依頼フローデザインチーム 1週目デザイン作業 2週目依頼者

Slide 32

Slide 32 text

2. 依頼フローと制作過程実際にデザインを作っていきます。必要な場合はリファレンスも探します。デザイン作業時に使用するツール Photoshop Figma Illustrator デザイン作業

Slide 33

Slide 33 text

2. 依頼フローと制作過程

Slide 34

Slide 34 text

2. 依頼フローと制作過程

Slide 35

Slide 35 text

2. 依頼フローと制作過程検討したボツ置き場検討中のデザイン製作中はこんな感じ

Slide 36

Slide 36 text

2. 依頼フローと制作過程デザイン時の脳内思考例支給された画像のトリミングが難しすぎる…！色味も全体と合わせよう！このくらいの余白を取りたいのに行数がここだけ多い…！写真の並び的には人ではない方がバランスいいかな？指定されたカラーだと視認性が保てない。どの部分で使用しようか… 文字をここで改行すると、右の要素とのバランスが悪い…！文字をここで改行すると、右の要素とのバランスが悪い…！ここの色を黒にすると、全体の配色バランスが合わないなあ

Slide 37

Slide 37 text

2. 依頼フローと制作過程デザイン時に発生する苦労事支給された画像のトリミングが難しすぎる…！色味も全体と合わせよう！このくらいの余白を取りたいのに行数がここだけ多い…！写真の並び的には人ではない方がバランスいいかな？指定されたカラーだと視認性が保てない。どの部分で使用しようか… 文字をここで改行すると、右の要素とのバランスが悪い…！ここの色を黒にすると、全体の配色バランスが合わないなあこの作業を完成度が高くなるまで続ける＝デザインの作業

Slide 38

Slide 38 text

2. 依頼フローと制作過程画像は直感的に理解できるものを使用しているか余白の取り方は自然か？デザインに合った余白感か？自然な視線誘導が作れているか？ブランドカラー・フォントを守れているか？視認性は保たれているか？フォントは適切なサイズか？ジャンプ率は不自然でないか？見た時に魅力を感じてくれそうか？細部までいっぱい考えて作ります！作成サイズや媒体、目的によっても考えることが変わります要するに…

Slide 39

Slide 39 text

2. 依頼フローと制作過程「デザイン＝つくること」と考えがちですが… デザイナー依頼者バナーを作って欲しい！

Slide 40

Slide 40 text

2. 依頼フローと制作過程「デザインで解決すること」が我々の仕事ですデザイナー依頼者背景や課題バナーを作って欲しい！手段は合ってる？どんな解決をすればいい？

Slide 41

Slide 41 text

2. 依頼フローと制作過程目標達成のためにデザイナーが力を発揮するには・依頼の経緯、背景・達成したいゴールは何か・誰が、どこで、いつ見るか（どう思って欲しいか）を依頼時にお伝えください！

Slide 42

Slide 42 text

2. 依頼フローと制作過程依頼経緯によってデザインが変わるスライドスライドに差し込みたい・前後のフォントサイズや配色が　一致するように作る・スライド移動時の整合性をとる・1枚完結で作成する 1枚ペラで作成

Slide 43

Slide 43 text

2. 依頼フローと制作過程達成する目標によってデザインが変わる資料お問い合わせに繋げたい！・お問い合わせにつながるような　優先度付けや視線誘導をつくる・閲覧時に魅力を感じられるような　デザインを作る・文字数のバランスを考える・イラストやアイコン、画像の使用　を検討する・伝えたい部分を協調する分かりやすく説明したい！

Slide 44

Slide 44 text

2. 依頼フローと制作過程誰が、どこで、いつ見るかによってデザインが変わるチラシバナーパソコンで？紙で？打ち合わせ中？展示会中？ 2C？2B？

Slide 45

Slide 45 text

2. 依頼フローと制作過程デザインチームの貢献例① 制作したメルマガから受注創出

Slide 46

Slide 46 text

2. 依頼フローと制作過程高速道路看板でのきっかけでお問い合わせデザインチームの貢献例②

Slide 47

Slide 47 text

2. 依頼フローと制作過程とはいっても、デザイン依頼時にどんな情報が必要なのかわからない場合もあるかと思います。依頼前・後でも構いませんので、気軽にお声がけください！

Slide 48

Slide 48 text

３. 質疑応答

Slide 49

Slide 49 text

3 . 質疑応答の前にいただいたアンケート結果を発表していきます！

Slide 50

Slide 50 text

3 . 質疑応答助太刀デザインチームってどんな印象ですか？（一部抜粋）助太刀における全ての  デザインを司る天才集団個性豊かなイメージ！顧客が見る「助太刀  サービス」を作ってくれてるチームプロ集団コミュニケーションが盛んだと感じますメンバーの皆さんの熱量が高いかっこいい関わりが少ない部署なのでもっと知りたいです

Slide 51

Slide 51 text

Slide 52

Slide 52 text

3 . 質疑応答制作物への満足度（アプリ・助太刀社員/法人画面）制作物への満足度（バナー・ウェブサイト・ノベルティなど）満足している 53.8% そこそこ満足している 30.8% 普通 15.4% 満足している 80% そこそこ満足している 20%

Slide 53

Slide 53 text

3 . 質疑応答最後の自由記述欄にもたくさんのあたたかいコメントをいただきました次は、いただいた質問にお答えしていきます→→→ お答えいただいた皆様、ありがとうございました！

Slide 54

Slide 54 text

3 . 質疑応答モチベや「デザインしてよかった！」と達成感が得られる時は？やはり高い評価をいただけると嬉しいです。依頼があった会社から次の依頼があると、前回の仕事を評価いただけたのだなと感じます。また仕事をした担当者が別の担当者を紹介してくださったり、他の会社を紹介してくださる時も同じように感じます。デザインした成果物で効果（数字）が上がることは勿論ですが、自分が制作したモノを見て、依頼者に「おぉ！」と言ってもらえると嬉しいです。

Slide 55

Slide 55 text

3 . 質疑応答まずは説明が不十分なのであれば申し訳ないですし、今後は意図含めてお伝えできればと思っていますむしろ意図教えて下さい！っていうのは失礼ではないのでどんどん聞いて下さい！フィードバックについては意図を含めてフィードバックでしていただければと思います第一印象で「なんか違う」と感じたら、それはそのまま伝えて欲しいです。そこから「どう違うか・何が違うか」を擦り合わせて、同じ方向を向いて進めるようにしたいです。最終的に良いモノを作るために一緒に頑張りましょう。どういう背景、理由でこのデザインにしたのかを説明して欲しい / デザインにはどうやってフィードバックすればいいですか？

Slide 56

Slide 56 text

3 . 質疑応答普段どうやって情報収集されてますか？よく閲覧するのはPinterestです。他、muuuuu.orgやAwwwardsのようなリンク集も参考にしています。トレンドは少しずつ変化しているので、自身の感覚がずれないよう日常的にデザインを見ないといけませんね。 Xや書籍で学ぶものも多いですが、普段使うアプリはもちろん、電車広告や家具建物、案内標識からスーパーの陳列まで、生活する上で目にする人工物はすべてデザインされたものなので、アンテナをできるだけ様々なところに持つようにしています。

Slide 57

Slide 57 text

3 . 質疑応答 CS側からどんな情報があれば役に立てるか知りたいです！機能面はもちろん、どこに不便さ・使いにくさを感じているか、どこが億劫になっているかなど、ユーザーからの声があればぜひ日報などに書いていただいたり、ご相談等いただければ嬉しいです。また、ご自身で使っていて「ここで時間を結構取られる、よくミスしてしまう、操作が直感的に理解できなかった」などあればぜひ遠慮なく教えてください！ユーザーの一次情報が取りづらい立場なので、ユーザーさんの声とか届けていただけるとうれしいです！プロダクト関連でいうと、行動フロー上で助太刀ではなく〇〇のサービスつかってるよ〜とか他のプロダクトをどんな風に使ってるかなども聞きたいです

Slide 58

Slide 58 text

3 . 質疑応答今までで一番困った依頼何もかもが決まっていないのに「シュッとしたやつをなる早で」お願いされた時？後から出てきた偉い人の一言でひっくり返る、とか。時空が歪んだ依頼とか。後出しの要件追加とか。具体的な案件は控えますが、総じて、制作要件に対して充分な期間が確保されないと、良くない結果になります。そうした場合デザイナー側としては、これだけの工数がかかるのだと説明する必要がありますね。また、代理店の担当者→その上司→エンドクライアントの担当者→その上司といった具合に、発言権を持つ人物が後から登場する場合も良くない結果になりがちです。

Slide 59

Slide 59 text

ご参加いただきありがとうございました！