SlideShare a Scribd company logo
1 of 32
Download to read offline
ゼロから始めるWebデザイン
HELLO!WEB!TOKYO #2
◉ Marcorio Luiz Antonio Guedes Junior
2016.01.14
Web designer ? + α
マルコリオ ルイス アントニオ ゲディス
Nameー
ス ジュニオル
( 福本 ルイス )
株式会社ヌーサイト / Webデザイナー
Workー
絵を描いたり、コラージュ作品を作ったり
Activity ー
ブラジル生まれ広島育ち
1989 ー
福岡の大学でデザインを学ぶ
2008 ー
福岡でデザイナーとして2年間働く
2012 ー
マルコリオ一族、全員ブラジルへ帰る
2014 ー
10ヶ月後ブラジルから上京して
Webデザイナーへ
2014 ー
1. お仕事について
株式会社ヌーサイト ー
nousite,inc.
Web site ー
App ー
nousite,inc.
Etc ー
nousite,inc.
Etc ー
nousite,inc.
Etc ー
nousite,inc.
2. お仕事の流れ
作る目的を考える
①要件定義 ー
骨組み・ワイヤーを作る
②情報設計 ー
ソフトを使って画面を作り込む
③デザイン ー
ブラウザで見れるようにする
④コーディング ー
作る目的を考える
( ディレクター・デザイナー )
①要件定義 ー
骨組み・ワイヤーを作る
( ディレクター・デザイナー )
②情報設計 ー
○○○○○○
キャンペーン バナー
(Gakunin)
新着情報
プライバシーポリシー 個人情報の取り扱いについて 運営会社
Copyright © 2015-2016, gakuwari on�line, Japan All Rights Reserved.
新着情報 参加校一覧 サービスプロバイダ一覧○○○○○○○とは?
小サイズバナー
Myページ
新規会員登録
Footer
Logo
ソフトを使って画面を作り込む
( デザイナー )
③デザイン ー
ブラウザで見れるようにする
( コーダー )
④コーディング ー
Web site ー
App ー
nousite,inc.
喜んでもらえたとき
Point 01 ー
成果がでたとき
Point 02 ー
「次の案件もルイスさんで!」と依頼されたとき
Point 03 ー
徹夜明けのビールを飲んとき
Point 04 ー
3. デザイナーになりたい方へ
とにかく作品を作って数を増やす
受けにくる人は多いけれども
デザイナーになりたいって言うだけで
何も見せててくれない
制作会社の面接でよく聞いたこと ー
作品を多く見せること
デザインが好きであること
情熱をもっていること
大事なのは ー
4. どうやって作っていけばいいのか
制作ソフトを用意
①準備 ー
作る対象をみつける( ランサーズで探すのもアリ )
②案件 ー
ギャラリーサイトで様々なサイトを研究して、
参考にしながら制作していく
③デザイン ー
制作ソフトを用意
①準備 ー
作る対象をみつける
( ランサーズで探すのもアリ )
②案件 ー
http://www.lancers.jp/
ギャラリーサイトで
様々なサイトを研究して、
参考にしながら制作していく
③デザイン ー
http://io3000.com/
5. +αの部分
Collage Art ー
Events ー
Goods ー Portfolio Site ー
Live painting ー
Thanks.

More Related Content

What's hot

コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインHiroyuki Makishita
 
今更はじめるQuartz Composer
今更はじめるQuartz Composer今更はじめるQuartz Composer
今更はじめるQuartz Composer祐磨 堀
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本Takuya Nishitani
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックAkiko Kurono
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門正樹 平野
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方Reimi Kuramochi Chiba
 
20160124_GPL勉強会
20160124_GPL勉強会20160124_GPL勉強会
20160124_GPL勉強会rie05
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎Masayuki Abe
 
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡Garyuten
 
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのかRedmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか祐磨 堀
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランSasaki Kouhei
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりtomoakitomono
 
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザインNaoki Aoyama
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
 
PMの立ち位置について
PMの立ち位置についてPMの立ち位置について
PMの立ち位置についてSSK
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン力也 伊原
 
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ祐磨 堀
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道Yusuke Amano
 
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さんスクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さんDIVE INTO CODE Corp.
 
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。uenoyuuki
 

What's hot (20)

コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
今更はじめるQuartz Composer
今更はじめるQuartz Composer今更はじめるQuartz Composer
今更はじめるQuartz Composer
 
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
 
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニックデキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
 
聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門聞いて覚えるマテリアルデザイン入門
聞いて覚えるマテリアルデザイン入門
 
これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方これからはじめるWebプロジェクトマネジメント - 計画の立て方
これからはじめるWebプロジェクトマネジメント - 計画の立て方
 
20160124_GPL勉強会
20160124_GPL勉強会20160124_GPL勉強会
20160124_GPL勉強会
 
javascriptの基礎
javascriptの基礎javascriptの基礎
javascriptの基礎
 
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡
地方のWeb制作会社が backlogなしで 仕事できない理由 #jbug #jbug福岡
 
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのかRedmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
Redmine勉強会vol.1 なぜ組織にはドキュメンテーションが必要なのか
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン最速でリリースするためのAndroidアプリデザイン
最速でリリースするためのAndroidアプリデザイン
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
PMの立ち位置について
PMの立ち位置についてPMの立ち位置について
PMの立ち位置について
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れ
 
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
 
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さんスクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
スクールと現場のハザマ 2018 登壇資料 塩井 美咲さん
 
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
 

Similar to HELLO!WEB!TOKYO #2 ゼロから始めるWebデザイン

急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一schoowebcampus
 
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)Members_corp
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方Tomoko Nishina
 
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークスフリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークスYuki Suzuki
 
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_1501170からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117direkyo-kyusyu
 

入社4ヶ月 新入りPdMの取り組み

入社4ヶ月 新入りPdMの取り組み
入社4ヶ月 新入りPdMの取り組み

入社4ヶ月 新入りPdMの取り組みTsuyoshi Nagahashi
 
初めてのGIT超入門
初めてのGIT超入門初めてのGIT超入門
初めてのGIT超入門Tomoya Koyanagi
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-techmasaaki komori
 
Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppWeb開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppTomomitsuKusaba
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術Tomoki Hasegawa
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトYuya Toida
 
0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編Takehiko Goshi
 
0 d4s 20140323_共有用
0 d4s 20140323_共有用0 d4s 20140323_共有用
0 d4s 20140323_共有用Takehiko Goshi
 
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜Tatsuya Miyauchi
 
2004チームspec_紹介資料
2004チームspec_紹介資料2004チームspec_紹介資料
2004チームspec_紹介資料masaki sukeda
 
八王子 WordPress Meetupのオーガナイザーになりました
八王子 WordPress Meetupのオーガナイザーになりました八王子 WordPress Meetupのオーガナイザーになりました
八王子 WordPress MeetupのオーガナイザーになりましたNaotaka Saito
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳Chihiro Tomita
 
PMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチJunNomura1
 
PMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチJunNomura1
 

Similar to HELLO!WEB!TOKYO #2 ゼロから始めるWebデザイン (20)

急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
急増するネット動画配信ビジネス「進化の歴史」と「今後の可能性」を読み解く 先生:藤川真一
 
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)
メンバーズグループ福岡Meetup/リモート常駐している派遣の話(和気登志子)
 
ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方ChatworkのUXリサーチと プロダクトへの生かし方
ChatworkのUXリサーチと プロダクトへの生かし方
 
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークスフリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
フリーランスはじめました - 【初心者向けデザイン講座】デザインのスキルを身につけてお仕事をする方法!東洋美術学校×クラウドワークス
 
0からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_1501170からのwebディレクション講座 福岡 設計編_150117
0からのwebディレクション講座 福岡 設計編_150117
 
2020 cocone
2020 cocone2020 cocone
2020 cocone
 

入社4ヶ月 新入りPdMの取り組み

入社4ヶ月 新入りPdMの取り組み
入社4ヶ月 新入りPdMの取り組み

入社4ヶ月 新入りPdMの取り組み
 
初めてのGIT超入門
初めてのGIT超入門初めてのGIT超入門
初めてのGIT超入門
 
groundwork-pasona-tech
groundwork-pasona-techgroundwork-pasona-tech
groundwork-pasona-tech
 
Web開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor AppWeb開発者が始める .NET MAUI Blazor App
Web開発者が始める .NET MAUI Blazor App
 
iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術iOSアプリ制作ツールアプリビルダーを支える技術
iOSアプリ制作ツールアプリビルダーを支える技術
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
 
0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編0からのWebディレクション for Students 3月講義 WBS編
0からのWebディレクション for Students 3月講義 WBS編
 
0 d4s 20140323_共有用
0 d4s 20140323_共有用0 d4s 20140323_共有用
0 d4s 20140323_共有用
 
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜
営業・プログラミング未経験の素人が3ヶ月で起業してWebサービスを作った経緯〜Communiture meetup〜
 
2004チームspec_紹介資料
2004チームspec_紹介資料2004チームspec_紹介資料
2004チームspec_紹介資料
 
八王子 WordPress Meetupのオーガナイザーになりました
八王子 WordPress Meetupのオーガナイザーになりました八王子 WordPress Meetupのオーガナイザーになりました
八王子 WordPress Meetupのオーガナイザーになりました
 
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
 
PMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチ
 
PMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチ
 

HELLO!WEB!TOKYO #2 ゼロから始めるWebデザイン