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
860
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
130
これからデザイナーとして生き残るために必要なスキルと戦略
rie05
0
300
これからのデザイナーに必要なスキルと考え方
rie05
3
5.1k
Other Decks in Design
See All in Design
minpaku-community-scrum-patterns
norinity1103
1
360
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
200
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
880
harutaka Vision Deck
zenkigenforrecruit
0
220
デザイナー向けフライル説明資料
toshiblues
0
130
Cyber Heart Online Book
hjnasby
0
180
sachi_y_portfolio
sachi337
0
530
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
BBQ
matthewcrist
89
9.8k
Designing Experiences People Love
moore
142
24k
The Language of Interfaces
destraynor
161
25k
Navigating Team Friction
lara
189
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Cult of Friendly URLs
andyhume
79
6.6k
Context Engineering - Making Every Token Count
addyosmani
3
58
Building an army of robots
kneath
306
46k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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