Upgrade to Pro — share decks privately, control downloads, hide ads and more …

とあるデザイナーの脳内 -キービジュアル制作編-

cotolier_risa
May 10, 2018
520

とあるデザイナーの脳内 -キービジュアル制作編-

2018年5月10日(木)に開催された「Webデザイン・Web制作に関する勉強会 #1」
(https://kfug.connpass.com/event/84180/)
にて登壇しました。

「とあるデザイナーの脳内 ~キービジュアル制作編~」というタイトルでお話しました。詳しい構成としては以下にまとめました。

キービジュアルを作る時に、何考えてどうやって作ってるかという内容です。
ご縁が会ってIT系イベントのキービジュアルを作らせていただくことが多く、その経験の中で培った制作フローを紹介しました。

1.キービジュアルとは?
2.キービジュアルの役割は?
3.実例を交えてどうやって仕事を進めるか?
 ▼考えるフェーズ
  情報の読み解き方、仮説のたて方
  情報からどうやってビジュアルを考えていくか
 ▼手を動かすフェーズ
  色について何を考えているか?
  配置についてどうやって考えているか?

4.まとめ

cotolier_risa

May 10, 2018
Tweet

More Decks by cotolier_risa

Transcript

  1. ͱ͋ΔσβΠφʔͷ೴಺
    ʙ Ω ʔ Ϗ δϡ Ξϧ ੍ ࡞ ฤ ʙ

    IUUQTLGVHDPOOQBTTDPNFWFOU
    8FCσβΠϯɾ8FC੍࡞ʹؔ͢Δษڧձ
    :BTVJ3JTB

    View Slide

  2. :BTVJ3JTB
    蔓遭㣐㷕؎ٓأزٖ٦ءّٝ걄㚖
    吳䒭⠓爡DIBUCPYխ爡ⰻرؠ؎ش٦ؿٗٝزؒٝسؒٝآص،
    [email protected] DPUPMJFS3JTB

    View Slide

  3. ΩʔϏδϡΞϧΛ࡞Δ࣌
    ͲΜͳ͜ͱΛߟ͍͑ͯΔ͔
    ࠓ೔࿩͢͜ͱ

    View Slide

  4. 4DBMBؔ੢4VNNJU 1)1ΧϯϑΝϨϯεؔ੢
    άϥϯϑϩϯτΤϯυେࡕ -BSBWFM0TBLB ϑϩϯτΤϯυΧϯϑΝϨϯε
    ࠓ·Ͱ੍࡞ͨ͠ΩʔϏδϡΞϧ

    View Slide

  5. ΩʔϏδϡΞϧͱ͸
    8IBUʁ

    View Slide

  6. σβΠϯΛల։͢Δͱ͖ͷϕʔεʹͳΔ΋ͷ

    View Slide

  7. ࠃͰݴ͏ࠃضͷΑ͏ͳ΋ͷ
    ׉ך⚅歲錁׾爙ׅءٝنٕ
    ׫׿זָずׄ׮ך׾䟝⫷דֹ׷湡⽩
    傈劤

    View Slide

  8. ΩʔϏδϡΞϧͷ໾ׂ
    8IZʁ

    View Slide

  9. ϢʔβʔʹΞϓϩʔν
    鋅אֽג׮׵ֲ湡׾䒷ֻ
    莆㄂׾䭯׏ג׮׵ְװֻׅׅ׷

    View Slide

  10. ϢʔβʔͷهԱʹ࢒͢
    ⠗ִג׮׵ְ
    װֻׅׅ׷
    أة٦
    ؎كٝز
    ׉ְֲִל
    鋅׋״ֲז˘
    鋙ִג׮׵ֲ

    View Slide

  11. σβΠϯΛ౷Ұ͢Δ
    窟♧ׅ׷ֿהד
    㸜䗰䠬װ٥⥋걾䠬׾♷ִ׷

    View Slide

  12. Ͳ͏΍ͬͯ࡞͍ͬͯΔ͔
    ࣮ྫ

    View Slide

  13. 㹋ꥷח剑鵚ⵖ⡲׃׋׮ך

    View Slide

  14. )5.-"11$0/'&3&/$&խ)5.-،فٔך剑⯓畭
    剢傈 傈
    խ匌❨؟؎نؐؤ吳䒭⠓爡匌❨ؔؿ؍أ
    չ8FCⵖ⡲–،فٔպ׾ذ٦وחծ
    )5.-،فٔⵖ⡲ך圫ղזظؐعؐⰟ剣ׅ׷؎كٝز

    View Slide

  15. ґཔ͞Εͨ಺༰
    չ)5.-"11$0/'&3&/$&պ
    ؗ٦ؽآُ،ٕ׾⡲׏ג妜׃ְ
    DPOOQBTTך⹫꧊ل٦آ
    أهٝ؟٦项俱
    䔲傈ꂁ䋒ךػٝؿٖحز
    ח⢪欽דֹ׷׮ך

    View Slide

  16. ґཔ͔Β෼ੳ͢Δ
    ِ٦ؠ٦כוְֲֲ䕎ד湡חׅ׷ַ
    ػا؝ٝדխأومխةـٖحز
    秵簚埆
    ו׿ז؟؎ؤծ嫰桦
    㜥さח״׏גכزٔىׁؚٝ׸׷

    View Slide

  17. ͲΜͳܗࣜͷϏδϡΞϧ͕ඞཁ͔ߟ͑Δ
    ֮׷玎䏝嫰桦ָ㢌׻׏ג׮
    锃侭דֹ׷ֿה
    秵ה8FCד㼎䘔דֹ׷ֿה

    View Slide

  18. ৘ใΛಡΈղ͘
    ؎كٝزة؎زٕ
    ؟ـة؎زٕ
    嚊銲הذ٦و
    傈儗
    㜥䨽
    鋉垷խFUD
    ة٦؜حزِ٦ؠ٦כ
    ו׿ז⽩韋׾⠗ִ׋ְ
    荈ⴓז׶ח䟝⫷׃ծ⟎铡׾甧ג׷

    View Slide

  19. ώΞϦϯάʢ૬ஊʣ͢Δ
    湱锑׃זָ׵钠陎׾さ׻ׇ׷
    駈׶זְ䞔㜠׾耀ֹ⳿׃؎ً٦آ׾אַ׭׷״ֲחׅ׷

    View Slide

  20. ΠϝʔδΛ͔ͭΉͨΊͷ৘ใ
    ؗ٦ٙ٦س׾꧊׭׷
    ⯓鹌涸
    劢勻涸
    ،فٔ
    )5.-
    ؎ً٦آ׾穾׶鴥׬
    鋵׃׫װְׅ أة؎ٔحءُ
    חֺװַ ءٝفٕ
    ַ׻ְְ ַ׏ְְֿ

    View Slide

  21. ৘ใ͕ू·ͬͨΒ
    Πϝʔδ࡞Γ΁
    ࣮ྫ

    View Slide

  22. Ωʔϫʔυ͔Β͞Βʹݴ༿Λ࿈૝͢Δ
    ⯓鹌涸
    劢勻涸
    ،فٔ
    ػا؝ٝ
    ؗٓؗٓ
    㼹׏גְ׷
    أة؎ٔحءُ
    ءٝفٕ
    䎗⡦㷕
    أوم
    ةـٖحز
    荈⡲
    㹇瀖
    ׻ֻ׻ֻ
    ؝٦س
    ؒٝآص،
    و٦ؙ،حف 䪮遭
    )5.-

    View Slide

  23. ΩʔϫʔυΛ࣠ʹ
    ۩ମతͳΠϝʔδ΍ΞΠσΞΛूΊΔ
    ⚺חQJOUBSFTU׾⢪׏גתׅ

    View Slide

  24. ΞΠσΞΛ૊Έ߹Θͤͳ͕Β
    ΦϦδφϧΛ࡞͍ͬͯ͘
    J1BE"QQMFلٝءٕד䩛䲽ֹדٓؿ׾⡲䧭
    ず儗ח؝ٝإفز׮罋ִ׷
    չ)5.-"11
    $0/'&3&/$&պ׾鸐׃ג
    ،فٔⵖ⡲ָ״׶ؙؙٙٙ
    ׅ׷׮ךחז׷

    View Slide

  25. ৭ʹ͍ͭͯ
    ߟ͑ͯΔίτ
    ࢥߟ෼ੳ

    View Slide

  26. ৭͕ώτʹ༩͑Δҹ৅Λҙࣝ͢Δ
    ꫬ׏שְװא
    葿ך⽩韋ָ㔿㹀׌ה
    鎉衝ח׃װְׅ
    ➂ח⠗ִװְׅ
     
    ꫬ׏שַ׏׋

    View Slide

  27. 切僳ז鎉衝ח
    ז׶ָ׍
    ৭͕ώτʹ༩͑Δҹ৅Λҙࣝ͢Δ
    ؕٓؿٕ
    ׮׃׋ֻׁ׿ך葿ָ⢪׻׸גְ׋׵
    ➂ח״׏ג
    ؎ً٦آָ麩ֲ׮ך
    חז׶װְׅ
    ؕٓؿٕ
    ֿ׿ז䠬ׄ

    View Slide

  28. Χϥϑϧ͸ྑ͘ͳ͍ͷʁ
    ׉׿זֿהכזְדׅ

    View Slide

  29. ΧϥϑϧΛબͿཧ༝͕͋Ε͹0,
    ⠗ִ׋ְ׮ךך⮚⯓䏝ח״׏ג
    邌植׾鼅עךָ㣐ⴖ
    ؎كٝزךذ٦وָ
    葿ղז➂ָչאזָ׷պ
    ̕
    葿׾⽩韋׾אח㔿㹀ׇ׆
    չ㢳珏㢳圫պ
    չ؝ىُصذ؍ך䎢ָ׶պ
    ׾邌植ׅ׷׋׭ؕٓؿٕח

    View Slide

  30. େ͖͞ͱॏ͞ʹ͍ͭͯ
    ߟ͑ͯΔίτ
    ࢥߟ෼ੳ

    View Slide

  31. 岣湡׃גק׃ְ갫
    ➙㔐כ稆湫ח⮚⯓䏝さ׻ׇג㣐ֹׁ׾锃侭
    ة؎زٕ̔խ㣐
    ワ׶ך؎ٓأز̔⚥։㼭
    ׉ך➭ך鄲귅̔噰㼭




    େ͖͞ΛܾΊΔ

    View Slide

  32. ഑ஔΛܾΊΔ
    ة؎زٕכ⚥㣛
    וך嫰桦דزٔىׁؚٝ׸ג׮邌爙ׇׁ׷䗳銲׋׭

    View Slide

  33. ഑ஔΛܾΊΔ
    㣐ְֹ׮ךַ׵ꂁ縧׃גְֻ

    View Slide

  34. ཁૉͷॏΈΛҙࣝ͢Δ
    غٓٝأךꅾ䗰ָ䊩ח

    View Slide

  35. όϥϯεΛҙࣝ͠ͳ͕ΒཁૉΛஔ͘
    ꅾָׁ䊩〸㖱♧חׅ׷ה㸜㹀䠬ָד׷

    View Slide

  36. ૷০Ͱғ͍ͦΕͧΕͷ·ͱ·ΓΛڧԽ͢Δ
    㸣䧭

    View Slide

  37. ·ͱΊ
    վΊ·ͯ͠

    View Slide

  38. תה׭

    View Slide

  39. 剑䖓ח

    View Slide

  40. ׀幠耮֮׶ָהֲ׀ְׂת׃׋
    ֶ׻׶

    View Slide