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
12
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
120
アップロード職業訓練-デザインで使える写真撮影と画像補正.pdf
keita_yoshikawa
0
38
アップロード職業訓練-誰でも使える写真撮影テクニックのコピー.pdf
keita_yoshikawa
0
17
富山デザイン勉強会_私がデザインのために考えていること.pdf
keita_yoshikawa
0
50
富山デザイン勉強会10-読む人を動かす_効果的な文章の書き方.pdf
keita_yoshikawa
2
82
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
富山デザイン勉強会_デザイナー経験ゼロからデザイン職に就く方法.pdf
keita_yoshikawa
0
75
富山デザイン勉強会_キャッチコピーの作り方.pdf
keita_yoshikawa
0
41
Other Decks in Design
See All in Design
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
840
Les petites aventures de CSS, saison 2025
goetter
3
3.9k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
200
Personal Story Sequence - Vendetta(WIP)
elrns88
0
380
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
460
横断組織デザイナーの働き方
mixi_design
PRO
0
310
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
530
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
390
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
520
How to go from research data to insights?
mastervicedesign
0
210
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
8.9k
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
340
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
220
Statistics for Hackers
jakevdp
797
220k
How GitHub (no longer) Works
holman
312
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
220
Mobile First: as difficult as doing things right
swwweet
222
9.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