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
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
190
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
800
Yumika Yamada Portfolio
yumii
0
1.4k
The Spectacular Lies of Maps
axbom
PRO
1
270
mento Design Team Portfolio
mento0fficial
1
660
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
株式会社Muture_ソーシャル推進事業
muture
PRO
0
140
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
990
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
KATA
mclloyd
32
14k
Statistics for Hackers
jakevdp
799
220k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
55k
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