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
400
WEBサイトをデザインする技術.pdf
keita
December 22, 2019
Tweet
Share
More Decks by keita
See All by keita
新田知事プレゼン資料.pdf
keita_yoshikawa
0
18
富山デザイン勉強会_デザイン経営.pdf
keita_yoshikawa
0
48
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
320
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
74
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
38
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
73
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
120
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
200
Other Decks in Design
See All in Design
#Dubois Challenge 2025: Economics
ajstarks
0
120
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
440
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
120
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
140
minpaku-community-scrum-patterns
norinity1103
1
120
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
900
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
AI動画生成ガチャ紹介
piyo7
1
110
オープンデータを利用して色々なものを作った話
hjmkth
1
110
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
150
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Embracing the Ebb and Flow
colly
86
4.7k
Unsuck your backbone
ammeep
671
58k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualization
eitanlees
146
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Docker and Python
trallard
44
3.4k
Being A Developer After 40
akosma
90
590k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
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