SlideShare a Scribd company logo
こんな感じで
Webデザインを
教えてます
習ったことは
ありませんが
2015-12-13 関西フロントエンドUG 年忘れLT大会
屋号 Sponge Design
加地 京(本名)
  sponge_design
仕事 Webディレクション
IA・Webデザイン
コーディング
専門学校の非常勤講師
↑すんごい前の写真
スポンジデザイン
01. 自己紹介
↑すんごい前の写真
屋号 Sponge Design
加地 京(本名)
  sponge_design
仕事 Webディレクション
IA・Webデザイン
コーディング
専門学校の非常勤講師
スポンジデザイン
01. 自己紹介
謎の何か
(センスとか呼ばれる)
知 識
謎
やる気
Web業界なう
レイアウト・配色の
理論
アプリの操作方法
ググりかた
html・css
一般教養
etc.
継続させるのは
むずかしい
02. Webデザイナーになるために必要なもの
注)勝手に
私が思ってる
早 楽 安
?
03. 目標!
Webデザイン
Webディレクション
限られた時間でweb制作の全てを教えるのは無理なので、
はじめの半年で自分で勉強できるサイクルを
身につけてもらうことを目指しています。
入学 9月 2年生(4月) 9月 卒業(3月)
がっつり教える ひたすら制作 卒業制作
04. 教えていること・期間
謎の何か
(センスとか呼ばれる)
知 識
謎
やる気
Web業界なう
レイアウト・配色の
理論
アプリの操作方法
ググりかた
html・css
一般教養
etc.
継続させるのは
むずかしい
05. がっつり期間にやること
まず
これを説明
と、
「必要な情報を得る方法」
「わからないことの調べ方」
を教えます
ググれる者が
デザインを制す
(たぶん)
05. がっつり期間にやること
05. がっつり期間にやること
その後は自分で考えたり調べたりしながら課題をもくもく。
・サイト内の要素(コンテンツ)とレイアウトを分析
・PCサイトからモバイルのワイヤーフレームを作成
・(超簡易版)ペルソナとユーザーシナリオの作成
・グラフィックアプリでデザイン
・提案書の作成
・時間の許す限り過去の制作物の見直し
・学校外の人に見せる課題(ポートフォリオ)を制作 �etc.
「細かいパーツの作り方」とか
「アプリの使い方」とか
わざわざオシエナイ
自分で調べられる・勉強できることには時間を取らない。
課題にはクライアントがいないから効果測定もできないし�。
06. 教えないこと
一番はじめのデザイン課題
卒業制作
07. 結果
若者って、すごい。
っすね
07. 結果
サイト更新ご担当者・非デザイナー対 象
訪問(スポット/定期)+オンライン方 法
Sponge Designでは
デザイン&制作のスキルアップを
お手伝いします。
ご相談は
お気軽に!!
おまけ
ありがとうございました。

More Related Content

What's hot

WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とは
Mignon Style
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
 
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
Itsuki YANAGIMACHI
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
 
3 presen
3 presen3 presen
3 presen
asaoeiji
 
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
Aimi Shinohara
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
Kumiko SHIMIZU
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
Junko Nukaga
 
フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44
Erina Takei
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのもの
masaaki komori
 
Lp14 komori
Lp14 komoriLp14 komori
Lp14 komori
masaaki komori
 
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
Marie Suenaga
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
Yosuke Homma
 
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
Sunami Hokuto
 
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
Kumiko SHIMIZU
 
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
Sunami Hokuto
 
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
schoowebcampus
 
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
プログラミングをする パンダ
 

What's hot (20)

WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とは
 
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
 
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
伊邪那岐流カスタムフィールド超絶技巧を自社フレームワークで1から体験してみた
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 
3 presen
3 presen3 presen
3 presen
 
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
【学生向け】就活ポートフォリオビフォー・アフター 〜書類審査を突破するポートフォリオを作ろう〜
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
 
フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44フリーランスミートアップを開催してきた@Creators MeetUp #44
フリーランスミートアップを開催してきた@Creators MeetUp #44
 
Zen-Codingはみんなのもの
Zen-CodingはみんなのものZen-Codingはみんなのもの
Zen-Codingはみんなのもの
 
Lp14 komori
Lp14 komoriLp14 komori
Lp14 komori
 
Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!Photoshopで効率よくデザインしよう!
Photoshopで効率よくデザインしよう!
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
 
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
板書スライドの問題を解決する授業設計とは(2015PCカンファレンス)
 
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
 
デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化デザイナーさんでもできる Browsersync からはじめる作業効率化
デザイナーさんでもできる Browsersync からはじめる作業効率化
 
授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計授業外・教室外の学習を見据えた教材設計
授業外・教室外の学習を見据えた教材設計
 
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
【再放送】WEBデザインのためのPhotoshop【WEBデザイナー学部】
 
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
エンジニアが人に言われることあるある(副題「LaravelとReactで開発したい!」)
 

Similar to 習ったことはありませんがこんな感じでWebデザインを教えてます

これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランSasaki Kouhei
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮schoowebcampus
 
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
Yoshiko Sarakai
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
rie05
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦sogawaminoru
 
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
masaaki komori
 
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
Kazuma Kadomae
 
About Design Manager
About Design ManagerAbout Design Manager
About Design Manager
Marino Yokoi
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
 
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
Makiko M
 
失敗から学ぶUXへの取り組み
失敗から学ぶUXへの取り組み失敗から学ぶUXへの取り組み
失敗から学ぶUXへの取り組み
Daichi Ono
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
典子 松本
 
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
 

Similar to 習ったことはありませんがこんな感じでWebデザインを教えてます (20)

これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
 
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
 
141219 まにフェス
141219 まにフェス141219 まにフェス
141219 まにフェス
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介機械学習に取り組んでいる企業の紹介
機械学習に取り組んでいる企業の紹介
 
About Design Manager
About Design ManagerAbout Design Manager
About Design Manager
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!作品は誰かに見てもらった方が良い!
作品は誰かに見てもらった方が良い!
 
失敗から学ぶUXへの取り組み
失敗から学ぶUXへの取り組み失敗から学ぶUXへの取り組み
失敗から学ぶUXへの取り組み
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
 
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 

習ったことはありませんがこんな感じでWebデザインを教えてます