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
380
WEBサイトをデザインする技術.pdf
keita
December 22, 2019
Tweet
Share
More Decks by keita
See All by keita
富山デザイン勉強会_デザイン経営.pdf
keita_yoshikawa
0
23
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
61
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
170
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
48
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
25
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
56
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
87
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
富山デザイン勉強会_デザイナー経験ゼロからデザイン職に就く方法.pdf
keita_yoshikawa
0
85
Other Decks in Design
See All in Design
発表資料テンプレート / My slide template
thatblue
0
220
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
太田博三(@usagisan2020)
otanet
0
240
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
800
LLMによるRAG評価用合成テストデータの生成
licux
6
720
Museum Heist
allykae
0
140
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.2k
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.7k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
1
690
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
110
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
aya_murakami_portfolio
ayakaimi1101
0
1.2k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Side Projects
sachag
452
42k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Applications with DynamoDB
mza
93
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Invisible Side of Design
smashingmag
299
50k
GitHub's CSS Performance
jonrohan
1030
460k
BBQ
matthewcrist
87
9.5k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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