Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

aclogを支えるデザイン

3,483 views

Published on

Students Lightning Talk で「aclogを支えるデザイン」という内容でLTしたときのスライドです。
http://connpass.com/event/13064/
LTは http://www.ustream.tv/recorded/60445302 で見られます

Published in: Design
  • Dating direct: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

aclogを支えるデザイン

  1. 1. QCー。g君 支 え る デ'ザ'イ 'ノ ろ つ と @aayh
  2. 2. ーNDEX 自己紹介 縄倦品紹介 acー。gを支えるデザイン デザイ ンするって何 ? デザイ ンセンスの磨き方
  3. 3. 縄贋ブ, 癖 丿( 」帆]{一 〟一]`才 汁 』}m嬲 離 繍凵ゎ …」 奪 〝, 、}繍 藻 弥 [一 『 ` ~ }」{一 ト」 ー 丶「 ー 〟 ^ 隷 〟" 嚼 ~應{ 〝ユ … 繍 {』 』 杓 「「 川'{ 繍, 〝 癬 、グ 「ー ゝ』 【 『}丶ハ ` 一 $ - 蓑繍 }} 柵〝 -「 沁 『繍 寸 卿〝 口{ m琲 藻 、' 』『 』」`ー 【 」L ~〝ー 畔 "~ー 】奮 〟剤ノ 隷ー 〟虻 則 瓜{ りゝ,,【 讐「 } 菰 ー隷 柔 隷, 「 』『 《【一 欟, 丶丶)} 〝 繍【 '〝 丿 〟 浴, づノ, ー
  4. 4. 〉丶 ー ー 「 「 二N^ 「 二ー^ 「」 工 〝 ム 隷 「 † ー」 r}「 乱 丶ー, 「
  5. 5. 丁 隷' 「)〝ー ー ー卜丶 債L丁浴” ~ず仁一『 '遣Lニ昆壮管〝ー“〔〝ー〟L量L Yず g一ー二ー上耆遭 ー】 ー `レ 〉 〉・'yッ 野 ' '一〔…ー上三 嬲ー!〝 」ー {昆
  6. 6. 卜*讐債轍†~hc'卜ォ}〟丁g} ム从嬲輸,ー 〟 ,*)繍, `K, 一 ,亡亡〔 `{ 「「【 , 隷 ` L `L隷} ー ` ,〈 戸 」 ー「 」 ィy丿 ヰ〔 〈ハ〝 ( ー 汎山磁一 ,ー~一 則 《, 「刊 系 繍「 ,. 引「 }繍} 離ハ一 艶 ' 賽 “ [一 ー で{ ` 〟 〔/,)ー 丶〈 に # `人一 攣ー」 f{ 隷「 〈 , { ー仁 ,,, '/ ,賽, ゴ ゝ”, Z ー[【 }} },~} 』'一 = ノ〝 L曝 ヾ/, 讐〔 " ,, ,, 「 `」 ” } 隷 」” ” 一 `】 y y ^,y・J,” j「一 」〔 ^非 〝 肛 〉y 'ー「{ ム「y' 」 ' 」〟】 丿一 吐 〉, -「ー ~ ” {管 〝 樹 ,.「{ ゃ ,【 ー ,,ノ Lー 佇』[ [ー 訃 /上』 ' ”」 (忙〔{ ー一 L浴, 垢 〔一 【`〉`、【 ぃ 嬲 , ぃ , 〟董[賽 , 」 】 ーー戸丶, 〕【{〝 〈訳功 〟"隷 ノ 繍一ーーゾ〟 ー藻, 廿r
  7. 7. 鼻〟 ,丿,,ぴ縄ーー一 〝丿 ^'牙'…'童.巳裏 す す z土 」~/励〝
  8. 8. 〔 麦〔`ー隷離隷昆k昆' 「〝 こ{ 昆一橿〔 甘一『〝纈管】 〟管麦〔 ー_ー二ー」 告管_橿 昆一但 {}〝 】一f '管 齔`^
  9. 9. 縄繍縄」”,ユ、ーッ", ~` (〟 ' ~ フ一ダ^筈鱧翼 > ' ーノ・丶'ーゝ,' NeWs NeW A[bum 2縄=撃)鱒翼 Eー D。【ad。 ーSeーfーtitー鯛 Aーbumー C87 「Eー D。rad。 一Seげ一t…嬲 Aーbum一」 ティザ「サイ ト公属 ー 〉 ^ } ,〟 2。M.。g〟。B 3rdア丿レノ文ム ヰriumphus」 '丿リ一ス ! 20M.05.}奮 2ndア丿L丿ヾム 「R蔓venture」 '丿リース ! 2D=・撃.】轟 レ一べ丿L設立& ーstア丿レ丿てム 「EーD。radD 'pr。ー。gue一」 リ リ一 ス!
  10. 10. 「〝L`丶 野 ^ー「〝ーL}`ーー退 ” ゝ L (】ーーー〝ー `二 攫i〝L具i一L二亡篇『 〝 ーーL ]二〔昆ーj.士「麦〔 〝
  11. 11. ーーiーiー'ー{'ーL"ーー「 『ーL
  12. 12. 壽見妻貢免曹編菓主旨ー詞 20ー4 中国言吾で書ヵゝれブこ世界壽刀のAViUtー角牢説書 表紙デザィ ン 香港で実際蜃こ販売されてるらししゝです
  13. 13. 管L^『昆〝退〔澪量〝, `ヴ [} 昆ー〝hj二ミ壮昆『' ー{ー〝ー_【門 』麦区.二昆 ー〝h〝『〝野】ごー昆一i燐二 奮穿' 江"隷Y〝野隷亡〝七ー野ー〝亡隷ゞ=覆喜 [〝〝 ,〝〝垢〝^' 老 〔〝』'讐一讐j二麦〔典『'!〝〔一ー一ー計* 士'Cー一『 工ネ讐鵬翼〝管ニ`二七二〔'一蔓}縄 (遭~麦麦閤'[` ネ計ゝ 退麦一門ー(ゴ“牡こ讀寶“麦麦『〝 薄ゝ~「』翼五こサ鷺じー一ー]翼垢隷ギ~垢〝〝〝〝訃寶訃` 麦昆,顧 隷 ー野麦〝'}ゞ『 〟野” 典退退型 声`一「〝 ~ブ竈〝責;」鷺疆一『~'麦“ キ 〟ーず 卜ず 剤 /
  14. 14. Gcー。g ど [‡ 讐可 ぞ' Favstarみナこ 野 ゝ な サ イ ト ふぁ縄ま`とRTを収集して 今話題のッイートを発見 ふぁ縄ま`通知機貢璧もあるよ aCー0g・k0ba789'C0m
  15. 15. n(( ゥ G ==' 7フリ aCー鞄 抽(ー縄g ~ 】(ー縄g 二 翼【ー。g〈k。b轟7翼9'C0m QRゴード 閤 ニゴ二寸チrンネ丿レ Q マ〝〝 奮! / Lゝ繍 怖〝ss This M。biーeT〝uch 日蕁謡化 而ーリスト ヨCー〇g 鳶Sa C憂。[ロ scrv『cc 。{ 「avstar, 簾T咽 ヒ 管 了〝ーーT樓轟$〝r u 〝^團嘔團Xョ 、) 二 奮の伯のブックマーク aD。しー ーDg`【
  16. 16. ハ(( 在 G 二=' ノプソ 爪恥ngー仮'~ N腑s【 ー 〟【ー鞭 ' `」 a(ー。g・k。ba7囗9・(。m丿mロ。ngゝ(ー/ーー爪eー4ne qRゴード 闔 ニゴ二ゴチ〝ンネ/レ Fy〝~sT〟`s 竄薫リス卜 M。~ー`〝T〝"c〟 日水吉ーヒ T=xー†〟〟ェ〝, 彙求ー ac‡。g Jnn)*t 穹e琥丸ng膂 饗^贋 m00ngi竈's NeWeS鸞 _ M。。NGー打 州ハg`rー 爪。。咀ー代 〟g〟〝”"g〝 〝 , 〟` iQuewLiveーyLaywt一サィト訪問者'こ強熱{なィン丿ゞクト を残すWebサィ 卜アニメーンョン ygMge【9d 2 ) . ・ ) m。。ngー仕'ーp/2。ー3/ー ー/ーquew", #m加ngー代 動画をご覧ぁ aVg,_aV ー'0 れ ー }。ーngd ロd ag。 2GV3ーーV D5 ヾD 52 56 Ec【〝Y。n 醗暑【 ーー爪e】ー【e ー ~ トA〉s 盧ーSCロVe「【BS d`sc。veysd by ロ`scロve「gd 凵sg「S M0。NGー打 凧。ng`n 喩 PcE.is- こし丶つ..-動くぞ。 Javascrip〝で作られアこ Wind。ws 3-0ノMac 。Sまで動 〈 PC工 ミ ユ レ一夕 m。。ngin.jp/2。ー3ノー ロノpce^js. .. ~m。。ngin ち ゃ ん と動 〈 ! 2G†3ー†Gー29 'D 32 22 Ec〔DV。〔 ーngn*」【 Q〝サ B! ヒ忙 〝3ノ桑く闔團階團X 三 ^ 造の他のブックマーク 川。nng代
  17. 17. aC[。g ac攫'。c蜜 C〇LLECT AC丁ーVー丁ーES 〇 AFTER
  18. 18. aC[0g T〇p TWeetS ^繍 ブ 魁丶 丁`「7丶巳`】'~】H ` マジでコレなんブどよなぁ、 ` 丶 (”へmヘ 」,) A`管 丁†「丁丁庁 垢`‡丁] AFTER ー2星座カヾ…巨でゎカ丶る。 これ余り~こも単髭屯な…言過ぎ る縄ナど自分の司りの人で考えると当ブこってるヵ丶も
  19. 19. デ'ザ~ィ ソ の フ"ロ セヌ、 依束頁を受&ナる acー。gって何ぞゃと自怯守自答 酉己色の箸央定 誉` " ー ` 資米斗探し ロゴデザイ ン レイアウト コーデイング` テスト ・ レピユー・納品
  20. 20. 自Fn『自答 acー。gのイメージやコンセフ”トを固める aCー。g iS ・'・?
  21. 21. コ ソ セ フ~ ー' 今言舌題のッイ ー トヵゞ集まる‡易戸斤 (縄明る 〟ゝ,' s(楽 し〟ゝ"
  22. 22. 西己芭 のラ丑ニ主 ~~明る~ゝ"~~楽し~〟" をと轟こヵゝくイ云える サ^料 て^璽.V薫}序ー*` アソ一 トカラ一 …三i竄オ襄】互縄】戸 #333333 :`土 塾譬f`測 『 三亡…廿サ声` …ラ 三亡3=縄 R 5ー G 5ー B 5ー
  23. 23. 〝賓 牢非主栞 し ネッ トサーフィ ンしブこり本屋才ラっブこり・・・ {吏えそうなァイデァを集める デザイン鬱ま0ヵゝら ー を生み出す挿テ為で&まなしゝ 資米斗探し縄ま必須!
  24. 24. ーn PieCeS 〝 〇〇〇 " " =麦 圃, ム ~〝=ー 鰹嶼憲縮 蟲〝 俸 VVS 〝 賽 ~翼 】(~ 'ー寶ー=!】艇_【蘭 譬帥】=弯 ニ璽 堂 」嬲ーー【嬲'r 。ne Time' sh。e shine' CredenZa W。rdPres暮 Theme 幽旦叫麗ー'
  25. 25. AwwwGrds 麦願 q 藻怯胴垢塙輔伴管董帯 =櫃泣牽" 療繍i〝'}ー薦 團剛篭唖ー鞍 鹸嗣棚 縄=籠訃 柵 動軸 揃榊'〟 su幽”y加n脈 〝〝ー禮瞰萬響】轣f軸誓薫軸卵縞翼薩嗣讐繭帥耐籠『董譚賠衝ヰ『轣菲 `讐`〝〈'〟〈'〟〈',轟浴={!退ず' 跚隷琢團爛(讐隷 〝ー翼糞翼…野【(畿ヾ =燐ー 曇藻譬愉ー謳讐ー讐滸{ 《「沈づ~~〟 ~漉【 'm 浮離ラ~〝愴 賃蓮縄』〟ず} '腱鞠『i『 〝騙ーA 鋤罰 齠ー『ー'隷 纈附f嗣'跚~~i奮 〝 ニ”' ”游' !矯}蠅'J退廷〝體警藻喚ー驛噛'ー峡
  26. 26. ;〝〝牽 る コ と @ 逸' ノー 丿 ィ 丿レ企編翼 “〝〝 ろっと 〝'隷 翼ー==dー=ロ/LggD Desーg【 G臓phー= D暮sーgn ノ We轟 Desーロ= 鷺饗【d亀「 Aychyー豊cーM'e B欟。KfEdー【。yー】ー D會~`g【 【C0= D貰Sygn P=…轟ーー。/Resu爪! D〝sーg【
  27. 27. 囗 ゴ'デ'ザ'イ ソ ヵゝっこ~ゝしゝロゴとヵゝを只管見まくって スケッチブック縄こァイデァを書き区費る そのうち縄ここれ鬱ま良さそう としゝうものヵ寶出てくる ーーーustrat。rで講"作
  28. 28. Kユ (“〕 ぴ3 圧」 ^管,,K 會 鋤 や/ _ 〝 タg『』縄凰 ノ 〈~^升 { `丶_}`誉_ /〝墜 (す~涎 警ノ 〝〝鱧交 艸丿 ^ゝ児了丿) `~〉 丿《ノ〟繍 (観 ーr・丶 (縄 ( 碗の
  29. 29. aC[0g
  30. 30. q十ー一GG
  31. 31. レ イ アウ ー一 しゝきなり コーディ ング`するのも ~ゝしゝ&ナと〟ゃっ鬱まり最ネ刀鬱まスケッチ ァイ デァ出し縄こおしゝて紙と鑽合筆鬱ま最要菫! (個人的な意見です) 時F爵なしゝ ・簡単なとき轟ま省略することも・・・
  32. 32. コ一デ・ィ ソグ' あ と 野まガ ー丿 ガ '丿 HTML/CSS/JaVaScript と ヵ`書 < Bracketsをイ吏ってb〟ます
  33. 33. 團 爪團ーnー]S (【「團ーnn奮V) ー B「aCk亀踵 一 フアイ丿し 羅 検案 表示 ナビグ一卜 デ丿文ック 付レプ N鮒e'js Emmet ーー ge。c。der= faーse, 作糞中ファィ丿し ー2 "av讐gat讐。nHeーp奮utt。n= faーse' g"d〝'h〝mー ‡3 ,”z”t汗川eー寺ーーe= faーse' {} main〟js ー4 }); ー5 V } CatCh(e) { 殉ー讐・(寶~ ー6 ー・eturn; [ } s嬲T贋奮糧S齔竈=p'jS ー7 } ー巳 ー9 V丿ずnd。w'v誓eWe「 二 V苛eWe「; 【rョ【nna~` 20 2ー 〉すeweー~〟cー。ck・c=「re=てT苛me = 〟〕=ー苛a=Date'fr。mDate(new Date(20ー5, 2' ー4' 0' 0, 0, 0)); _(mp 22 〉すewer〟cー。ck・startT苛me 二 〟〕uー竈a=Date'frDmDate(ne`v Date(20ー5, 2, エ繍, G, 0, 0, 0)); 鵬'…'ーー鄭'c之mー 23 〉すewe「'cー。ck'st。pT苛m亀 ニ '〕uー誓anD轟te'f「伽Date(nev縄 Daてe(20エ5, 2, ー繍】 23, 59, 59, gg9)); 24 vすeweー寶'cー。ck'cー。ckRange ニ 'Cー。ckRange'LO0P一STOP; 隷mp髑・C之mー 25 V 〉すeweー*ーcーDCkー。nTずck・addEVe=tL竈stene「(fLーnct苛0n(cー0Ck) { { } s拉T【_退〝珈贋'】S 26 V蜥icーe czmー 27 }) ; ' Z巳 b。ー*幽e「一c。爪p。ne"Cs 29 V { gcr'pgg 30 V ーet getDate 二 fu=ct竈。n(date) { " 3ー )ar greg。「苛a=Date = ・〕uーうanDate't。Greg。r篭a=Date(date); '野m則〝應 32 greg。rザanDate〟h。u「 +ニ 9; ーjihi耐 33 V 矛f (greg。「牙aーーDate'h。=r 〉= 24) { 轟b〝咋"】S。n 34 gー一eg。「竈aーーDate'day +二 -~(g「eg。v一苛anDate'h。u「 / 24); _ 35 gー一eg。ー一竈aーーDate'h。ur %= 24; ー"d隷4h【mー 36 } {} mーin・j5 37 returーー greg。ー~苛anDate; 3B }; 椰 3g 40 V V竈eVノeー寶.=nテmat竈。n'v苛跚M磁eー'd覆teF。「鵬tter 二 fLーーーCt竈。=(d覆te) { Jー )a「 gregDr苛a=Date = getDate(date); J2 return greg。「苛anDate'yea「 + '年' f greg。ー~元anDate・鵬nth f '月' + greg。ー~矛aーーDate〟day + '日'; 〝 …窺 國 〝: く併 田 贄 ゥ國 0
  34. 34. テ フ、 ー' ・ レ L遭'ュ 一 ・ 系ー芍記n しゝろんなブラウザ・スマホ ・ タプレッ トで確言忍 昔&ま 〈もしヵゝしブこら今も) ーE6の悪夢鬱こ・『茜柔費されプこ
  35. 35. ず' ザ'ィ 、ノ ,, ど【ま?
  36. 36. ~~デ`ザイ ン" 量はと丶丶ういうことヵゝ 言党日月で丶きますヵゝ?
  37. 37. 某害日 〟 ・.・ ~~物と物の関イ系*性を 定義すること"
  38. 38. WikipediG 日 く ・・. 〝〝あるFロ琶題を角奉牙央するナゝぁ繍繍〟 田 〝 ~ゝ ノ 3」〟) “〝、考「静嗣A 〝 』 静〟 嬲"繍E、のポ且鑑〟〟逸て を福壬濃{〟〝 それを^又『蒙々『な蒻葉儚岳ゞ@ご応じr 表現するg〟〝と』縄繍
  39. 39. 「 洲離 ル{ 〈繝一 }〟[[一H 馴例 ゝー 【`〈 ー一 童 言ー〟察*〟〟」党~計イ〝 広義
  40. 40. 〝擁應 〟 】曹,引 ゝ[ L† 一 }〟`」 ` 鸞` ノ, ム ,珊 ””〟 “戸 下 ー{ 債, 〟』 〈「 「〈 戴,`一 疇}」 “離磁一 バ緕」 } 輝 ,~証 隷 ー `[ り ぃ帥〝〟 }レ 〔『〟 ーム 《 { 管繍 L債 '「, 」ーー~ 嬲〈` 『 ー, 「, r〉 止翼ー , L丁 掛〝一 .〟管凵 ゴ琢 ーー一 閤 肛ダ則ゝ〕 ぃー` 縄'【 ` ,ー一 ~' ー ^ー ー, ーー' 縄ーーーー〉 寸
  41. 41. ナよ ぜ'? デザイ ンセ ンスを構成する 柱 ヌ “ろ` 3つの 糸土'馬央
  42. 42. ナよせ? なぜぁれヵ寶麦荒才ラってしゝるのヵゝ なぜぁのデザイ ン&ま ヵ`っこ~ゝしゝのヵ〝 (ヵゝっこ悪し〟のヵゝ〉 酉己色、 スペース、 グ'丿 ッ ド、 書体、 写真、 印届疆・・・
  43. 43. 鸞 ネ ブ'ブ * ” `/{ ゝ 〉 〝〝 隷ノ~ ( 〝麦 〝 彡 ”`〝 二'麦〝管 濯 ” ` 一T-す〟 **~「コ二凡 [ て訃 L_ 一 繍髑ー亡亡` `〝ノ 〝 一 †` , `『 なぜ?ヵゞ積み重なって デザィ ンの弓ーき出し蜃こ ここ鬱こ鬱まあれヵ寶ィ吏えるヵゝも ! ここで&まこうしブこらヵゝっこ良く見えるな 良~ゝデザイ ン悪しゝデザイ ンを瞬時響こ半聾断できる
  44. 44. 害併‡〟 デザイ ン史 映像技蕎ホi gDcG 写真 モ〝〝イ '〝“ `甫丿〝言技奪ホ〝 マ”ンセ〝〝“表色系 「 縄 「ニ「 「 web Lー崔ー ー 丿丶〉F苗工学 ヱ工 亨「ニ 喜 詳_〝 ` 。 ustrat。r 紙の奉重類 ' コ“ヒユ〝タ ,^ 光 〝〔丶理学 デザイン&ま案タ遭〟矢=識 色空F爵 庄縮技'ホゞ E=届醐技桁祠 CSS ヵ ;〟 ラ『 HTML 文宇組み PCSS Ph。t。sh。p 画像処理
  45. 45. ぢ+ょみ{て・・・ フ韓気でデザイ ンやるなら何でも~ゝ~ゝヵゝら 絵を描く趣味ヵゞあると~ゝしゝよ ヱ 実際縄こ手を動ヵゝすこ と、 豆真の中のィ メージを 表現すること、 観察力・・・なと〝など、 デザイ ン轟こ欠ヵ〟せなしゝ含璧カヵ寶身鬱こイ寸きます デザイ ンの唖冨も広ヵ寶り ます
  46. 46. ま と め デザイ ンと縄ま、 「F母題を解毒夫すること」 デザイ ンセンスと騒ま、 「なぜ?」 「経験」 「知識」 みんなももっと 「デザイ ン」 しょうぜ !
  47. 47. 丁hGnk g。u!

×