The cautions point which prevents the trouble of a Web design

1,752 views
1,701 views

Published on

2013.6.14(金)に第20回岡山WEBクリエイターズ『Webにまつわる契約と円滑進行』にて『Webデザインのトラブルを防ぐ注意ポイント』という題目で登壇した時のスライド(配布用)です。

Published in: Design

The cautions point which prevents the trouble of a Web design

  1. 1. thinaks(シナクス) デザイナー 愛媛県松山市在住 2003年 楽天ショップの運営 2007年 松山市内のWeb制作会社 入社      更新・運用担当 → Webデザイナー 2012年 フリーランス(6月より) 経歴 Saeka Abe 自己紹介。
  2. 2. このトラブルを防ぐために、 あなたなら、どのように防ぎますか? (ワーク形式) Webデザイナーとしての『力』を 『誤解』させないために 1. 2. 簡単に本日の流れ。
  3. 3. この2つが組み合わさって はじめて『力』を発揮する ✕ 仕事というのは…
  4. 4. このトラブル、あなたなら どのように防ぎますか?
  5. 5. 店舗ロゴをリニューアルしたので サイトのロゴを差し替えて欲しいという依頼。 こんなことがありました。1 ロゴの色調とサイトの色調の 相性が悪いことを説明 納得していただいた上で ロゴの色を可能な範囲で変更
  6. 6. ロゴは後で送られる、ということで 先にサイトのデザインを進めていたが、 イメージが違うロゴが届いてしまい もう一度作りなおすことに。 Case.1
  7. 7. ロゴはプロジェクトの『核』であり 企業の『顔』である Case.1 Answer 1.可能な限り、ロゴを先にいただく。 2.できなければ、ロゴ制作者・制作管理者と 打ち合わせを行い、イメージ・方向性を 決める。
  8. 8. 『VI(ビジュアルアイデンティティ)=ロゴは、 企業の「顔」であり、どんな会社なのか? どんな事業をしている会社なのか? といった企業そのもののイメージを 相手に伝える大切な役割を 持っています。』 Co sy Design Studio 『Co'sy Design Studioが考えるロゴデザインとは。』より引用 http://www.cosydesign.com/kangae.html 佐藤浩二さん
  9. 9. ロゴ例 黄色の矢印はA→Zまでの商品=多種の商品を 扱っていることを意味し、 スマイルのような形は、顧客(ユーザー)に 満足してもらいたいという意味が込められている。
  10. 10. クライアントから修正の指示が何度も来て 作業が終わらない。 Case.2
  11. 11. 一旦、制作をストップ。 今までの作業とやりとりの内容を見直す。 クライアントの『意図』を ちゃんと認識する Case.2 Answer
  12. 12. 『意図』が伝わっているか さまざまな面からもう一度見直す タイトルを 赤に変更して欲しい。 実際は目立てば それで良かっただけ。
  13. 13. 指示通りに直しても、クレームが来るので 何とかして欲しいとの依頼。 こんなことがありました。2 やり取りしたメール、資料 制作したデザイン全部を 転送してもらい、意図を掴んだ上で 新たにデザイン制作
  14. 14. こんなことがありました。3 話し合いをした上で 納期までに対応できることは 全て対応した 公開数日前に、すべて制作済みな状態なのに、 クライアントの最終決定者から 『色が気に入らない』『幅を狭くしろ』と いう要望が来た。
  15. 15. 納品間際にクライアントの社長から ダメ出しが入って、 デザインを最初から やり直すことになった。 Case.3
  16. 16. プロジェクトの初期から 認識を一緒にすることで 間違った方向へ進むことを防ぐ Case.3 Answer 打ち合わせの要所で 最終決定者に参加・確認していただく。
  17. 17. 大抵のトラブルは コミュニケーション不足が 大きな原因 3つの事例を見てきて…
  18. 18. Webデザイナーとしての『力』を 『誤解』させないために 大切なこと 注:後藤さん
  19. 19. クライアントが 『何を成し遂げたいか』 その目的をつかむこと
  20. 20. ためにやっている 5つの代表例 『目的をつかむ』
  21. 21. モヤモヤした部分は 放置しない、放置させない モヤモヤしたままにすると 自分で勝手に解釈して 食い違いをしてしまう 確率が高くなる。 目的をつかむ その1
  22. 22. 相手の言葉を そのまま受け取らない 言葉通りに受け取ると クライアントの 本当の『意図』を 見逃す可能性が あるため。 目的をつかむ その2 自分から 見えている部分 クライアントが 望んでいる 本来の『意図』
  23. 23. イメージのすり合わせには 『Webサイト』以外も活用する 世の中の『デザイン』を 表現しているものは Webだけではない。 雑誌・パンフレットなどの印刷物、 写真、イラスト、雑貨など 活用できるものは何でも活用。 目的をつかむ その3
  24. 24. 話しやすい雰囲気で 打ち合わせをするようにする リラックスした状態で 話した方が より本音を引き出しやすい。 目的をつかむ その4
  25. 25. 『明確化』して『共有化』する 打ち合わせたことを放置せず、 こまめに議事録や提案書にして 目に見える形にしておけば、 経緯を振り返ることができる。 目的をつかむ その5 ※プロジェクトに参加する全員に  必ず見せるようにすること。
  26. 26. もっと詳しく知りたい人に おすすめの3冊
  27. 27. Webデザイン受発注のセオリー デザインコントロールが身につく本 片山良平 著 発注者と受注者の間の 『コミュニケーション不足』問題に 対して注目させた一冊。 おすすめ本 その1
  28. 28. ウェブ配色 決める!チカラ Webサイトの配色についての コミュニケーションポイントが まとめられた一冊。 問題を解決する色彩とコミュニケーション 坂本邦夫 著 おすすめ本 その2
  29. 29. スマートフォンデザインで ラクするために デザインの組み立て方、 過程についてラフ入りで 分かりやすく書かれた一冊。 石嶋未来 著 おすすめ本 その3
  30. 30. 『技術』を活かすために クライアントの『目的』『本質』を 見い出すこと まとめ
  31. 31. おまけ:ロゴに関して…。 【雑学】あの有名企業ロゴに隠された 本当の意味−NAVERまとめ http://matome.naver.jp/odai/2129196318697412301 Co'sy Design Studio http://www.cosydesign.com/ セッション内で紹介したロゴデザイン事務所のサイト。 制作されたロゴの紹介ほか、ロゴ制作に対する考え方や 基礎知識のページもあります。ぜひ説明の参考に。 有名企業のロゴの意味がまとめられたページ。 普段見慣れているロゴには実はこんな意味があるんです。

×