SlideShare uma empresa Scribd logo
1 de 92
Baixar para ler offline
新米デザイナになるまで
師弟登壇2015
GMOペパボ株式会社 ¦ 神尾 千波
神尾 千波
ちーちゃん ¦ JUGEM Designer
@chinu_t
http://chinami266.jugem.jp/
作ることが好き ペパボが好き
だからペパボのデザイナになりました!
2015年度新卒デザイナ
ちーちゃん
@chinu_t
おさつ
@osatsu_032
充実の講師陣
モハゑさん
@moha_ariyoshi
まじじさん
@shirtskirt
咲さん
@satosio
デミさん
@demiflare168
しょこさん
@chocolatina
メンター メンター
ご意見番 ご意見番 ご意見番
デザイナ研修の流れ
6月 7月 8月 9月 10月
カラーミーショップ
30days Album
「誰のためのデザイン?」読書会
HTML/CSS/Ruby on Rails講座
Shiteitoudan2015 kamio
ネットでお店を開きたい方を支援する、ネットショップ運営サービス
http://shop-pro.jp/
「カラーミーショップの
リスティング広告用の
バナーを作成してください」
「自由に作っていいですよ!」
ということで、
自由に作ってみました!
まずは案出し
「はじめの一歩」案
ネットショップ店長になって、はじめの一歩を踏み出そう!
Shiteitoudan2015 kamio
カラーミーショップっぽくないので、没に
「ビッグドリーム掴もう」案
ネットショップを開いて、ビッグドリームを掴もう!
Shiteitoudan2015 kamio
ネットショップは宝くじじゃないので没に
「何考えてたかさっぱり分からない」案
自分でも分かりませんでした。
Shiteitoudan2015 kamio
ことごとく没に。
最終的に、
ネットショップを無料で始めて、ここまで大きくなりました!
というストーリー仕立てに
案を元にデザイン作成
最初に出した案が、
Shiteitoudan2015 kamio
文字多い!
色の迷走
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
レイアウトも苦戦
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
Shiteitoudan2015 kamio
自由に作っていても、

中々上手くいかない。
どうしてだろう?
メンターから、
「デザインには全て、意味がある」
意味のあるデザイン って、何だろう?
モヤモヤを抱えたまま、
カラーミーショップでの
研修は終了
Shiteitoudan2015 kamio
大切な思い出を預かってくれる写真共有サービス
http://30d.jp/
キャンペーンバナーを作っていたとき
ロゴは2パターン
Shiteitoudan2015 kamio
どれもロゴは縦で見せるものを使用
文字として読ませないようにしている
ロゴの向きひとつで、
意味が大きく変わる!
デザインの意味って、

こういうことか!
サンプルアルバムページの改修
アルバムのサンプルが見られるページ
目に入ってきやすいのは、
Shiteitoudan2015 kamio
目に付く所をクリックすると、
合言葉の入力を求められる
あ、合言葉って、なんだ…!?
実は先ほどのページに、
合い言葉が書かれていた!
合い言葉がアルバムのパスワード代わりに
このページの問題点として、
• 合い言葉を入力してアルバムを見る

ということに気づかない
• 合い言葉が目に入ってこない
結果、ページの離脱に繋がっていた
Shiteitoudan2015 kamio
合い言葉 という存在を知らせる役割
合い言葉 が前よりも目立つ位置へ
合い言葉 の案内をボタンにも加えた
写真の幅を広くとることで、
使用シーンが想起しやすいように
自分で考え、提案して
デザイン出来るように!
最初は自分のデザインに関して、
なんとなく で作っていたので、
良さそう かわいい 好き
自信を持って説明出来なかった
良さそう? かわいい? 好き?
当然、誰にも伝わらないデザインばかり
? ? ?
「自由に作っていいよ!」と言われても
考えなし に作ってはいけない!
例えば
とあるお花屋さんのバナーを作るとき
考えなしに作る
花屋だし…
考えなしに作る
お花いっぱい散りばめとこ!
●●花屋
ちゃんと考えて作る
お花屋さんの
アピールポイントは
商品が安いところ
ちゃんと考えて作る
お花屋さんの
アピールポイントは
商品が安いところ
安いけど花の品質は
悪くない!
ちゃんと考えて作る
お花屋さんの
アピールポイントは
商品が安いところ
安いけど花の品質は
悪くない!
なら花を綺麗に
見せたらどうか?
ちゃんと考えて作る
プチプラ!
素敵なお花
●●花屋
色々な点を考慮したデザイン
ちゃんと考えることで、
根拠 のある提案が出来る!
ちゃんと考えることで、
根拠 のある提案が出来る!
説得力も倍増!
まとめ
• 考えなしに作らない
• 考えて、デザインに 根拠 を作る
• 根拠 があると、説得力のあるデザインになる

Mais conteúdo relacionado

Mais procurados

Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りMasayuki Abe
 
ペアプロどうでしょう?
ペアプロどうでしょう?ペアプロどうでしょう?
ペアプロどうでしょう?hiroyuki Yamamoto
 
WordCampKobe2013 Example employment WordPress site for Director megane
WordCampKobe2013 Example employment WordPress site for Director meganeWordCampKobe2013 Example employment WordPress site for Director megane
WordCampKobe2013 Example employment WordPress site for Director meganeHajime Ogushi
 
ペアプログラミング?
ペアプログラミング?ペアプログラミング?
ペアプログラミング?You&I
 
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36Erina Takei
 
フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44Erina Takei
 
未経験古本屋店員が エンジニアになっちゃった話
未経験古本屋店員が エンジニアになっちゃった話未経験古本屋店員が エンジニアになっちゃった話
未経験古本屋店員が エンジニアになっちゃった話Shuhei Yamashita
 
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようHtml5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようMasayuki Abe
 
Wordbench愛媛・WordCamp Tokyo 2015レポート
Wordbench愛媛・WordCamp Tokyo 2015レポートWordbench愛媛・WordCamp Tokyo 2015レポート
Wordbench愛媛・WordCamp Tokyo 2015レポートねこみみ 隊長
 
チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~hiroyuki Yamamoto
 
WebエンジニアとWebディレクターを兼任してわかった3つのこと
WebエンジニアとWebディレクターを兼任してわかった3つのことWebエンジニアとWebディレクターを兼任してわかった3つのこと
WebエンジニアとWebディレクターを兼任してわかった3つのことSatoshi Moriya
 
○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)Atsushi Harada
 
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25Erina Takei
 
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」hiroyuki Yamamoto
 
「実務系」エンジニアとは?
「実務系」エンジニアとは?「実務系」エンジニアとは?
「実務系」エンジニアとは?galluda
 
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット株式会社 プロコミット
 
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」Yosuke Homma
 
ご提案資料
ご提案資料ご提案資料
ご提案資料A A
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方Reimi Kuramochi Chiba
 
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)Tomoyuki Sugita
 

Mais procurados (20)

Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
ペアプロどうでしょう?
ペアプロどうでしょう?ペアプロどうでしょう?
ペアプロどうでしょう?
 
WordCampKobe2013 Example employment WordPress site for Director megane
WordCampKobe2013 Example employment WordPress site for Director meganeWordCampKobe2013 Example employment WordPress site for Director megane
WordCampKobe2013 Example employment WordPress site for Director megane
 
ペアプログラミング?
ペアプログラミング?ペアプログラミング?
ペアプログラミング?
 
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
 
フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44
 
未経験古本屋店員が エンジニアになっちゃった話
未経験古本屋店員が エンジニアになっちゃった話未経験古本屋店員が エンジニアになっちゃった話
未経験古本屋店員が エンジニアになっちゃった話
 
Html5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けようHtml5fun@東京 Bootstrapにアニメーションを付けよう
Html5fun@東京 Bootstrapにアニメーションを付けよう
 
Wordbench愛媛・WordCamp Tokyo 2015レポート
Wordbench愛媛・WordCamp Tokyo 2015レポートWordbench愛媛・WordCamp Tokyo 2015レポート
Wordbench愛媛・WordCamp Tokyo 2015レポート
 
チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~
 
WebエンジニアとWebディレクターを兼任してわかった3つのこと
WebエンジニアとWebディレクターを兼任してわかった3つのことWebエンジニアとWebディレクターを兼任してわかった3つのこと
WebエンジニアとWebディレクターを兼任してわかった3つのこと
 
○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)○○したら受託開発が180°変わった(10分版)
○○したら受託開発が180°変わった(10分版)
 
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
 
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」
第76回名古屋アジャイル勉強会「半分の時間で二倍の成果を出す仕事術!」
 
「実務系」エンジニアとは?
「実務系」エンジニアとは?「実務系」エンジニアとは?
「実務系」エンジニアとは?
 
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット
採用サイトの作成・構築なら 『採用サイトまるごとパッケージ』|株式会社プロコミット
 
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
 
ご提案資料
ご提案資料ご提案資料
ご提案資料
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方
 
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
はじめてのチーム開発 〜失敗だらけの1年間から学んだもの(仮)
 

Semelhante a Shiteitoudan2015 kamio

49 ネットショップ開店スクール
49 ネットショップ開店スクール49 ネットショップ開店スクール
49 ネットショップ開店スクールec-campus
 
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーいまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーAsuka Kobayashi
 
ビジネスマトリクス「売上創造塾」 1期生募集
ビジネスマトリクス「売上創造塾」 1期生募集ビジネスマトリクス「売上創造塾」 1期生募集
ビジネスマトリクス「売上創造塾」 1期生募集businessmatrix-co-jp
 
お金をかけずにお客様が集まるホームページをつくる方法教えます。
お金をかけずにお客様が集まるホームページをつくる方法教えます。お金をかけずにお客様が集まるホームページをつくる方法教えます。
お金をかけずにお客様が集まるホームページをつくる方法教えます。新一 佐藤
 
センスに頼らないブログデザイン術
センスに頼らないブログデザイン術センスに頼らないブログデザイン術
センスに頼らないブログデザイン術Haruna Kitakoji
 
The販促2
The販促2The販促2
The販促2ec-campus
 
ピクト図解(R)表記ルールで作成したビジネスモデル事例
ピクト図解(R)表記ルールで作成したビジネスモデル事例ピクト図解(R)表記ルールで作成したビジネスモデル事例
ピクト図解(R)表記ルールで作成したビジネスモデル事例PICTO ZUKAI
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事kenji goto
 
rayout Inc. company profile
rayout Inc. company profilerayout Inc. company profile
rayout Inc. company profileSOTAYOSHIDA1
 
何ができるのか
何ができるのか何ができるのか
何ができるのかNAGAI RYO
 
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜Aimi Shinohara
 
デザイナー出身の私がプロダクトマネージャーになって良かったこと
デザイナー出身の私がプロダクトマネージャーになって良かったことデザイナー出身の私がプロダクトマネージャーになって良かったこと
デザイナー出身の私がプロダクトマネージャーになって良かったことAkane Yamarin
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考えるkenji goto
 
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒントユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒントKazunori Tokoo
 
20180801 bigbeat live_kickoff
20180801 bigbeat live_kickoff20180801 bigbeat live_kickoff
20180801 bigbeat live_kickoffHideki Ojima
 
自社を巻き込みやがれ!イチから勉強会を開催する方法
自社を巻き込みやがれ!イチから勉強会を開催する方法自社を巻き込みやがれ!イチから勉強会を開催する方法
自社を巻き込みやがれ!イチから勉強会を開催する方法Reimi Kuramochi Chiba
 
150806 カスタマージャーニーマップワークショップ
150806 カスタマージャーニーマップワークショップ150806 カスタマージャーニーマップワークショップ
150806 カスタマージャーニーマップワークショップ直人 相沢
 
Webデザイナーが考えておきたいSEOのこと
Webデザイナーが考えておきたいSEOのことWebデザイナーが考えておきたいSEOのこと
Webデザイナーが考えておきたいSEOのことTetsuya Ihata
 

Semelhante a Shiteitoudan2015 kamio (20)

49 ネットショップ開店スクール
49 ネットショップ開店スクール49 ネットショップ開店スクール
49 ネットショップ開店スクール
 
いまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナーいまさら聞けないjQuery入門for デザイナー
いまさら聞けないjQuery入門for デザイナー
 
ビジネスマトリクス「売上創造塾」 1期生募集
ビジネスマトリクス「売上創造塾」 1期生募集ビジネスマトリクス「売上創造塾」 1期生募集
ビジネスマトリクス「売上創造塾」 1期生募集
 
お金をかけずにお客様が集まるホームページをつくる方法教えます。
お金をかけずにお客様が集まるホームページをつくる方法教えます。お金をかけずにお客様が集まるホームページをつくる方法教えます。
お金をかけずにお客様が集まるホームページをつくる方法教えます。
 
センスに頼らないブログデザイン術
センスに頼らないブログデザイン術センスに頼らないブログデザイン術
センスに頼らないブログデザイン術
 
The販促2
The販促2The販促2
The販促2
 
ピクト図解(R)表記ルールで作成したビジネスモデル事例
ピクト図解(R)表記ルールで作成したビジネスモデル事例ピクト図解(R)表記ルールで作成したビジネスモデル事例
ピクト図解(R)表記ルールで作成したビジネスモデル事例
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 
rayout Inc. company profile
rayout Inc. company profilerayout Inc. company profile
rayout Inc. company profile
 
何ができるのか
何ができるのか何ができるのか
何ができるのか
 
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
 
新潟県長岡市Facebookセミナー2時間in越路商工会
新潟県長岡市Facebookセミナー2時間in越路商工会新潟県長岡市Facebookセミナー2時間in越路商工会
新潟県長岡市Facebookセミナー2時間in越路商工会
 
デザイナー出身の私がプロダクトマネージャーになって良かったこと
デザイナー出身の私がプロダクトマネージャーになって良かったことデザイナー出身の私がプロダクトマネージャーになって良かったこと
デザイナー出身の私がプロダクトマネージャーになって良かったこと
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒントユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
ユーザーシナリオとの対話とターゲティング広告から見えるコンテンツ戦略のヒント
 
20180801 bigbeat live_kickoff
20180801 bigbeat live_kickoff20180801 bigbeat live_kickoff
20180801 bigbeat live_kickoff
 
自社を巻き込みやがれ!イチから勉強会を開催する方法
自社を巻き込みやがれ!イチから勉強会を開催する方法自社を巻き込みやがれ!イチから勉強会を開催する方法
自社を巻き込みやがれ!イチから勉強会を開催する方法
 
150806 カスタマージャーニーマップワークショップ
150806 カスタマージャーニーマップワークショップ150806 カスタマージャーニーマップワークショップ
150806 カスタマージャーニーマップワークショップ
 
Manabiaukai2019-02-02
Manabiaukai2019-02-02Manabiaukai2019-02-02
Manabiaukai2019-02-02
 
Webデザイナーが考えておきたいSEOのこと
Webデザイナーが考えておきたいSEOのことWebデザイナーが考えておきたいSEOのこと
Webデザイナーが考えておきたいSEOのこと
 

Shiteitoudan2015 kamio