૬ର৭ߏจ ºPLMDI͕ ؆қతͳΧϥʔύϨοτ ͮ͘Γʹศརͳ݅ IPOFZ :6.&.**OD

IPOFZ ͸ʹʔ͞Μʹʔ • גࣜձࣾΏΊΈ ೥ೖࣾ • ϑϩϯτΤϯυΤϯδχΞ ςοΫϦʔυʢ3FBDUത࢜ʣ • (JU)VC2JJUB ;FOO $PTFOTF ΞΧ΢ϯτIPOFZ • 9BLBUXJUUFSͷΈ !IPOFZ • 4DBMB ͱ ,PUMJOʹҭͯΒΕͨ 3FBDUΤϯδχΞͰ͢

͍͍ͩͨ͜Μͳ಺༰ ૬ର৭ߏจͱPLMDIΛซ༻͢Δͱʜ 5BJMXJOE౳ʹ͋ΔΑ͏ͳΧϥʔύϨοτΛࣗ࡞Ͱ͖Δ • ৭૬ͷ஋ʢඇ௚ײతͰ֮͑ͮΒ͍ʣͰ͸ͳ͘ɺΩʔϫʔυʢXIJUF CMVF DZBOʜʣͰϕʔεʹͳΔ৭ΛܾఆͰ͖Δ • -500 ͱ͔ -700 Έ͍ͨͳ਺஋Ͱɺҧ࿨ײͳ͘τʔϯΛௐ੔Ͱ͖Δ ň͋Δ৭ʹج͍ͮͯ৭Λੜ੒͢Δʼnॲཧ͕ +4ൈ͖Ͱ࣮૷Ͱ͖Δ • ࠷ѱɺ+4Ͱ࣮૷Ͱ͖Δ͚ͲͶʜ

લఏ • े෼ͳཪऔΓΛ͍ͯ͠ͳͯ͘ո͍͠Օॴ͕͋Δ • ৭ͷཧ࿦͕བྷΉ • ࢓༷ͷΦϨΦϨղऍͱϒϥ΢βͷڍಈ͕৯͍ҧͬͯΔʁ • ࠓ͙࣮͢຿Ͱ࢖͏͜ͱɺσβΠφrΤϯδχΞ࿈ܞ͸೦಄ʹஔ ͍͍ͯͳ͍ • ϓϩτλΠϓɾݸਓ։ൃ޲͚ • ϒϥ΢βαϙʔτ͕·ͪ·ͪɺ'JHNBͰ΋ະαϙʔτ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ৭ͷࡾଐੑʮ৭૬ʯʮ࠼౓ʯʮ໌౓ʯ ৭૬ )VF ʜͲͷ৭͔ ࠼౓ $ISPNB 4BUVSBUJPOʜ৭ຯ͕ͲΕ͚ͩڧ͍͔ ໌౓ #SJHIUOFTT -VNJOPTJUZʜͲΕ͚ͩ໌Δ͍͔ ·ͱΊͯ τʔϯ 5POF

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ 5BJMXJOEͷΧϥʔύϨοτ͸ ྑ͍ײ͡ʹ੔͑ΒΕͯΔ Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind. https://tailwindcss.com/docs/customizing-colors#default-color- palette ΑΓҾ༻ɻӈͷը૾΋ɺಉϖʔδͷεΫϦʔϯγϣοτ (PPHMF຋༁ ˠ 5BJMXJOEʹ͸ɺઐ໳Ո͕࡞੒͙ͨ͢͠ʹ࢖͑ΔσϑΥϧτͷΧϥʔύ Ϩοτؚ͕·Ε͓ͯΓɺಠࣗͷϒϥϯυΛ೦಄ʹஔ͍͍ͯͳ͍৔߹ͷग़ൃ఺ͱͯ͠࠷ద Ͱ͢ɻ ڧௐ͸චऀʹΑΔ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ ITM Ͱ͸ɺ-͕ݪ৭ ʮײ֮తʹ͸҉͍ʯ७ਮͳ੨΋ ʮײ֮తʹ͸໌Δ͍ʯ७ਮͳԫ৭΋ ✅ 3(#ͱͷ ରԠؔ܎͕෼͔Γ΍͍͢ 🤔 ࢦఆͨ͠਺஋ ࣮ࡍͷ৭ͷ Ϊϟοϓ͕͋Δ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ૉਓ͕ ITM Λ࢖ͬͯ΋ਅࣅͰ͖ͳ͍ 🤔 ࢦఆͨ͠਺஋ ࣮ࡍͷ৭ͷ Ϊϟοϓ͕͋Δ $ISPNFΛ࢖༻ DevTools > Rendering > Emulate vision deficiencies Ͱ "DISPNBUPQTJB OPDPMPS Λબ୒͢Δ ͜ͱͰάϨʔεέʔϧԽͨ͠΋ͷ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ PLMDIʁ ˠ ࢦఆͨ͠਺஋͕ݟͨ໨ͷ৭ʹΩϨΠʹରԠ͢Δ ಛʹɺ࠼౓ΛԼ͛ͨͱ͖ʢDͷ࠷ߴ͸ ͳͷͰ ૬౰ʣ -ະຬ͸ײ֮తͳ໌Δ͞ͷόϥπΩ͕ۃΊͯগͳ͍ ʢ࣮༻తʹ͸ɺͦ΋ͦ΋ߴ࠼౓ͷ৭͸ͦ΋ͦ΋ଟ༻͠ͳ͍ʣ লུ͚ͨ͠Ͳɺจࣈͱഎܠͷίϯτϥετ֬อʹ΋ʢ͋Δఔ౓ʁʣ࢖͑Δ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ༨ஊ-ɺ࣮ڍಈ͕ࢥͬͯͨͷͱҧ͏ -ͩͱਅͬനʹͳΓͦ͏ͳͷʹɺϒϥ΢β্Ͱ͸ͦ͏ͳΒͳ͍ɻͳͥʁ • https://oklch.com ͷΧϥʔϐοΧʔͩͱɺਅͬനʹͳΔ • $448(ͷ࢓༷ॻ΋ʮਅͬനʹͳΔʯͱݴͬͯΔͬΆ͍͕ʜ If the chroma of an Oklch color is 0% or 0, the hue component is powerless. If the lightness of an Oklch color is 0% or 0, or 100% or 1.0, the color will be displayed as black, or white, respectively due to gamut mapping to the display. https://drafts.csswg.org/css-color/#specifying-oklab-oklch 黄マーカーは筆者

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ oklch(from cyan 0.6 c h) ˠ ʮΩʔϫʔυ৭ DZBO ʹج͍ͮͯɺl Λ 0.6 ʹมߋɻ c ͱ h ͸ͦͷ··ʯˠ ʮ৭ 㲗 ৭૬ͷ஋ʯͷϚοϐϯάΛ҉هͤͣͱ΋ಡΈॻ͖Ͱ͖Δʂ Mͱ Dͷௐ੔͚ͩͰɺཉ͍͠τʔϯͷ৭͕ಘΒΕΔ ΋ͱʹͳΔ৭ l c h

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ$44ม਺ͱ΋૊Έ߹ΘͤՄೳ --c-bg-color: oklch(from cyan 0.6 c h); --c-bg-color-hover: oklch(from var(--c-bg-color) calc(1 + 0.05) c h) ʮ΋ͱʹͳΔ৭͔Βগ͚ͩ͠มߋʯ͕௚ײతʹॻ͚Δ ͔͠΋ɺόϦΞϯτʹΑͬͯ --c-bg-color ͕มΘΔ৔߹Ͱ΋ɺ ϗόʔ࣌ͷ৭ͷมԽͷ͔͕ͨ͠Ұ؏͍ͯ͠Δ .BUFSJBM%FTJHOͷʮςʔϚΧϥʔΛϢʔβʔ͕ΧελϚΠζͰ͖Δʯػ ೳͷΑ͏ʹɺಈతͳ৭ʹ΋ରԠͰ͖Δɻ ྫʮϘλϯʹϗόʔͨ͠ͱ͖͸ɺ΋ͱͷ৭ΑΓ໌౓Λগ্͚ͩ͛͠Δʯ

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕෆಁ໌౓΋ૢ࡞Ͱ͖Δ oklch(from white l c h / 0.8) ˠ ʮΩʔϫʔυ৭ XIJUFʹج͍ͮͯɺෆಁ໌౓͚ͩ 0.8 ʹมߋʯ XIJUFˠ 255,255,255 CMBDLˠ 0,0,0 ͷॻ͖׵͑·ͰαϘΕΔɻ ˠ ಡΉਓ͔Βݟͯ΋ɺҙਤ͕ΑΓ໌֬ʹͳΔ ΋ͱʹͳΔ৭ l c h / alpha rgba(255, 255, 255, 0.8) #&'03&

ࢹ֮తʹۉ౳ͳΧϥʔύϨοτΛࣗ࡞͢Δ ͳͥ૬ର৭ߏจʁ ʕ$44ม਺ º ෆಁ໌౓ oklch(from var(--color-background-base) l c h / 0.8) ˠ ʮ$44ม਺ʹج͍ͮͯɺෆಁ໌౓͚ͩ 0.8 ʹมߋʯ ʮϞʔμϧͷഎܠ৭͸ɺجຊతͳഎܠͷ৭ʢϥΠτ μʔΫͰ੾ΓସΘ ΔʣΛϕʔεʹ͢ΓΨϥεޮՌΛ͚ͭΔʯΈ͍ͨͳέʔεʹద͍ͯ͠Δ ΋ͱʹͳΔ৭ l c h / alpha PQBDJUZͩͱɺจࣈ΍ը૾ͳͲͷίϯςϯπ· Ͱ൒ಁ໌ʹͳΔʜ

·ͱΊ ૬ର৭ߏจͱPLMDIΛซ༻͢Δͱʜ 5BJMXJOE౳ʹ͋ΔΑ͏ͳΧϥʔύϨοτΛࣗ࡞Ͱ͖Δ • ૬ର৭ߏจͳͷͰɺ৭૬Ͱ͸ͳ͘ΩʔϫʔυͰجຊͷ৭ΛܾఆͰ͖Δ • ͋ͱ͸τʔϯΛܾఆ͢Δ͚ͩɻPLMDI ͳͷͰɺ l ͱ c ͔Β࣮ࡍͷݟ͑ํ͕༧ظ͠΍͘͢ɺҧ࿨ײ͕গͳ͍ ň͋Δ৭ʹج͍ͮͯ৭Λੜ੒͢Δʼnॲཧ͕ +4ൈ͖Ͱ࣮૷Ͱ͖Δ • ࠷ѱɺ+4Ͱ࣮૷Ͱ͖Δ͚ͲͶʜ --c-bg-color: oklch(from cyan 0.6 c h); --c-bg-color-hover: oklch(from var(--c-bg-color) calc(1 + 0.05) c h)

ͦͷଞࢀߟࢿྉɾπʔϧ౳ • ΧϥʔύϨοτͷίϯτϥετൺΛଗ͑Δͷʹ0,-$)Χϥʔ εϖʔε͕ศརͩͬͨ cOPUF https://note.com/yotsukura/n/n89997b613d2f • OKLCH in CSS: why we moved from RGB and HSL | Evil Martians https://evilmartians.com/chronicles/oklch-in-css-why- quit-rgb-hsl • OKLCH Color Picker & Converter https://oklch.com • ৭ c8JLJQFEJB https://ja.wikipedia.org/wiki/%E8%89%B2

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ גࣜձࣾΏΊΈ ίʔϙϨʔταΠτ https://www.yumemi.co.jp/ :6.&.**OD