Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Nite in Osaka, vol.48
Search
rie05
December 15, 2018
Design
1
810
CSS Nite in Osaka, vol.48
CSS Nite in Osaka, vol.48で発表したスライドです
rie05
December 15, 2018
Tweet
Share
More Decks by rie05
See All by rie05
CSS Nite in Osaka, vol.53 Girls Nite vol.2 LT飲食店×Web制作
rie05
3
120
これからデザイナーとして生き残るために必要なスキルと戦略
rie05
0
270
これからのデザイナーに必要なスキルと考え方
rie05
3
5k
Other Decks in Design
See All in Design
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
230
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.4k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
230
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
LayerX DesignersDeck
layerx
PRO
0
2.5k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
The Cult of Friendly URLs
andyhume
78
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Six Lessons from altMBA
skipperchong
27
3.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building Adaptive Systems
keathley
40
2.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
What's in a price? How to price your products and services
michaelherold
244
12k
Side Projects
sachag
452
42k
Transcript
σβΠφʔͷ ੍࡞ݱ Five Dimension Graphics ޱཧܙ
ޱɹཧܙ Seguchi Rie 1983େࡕੜ·Εେࡕҭͪɻ 5DG-Five Dimension Graphics-දɺσδλϧϋϦουେࡕߍߨࢣɻ 7੍ؒ࡞ձࣾͳͲͰΣϒσβΠφʔɺσΟϨΫλʔΛܦͯ2010ʹಠཱɻ ΣϒαΠτ੍࡞ΞϓϦUIσβΠϯͳͲΛख͕͚Δɻঁੑ͚σβΠϯ͕ಘҙɻ ִिՐ༵ͷUstream൪ʮrie'sCafebarʯύʔιφϦςΟʔͱͯ͠์ૹதɻ
ஶॻʰਓΛऒ͖͚ͭΔඒ͍͠ΣϒαΠτͷ࡞ΓํʱʢSBΫϦΤΠςΟϒʣɻ
ຊͷηογϣϯʹ͍ͭͯ ! εϥΠυࢿྉͷͪ΄Ͳެ։͞Ε·͢ ϑΥϩʔΞοϓϝʔϧͳͲͰ͓Βͤ͠·͢ ! ࣸਅࡱӨOKͰ͢ ϑϦʔૉࡐͰ͢ ! SNS࣮گܴͰ͢ ϋογϡλά
#cssnite
͜Μͳํ͚͓ͯ͠·͢ ! WebΛࣄʹ͍ͯ͠ΔσβΠφʔ ! WebσβΠφʔΛࢦ͍ͯ͠Δํ ! σβΠφʔͷকདྷʹෆ҆ͷ͋Δํ
ΞδΣϯμ σβΠϯʹೖΔલʹ σβΠϯ੍࡞ݱ ศརαΠτͱπʔϧ 01. 02. 03.
σβΠϯʹೖΔલʹ 01 Preparation before Design
WebσβΠφʔͷ͠͝ͱ༰ͱ ※ ৫νʔϜʹΑΓWebσΟϨΫλʔίʔμʔͳͲۀ੍Ͱׂ͕͔Ε͍ͯΔ͜ͱଟ͋͘Γ·͢ ใઃܭ ϏδϡΞϧ ίʔσΟϯά CMSߏங
ΫϥΠΞϯτʹώΞϦϯά͠ɺ ϖʔδߏϨΠΞτΛߟ͑Δ ใઃܭ 3W1Hͷ๏ଇ Who ୭ʹ What ԿΛ Why ͳͥ
How ͲͷΑ͏ʹ ϢʔβʔϑΝʔετΛΫϥΠΞϯτ㱻ΫϦΤΠλʔͰڞ༗
ώΞϦϯάͷํ๏ ΫϥΠΞϯτͷ ITϦςϥγʔʹΑͬͯ࠷దղ͕ҧ͏
ΫϥΠΞϯτλΠϓ ੍࡞͕ࣝ͋Δํ <ཧళɺΫϥΠΞϯτҎ֎ͳͲ> A B C WebΛগ͍ͬͯ͠Δํ <WordPressࢦఆͯ͘͠ΔͳͲ> WebΛ΄΅Βͳ͍ํ <εϚϗѻ͑ͳ͍͘Β͍>
ΫϥΠΞϯτλΠϓ ੍࡞͕ࣝ͋Δํ <ཧళɺΫϥΠΞϯτҎ֎ͳͲ> A ɾαΠτϚοϓϫΠϠʔ͕طʹ༻ҙ͞Ε͍ͯΔ͜ͱ͕ଟ͍ ɾͲ͜·Ͱ֬ఆͳͷ͔Ͳ͜ΛఏҊ͖͔͢ߟ͑Δ ɾઐ༻ޠ͋ΔఔOK ɾͲΜͰΜฦ͕͠ଟ͍ͷͰখ֬͘͞ೝ͠ͳ͕ΒਐΉ
ΫϥΠΞϯτλΠϓ WebΛগ͍ͬͯ͠Δํ <WordPressࢦఆͯ͘͠ΔͳͲ> B ɾͳͥWebΛ࡞Δͷ͔ɺͲ͏ͳΓ͍ͨͷ͔Λڞ༗͢Δ ɾiPad ProͱPencilͰͦͷͰεέον͠ͳ͕ΒܾΊΔ ɾXDͰαΠτϚοϓϫΠϠʔΛ࡞ΓఏҊ͢Δ ɾWordPressਪ͠ͳਓͳͥਪ͢ͷ͔ཧ༝Λฉ͘
ΫϥΠΞϯτλΠϓ WebΛ΄΅Βͳ͍ํ <εϚϗѻ͑ͳ͍͘Β͍> C ɾ·ͣΛฉ͘ ɾεέονϒοΫͱϖϯΛͬͯͦͷͰॻ͍͍ͯ͘ ɾେମͷϨΠΞτΛܾΊͨΒσβΠϯʹೖΔ(ݟͳ͍ͱ͔Βͳ͍ରࡦ) ɾϨεϙϯγϒ͕Ͳ͏ͱ͔ΑΓPC͜ΕɺSP͜ΕɺͰݟͤΔ
XDΛͬͨϫΠϠʔϑϨʔϜ DEMO தԝձܭηϛφʔϧʔϜ
σβΠϯ੍࡞ݱ 02 Design production site
ใઃܭʹج͖ͮɺ ػೳత͔ͭతୡͷͨΊͷσβΠϯΛ࡞͢Δ ϏδϡΞϧ ҰຕֆΛ࡞Γࠐ·ͳ͍ ࡞Γࠐ·ΕͨҰຕͷσβΠϯΧϯϓΑΓ εϐʔυײͷ͋ΔϓϩτλΠϓ͕تΕΔ
σβΠϯͳʹ͔͍ͭ·͔͢
Photoshop͕͖ὑ
PhotoshopΛͬͨσβΠϯ DEMO தԝձܭηϛφʔϧʔϜ
σβΠφʔݟͤํͷϓϩ ෳࡶͳͷΛγϯϓϧʹ·ͱΊ Δ ͍͜͠ͱΛ؆୯ͦ͏ʹݟͤΔ
ΦϖϨʔλʔʹͳΒͳ͍͜ͱ σβΠφʔ͔ͩΒͰ͖ΔఏҊΛΓࠐΉ
߈ΞτϓοτΛڧΈʹ͢Δ ఱ࠽తͳσβΠϯྗ͕ͳͯ͘ ߈୭ʹͰͰ͖Δ
ศརαΠτͱπʔϧ 03 Useful sites and Tools
Photoshop ΤΫεςϯγϣϯ ※ҙ※ ҎલΤΫεςϯγϣϯϚωʔδϟʔ͔ΒΠϯετʔϧͰ͖·͕ͨ͠ ࠷৽൛(CC 2019)Ͱ͖·ͤΜɻݸผͰΠϯετʔϧ͢Δඞཁ͋Γ Adobe Layer Namer https://www.adobeexchange.com/creativecloud.details.1680.html
Adobeެࣜɻը૾Ξηοτػೳͱ߹Θͤͯരʹը૾ΛΓग़͢
Photoshop ΤΫεςϯγϣϯ CRAFT https://www.invisionapp.com/craft ը૾͋ͯͨΓϦϐʔτάϦου Έ͍ͨͳ͜ͱ͕Ͱ͖ͨΓ
ࣸਅૉࡐͱΠϥετૉࡐ ࣸਅAC https://www.photo-ac.com/ ΠϥετAC https://www.ac-illust.com/
σβΠϯࢀߟ muuuuu.org http://muuuuu.org/ RWDJP http://responsive-jp.com/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Thank you !
None