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
WEBサイトをデザインする技術.pdf
Search
keita
December 22, 2019
Design
1
370
WEBサイトをデザインする技術.pdf
keita
December 22, 2019
Tweet
Share
More Decks by keita
See All by keita
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
32
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
12
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
35
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
74
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
110
富山デザイン勉強会_デザイナー経験ゼロからデザイン職に就く方法.pdf
keita_yoshikawa
0
69
富山デザイン勉強会_キャッチコピーの作り方.pdf
keita_yoshikawa
0
34
富山デザイン勉強会_デザインで使うChatGPTとFirefly.pdf
keita_yoshikawa
0
73
富山デザイン勉強会_生成AIを使ったデザイン制作.pdf
keita_yoshikawa
0
58
Other Decks in Design
See All in Design
aya_murakami_portfolio
ayakaimi1101
0
130
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
Yahoo Newsletter Clicker Template
xuechunwu
0
300
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
590
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
310
How to go from research data to insights?
mastervicedesign
0
200
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
240
Haruki_Konaka_Portforio.pdf
haruki556
0
890
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
180
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
Dive Deep into Communication
yomtsu
0
180
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.3k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Optimising Largest Contentful Paint
csswizardry
33
3k
Raft: Consensus for Rubyists
vanstee
137
6.7k
A Tale of Four Properties
chriscoyier
157
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing Experiences People Love
moore
139
23k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Transcript
01 ϯ σ β Π ษ ڧ ձ ذ ͗
ෞ ; Ҋ ਤ E FTJHO ʰ8&#αΠτΛσβΠϯ͢Δٕज़ʱ スライド数 62 ページ DERA-design
σ ಈ 02 8&#αΠ τͷ σβΠ ϯΛ͢Δʹ ෯͍ٕज़͕ඞཁ DERA-design
σβΠϯ ϓϩάϥ ࣸਅ ը 03 ίʔσΟϯά ઃܭ σβΠϯ ίʔσΟϯά ϓϩάϥϜ
4&0 ࣸਅ Πϥετ ઃܭ ಈը DERA-design
ϥϜ 04 ଟ͘ ͷࣄΛߟ͑ͯ σβΠ ϯΛ͠ͳ͚Ε ͳΒͳ͍ DERA-design
05 8&#αΠ τͷ ߟ͑ͳͯ͘ͳΒͳ͍͜ͱ $"15&3 DERA-design
06 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ੍࡞ϑϩʔ ΞδϟΠϧ Υʔλʔϑ Υʔϧ ։ൃ ϦϦʔε ։ൃ
ϦϦʔε ઃܭ ઃܭ ߏங ߏங ઃܭ ઃܭ ߏங ߏங ઃ ܭ ઃ ܭ σ β Π ϯ σ β Π ϯ ϓ ϩ ά ϥ Ϝ ϓ ϩ ά ϥ Ϝ ς ε τ ς ε τ Ϧ Ϧ ồ ε Ϧ Ϧ ồ ε ఆ ٛ ఆ ٛ DERA-design
4 07 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ $.4 DERA-design
4&0 Πϥετ 08 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ 8&#αΠτͷ෯ 8&# αΠτͷσβΠϯ ʹը໘αΠζ͕Өڹ͠ ·͢ɻ ݱࡏͷը໘αΠζ
ͷγΣΞΛ͓ͬͯ͘ඞ ཁ͕͋Γ·͢ DERA-design
09 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ΧϥϜ DERA-design
10 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ϨεϙϯγϒσβΠϯ શͯͷը໘αΠζͰਖ਼͘͠ද ࣔ͞ΕΔΑ͏ʹઃܭΛ͢Δඞ ཁ͕͋Γ·͢ɻ ࠷ۙͰ 4&0 ʹӨڹΛ͠·͢ɻ DERA-design
11 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ϒϨΠΫϙΠϯτ ը໘αΠζͷͲ͜ͰସΔ͔ΛܾΊΔ DERA-design
12 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ 4&0 8&#αΠτͷσβΠϯͰ 4&0Γͤ·ͤΜɻ গͳ͔ΒͣݟͨʹӨ ڹ͕͋Γ·͢ɻ DERA-design
13 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ දࣔεϐʔυ දࣔεϐʔυͷߴԽ շదʹӾཡͯ͠Β͏ͨ ΊʹඞਢͰ͢ɻ4&0ʹ ӨڹΛٴ΅͠·͢ɻ DERA-design
14 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ 3FUJOBσΟεϓϨΠ J.BDJ1IPOFͳͲʹ࠾༻ ͞Ε͍ͯΔ 3FUJOB σΟε ϓϨΠɺ ը૾ͷղ૾Λ େ͖͘͠ͳ͚ΕͳΓ·
ͤΜɻ DERA-design
15 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ֦ுੑ 8&# αΠτ࡞ͬͯऴΘ ΓͰ͋Γ·ͤΜɻ ֦ு ΛͰ͖ΔΑ͏ʹߟ͓͑ͯ ͔ͳ͚Ε͍͚·ͤΜɻ DERA-design
16 $"15&38&#αΠτͷߟ͑ͳͯ͘ͳΒͳ͍͜ͱ ΞΫηγϏϦςΟ 8&# αΠτΛࢹ֮ͷऑ͍ํ ͕ݟΔ߹͋Γ·͢ɻ ߹ ʹΑͬͯΞΫηγϏϦςΟ ߟ͑ͳ͚Ε͍͚·ͤΜɻ DERA-design
17 8&#σβΠϯͷ ϙΠϯτ $"15&3 DERA-design
18 $"15&38&#αΠτͷϙΠϯτ ϑΝʔετϏϡʔ 8&#αΠτΛݟΔͱ͖ϢʔβʔඵͰஅ͢Δ DERA-design
19 $"15&38&#αΠτͷϙΠϯτ ϢʔβϏϦςΟɾಋઢ ΫϦοΫͰ͖ΔϘλϯʹϧʔϧΛܾΊΔ ओཁͳΞΫγϣϯͰͳ͍ͱ͖ɺ ωΨςΟϒͳΞΫγϣϯʹ ߇͑Ίͳ৭͍Λ͠Α͏ɻ HOME Works Accsess
Media Submit Cancel DERA-design
20 $"15&38&#αΠτͷϙΠϯτ ΠϯλʔϑΣΠε ΫΠοΫݕࡧ " # $
% 4VO .PO 5VF 8FE 5IV 'SJ 4BU DERA-design
21 $"15&38&#αΠτͷϙΠϯτ ݟग़͠σβΠϯ ڞ௨͢Δ෦ͷΫΦϦςΟΛ্͛Δ DERA-design
22 $"15&38&#αΠτͷϙΠϯτ όφʔ 8&#αΠ τʹΑ͘͜ͷΑ ͏ͳόφʔ͕͋Γ·͢ɻ ૉૣ͖͘Ε͍ʹ࡞ΕΔͱ ࣄ͕͔ͲΓ·͢ɻ DERA-design
23 $"15&38&#αΠτͷϙΠϯτ ྻ ςΩετਤͷ಄ޙΖΛɺ ͖Ε͍ʹͦΖ͑ΔͷجຊͰ͢ɻ DERA-design
24 $"15&38&#αΠτͷϙΠϯτ ༨നͷϧʔϧ ༨നؔ࿈ੑͷڧ͍ͷ΄Ͳখ͞ ͘ͳΓ·͢ɻ ֎ଆ͔Βଆ༨ന ͕খ͘͞ͳ͍ͬͯ͘Α͏ʹ͠· ͠ΐ͏ɻ DERA-design
25 $"15&38&#αΠτͷϙΠϯτ ϥΠςΟϯά จষΛॻ͘͜ͱඞཁ ʹͳ͖ͬͯ·͢ɻ ݪߘ ͕ແ͍߹Α͘ͳ͍ ߹ϥΠςΟϯά͠ ·͢ɻ DERA-design
26 8&#σβΠϯͷ ςΫχ ο Ϋ ͱίπ $"15&3 DERA-design
27 $"15&38&#σβΠϯͷςΫχοΫͱίπ ͋͑ͯϋϛग़͢ ྻ͍ͯ͠Δதʹ͋͑ͯϋϛग़ ͢͜ͱͰڧௐ͠·͢ɻ େͳϨΠΞτΠϯύΫ τͷ ͋ΔσβΠϯΛ࡞Ε·͢ɻ DERA-design
28 $"15&38&#σβΠϯͷςΫχοΫͱίπ ཁૉΛॏͶΔ ཁૉΛॏͶΔ͜ͱͰσβΠϯʹมԽΛ ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ ද่͕ࣔΕͳ͍ Α͏ʹҙ͠·͠ΐ͏ɻ DERA-design
29 $"15&38&#σβΠϯͷςΫχοΫͱίπ ಈ͖Λ͚ͭΔ దʹΞχϝʔγϣϯΛ ͚ͭΔ͜ͱɺϦονͳ σβΠϯΛ࡞Δํ๏ͷҰ ͭͰ͢ɻ DERA-design
30 $"15&38&#σβΠϯͷςΫχοΫͱίπ ಈը എܠಈը࠷ۙͷྲྀߦͰ ͢ɻ ද͕ࣔ͘ͳΔ͜ͱ ʹҙΛ͠·͠ΐ͏ɻ DERA-design
31 $"15&38&#σβΠϯͷςΫχοΫͱίπ ࣼΊʹ͢Δ ཁૉʹ͖Λ͚ͭΔ͜ͱͰΛ Ҿ͖·͢ɻ σβΠϯͷ෯Λ͛Δ ͜ͱʹͳΓ·͢ɻ ɻ IUUQXXXUCXBIBLVIPEPDPKQ DERA-design
32 $"15&38&#σβΠϯͷςΫχοΫͱίπ ڧऑΛେ͖͘͢Δ ΦʔόʔαΠζͷࣸਅΛ ͏͜ͱͰɺμΠφϛο ΫͰΠϯύΫτͷ͋Δ 8&# αΠτ͕Ͱ͖·͢ɻ DERA-design
$"15&38&#σβΠϯͷςΫχοΫͱίπ CMFOENPEF ը૾ʹ৭ΛॏͶΔ͜ͱ͕Մೳɻ *&Ͱ͑ͳ͍ͷ͕ɻ 33 DERA-design
34 $"15&38&#σβΠϯͷςΫχοΫͱίπ খٕ͍Ζ͍Ζ ホーム Home おしらせ News 採用情報 Recruit ホーム
おしらせ 採用情報 ホーム おしらせ 採用情報 ˔ӳޠදهΛՃ͑Δ ˔ܩઢΛ͚ͭΔ ˔ΞΠίϯΛ͚ͭΔ DERA-design
35 8&#αΠ τͷ ࡞Γํϝι ο υ $"15&3 DERA-design
$"15&38&#αΠτͷ࡞Γํϝιου λϒϨοτϑΝʔετ 36 IUUQTXQZBUOFUDPN Q DERA-design
$"15&38&#αΠτͷ࡞Γํϝιου λϒϨοτϑΝʔετ 1$λϒϨοτͷ֦ு͞Ε ͨͷɺ εϚʔτϑΥϯλ ϒϨο τΛॖখͨ͠ͷͱ ߟ͑ͯλϒϨο τͷσβΠϯ ΛઌʹܾΊΔɻ
37 DERA-design
$"15&38&#αΠτͷ࡞Γํϝιου σβΠϯίʔσΟϯά %&4*(/ $0%*/( 38 DERA-design
$"15&38&#αΠτͷ࡞Γํϝιου σβΠϯίʔσΟϯά ίʔσΟϯά͠ͳ͕ΒσβΠϯ มԽ͢Δɻ ͘͠ίʔσΟϯά ͠ͳ͕ΒσβΠϯ࡞Δɻ શମ૾ΛΠϝʔδ͢Δ͜ͱͱɺࡉ ෦Λత֬ʹஅ͢Δ͜ͱ͕ॏཁɻ 39 DERA-design
40 8&#αΠ τͷ ੍࡞ྫ $"15&3 DERA-design
41 $"15&38&#αΠτͷ੍࡞ྫ λχΧిث IUUQTUBOJDBKQ DERA-design
42 $"15&38&#αΠτͷ੍࡞ྫ ٢ཆܲ IUUQTZPTIJLBXBZPVLFJDPN IUUQTZPTIJLBXBZPVLFJDPN DERA-design
43 $"15&38&#αΠτͷ੍࡞ྫ λχΧిث ʢञʣ IUUQTTVCBSVZBDPNBNB[BLF DERA-design
44 $"15&38&#αΠτͷ੍࡞ྫ ϤʔάϧςΟΞ130 IUUQTUBOJDBKQZPHVSUJBQSP DERA-design
45 $"15&38&#αΠτͷ੍࡞ྫ ൘ଂ IUUQTJUBLVSBXPPEDPN DERA-design
46 $"15&38&#αΠτͷ੍࡞ྫ ൘ଂ ʢϥϯσΟϯάϖʔδʣ IUUQTJUBLVSBXPPEDPNJUBLVSBTQ DERA-design
47 $"15&38&#αΠτͷ੍࡞ྫ ൘ଂϑΝΫτϦʔ IUUQTJUBLVSBGBDUPSZDPN DERA-design
48 $"15&38&#αΠτͷ੍࡞ྫ ຊ৺ଁ݂֎Պֶձ IUUQTQMB[BVNJOBDKQdKTDWT IUUQTUBOJDBKQ DERA-design
49 $"15&3ΠϯϑΥάϥϑΟ οΫͷ੍࡞ྫ ͗;ͷωοτ IUUQTHJGVOPLJOFUDPVODJM DERA-design
50 8&#αΠ τ ҭ͍ͯͯ͘ͷ $"15&3 DERA-design
51 $"15&38&#αΠτҭ͍ͯͯ͘ͷ 1%$" ʮ1MBOʹܭ ըʯ ʮ%Pʹ࣮ ߦʯ ʮ$IFDLʹධՁʯ ʮ"DUJPOʹվ ળʯσβΠϯվળ͍ͯ͘͠
ඞཁ͕͋Γ·͢ɻ DERA-design
52 ϒϩάΛॻ͍ͯΞΫηε Λ͋ͭΊ·͢ɻ σβΠϯͷ ςϯϓϨʔτΛ࡞͓ͬͯ ͖·͠ΐ͏ɻ $"15&38&#αΠτҭ͍ͯͯ͘ͷ ίϯςϯπϚʔέςΟϯά DERA-design
53 $"15&38&#αΠτҭ͍ͯͯ͘ͷ ΞΫηεղੳ ΞΫηεΛղੳ͢Δ͜ͱͰɺ ͕Θ͔ΓσβΠϯΛ มߋ͢Δ͜ͱ͋Γ·͢ɻ DERA-design
54 ͦͷଞͷٕज़ $"15&3 DERA-design
55 $"15&3ͦͷଞͷٕज़ ϥϑΧϯϓͷׂ ϥϑΧϯϓͷׂ σβΠϯͷ֬ೝ͚ͩͰ ͳ͘ɺ ΫϥΠΞϯτͷ৺ ʹՐΛ͚ͭΔ͜ͱͰ͢ɻ DERA-design
αʔϏεΛσβΠϯ͢Δ 56 $"15&3ͦͷଞͷٕज़ 8&#αΠτͷσβΠϯΛվળͯ͠ˋͷ্ঢ͕ݶք DERA-design
57 $"15&3ͦͷଞͷٕज़ ίʔσΟϯάͷࢦࣔ σβΠϯͱίʔσΟ ϯάΛ ۀ͢Δ߹ɺࢥͬͨͱ ͓Γʹ্͕Βͳ͍͜ͱ ͕͋Γ·͢ɻ DERA-design
58 ·ͱΊ DERA-design
59 ˔8&#αΠτͷσβΠϯٕज़ෳ߹త ˔ߟ͑Δ͜ͱ͕ͨ͘͞Μ͋ͬͯେม ˔ࣗͳΓͷ࡞ΓํΛݟ͚͍ͭͯ͘ ˔8&#αΠτҭ͍ͯͯ͘ͷͰ͋Δ ·ͱΊ DERA-design
60 ࢀߟհ DERA-design
61 ˔ΈΜͳͰߟ͑ɺΧΠθϯ͢Δɻ6*σβΠϯ ˔͔ͩΒɺͦͷσβΠϯμϝͳΜͩɻ ˔8&#σβΠϯجૅೖ ࢀߟհ DERA-design
62 Ҏ্ɺ ͝ਗ਼ௌ ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ DERA-design