shiteitoudan2015 kamio
TRANSCRIPT
![Page 1: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/1.jpg)
新米デザイナになるまで師弟登壇2015
GMOペパボ株式会社 | 神尾 千波
![Page 2: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/2.jpg)
神尾 千波ちーちゃん | JUGEM Designer
![Page 4: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/4.jpg)
作ることが好き ペパボが好き
![Page 5: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/5.jpg)
だからペパボのデザイナになりました!
![Page 6: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/6.jpg)
2015年度新卒デザイナ
ちーちゃん @chinu_t
おさつ @osatsu_032
![Page 7: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/7.jpg)
充実の講師陣
モハゑさん @moha_ariyoshi
まじじさん @shirtskirt
咲さん @satosio
デミさん @demiflare168
しょこさん @chocolatina
メンター メンター
ご意見番 ご意見番 ご意見番
![Page 8: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/8.jpg)
デザイナ研修の流れ
6月 7月 8月 9月 10月
カラーミーショップ
30days Album
「誰のためのデザイン?」読書会
HTML/CSS/Ruby on Rails講座
![Page 9: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/9.jpg)
![Page 11: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/11.jpg)
「カラーミーショップの リスティング広告用の
バナーを作成してください」
![Page 12: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/12.jpg)
「自由に作っていいですよ!」
![Page 13: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/13.jpg)
ということで、
![Page 14: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/14.jpg)
自由に作ってみました!
![Page 15: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/15.jpg)
まずは案出し
![Page 16: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/16.jpg)
「はじめの一歩」案ネットショップ店長になって、はじめの一歩を踏み出そう!
![Page 17: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/17.jpg)
![Page 18: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/18.jpg)
カラーミーショップっぽくないので、没に
![Page 19: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/19.jpg)
「ビッグドリーム掴もう」案ネットショップを開いて、ビッグドリームを掴もう!
![Page 20: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/20.jpg)
![Page 21: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/21.jpg)
ネットショップは宝くじじゃないので没に
![Page 22: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/22.jpg)
「何考えてたかさっぱり分からない」案自分でも分かりませんでした。
![Page 23: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/23.jpg)
![Page 24: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/24.jpg)
ことごとく没に。
![Page 25: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/25.jpg)
最終的に、
![Page 26: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/26.jpg)
ネットショップを無料で始めて、ここまで大きくなりました! というストーリー仕立てに
![Page 27: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/27.jpg)
案を元にデザイン作成
![Page 28: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/28.jpg)
最初に出した案が、
![Page 29: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/29.jpg)
![Page 30: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/30.jpg)
文字多い!
![Page 31: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/31.jpg)
色の迷走
![Page 32: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/32.jpg)
![Page 33: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/33.jpg)
![Page 34: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/34.jpg)
レイアウトも苦戦
![Page 35: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/35.jpg)
![Page 36: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/36.jpg)
![Page 37: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/37.jpg)
![Page 38: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/38.jpg)
![Page 39: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/39.jpg)
![Page 40: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/40.jpg)
![Page 41: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/41.jpg)
![Page 42: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/42.jpg)
自由に作っていても、中々上手くいかない。
![Page 43: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/43.jpg)
どうしてだろう?
![Page 44: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/44.jpg)
メンターから、
![Page 45: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/45.jpg)
「デザインには全て、意味がある」
![Page 46: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/46.jpg)
“意味のあるデザイン”って、何だろう?
![Page 47: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/47.jpg)
モヤモヤを抱えたまま、 カラーミーショップでの
研修は終了
![Page 48: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/48.jpg)
![Page 50: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/50.jpg)
キャンペーンバナーを作っていたとき
![Page 51: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/51.jpg)
ロゴは2パターン
![Page 52: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/52.jpg)
![Page 53: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/53.jpg)
どれもロゴは縦で見せるものを使用
![Page 54: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/54.jpg)
文字として読ませないようにしている
![Page 55: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/55.jpg)
ロゴの向きひとつで、 意味が大きく変わる!
![Page 56: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/56.jpg)
デザインの意味って、 こういうことか!
![Page 57: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/57.jpg)
サンプルアルバムページの改修
![Page 58: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/58.jpg)
アルバムのサンプルが見られるページ
![Page 59: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/59.jpg)
目に入ってきやすいのは、
![Page 60: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/60.jpg)
![Page 61: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/61.jpg)
目に付く所をクリックすると、
![Page 62: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/62.jpg)
合言葉の入力を求められる
![Page 63: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/63.jpg)
あ、合言葉って、なんだ…!?
![Page 64: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/64.jpg)
実は先ほどのページに、
![Page 65: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/65.jpg)
合い言葉が書かれていた!
![Page 66: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/66.jpg)
合い言葉がアルバムのパスワード代わりに
![Page 67: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/67.jpg)
このページの問題点として、
![Page 68: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/68.jpg)
• 合い言葉を入力してアルバムを見るということに気づかない
• 合い言葉が目に入ってこない
![Page 69: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/69.jpg)
結果、ページの離脱に繋がっていた
![Page 70: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/70.jpg)
![Page 71: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/71.jpg)
“合い言葉”という存在を知らせる役割
![Page 72: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/72.jpg)
“合い言葉”が前よりも目立つ位置へ
![Page 73: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/73.jpg)
“合い言葉”の案内をボタンにも加えた
![Page 74: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/74.jpg)
写真の幅を広くとることで、 使用シーンが想起しやすいように
![Page 75: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/75.jpg)
自分で考え、提案して デザイン出来るように!
![Page 76: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/76.jpg)
最初は自分のデザインに関して、
![Page 77: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/77.jpg)
“なんとなく”で作っていたので、
良さそう かわいい 好き
![Page 78: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/78.jpg)
自信を持って説明出来なかった
良さそう? かわいい? 好き?
![Page 79: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/79.jpg)
当然、誰にも伝わらないデザインばかり
? ? ?
![Page 80: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/80.jpg)
「自由に作っていいよ!」と言われても
![Page 81: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/81.jpg)
“考えなし”に作ってはいけない!
![Page 82: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/82.jpg)
例えば とあるお花屋さんのバナーを作るとき
![Page 83: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/83.jpg)
考えなしに作る
花屋だし…
![Page 84: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/84.jpg)
考えなしに作る
お花いっぱい散りばめとこ!
●●花屋
![Page 85: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/85.jpg)
ちゃんと考えて作る
お花屋さんの アピールポイントは 商品が安いところ
![Page 86: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/86.jpg)
ちゃんと考えて作る
お花屋さんの アピールポイントは 商品が安いところ
安いけど花の品質は 悪くない!
![Page 87: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/87.jpg)
ちゃんと考えて作る
お花屋さんの アピールポイントは 商品が安いところ
安いけど花の品質は 悪くない! なら花を綺麗に
見せたらどうか?
![Page 88: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/88.jpg)
ちゃんと考えて作る
プチプラ! 素敵なお花
●●花屋
色々な点を考慮したデザイン
![Page 89: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/89.jpg)
ちゃんと考えることで、 “根拠”のある提案が出来る!
![Page 90: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/90.jpg)
ちゃんと考えることで、 “根拠”のある提案が出来る!
説得力も倍増!
![Page 91: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/91.jpg)
まとめ
![Page 92: Shiteitoudan2015 kamio](https://reader031.vdocuments.site/reader031/viewer/2022030115/589c3fd11a28abec478b68af/html5/thumbnails/92.jpg)
• 考えなしに作らない
• 考えて、デザインに “根拠” を作る
• “根拠”があると、説得力のあるデザインになる