デザイナーが効率よくテーマ作成を進めるには？デザインから WordPress のテーマ作成のワークフローを見直す

σβΠφʔ͕ޮ཰Α͘ςʔϚ࡞੒ΛਐΊΔʹ͸ʁ σβΠϯ͔Β8PSE1SFTTͷ ςʔϚ࡞੒ͷϫʔΫϑϩʔΛݟ௚͢ HIROMU HASEGAWA

Question

ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

8PSE1SFTTͷ࣌͸ʁ

͜ͷηογϣϯ͸ ීஈͷϫʔΫϑϩʔΛ ݟͳ͓࣌ؒ͢ʹ

About me

ϜA ৽ׁग़਎๺ւಓࡳຈࢢࡏॅ ϑϦʔϥϯεˠ๏ਓԽɿ୅දऔక໾ ϑϩϯτΤϯυΤϯδχΞ ݉ςΫχΧϧσΟϨΫλʔ ࠷ۙͷझຯɿϋϜՈࡊԂਫ΍Γʢ೶ԂͰ͸ͳ͍ʣ

ࠓ͸·ͩ ίʔσΟϯάத৺ͷۀ຿

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

! ! %FTJHOFS 1SPHSBNNFS ϜA ͷ͓࢓ࣄ ϫΠϠʔ΍σβΠϯ͔Β࢓༷೺Ѳ΍ ΞʔΩςΫνϟͷ੔ཧͱεέδϡʔϧௐ੔ ૒ํͷίϛϡχέʔγϣϯͷڮ౉͠໾

" " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ࡢ೥ͷ8PSE$BNQ5PLZPͷ࠙਌ձͰ

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ίʔσΟϯάઌʹ΍Δͷͬͯɺ ແବ͡Όͳ͍Ͱ͔͢ʁ

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ʂʂʂ

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ແବͱ͍͏ൃ૝͕ͳ͔ͬͨʂ

MJOLIUUQTIIBNOFUXPSEQSFTTDPEJOHqPX

" " \DTT^ " \+4^ # % ! %FTJHOFS
1SPHSBNNFS $ # 4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH

ϫʔΫϑϩʔͷύλʔϯΛߟ͑ͯΈΔ

ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞੒ ᶄ8PSE1SFTTͷઃఆ ᶄجຊઃఆ ᶄGVODUJPOTQIQʹίʔυ௥Ճ ᶄϓϥάΠϯಋೖɾઃఆɹ ᶅςʔϚ࡞੒ ᶆσʔλ౤ߘ ᶅςʔϚ࡞੒

σβΠϯΑΓޙͷ ίʔσΟϯάΛͲ͏ਐΊ͍ͯΔ͔

&ςʔϚʹ௚઀ &੩తʹҰ౓ίʔσΟϯά

ᶃςʔϚʹ௚઀

◦ެࣜςʔϚ΍ελʔλʔςʔϚͳͲ ഑෍ςϯϓϨʔτΛΒΧελϚΠζͯ͠ ◦͔̍ΒߏஙʢϑϧεΫϥονʣ

(͋Β͔͡Ί࢖͑Δ༷ʑͳػೳ ʢػೳͱͯ͠࢖͏༧ఆͰ͋Ε͹ޮ཰తʣ (σβΠϯ͕ϑϧΦʔμʔͰ͸ͳ͚Ε͹  ͙͢ʹར༻Մೳͳέʔε΋ ϝϦοτ

)ߏ଄೺Ѳͷॳظίετ ʢ࢓૊Έ΍ػೳͷ೺Ѳʣ )ϑϧΦʔμʔσβΠϯͷ৔߹ ϕʔεͱͯ͠ར༻͢Δ৔߹ͷίετ σϝϦοτ

◦8PSE1SFTTͷλά΍ػೳΛ֮͑ΔΑΓ ɹςʔϚػೳͷൣғͷ͚ͩͳΒ௿ίετ ɹͦͷ࿮Λ௒͑Δ৔߹͸ɾɾɾʁ

◦ϫʔΫϑϩʔͱͯ֬͠཰Ͱ͖ΔͳΒ ແବΛ࠷খݶʹ཈͑ΒΕΔ

ݸਓతҰ൪ͷٙ໰

?ݻఆϖʔδɾ౤ߘͷ  ΤσΟλ෦෼ͷϑϩʔʁ

ᶃ8FC্ͷΤσΟλ෦෼ͰϚʔΫΞοϓ ᶄอଘ ᶅ)5.-मਖ਼ɾௐ੔ ᶆอଘɾɾɾʁ

?؅ཧը໘Λ௨ͯ͠ʁͦΕͱ΋ผʁ

ᶄ੩తʹҰ౓ίʔσΟϯά

)࡞ΔਓͷεΩϧɾ஌ࣝɾ഑ྀʹӨڹ ɹߟྀ΋Εɺख໭Γ͕ଟ͘ൃੜͯ͠͠·͏  ɹςʔϚԽ͢Δࡍʹ͏·͘࠶ݱͰ͖Δ͔ʁ ))5.-ɾ$44ΛҰ͔Β࡞Βͳ͍ͱ  ௚઀ॻ͘ͷͱมΘΒͳ͍ σϝϦοτ

◦ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ৔߹ ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋

◦ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ৔߹ ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋ ෼ۀͰϓϩάϥϜدΓͷਓ͸ ͜ͷखͷख໭Γ͕ݏ͍ͳ܏޲ ʢ͋͘·Ͱݸਓతͳҙݟʣ

(ϑϧΦʔμʔσβΠϯʹ΋ॊೈʹରԠ ()5.-ͱ$44ʹूதͰ͖Δ (ςʔϚԽ͢ΔલͰ΋ґཔऀʹ  ϒϥ΢β্Ͱ֬ೝͯ͠΋Β͑Δ (෼ۀԽ͠΍͍͢ ϝϦοτ

◦ίʔσΟϯά໘͚ͩʹϑΥʔΧε͢Δͱ 8PSE1SFTTͷߏங஌͕ࣝແͯ͘΋ ɹ࡞ۀཁһͱͯ͠ࢀըՄೳ ɹʢϙΠϯτΛ཈͑Δඞཁ͸͋Γʣ

ͲͪΒͷϑϩʔ΋ળ͠ѱ͠

ϙΠϯτʁ

ϙΠϯτख໭ΓΛ࠷খݶʹ

ख໭ΓΛݮΒ͢ϙΠϯτ

(࡞੒͢Δ)5.-Λ ςϯϓϨʔτɾ7JFXʹ͠΍͍͢Α͏ʹ (γεςϜ୲౰ͱ࿈ܞΛߟྀͯ͠༻ҙ (όά΍ϛεͷग़དྷΔݶΓͳ͍  ඼࣭ͷΑ͍ίʔυʹ

ςϯϓϨʔτɾ7JFXʹ ͠΍͍͢Α͏ʹʁ

(ϧʔϓ͕͠΍͍͢ (ڞ௨෦ΛΘ͔Γ΍͘͢෼཭ ($44PSγεςϜPSӡ༻

<div class=“main"> <h2> ~ </h2> <p>ʢ´°Ϝ°`ʣ</p> <p> ࡳຈʹ͍ΔΑ </p> <h2>2هࣄ໨</h2>
<div class=“image-block”> <img src=“###.jpg” alt=“” > <p>ը૾ͷԣʹճΓࠐΉจࣈ</p> </div> </article> ̍هࣄͷऴΘΓ͕ Θ͔ΓͮΒ͍

)ೖͬͯ͘ΔσʔλɾελΠϧʹΑͬͯ σβΠϯ่ΕͷݪҼ΋

<article class=“entry"> <header class=“entry__title”><h2> ~ </h2></header> <div class=“entry__body”> <p>ʢ´°Ϝ°`ʣ</p> <p>
ϞδϡʔϧຖΛҙࣝग़དྷͯΔʁ </p> </div> </article> <article class=“entry"> <header class=“entry__title”><h2> ~ </h2></header> <div class=“entry__body”> <div class=“image-block”> <img src=“###.jpg” alt=“” > <p>ը૾ͷԣʹճΓࠐΉจࣈ</p> </div> </div> </article> $.4ͷ৔߹͸ ΤσΟλʹΑͬͯ ՝୊ʹ

$44PSγεςϜPSӡ༻ʁ

ݟग़͠ͷ૷০ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ ͳͬͨ৔߹͸ʁ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ ͳͬͨ৔߹͸ʁ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ʜ

QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ Ϧϐʔτཁૉͷ)5.-ߏ੒

($44ͷઃܭ (*%ηϨΫλ͕࢖ΘΕͯͳ͍͔Ͳ͏͔ (ग़ྗ͞ΕΔ)5.-͕഑ྀ͞Ε͍ͯΔ͔ (Τϥʔ΍ɺ৘ใ͕ͳ͍࣌ͷ ελΠϧ͕༻ҙ͞Ε͍ͯΔ͔Ͳ͏͔

#news .main .heading-lv2 { border: solid #333; border-width: 0 0
1px 10px: padding 10px 5px; font-size: 20px; font-weight: bold; } #home .main h2.entry-title { border: solid #333; border-width: 0 0 1px 10px; padding: 10px 5px; font-size: 20px; font-weight: bold; } + + + + + +

.heading-lv2 { border: solid #333; border-width: 0 0 1px 10px:
padding 10px 5px; font-size: 20px; font-weight: bold; } .entry-title { border: solid #333; border-width: 0 0 1px 10px; padding: 10px 5px; font-size: 20px; font-weight: bold; }

ࣗ෼ͷ࢓ࣄͷґཔൣғ͔Β  ϫʔΫϑϩʔΛߟ͑Δ

" " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #

,੩తϑΝΠϧೲ඼PSνΣοΫ ,$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

◦͍Ζ͍Ζͳܗ͕ࣜ͋ͬͯ΋γεςϜʹ ೖΕΔલͷϫʔΫϑϩʔΛҰఆʹ ◦Ҋ݅ʹΑΔߏ੒ͷϒϨͷٵऩ ґཔઌຖʹҧ͏ ίʔσΟϯάϨΪϡϨʔγϣϯ

◦ӨڹൣғͷϦεΫݮ -ີ݁߹ηϨΫλͰద༻͞Εͳ͘ͳͬͨ -ผՕॴʹ΋ಉ͡DMBTT໊͕ʂཁૉ͕ʂ

෼ۀ͔Βߟ͑Δޮ཰Խ

.ಘҙͳ෦෼ʹूத .$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

ར༻πʔϧͱϙΠϯτ

project/ +-- .editorconfig +-- .gitignore +-- gulpfile.js +-- metalsmith.json +--
package.json +-- html +-- _resource +-- _layouts ¦ +-- default.html ¦ +-- footer.html ¦ +-- header.html +-- index.html +-- common +-- style.scss

MJOLIUUQHVMQKTDPN

MJOLIUUQTXXXCSPXTFSTZODJP

MJOLIUUQXXXNFUBMTNJUIJP

MJOLIUUQTHJUIVCDPNQBVMBSNTUSPOHTXJH

TXJHMBZPVU <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title
}}</title> </head> <body> {% include 'header.html' %} {{ contents | safe }} {% include 'footer.html' %} </body> </html>

--- template: default.html title: "λΠτϧ" --- <div>ίϯςϯπ</div> TXJHJOEFYIUNM

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>λΠτϧ</title> </head> <body>
<header> ~ </header> <div>ίϯςϯπ</div> <footer> ~ </footer> </body> </html> σϓϩΠޙ

<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo(
'charset' ); ?>"> <?php wp_head(); ?> </head> <body> <?php get_header(); ?> <div>ίϯςϯπ</div> <?php get_header(); ?> <?php wp_footer(); ?> </body> </html> 5IFNFʹ

OQNJOTUBMM OQNTUBSU

͜ͷઌ3&45"1*͕ඞཁʹͳͬͯ΋

.੩తʹ༻ҙ͓ͯ͘͠HVMQͷϑϩʔ͸ ɹͦͷ··+4ςϯϓϨʔτͰ΋ར༻Մೳ

import React from 'react'; class Header extends React.Component { render()
{ return ( <header className="header"> ʙ </header> ); }; } export default Header; ྫ͑͹3FBDU

੩తΛ༻ҙ͢Δʹͯ͠΋

ᶃ8PSE1SFTTͷઃఆ ᶃجຊઃఆ ᶃGVODUJPOTQIQʹίʔυ௥Ճ ᶃϓϥάΠϯಋೖɾઃఆɹ ᶄ੩తϖʔδʹίʔσΟϯά ᶅίʔσΟϯάσʔλʹ81λά

ຊ೔ͷ·ͱΊ

/ίʔσΟϯάઌͰ΋ΠΩφϦςʔϚͰ΋ ɹͲͪΒ΋஌ࣝ΍εΩϧͰޮ཰త͔มΘΔ #ࣗ෼ʹ͋ͬͨϑϩʔ͸ͲΕ͔Λߟ͑Δ /λεΫϥϯφʔͳͲɺޮ཰Խπʔϧ΋׆༻Λ #੩తίʔσΟϯάͷϑϩʔͰ΋ ɹઌʹ8PSE1SFTTͷભҠͳͲ༻ҙ 0ϓϩδΣΫτɾϝϯόʔߏ੒ʹΑͬͯ ՝୊΋͔ΘΔͨΊ ɹϫʔΫϑϩʔ΋౎౓ݟ௚͠Λߦ͏͜ͱ ·ͱΊ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

デザイナーが効率よくテーマ作成を進めるには？ デザインから WordPress のテーマ作成の...

デザイナーが効率よくテーマ作成を進めるには？ デザインから WordPress のテーマ作成のワークフローを見直す

More Decks by h2ham

Featured

Transcript

デザイナーが効率よくテーマ作成を進めるには？デザインから WordPress のテーマ作成の...

デザイナーが効率よくテーマ作成を進めるには？デザインから WordPress のテーマ作成のワークフローを見直す