PageSourceSearch

https://www.bo-no.design/

html bo-no.design collected 2026-09-30 14:35:20 UTC 252,165 bytes, 2 lines download raw bytes

1<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=3840&amp;q=75 3840w" imageSizes="(min-width: 640px) 33vw, 100vw"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=3840&amp;q=75 3840w" imageSizes="(min-width: 640px) 33vw, 100vw"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=3840&amp;q=75 3840w" imageSizes="(min-width: 640px) 33vw, 100vw"/><link rel="stylesheet" href="/_next/static/immutable/chunks/0jhpuhbft45p5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/0a4v3tyx6j7pb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/0q1f5jes82lw9.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/263q9-7kicdn7.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/immutable/chunks/2zqsbm8s85161.js"/>
1<script src="/_next/static/immutable/chunks/1191lj8_x8otc.js" async=""></script>
1<script src="/_next/static/immutable/chunks/2ksdk5lz194p0.js" async=""></script>
1<script src="/_next/static/immutable/chunks/2igzgd16tjc98.js" async=""></script>
1<script src="/_next/static/immutable/chunks/37-yve0ovb8vz.js" async=""></script>
1<script src="/_next/static/immutable/chunks/turbopack-0n1k3gepwcpfi.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0x-9rc1bm-510.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/3vuhqfn8nseb-.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/29ty20mqm4ssi.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0ugnpj31j6t22.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/3qdd5qfsz8ibs.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/1jve738u46ux3.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/43tgn399trdzz.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/2_ybbdtat719g.js" async="" crossorigin=""></script>
1<meta name="theme-color" content="#102720"/><title>BONO - UIUXデザインを学ぶ</title><meta name="description" content="UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。未経験からUIUXデザイナーへ。"/><link rel="manifest" href="/manifest.webmanifest"/><link rel="canonical" href="https://www.bo-no.design"/><meta property="og:title" content="BONO - UIUXデザインを学ぶ"/><meta property="og:description" content="UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。未経験からUIUXデザイナーへ。"/><meta property="og:site_name" content="BONO"/><meta property="og:locale" content="ja_JP"/><meta property="og:image" content="https://www.bo-no.design/opengraph-image?c09ffd9a992bb04d"/><meta property="og:image:type" content="image/png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="BONO - UIUXデザインを学ぶ"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="BONO - UIUXデザインを学ぶ"/><meta name="twitter:description" content="UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。"/><meta name="twitter:image" content="https://www.bo-no.design/opengraph-image?c09ffd9a992bb04d"/><meta name="twitter:image:alt" content="BONO - UIUXデザインを学ぶ"/><meta name="twitter:image:type" content="image/png"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><link rel="icon" href="/favicon.ico?favicon.1jo9hc7td2fwu.ico" sizes="48x48" type="image/x-icon"/><link rel="apple-touch-icon" href="/apple-icon.png?apple-icon.2po69at1_s4uv.png" sizes="180x180" type="image/png"/><meta name="next-size-adjust" content=""/>
1<script src="/_next/static/immutable/chunks/0c0hxoamwjsbw.js" noModule=""></script>
1</head><body class="geist_mono_5ce8c3f-module__SSBbPG__variable m_plus_1_1eb986dd-module__wXsgxa__variable antialiased"><div hidden=""><!--$--><!--/$--></div><div class="min-h-screen flex relative bg-base"><div class="fixed inset-x-0 top-0 pointer-events-none z-0 transition-opacity duration-1000 ease-out h-[74px]" style="background:linear-gradient(180deg, rgb(230, 230, 239) 0%, rgb(250, 242, 237) 44.3%, rgb(249, 248, 246) 84.3%, rgba(249, 248, 246, 0) 100%);opacity:0"></div><aside class="hidden lg:block fixed left-0 top-0 h-screen z-10"><nav class="w-[200px] h-full inline-flex flex-col justify-start items-start gap-4" role="navigation" aria-label="メインナビゲーション"><div class="w-full flex flex-col items-start"><div class="relative w-full"><div class="w-full"><div class="w-full px-[30px] py-[33px]"><a class="flex items-center" href="/"><svg width="81" height="24" viewBox="0 0 68 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.27461 14.4641H6.06843C6.97918 14.4641 7.63147 14.3463 8.02527 14.1108C8.41915 13.8752 8.61607 13.4971 8.61607 12.9765C8.61607 12.4557 8.41915 12.0776 8.02527 11.8421C7.63147 11.6066 6.97918 11.4888 6.06843 11.4888H5.27461V14.4641ZM5.27461 8.77386H5.9392C7.07146 8.77386 7.63761 8.32135 7.63761 7.41634C7.63761 6.51138 7.07146 6.05887 5.9392 6.05887H5.27461V8.77386ZM1.65625 3.26953H7.04688C8.32681 3.26953 9.29913 3.57945 9.96371 4.19931C10.6283 4.81916 10.9605 5.71176 10.9605 6.87706C10.9605 7.58374 10.8314 8.17258 10.5729 8.64365C10.3268 9.10235 9.94525 9.49285 9.42833 9.81521C9.94525 9.91435 10.3822 10.0693 10.7391 10.2801C11.1083 10.4784 11.4037 10.7264 11.6252 11.0239C11.8591 11.3214 12.0252 11.6561 12.1237 12.0281C12.222 12.4 12.2714 12.7967 12.2714 13.2182C12.2714 13.8752 12.1543 14.4579 11.9205 14.9662C11.6991 15.4745 11.379 15.9022 10.9605 16.2493C10.5545 16.5964 10.0559 16.8567 9.46525 17.0303C8.87453 17.2039 8.2099 17.2906 7.47148 17.2906H1.65625V3.26953Z" fill="#151834"></path><path d="M18.2415 10.28C18.2415 10.8378 18.3462 11.3523 18.5554 11.8234C18.7646 12.2945 19.0477 12.7036 19.4047 13.0507C19.7615 13.3978 20.1738 13.6706 20.6414 13.8689C21.1214 14.0549 21.6261 14.1478 22.1553 14.1478C22.6845 14.1478 23.183 14.0549 23.6506 13.8689C24.1306 13.6706 24.5491 13.3978 24.9059 13.0507C25.2752 12.7036 25.5644 12.2945 25.7736 11.8234C25.9829 11.3523 26.0875 10.8378 26.0875 10.28C26.0875 9.72208 25.9829 9.20763 25.7736 8.73655C25.5644 8.26542 25.2752 7.85635 24.9059 7.50924C24.5491 7.16212 24.1306 6.89558 23.6506 6.70961C23.183 6.51127 22.6845 6.41206 22.1553 6.41206C21.6261 6.41206 21.1214 6.51127 20.6414 6.70961C20.1738 6.89558 19.7615 7.16212 19.4047 7.50924C19.0477 7.85635 18.7646 8.26542 18.5554 8.73655C18.3462 9.20763 18.2415 9.72208 18.2415 10.28ZM14.457 10.28C14.457 9.23863 14.6478 8.2716 15.0294 7.37903C15.4109 6.47407 15.9401 5.68685 16.617 5.0174C17.2938 4.34796 18.1001 3.82729 19.0354 3.45537C19.983 3.07106 21.023 2.87891 22.1553 2.87891C23.2752 2.87891 24.3091 3.07106 25.2567 3.45537C26.2044 3.82729 27.0167 4.34796 27.6936 5.0174C28.3828 5.68685 28.9182 6.47407 29.2997 7.37903C29.6812 8.2716 29.872 9.23863 29.872 10.28C29.872 11.3213 29.6812 12.2945 29.2997 13.1995C28.9182 14.0921 28.3828 14.8731 27.6936 15.5425C27.0167 16.212 26.2044 16.7389 25.2567 17.1232C24.3091 17.495 23.2752 17.681 22.1553 17.681C21.023 17.681 19.983 17.495 19.0354 17.1232C18.1001 16.7389 17.2938 16.212 16.617 15.5425C15.9401 14.8731 15.4109 14.0921 15.0294 13.1995C14.6478 12.2945 14.457 11.3213 14.457 10.28Z" fill="#151834"></path><path d="M32.9121 17.2906V3.26953H36.5305L43.2134 11.8421V3.26953H46.8133V17.2906H43.2134L36.5305 8.71804V17.2906H32.9121Z" fill="#151834"></path><path d="M53.804 10.28C53.804 10.8378 53.9087 11.3523 54.1179 11.8234C54.3271 12.2945 54.6102 12.7036 54.9671 13.0507C55.324 13.3978 55.7363 13.6706 56.2039 13.8689C56.6839 14.0549 57.1886 14.1478 57.7178 14.1478C58.2469 14.1478 58.7454 14.0549 59.2131 13.8689C59.693 13.6706 60.1116 13.3978 60.4684 13.0507C60.8377 12.7036 61.1268 12.2945 61.3361 11.8234C61.5453 11.3523 61.6499 10.8378 61.6499 10.28C61.6499 9.72208 61.5453 9.20763 61.3361 8.73655C61.1268 8.26542 60.8377 7.85635 60.4684 7.50924C60.1116 7.16212 59.693 6.89558 59.2131 6.70961C58.7454 6.51127 58.2469 6.41206 57.7178 6.41206C57.1886 6.41206 56.6839 6.51127 56.2039 6.70961C55.7363 6.89558 55.324 7.16212 54.9671 7.50924C54.6102 7.85635 54.3271 8.26542 54.1179 8.73655C53.9087 9.20763 53.804 9.72208 53.804 10.28ZM50.0195 10.28C50.0195 9.23863 50.2102 8.2716 50.5918 7.37903C50.9733 6.47407 51.5025 5.68685 52.1795 5.0174C52.8563 4.34796 53.6625 3.82729 54.5978 3.45537C55.5455 3.07106 56.5855 2.87891 57.7178 2.87891C58.8377 2.87891 59.8715 3.07106 60.8192 3.45537C61.7669 3.82729 62.579 4.34796 63.256 5.0174C63.9455 5.68685 64.4804 6.47407 64.862 7.37903C65.2437 8.2716 65.4342 9.23863 65.4342 10.28C65.4342 11.3213 65.2437 12.2945 64.862 13.1995C64.4804 14.0921 63.9455 14.8731 63.256 15.5425C62.579 16.212 61.7669 16.7389 60.8192 17.1232C59.8715 17.495 58.8377 17.681 57.7178 17.681C56.585
15 17.681 55.5455 17.495 54.5978 17.1232C53.6625 16.7389 52.8563 16.212 52.1795 15.5425C51.5025 14.8731 50.9733 14.0921 50.5918 13.1995C50.2102 12.2945 50.0195 11.3213 50.0195 10.28Z" fill="#151834"></path></svg></a></div></div></div><form class="w-full px-[15px]" role="search"><div class="flex items-center gap-[12px] bg-white border border-gray-200 rounded-[12px] px-[14px] py-[5px] focus-within:border-gray-900 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search w-5 h-5 text-gray-400 flex-shrink-0 pointer-events-none" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><input type="text" placeholder="探す" aria-label="検索" class="w-full bg-transparent outline-none border-0 font-noto-sans-jp text-[13px] tracking-tight leading-[28px] text-[#2F3037] placeholder:text-[#64748b]" value=""/></div></form></div><div class="w-full flex flex-col items-start px-[15px]"><div class="w-full flex flex-col items-start gap-0"><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-[rgba(47,48,55,0.08)] bg-[linear-gradient(111.3507deg,rgba(47,48,55,0.08)_9.1965%,rgba(47,48,55,0.03)_79.127%)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" aria-current="page" href="/top"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M17.79 22.75H6.21c-2.74 0-4.96-2.23-4.96-4.97v-7.41c0-1.36.84-3.07 1.92-3.91l5.39-4.2C10.18 1 12.77.94 14.45 2.12l6.18 4.33c1.19.83 2.12 2.61 2.12 4.06v7.28c0 2.73-2.22 4.96-4.96 4.96ZM9.48 3.44l-5.39 4.2c-.71.56-1.34 1.83-1.34 2.73v7.41a3.47 3.47 0 0 0 3.46 3.47h11.58c1.91 0 3.46-1.55 3.46-3.46v-7.28c0-.96-.69-2.29-1.48-2.83l-6.18-4.33c-1.14-.8-3.02-.76-4.11.09Z" fill="#2F3037"></path><path d="M12 18.75c-.41 0-.75-.34-.75-.75v-3c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">トップ</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/roadmap"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15.65 21.408c-.43 0-.86-.09-1.21-.26l-5.25-2.63c-.3-.15-.89-.14-1.18.03l-2.36 1.35c-1.02.58-2.07.66-2.86.19-.8-.46-1.25-1.4-1.25-2.58v-9.72c0-.91.6-1.94 1.39-2.39l4.33-2.48c.73-.42 1.84-.45 2.59-.07l5.25 2.63c.3.15.88.13 1.18-.03l2.35-1.34c1.02-.58 2.07-.66 2.86-.19.8.46 1.25 1.4 1.25 2.58v9.73c0 .91-.6 1.94-1.39 2.39l-4.33 2.48c-.38.2-.88.31-1.37.31Zm-7.01-4.49c.43 0 .86.09 1.21.26l5.25 2.63c.3.15.88.13 1.18-.03l4.33-2.48c.32-.18.63-.72.63-1.08v-9.73c0-.63-.18-1.1-.51-1.28-.32-.18-.82-.11-1.36.2l-2.35 1.34c-.73.42-1.84.45-2.59.07l-5.25-2.63c-.3-.15-.88-.13-1.18.03l-4.33 2.48c-.32.18-.63.72-.63 1.09v9.73c0 .63.18 1.1.5 1.28.32.19.82.11 1.37-.2l2.35-1.34c.39-.23.89-.34 1.38-.34Z" fill="#2F3037"></path><path d="M8.559 17.75c-.41 0-.75-.34-.75-.75V4c0-.41.34-.75.75-.75s.75.34.75.75v13c0 .41-.34.75-.75.75ZM15.73 20.751c-.41 0-.75-.34-.75-.75V6.621c0-.41.34-.75.75-.75s.75.34.75.75v13.38c0 .41-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">ロードマップ</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/questions"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8 22.321c-.28 0-.57-.07-.83-.21-.57-.3-.92-.9-.92-1.54v-1.42c-3.02-.31-5-2.53-5-5.71v-6c0-3.44 2.31-5.75 5.75-5.75h10c3.44 0 5.75 2.31 5.75 5.75v6c0 3.44-2.31 5.75-5.75 5.75h-3.77l-4.26 2.84c-.29.19-.63.29-.97.29ZM7 3.181c-2.58 0-4.25 1.67-4.25 4.25v6c0 2.58 1.67 4.25 4.25 4.25.41 0 .75.34.75.75v2.13c0 .13.08.19.13.22s.15.06.26-.01l4.45-2.96c.12-.08.27-.13.42-.13h4c2.58 0 4.25-1.67 4.25-4.25v-6c0-2.58-1.67-4.25-4.25-4.25H7Z" fill="#2F3037"></path><path d="M12 12.11c-.41 0-.75-.34-.75-.75v-.21c0-1.16.85-1.73 1.17-1.95.37-.25.49-.42.49-.68 0-.5-.41-.91-.91-.91s-.91.41-.91.91c0 .41-.34.75-.75.75s-.75-.34-.75-.75c0-1.33 1.08-2.41 2.41-2.41s2.41 1.08 2.41 2.41c0 1.14-.84 1.71-1.15 1.92-.39.26-.51.43-.51.71v.21c0 .42-.34.75-.75.75ZM12 14.602a.749.749 0 1 1-.002-1.498.749.749 0 0 1 .002 1.498Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">掲示板</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/lessons"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3.5 18.75c-.41 0-.75-.34-.75-.75V7c0-4.41 1.34-5.75 5.75-5.75h7c4.41 0 5.75 1.34 5.75 5.75v10c0 .16 0 .31-.01.47-.03.41-.4.73-.8.7a.757.757 0 0 1-.7-.8c.01-.12.01-.25.01-.37V7c0-3.57-.67-4.25-4.25-4.25h-7c-3.58 0-4.25.68-4.25 4.25v11c0 .41-.34.75-.75.75Z" fill="#2F3037"></path><path d="M17 22.75H7a4.26 4.26 0 0 1-4.25-4.25v-.65c0-1.99 1.62-3.6 3.6-3.6H20.5c.41 0 .75.34.75.75v3.5A4.26 4.26 0 0 1 17 22.75Zm-10.65-7a2.1 2.1 0 0 0-2.1 2.1v.65c0 1.52 1.23 2.75 2.75 2.75h10c1.52 0 2.75-1.23 2.75-2.75v-2.75H6.35ZM16 7.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h8c.41 0 .75.34.75.75s-.34.75-.75.75ZM13 11.25H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5c.41 0 .75.34.75.75s-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">レッスン</span></a></div></div><div class="w-full flex-col items-start px-[15px] hidden"><div class="w-full h-[32px] px-[6px] rounded-[8px] inline-flex justify-start items-center text-text-muted text-[10px] font-bold leading-[16
1px] select-none" role="heading" aria-level="2">コミュニティ</div><div class="w-full flex flex-col items-start gap-0"><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/feedbacks"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M7.26 18.892c-.08 0-.16-.01-.24-.02-.6-.08-1.11-.46-1.36-1l-1.26-2.77c-2-1.48-3.15-3.69-3.15-6.09 0-4.27 3.7-7.75 8.25-7.75 3.21 0 6.14 1.76 7.47 4.49.51 1.01.78 2.11.78 3.26 0 4.16-3.51 7.57-7.89 7.74l-1.26 1.52c-.34.39-.83.62-1.34.62ZM9.5 2.752c-3.72 0-6.75 2.8-6.75 6.25 0 1.97.98 3.79 2.68 4.99.11.08.2.18.25.3l1.34 2.95c.05.11.15.14.2.14.05.01.15 0 .22-.08l1.48-1.78c.14-.17.35-.27.58-.27 3.72 0 6.75-2.8 6.75-6.25 0-.91-.21-1.78-.62-2.59-1.08-2.23-3.49-3.66-6.13-3.66Z" fill="#2F3037"></path><path d="M16.74 22.75c-.52 0-1-.23-1.34-.63l-1.26-1.51c-2.42-.1-4.7-1.21-6.16-3.01a.74.74 0 0 1 .01-.95l.93-1.12c.14-.17.35-.27.58-.27 3.72 0 6.75-2.8 6.75-6.25 0-.91-.21-1.78-.62-2.59a.75.75 0 0 1 .84-1.07c3.7.85 6.28 3.94 6.28 7.52 0 2.4-1.15 4.61-3.15 6.09l-1.26 2.77c-.26.56-.77.94-1.38 1.01-.07.01-.15.01-.22.01ZM9.56 17.1c1.25 1.27 3.05 2.01 4.94 2.01.22 0 .43.1.58.27l1.48 1.78c.07.09.16.1.22.09.04 0 .15-.03.21-.15l1.34-2.95c.06-.12.14-.23.25-.3 1.7-1.2 2.68-3.02 2.68-4.99 0-2.4-1.47-4.53-3.71-5.58.14.56.21 1.13.21 1.72 0 4.16-3.51 7.57-7.89 7.74l-.31.36ZM12 9.75H7c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5c.41 0 .75.34.75.75s-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">フィードバック</span></a></div></div><div class="w-full flex flex-col items-start px-[15px]"><div class="w-full h-[32px] px-[6px] rounded-[8px] inline-flex justify-start items-center text-text-muted text-[10px] font-bold leading-[16px] select-none" role="heading" aria-level="2">サブ</div><div class="w-full flex flex-col items-start gap-0"><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/guide"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M16 22.75H8c-3.65 0-5.75-2.1-5.75-5.75V7c0-3.65 2.1-5.75 5.75-5.75h8c3.65 0 5.75 2.1 5.75 5.75v10c0 3.65-2.1 5.75-5.75 5.75Zm-8-20C5.14 2.75 3.75 4.14 3.75 7v10c0 2.86 1.39 4.25 4.25 4.25h8c2.86 0 4.25-1.39 4.25-4.25V7c0-2.86-1.39-4.25-4.25-4.25H8Z" fill="#2F3037"></path><path d="M18.5 9.25h-2c-1.52 0-2.75-1.23-2.75-2.75v-2c0-.41.34-.75.75-.75s.75.34.75.75v2c0 .69.56 1.25 1.25 1.25h2c.41 0 .75.34.75.75s-.34.75-.75.75ZM12 13.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h4c.41 0 .75.34.75.75s-.34.75-.75.75ZM16 17.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h8c.41 0 .75.34.75.75s-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">読みもの</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/achievements"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 15.75c-4.14 0-7.5-3.25-7.5-7.25S7.86 1.25 12 1.25c4.14 0 7.5 3.25 7.5 7.25s-3.36 7.25-7.5 7.25Zm0-13c-3.31 0-6 2.58-6 5.75s2.69 5.75 6 5.75 6-2.58 6-5.75-2.69-5.75-6-5.75Z" fill="#2F3037"></path><path d="M15.62 22.748c-.28 0-.56-.07-.85-.2l-2.69-1.27a.543.543 0 0 0-.18 0l-2.67 1.26c-.59.28-1.21.27-1.69-.04-.5-.32-.79-.91-.78-1.61l.01-7.38c0-.41.32-.77.75-.75.41 0 .75.34.75.75l-.01 7.38c0 .22.06.33.09.34.02.01.11.02.25-.05l2.68-1.27c.43-.2 1.02-.2 1.45 0l2.69 1.27c.14.07.23.06.25.05.03-.02.09-.13.09-.34v-7.56c0-.41.34-.75.75-.75s.75.34.75.75v7.56c0 .71-.29 1.29-.79 1.61-.26.17-.55.25-.85.25Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">みんなの実績</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/how-to"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12.01 17.001c-.85 0-1.71-.22-2.38-.65l-6.02-3.93a3.923 3.923 0 0 1-1.79-3.3c0-1.34.67-2.57 1.79-3.3l6.03-3.92c1.34-.87 3.43-.87 4.76.01l5.99 3.93c1.11.73 1.78 1.96 1.78 3.29s-.67 2.56-1.78 3.29l-5.99 3.93c-.67.44-1.53.65-2.39.65Zm0-14.25c-.5
17 0-1.14.13-1.55.41l-6.02 3.92c-.7.46-1.11 1.2-1.11 2.04 0 .84.4 1.58 1.11 2.04l6.02 3.93c.83.54 2.29.54 3.12 0l5.99-3.93c.7-.46 1.1-1.2 1.1-2.04 0-.84-.4-1.58-1.1-2.04l-5.99-3.93c-.42-.26-.99-.4-1.57-.4Z" fill="#2F3037"></path><path d="M12.001 22.748c-.44 0-.89-.06-1.25-.18l-3.19-1.06c-1.51-.5-2.7-2.15-2.69-3.74l.01-4.69c0-.41.34-.75.75-.75s.75.34.75.75l-.01 4.69c0 .94.78 2.02 1.67 2.32l3.19 1.06c.4.13 1.14.13 1.54 0l3.19-1.06c.89-.3 1.67-1.38 1.67-2.31v-4.64c0-.41.34-.75.75-.75s.75.34.75.75v4.64c0 1.59-1.18 3.23-2.69 3.74l-3.19 1.06c-.36.11-.81.17-1.25.17ZM21.398 15.75c-.41 0-.75-.34-.75-.75V9c0-.41.34-.75.75-.75s.75.34.75.75v6c0 .41-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">使い方</span></a></div></div><div class="w-full flex flex-col items-start px-[15px] lg:mt-auto lg:pb-6"><div class="w-full h-[32px] px-[6px] rounded-[8px] inline-flex justify-start items-center text-text-muted text-[10px] font-bold leading-[16px] select-none" role="heading" aria-level="2">その他</div><div class="w-full flex flex-col items-start gap-0"><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/subscription"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M17.74 22.75H6.26c-2.49 0-4.51-2.02-4.51-4.51v-6.73C1.75 9.02 3.77 7 6.26 7h11.48c2.49 0 4.51 2.02 4.51 4.51v1.44c0 .41-.34.75-.75.75h-2.02c-.35 0-.67.13-.9.37l-.01.01c-.28.27-.41.64-.38 1.02.06.66.69 1.19 1.41 1.19h1.9c.41 0 .75.34.75.75v1.19c0 2.5-2.02 4.52-4.51 4.52ZM6.26 8.5c-1.66 0-3.01 1.35-3.01 3.01v6.73c0 1.66 1.35 3.01 3.01 3.01h11.48c1.66 0 3.01-1.35 3.01-3.01v-.44H19.6c-1.51 0-2.79-1.12-2.91-2.56-.08-.82.22-1.63.82-2.22.52-.53 1.22-.82 1.97-.82h1.27v-.69c0-1.66-1.35-3.01-3.01-3.01H6.26Z" fill="#2F3037"></path><path d="M2.5 13.16c-.41 0-.75-.34-.75-.75V7.84c0-1.49.94-2.84 2.33-3.37l7.94-3c.82-.31 1.73-.2 2.44.3.72.5 1.14 1.31 1.14 2.18v3.8c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-3.8c0-.38-.18-.73-.5-.95-.32-.22-.7-.27-1.06-.13l-7.94 3c-.81.31-1.36 1.1-1.36 1.97v4.57c.01.42-.33.75-.74.75ZM19.599 17.8c-1.51 0-2.79-1.12-2.91-2.56-.08-.83.22-1.64.82-2.23.51-.52 1.21-.81 1.96-.81h2.08c.99.03 1.75.81 1.75 1.77v2.06c0 .96-.76 1.74-1.72 1.77h-1.98Zm1.93-4.1h-2.05c-.35 0-.67.13-.9.37-.29.28-.43.66-.39 1.04.06.66.69 1.19 1.41 1.19h1.96c.13 0 .25-.12.25-.27v-2.06c0-.15-.12-.26-.28-.27Z" fill="#2F3037"></path><path d="M14 12.75H7c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h7c.41 0 .75.34.75.75s-.34.75-.75.75Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">料金プラン</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/training"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M7.87 21.28c-.79 0-1.54-.19-2.2-.57-1.56-.9-2.42-2.73-2.42-5.14V8.44c0-2.42.86-4.24 2.42-5.14 1.56-.9 3.57-.73 5.67.48l6.17 3.56c2.09 1.21 3.25 2.87 3.25 4.67 0 1.8-1.15 3.46-3.25 4.67l-6.17 3.56c-1.21.69-2.39 1.04-3.47 1.04Zm0-17.06c-.54 0-1.02.12-1.45.37-1.08.62-1.67 1.99-1.67 3.85v7.12c0 1.86.59 3.22 1.67 3.85 1.08.63 2.56.45 4.17-.48l6.17-3.56c1.61-.93 2.5-2.12 2.5-3.37s-.89-2.44-2.5-3.37l-6.17-3.56c-.98-.56-1.9-.85-2.72-.85Z" fill="#2F3037"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">トレーニング</span></a><a class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" href="/login"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path fill="#2F3037" d="M11.68 15.37c-.19 0-.38-.07-.53-.22a.754.754 0 010-1.06l2.03-2.03-2.03-2.03a.754.754 0 010-1.06c.29-.29.77-.29 1.06 0l2.56 2.56c.29.29.29.77 0 1.06l-2.56 2.56c-.14.15-.34.22-.53.22z"></path><path fill="#2F3037" d="M14.17 12.81H4c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h10.17c.41 0 .75.34.75.75s-.34.75-.75.75z"></path><path fill="#2F3037" d="M12 20.75c-.41 0-.75-.34-.75-.75s.34-.75.75-.75c4.27 0 7.25-2.98 7.25-7.25S16.27 4.75 12 4.75c-.41 0-.75-.34-.75-.75s.34-.75.75-.75c5.15 0 8.75 3.6 8.75 8.75s-3.6 8.75-8.75 8.75z"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">ログイン</span></a><a href="https://legacy.bo-no.design" class="relative w-full rounded-[20px] px-[14px] py-[9px] inline-flex items-center gap-[10px] font-noto-sans-jp text-[13px] font-medium leading-none text-text-primary transition-colors duration-150 border border-transparent bg-transparent hover:bg-[rgba(47,48,55,0.04)] active:bg-[rgba(47,48,55,0.08)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white" target="_blank" rel="noopener noreferrer"><span class="w-5 h-5 flex-shrink-0 inline-flex flex-col justify-center items-center text-text-primary" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path fill="#2F3037" d="M15.26 22.25H8.74c-4.91 0-7.01-2.1-7.01-7.01v-.13c0-4.44 1.75-6.58 5.67-6.95.4-.03.78.27.82.68.04.41-.26.78-.68.82-3.14.29-4.31 1.77-4.31 5.46v.13c0 4.07 1.44 5.51 5.51 5.51h6.52c4.07 0 5.51-1.44 5.51-5.51v-.13c0-3.71-1.19-5.19-4.39-5.46a.75.75 0 01-.68-.81c.04-.41.39-.72.81-.68 3.98.34 5.76 2.49 5.76 6.96v.13c0 4.89-2.1 6.99-7.01 6.99z"></path><path fill="#2F3037" d="M12 15.75c-.41 0-.75-.34-.75-.75V3.62c0-.41.34-.75.75-.75s.75.34.75.75V15c0 .41-.34.75-.75.75z"></path><path fill="#2F3037" d="M15.35 6.6c-.19 0-.38-.07-.53-.22L12 3.56 9.18 6.38c-.29.29-.77.29-1.06 0a.754.754 0 010-1.06l3.35-3.35c.29-.29.77-.29 1.06 0l3.35 3.35c.29.29.29.77 0 1.06-.14.15-.34.22-.53.22z"></path></svg></span><span class="pb-[2px] whitespace-nowrap overflow-hidden text-ellipsis">旧サイト</span></a></div></div></nav></aside><div class="lg:hidden fixed top-0 left-0 right-0 z-50 flex flex-col transition-all duration-200 bg-transparent"><div class="h-14 flex items-center justify-center relative"><div class="absolute left-4"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-bold font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;
1_svg]:shrink-0 cursor-pointer border border-[#EBEBEB] text-black hover:bg-gray-50 w-10 h-10 bg-white rounded-lg shadow-md" aria-label="メニューを開く" aria-expanded="false" type="button" aria-haspopup="dialog" aria-controls="radix-_R_2vb_" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></div><a class="flex items-center" href="/"><svg width="68" height="20" viewBox="0 0 68 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.27461 14.4641H6.06843C6.97918 14.4641 7.63147 14.3463 8.02527 14.1108C8.41915 13.8752 8.61607 13.4971 8.61607 12.9765C8.61607 12.4557 8.41915 12.0776 8.02527 11.8421C7.63147 11.6066 6.97918 11.4888 6.06843 11.4888H5.27461V14.4641ZM5.27461 8.77386H5.9392C7.07146 8.77386 7.63761 8.32135 7.63761 7.41634C7.63761 6.51138 7.07146 6.05887 5.9392 6.05887H5.27461V8.77386ZM1.65625 3.26953H7.04688C8.32681 3.26953 9.29913 3.57945 9.96371 4.19931C10.6283 4.81916 10.9605 5.71176 10.9605 6.87706C10.9605 7.58374 10.8314 8.17258 10.5729 8.64365C10.3268 9.10235 9.94525 9.49285 9.42833 9.81521C9.94525 9.91435 10.3822 10.0693 10.7391 10.2801C11.1083 10.4784 11.4037 10.7264 11.6252 11.0239C11.8591 11.3214 12.0252 11.6561 12.1237 12.0281C12.222 12.4 12.2714 12.7967 12.2714 13.2182C12.2714 13.8752 12.1543 14.4579 11.9205 14.9662C11.6991 15.4745 11.379 15.9022 10.9605 16.2493C10.5545 16.5964 10.0559 16.8567 9.46525 17.0303C8.87453 17.2039 8.2099 17.2906 7.47148 17.2906H1.65625V3.26953Z" fill="#151834"></path><path d="M18.2415 10.28C18.2415 10.8378 18.3462 11.3523 18.5554 11.8234C18.7646 12.2945 19.0477 12.7036 19.4047 13.0507C19.7615 13.3978 20.1738 13.6706 20.6414 13.8689C21.1214 14.0549 21.6261 14.1478 22.1553 14.1478C22.6845 14.1478 23.183 14.0549 23.6506 13.8689C24.1306 13.6706 24.5491 13.3978 24.9059 13.0507C25.2752 12.7036 25.5644 12.2945 25.7736 11.8234C25.9829 11.3523 26.0875 10.8378 26.0875 10.28C26.0875 9.72208 25.9829 9.20763 25.7736 8.73655C25.5644 8.26542 25.2752 7.85635 24.9059 7.50924C24.5491 7.16212 24.1306 6.89558 23.6506 6.70961C23.183 6.51127 22.6845 6.41206 22.1553 6.41206C21.6261 6.41206 21.1214 6.51127 20.6414 6.70961C20.1738 6.89558 19.7615 7.16212 19.4047 7.50924C19.0477 7.85635 18.7646 8.26542 18.5554 8.73655C18.3462 9.20763 18.2415 9.72208 18.2415 10.28ZM14.457 10.28C14.457 9.23863 14.6478 8.2716 15.0294 7.37903C15.4109 6.47407 15.9401 5.68685 16.617 5.0174C17.2938 4.34796 18.1001 3.82729 19.0354 3.45537C19.983 3.07106 21.023 2.87891 22.1553 2.87891C23.2752 2.87891 24.3091 3.07106 25.2567 3.45537C26.2044 3.82729 27.0167 4.34796 27.6936 5.0174C28.3828 5.68685 28.9182 6.47407 29.2997 7.37903C29.6812 8.2716 29.872 9.23863 29.872 10.28C29.872 11.3213 29.6812 12.2945 29.2997 13.1995C28.9182 14.0921 28.3828 14.8731 27.6936 15.5425C27.0167 16.212 26.2044 16.7389 25.2567 17.1232C24.3091 17.495 23.2752 17.681 22.1553 17.681C21.023 17.681 19.983 17.495 19.0354 17.1232C18.1001 16.7389 17.2938 16.212 16.617 15.5425C15.9401 14.8731 15.4109 14.0921 15.0294 13.1995C14.6478 12.2945 14.457 11.3213 14.457 10.28Z" fill="#151834"></path><path d="M32.9121 17.2906V3.26953H36.5305L43.2134 11.8421V3.26953H46.8133V17.2906H43.2134L36.5305 8.71804V17.2906H32.9121Z" fill="#151834"></path><path d="M53.804 10.28C53.804 10.8378 53.9087 11.3523 54.1179 11.8234C54.3271 12.2945 54.6102 12.7036 54.9671 13.0507C55.324 13.3978 55.7363 13.6706 56.2039 13.8689C56.6839 14.0549 57.1886 14.1478 57.7178 14.1478C58.2469 14.1478 58.7454 14.0549 59.2131 13.8689C59.693 13.6706 60.1116 13.3978 60.4684 13.0507C60.8377 12.7036 61.1268 12.2945 61.3361 11.8234C61.5453 11.3523 61.6499 10.8378 61.6499 10.28C61.6499 9.72208 61.5453 9.20763 61.3361 8.73655C61.1268 8.26542 60.8377 7.85635 60.4684 7.50924C60.1116 7.16212 59.693 6.89558 59.2131 6.70961C58.7454 6.51127 58.2469 6.41206 57.7178 6.41206C57.1886 6.41206 56.6839 6.51127 56.2039 6.70961C55.7363 6.89558 55.324 7.16212 54.9671 7.50924C54.6102 7.85635 54.3271 8.26542 54.1179 8.73655C53.9087 9.20763 53.804 9.72208 53.804 10.28ZM50.0195 10.28C50.0195 9.23863 50.2102 8.2716 50.5918 7.37903C50.9733 6.47407 51.5025 5.68685 52.1795 5.0174C52.8563 4.34796 53.6625 3.82729 54.5978 3.45537C55.5455 3.07106 56.5855 2.87891 57.7178 2.87891C58.8377 2.87891 59.8715 3.07106 60.8192 3.45537C61.7669 3.82729 62.579 4.34796 63.256 5.0174C63.9455 5.68685 64.4804 6.47407 64.862 7.37903C65.2437 8.2716 65.4342 9.23863 65.4342 10.28C65.4342 11.3213 65.2437 12.2945 64.862 13.1995C64.4804 14.0921 63.9455 14.8731 63.256 15.5425C62.579 16.212 61.7669 16.7389 60.8192 17.1232C59.8715 17.495 58.8377 17.681 57.7178 17.681C56.585
15 17.681 55.5455 17.495 54.5978 17.1232C53.6625 16.7389 52.8563 16.212 52.1795 15.5425C51.5025 14.8731 50.9733 14.0921 50.5918 13.1995C50.2102 12.2945 50.0195 11.3213 50.0195 10.28Z" fill="#151834"></path></svg></a></div></div><div class="flex-1 flex flex-col lg:ml-[200px] relative z-[1] min-w-0 w-full lg:w-[calc(100%-200px)]"><main class="flex-1 pt-14 lg:pt-0 min-w-0 w-full"><!--$?--><template id="B:0"></template><div class="min-h-screen flex items-center justify-center"><div class="flex flex-col items-center justify-center gap-3"><div class="animate-spin rounded-full border-2 border-gray-200 border-t-gray-600 h-12 w-12"></div><div class="font-medium text-gray-700 text-lg">読み込み中...</div></div></div><!--/$--></main><footer class="border-t border-border-light px-6 pt-12 pb-6 lg:px-11 lg:pt-14"><div class="flex flex-col gap-9 lg:flex-row lg:items-start lg:justify-between lg:gap-[72px]"><div class="max-w-[320px]"><a aria-label="BONO ホームへ" class="inline-block leading-none" href="/"><svg width="82" height="24" viewBox="0 0 68 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.27461 14.4641H6.06843C6.97918 14.4641 7.63147 14.3463 8.02527 14.1108C8.41915 13.8752 8.61607 13.4971 8.61607 12.9765C8.61607 12.4557 8.41915 12.0776 8.02527 11.8421C7.63147 11.6066 6.97918 11.4888 6.06843 11.4888H5.27461V14.4641ZM5.27461 8.77386H5.9392C7.07146 8.77386 7.63761 8.32135 7.63761 7.41634C7.63761 6.51138 7.07146 6.05887 5.9392 6.05887H5.27461V8.77386ZM1.65625 3.26953H7.04688C8.32681 3.26953 9.29913 3.57945 9.96371 4.19931C10.6283 4.81916 10.9605 5.71176 10.9605 6.87706C10.9605 7.58374 10.8314 8.17258 10.5729 8.64365C10.3268 9.10235 9.94525 9.49285 9.42833 9.81521C9.94525 9.91435 10.3822 10.0693 10.7391 10.2801C11.1083 10.4784 11.4037 10.7264 11.6252 11.0239C11.8591 11.3214 12.0252 11.6561 12.1237 12.0281C12.222 12.4 12.2714 12.7967 12.2714 13.2182C12.2714 13.8752 12.1543 14.4579 11.9205 14.9662C11.6991 15.4745 11.379 15.9022 10.9605 16.2493C10.5545 16.5964 10.0559 16.8567 9.46525 17.0303C8.87453 17.2039 8.2099 17.2906 7.47148 17.2906H1.65625V3.26953Z" fill="#151834"></path><path d="M18.2415 10.28C18.2415 10.8378 18.3462 11.3523 18.5554 11.8234C18.7646 12.2945 19.0477 12.7036 19.4047 13.0507C19.7615 13.3978 20.1738 13.6706 20.6414 13.8689C21.1214 14.0549 21.6261 14.1478 22.1553 14.1478C22.6845 14.1478 23.183 14.0549 23.6506 13.8689C24.1306 13.6706 24.5491 13.3978 24.9059 13.0507C25.2752 12.7036 25.5644 12.2945 25.7736 11.8234C25.9829 11.3523 26.0875 10.8378 26.0875 10.28C26.0875 9.72208 25.9829 9.20763 25.7736 8.73655C25.5644 8.26542 25.2752 7.85635 24.9059 7.50924C24.5491 7.16212 24.1306 6.89558 23.6506 6.70961C23.183 6.51127 22.6845 6.41206 22.1553 6.41206C21.6261 6.41206 21.1214 6.51127 20.6414 6.70961C20.1738 6.89558 19.7615 7.16212 19.4047 7.50924C19.0477 7.85635 18.7646 8.26542 18.5554 8.73655C18.3462 9.20763 18.2415 9.72208 18.2415 10.28ZM14.457 10.28C14.457 9.23863 14.6478 8.2716 15.0294 7.37903C15.4109 6.47407 15.9401 5.68685 16.617 5.0174C17.2938 4.34796 18.1001 3.82729 19.0354 3.45537C19.983 3.07106 21.023 2.87891 22.1553 2.87891C23.2752 2.87891 24.3091 3.07106 25.2567 3.45537C26.2044 3.82729 27.0167 4.34796 27.6936 5.0174C28.3828 5.68685 28.9182 6.47407 29.2997 7.37903C29.6812 8.2716 29.872 9.23863 29.872 10.28C29.872 11.3213 29.6812 12.2945 29.2997 13.1995C28.9182 14.0921 28.3828 14.8731 27.6936 15.5425C27.0167 16.212 26.2044 16.7389 25.2567 17.1232C24.3091 17.495 23.2752 17.681 22.1553 17.681C21.023 17.681 19.983 17.495 19.0354 17.1232C18.1001 16.7389 17.2938 16.212 16.617 15.5425C15.9401 14.8731 15.4109 14.0921 15.0294 13.1995C14.6478 12.2945 14.457 11.3213 14.457 10.28Z" fill="#151834"></path><path d="M32.9121 17.2906V3.26953H36.5305L43.2134 11.8421V3.26953H46.8133V17.2906H43.2134L36.5305 8.71804V17.2906H32.9121Z" fill="#151834"></path><path d="M53.804 10.28C53.804 10.8378 53.9087 11.3523 54.1179 11.8234C54.3271 12.2945 54.6102 12.7036 54.9671 13.0507C55.324 13.3978 55.7363 13.6706 56.2039 13.8689C56.6839 14.0549 57.1886 14.1478 57.7178 14.1478C58.2469 14.1478 58.7454 14.0549 59.2131 13.8689C59.693 13.6706 60.1116 13.3978 60.4684 13.0507C60.8377 12.7036 61.1268 12.2945 61.3361 11.8234C61.5453 11.3523 61.6499 10.8378 61.6499 10.28C61.6499 9.72208 61.5453 9.20763 61.3361 8.73655C61.1268 8.26542 60.8377 7.85635 60.4684 7.50924C60.1116 7.16212 59.693 6.89558 59.2131 6.70961C58.7454 6.51127 58.2469 6.41206 57.7178 6.41206C57.1886 6.41206 56.6839 6.51127 56.2039 6.70961C55.7363 6.89558 55.324 7.16212 54.9671 7.50924C54.6102 7.85635 54.3271 8.26542 54.1179 8.73655C53.9087 9.20763 53.804 9.72208 53.804 10.28ZM50.0195 10.28C50.0195 9.23863 50.2102 8.2716 50.5918 7.37903C50.9733 6.47407 51.5025 5.68685 52.1795 5.0174C52.8563 4.34796 53.6625 3.82729 54.5978 3.45537C55.5455 3.07106 56.5855 2.87891 57.7178 2.87891C58.8377 2.87891 59.8715 3.07106 60.8192 3.45537C61.7669 3.82729 62.579 4.34796 63.256 5.0174C63.9455 5.68685 64.4804 6.47407 64.862 7.37903C65.2437 8.2716 65.4342 9.23863 65.4342 10.28C65.4342 11.3213 65.2437 12.2945 64.862 13.1995C64.4804 14.0921 63.9455 14.8731 63.256 15.5425C62.579 16.212 61.7669 16.7389 60.8192 17.1232C59.8715 17.495 58.8377 17.681 57.7178 17.681C56.585
15 17.681 55.5455 17.495 54.5978 17.1232C53.6625 16.7389 52.8563 16.212 52.1795 15.5425C51.5025 14.8731 50.9733 14.0921 50.5918 13.1995C50.2102 12.2945 50.0195 11.3213 50.0195 10.28Z" fill="#151834"></path></svg></a><p class="mt-4 text-sm leading-relaxed text-text-secondary">BONOは、UI/UXデザインとAIを実践形式で学び、ユーザーの気持ちを動かす力を身につけるデザイン学習サービスです。</p><div class="mt-5 flex gap-4"><a href="https://www.youtube.com/channel/UCghPjck_LzxNMs2tI4PPYlQ/" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="text-text-secondary transition-colors hover:text-text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube" aria-hidden="true"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path><path d="m10 15 5-3-5-3z"></path></svg></a><a href="https://x.com/takumii_kai" target="_blank" rel="noopener noreferrer" aria-label="X" class="text-text-secondary transition-colors hover:text-text-primary"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg></a></div></div><nav aria-label="フッターナビゲーション" class="flex flex-wrap gap-x-14 gap-y-8"><div class="min-w-[140px]"><h2 class="mb-4 font-heading text-xs font-bold tracking-wide text-text-primary">学ぶ</h2><ul class="flex flex-col gap-3"><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/roadmap">UI/UXデザインのロードマップ</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/lessons">レッスン一覧</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/guide">スキルガイド</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/updates">新着</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/blog">デザイン記事</a></li></ul></div><div class="min-w-[140px]"><h2 class="mb-4 font-heading text-xs font-bold tracking-wide text-text-primary">コミュニティ</h2><ul class="flex flex-col gap-3"><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/questions">掲示板</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/achievements">みんなの実績</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/how-to">使い方</a></li></ul></div><div class="min-w-[140px]"><h2 class="mb-4 font-heading text-xs font-bold tracking-wide text-text-primary">サービス</h2><ul class="flex flex-col gap-3"><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/subscription">料金・プラン</a></li><li><a class="text-sm text-text-secondary transition-colors hover:text-text-primary" href="/how-to/feedback">フィードバック</a></li><li><a href="https://kaikun.bo-no.design/about" target="_blank" rel="noopener noreferrer" class="text-sm text-text-secondary transition-colors hover:text-text-primary">BONOについて</a></li><li><a href="https://forms.gle/mC445GwiNUoY9LD3A" target="_blank" rel="noopener noreferrer" class="text-sm text-text-secondary transition-colors hover:text-text-primary">お問い合わせ</a></li></ul></div></nav></div><div class="mt-10 flex flex-col gap-3 border-t border-border-light pt-5 sm:flex-row sm:items-center sm:justify-between"><div class="flex flex-wrap gap-x-5 gap-y-2"><a class="text-xs text-text-muted transition-colors hover:text-text-primary" href="/terms">利用規約</a><a class="text-xs text-text-muted transition-colors hover:text-text-primary" href="/privacy">プライバシーポリシー</a><a class="text-xs text-text-muted transition-colors hover:text-text-primary" href="/tokushoho">特定商取引法に基づく表示</a></div><p class="text-xs text-text-muted">© BONO. All rights reserved.</p></div></footer></div><div role="region" aria-label="Notifications (F8)" tabindex="-1" style="pointer-events:none"><ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"></ol></div><!--$--><!--/$--></div>
1<script>requestAnimationFrame(function(){$RT=performance.now()});</script>
1<script src="/_next/static/immutable/chunks/2zqsbm8s85161.js" id="_R_" async=""></script>
1<div hidden id="S:0">
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://www.bo-no.design/#website","url":"https://www.bo-no.design","name":"BONO","description":"UIUXデザインを体系的に学べるオンライン学習プラットフォーム","inLanguage":"ja"},{"@type":"Organization","@id":"https://www.bo-no.design/#organization","name":"BONO","url":"https://www.bo-no.design","logo":{"@type":"ImageObject","url":"https://www.bo-no.design/images/bono-logo.png"},"sameAs":["https://www.youtube.com/channel/UCghPjck_LzxNMs2tI4PPYlQ/","https://x.com/takumii_kai"]}]}</script>
1<section class="relative overflow-hidden px-6 lg:px-12"><div class="pt-12 pb-8 lg:pt-16"><div class="grid grid-cols-1 gap-6 lg:grid-cols-4 lg:items-end lg:gap-[21px]"><div class="w-full shrink-0 lg:col-span-2"><h1 class="text-[28px] font-medium leading-[1.6] tracking-[1px] text-text-primary lg:text-[32px]" style="font-family:var(--font-mplus-1-var), &#x27;M PLUS 1&#x27;, &#x27;Hiragino Kaku Gothic ProN&#x27;, &#x27;Hiragino Sans&#x27;, &#x27;Meiryo&#x27;, sans-serif"><span class="block">UI/UXデザインとAIで</span><span class="block">ユーザーのきもちを動かす力を</span><span class="block">実践でトレーニングしよう</span></h1></div><div class="w-full lg:col-span-2"><p class="font-noto-sans-jp text-sm font-normal leading-[1.8] tracking-[0.7px] text-text-primary">ユーザーのゴールから逆算し、自ら考えて提案できるUI/UX・AIのデザインスキルを、実践形式で身につけるトレーニングサービスです。</p><div class="flex max-w-full flex-wrap items-center gap-4 pt-6"><a class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer bg-[#102720] text-white hover:opacity-90 h-9 px-6 rounded-[14px] text-sm font-bold tracking-[0.35px] w-fit" href="/subscription">メンバーになってはじめる</a></div></div></div></div></section><div class="flex flex-col"><div class="order-2 sm:order-1"><section class="px-6 lg:px-12"><div class="border-b border-black/[0.12] pt-1 pb-[5px]"><h2 class="sr-only">目的から探す</h2><div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-[21px]"><div class="py-1 lg:py-5">
1<a class="group -mx-3 flex items-center gap-4 rounded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]" href="/roadmap"><div class="flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]" style="background-image:linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map size-5 text-text-primary" aria-hidden="true"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"></path><path d="M15 5.764v15"></path><path d="M9 3.236v15"></path></svg></div><div><p class="font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]">ロードマップ</p><p class="font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary">スキルアップ計画を立てる</p></div></a></div><div class="py-1 lg:py-5">
1<a class="group -mx-3 flex items-center gap-4 rounded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]" href="/how-to/feedback"><div class="flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]" style="background-image:linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clipboard-check size-5 text-text-primary" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="m9 14 2 2 4-4"></path></svg></div><div><p class="font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]">フィードバック</p><p class="font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary">プロに改善点をもらう</p></div></a></div><div class="py-1 lg:py-5">
1<a class="group -mx-3 flex items-center gap-4 rounded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]" href="/questions"><div class="flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]" style="background-image:linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8 22.321c-.28 0-.57-.07-.83-.21-.57-.3-.92-.9-.92-1.54v-1.42c-3.02-.31-5-2.53-5-5.71v-6c0-3.44 2.31-5.75 5.75-5.75h10c3.44 0 5.75 2.31 5.75 5.75v6c0 3.44-2.31 5.75-5.75 5.75h-3.77l-4.26 2.84c-.29.19-.63.29-.97.29ZM7 3.181c-2.58 0-4.25 1.67-4.25 4.25v6c0 2.58 1.67 4.25 4.25 4.25.41 0 .75.34.75.75v2.13c0 .13.08.19.13.22s.15.06.26-.01l4.45-2.96c.12-.08.27-.13.42-.13h4c2.58 0 4.25-1.67 4.25-4.25v-6c0-2.58-1.67-4.25-4.25-4.25H7Z" fill="#2F3037"></path><path d="M12 12.11c-.41 0-.75-.34-.75-.75v-.21c0-1.16.85-1.73 1.17-1.95.37-.25.49-.42.49-.68 0-.5-.41-.91-.91-.91s-.91.41-.91.91c0 .41-.34.75-.75.75s-.75-.34-.75-.75c0-1.33 1.08-2.41 2.41-2.41s2.41 1.08 2.41 2.41c0 1.14-.84 1.71-1.15 1.92-.39.26-.51.43-.51.71v.21c0 .42-.34.75-.75.75ZM12 14.602a.749.749 0 1 1-.002-1.498.749.749 0 0 1 .002 1.498Z" fill="#2F3037"></path></svg></div><div><p class="font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]">掲示板</p><p class="font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary">質問・相談する</p></div></a></div><div class="py-1 lg:py-5">
1<a class="group -mx-3 flex items-center gap-4 rounded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]" href="/lessons"><div class="flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]" style="background-image:linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3.5 18.75c-.41 0-.75-.34-.75-.75V7c0-4.41 1.34-5.75 5.75-5.75h7c4.41 0 5.75 1.34 5.75 5.75v10c0 .16 0 .31-.01.47-.03.41-.4.73-.8.7a.757.757 0 0 1-.7-.8c.01-.12.01-.25.01-.37V7c0-3.57-.67-4.25-4.25-4.25h-7c-3.58 0-4.25.68-4.25 4.25v11c0 .41-.34.75-.75.75Z" fill="#2F3037"></path><path d="M17 22.75H7a4.26 4.26 0 0 1-4.25-4.25v-.65c0-1.99 1.62-3.6 3.6-3.6H20.5c.41 0 .75.34.75.75v3.5A4.26 4.26 0 0 1 17 22.75Zm-10.65-7a2.1 2.1 0 0 0-2.1 2.1v.65c0 1.52 1.23 2.75 2.75 2.75h10c1.52 0 2.75-1.23 2.75-2.75v-2.75H6.35ZM16 7.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h8c.41 0 .75.34.75.75s-.34.75-.75.75ZM13 11.25H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5c.41 0 .75.34.75.75s-.34.75-.75.75Z" fill="#2F3037"></path></svg></div><div><p class="font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]">レッスン</p><p class="font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary">UI・UXのコンテンツ</p></div></a></div></div></div></section></div><div class="order-1 sm:order-2"><section class="px-6 lg:px-12"><div class="border-b border-black/[0.12] py-1"><div class="flex flex-col sm:-mx-3 sm:flex-row">
1<a class="group -mx-3 flex flex-1 flex-col gap-4 rounded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0" href="/lessons/ai-ui-styling-beginner"><div class="relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom" style="aspect-ratio:16/9"><img alt="" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 640px) 33vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-aiui.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70">AIにUIデザインの見た目をサポートしてもらう方法</h3><span class="font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline">詳しく見る →</span></div></a>
1<a class="group -mx-3 flex flex-1 flex-col gap-4 rounded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0" href="/lessons/ui-design-flow-lv1"><div class="relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom" style="aspect-ratio:16/9"><img alt="" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 640px) 33vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Fcontainer-uicycle.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70">正解に辿り着くためのデザインワークフローを習得</h3><span class="font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline">詳しく見る →</span></div></a>
1<a class="group -mx-3 flex flex-1 flex-col gap-4 rounded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0" href="/lessons/ui-layout-basic"><div class="relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom" style="aspect-ratio:16/9"><img alt="" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 640px) 33vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Fthumbnail-uihimitsu.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70">モードやアクションなどUIデザインの基本を習得</h3><span class="font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline">詳しく見る →</span></div></a></div></div></section></div></div><!--$?--><template id="B:1"></template><section class="px-6 lg:px-12" aria-busy="true"><div class="border-b border-black/[0.12] py-8"><div class="mb-6 flex items-baseline justify-between gap-4"><h2 class="font-rounded-mplus text-[22px] font-medium leading-[1.71] text-text-primary">あたらしいコンテンツ</h2><a class="shrink-0 font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline" href="/updates">一覧を見る →</a></div><div class="grid grid-cols-1 gap-x-12 gap-y-0 sm:grid-cols-2"><div aria-hidden="true" class="flex items-center gap-4 py-3"><div class="aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]"></div><div class="min-w-0 flex-1 space-y-2"><div class="h-4 w-12 rounded bg-muted-custom"></div><div class="h-12 rounded bg-muted-custom"></div></div></div><div aria-hidden="true" class="flex items-center gap-4 py-3"><div class="aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]"></div><div class="min-w-0 flex-1 space-y-2"><div class="h-4 w-12 rounded bg-muted-custom"></div><div class="h-12 rounded bg-muted-custom"></div></div></div><div aria-hidden="true" class="flex items-center gap-4 py-3"><div class="aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]"></div><div class="min-w-0 flex-1 space-y-2"><div class="h-4 w-12 rounded bg-muted-custom"></div><div class="h-12 rounded bg-muted-custom"></div></div></div><div aria-hidden="true" class="flex items-center gap-4 py-3"><div class="aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]"></div><div class="min-w-0 flex-1 space-y-2"><div class="h-4 w-12 rounded bg-muted-custom"></div><div class="h-12 rounded bg-muted-custom"></div></div></div></div></div></section><!--/$--><section class="px-6 lg:px-12"><div class="border-b border-black/[0.1] pt-[64px] pb-[65px]"><div class="flex flex-col gap-3 mb-12"><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">デザイン基礎</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">課題解決のデザインをはじめる</h2></div><div class="flex flex-col gap-6 lg:flex-row">
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]" href="/roadmap/information-architecture"><div class="relative w-full overflow-hidden bg-muted-custom" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Ftraining-info-architecture.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary">情報設計×OOUIで実践するUIデザイン</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary">ユーザーと目的から最適なUIを設計しよう</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳しく見る</span></div></a>
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]" href="/roadmap/ux-design-basic"><div class="relative w-full overflow-hidden bg-muted-custom" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Ftraining-ux-research.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary">UXリサーチで顧客課題を解決するデザインの基本</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary">インタビューで課題を定義してUIを考える</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳しく見る</span></div></a></div></div></section><section class="px-6 lg:px-12"><div class="border-b border-black/[0.1] pt-[64px] pb-[65px]"><div class="flex flex-col gap-3 mb-12"><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">転職×基礎習得</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">UIUXデザイナーに転職する</h2></div><div class="flex flex-col gap-6 lg:flex-row">
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]" href="/roadmap"><div class="relative w-full overflow-hidden bg-muted-custom" style="aspect-ratio:16/9;border-radius:16px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-roadmap.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary">UIUX転職ロードマップ</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary">6-8ヶ月で未経験からUIUXの基礎を習得</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳しく見る</span></div></a><a target="_blank" rel="noopener noreferrer" class="group -m-3 flex flex-1 flex-col gap-4 roun
1ded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]" href="https://kaikun.bo-no.design/career/beginner"><div class="relative w-full overflow-hidden bg-muted-custom" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Ftop5%2Fcareer-uiux-guide.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary">未経験からのUIUXデザイナー転職ガイド</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary">ポートフォリオや面接など転職準備をまとめて解説</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳しく見る</span></div></a></div></div></section><!--$?--><template id="B:2"></template><section class="bg-dark-section px-6 pt-[64px] pb-[80px] lg:px-[69px]"><div class="pt-[64px]"><div class="flex flex-col gap-3 mb-[64px]"><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-white/20 text-text-inverse">スキルガイド</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-inverse">デザインとキャリアを考える</h2></div><div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:gap-12">
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/ai-design-experience-shift"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">デザインとは何か。AIで変わること変わらないこと</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">見た目ではなくAI時代に必要なスキルを解説</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a>
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/uiuxdesigner-skillmap"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">ジュニアUI/UXデザイナーのためのスキルマップ</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">肩書ではなく、何に貢献するかからスキルを考える</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a>
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/portfolio-01"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">転職ポートフォリオのポイント</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">作るだけでなく、採用でアピールすべきポイントを解説</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a>
1<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/uxresearch_and_uidesign"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">初心者が身につけるべきUXスキルの全体像</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">事業やユーザーへの貢献は課題を知ることから</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a></div></div></section><!--/$--><div class="container"><div class="flex flex-col"><!--$?--><template id="B:3"></template><section aria-busy="true" class="border-b border-black/[0.12] pt-[24px] pb-[25px]"><div class="flex flex-col gap-16 py-[64px]"><div class="flex flex-col gap-2"><div class="flex flex-col gap-3 "><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">レッスン</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">1−2週間でレベルを上げる</h2></div><a class="font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline" href="/lessons">レッスン一覧を見る<!-- --> →</a></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">基本のデザインフローを身につける</h3><div class="flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible"><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div></div></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">UIデザインをはじめる</h3><div class="flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible"><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto 
1sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5"><div class="mb-4 h-5 w-16 rounded-full bg-muted-custom"></div><div class="flex justify-center py-1 sm:py-2"><div class="aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]"></div></div><div class="mt-4 h-12 rounded bg-muted-custom"></div><div class="mt-2 h-10 rounded bg-muted-custom"></div></div></div></div></div></section><!--/$--><!--$?--><template id="B:4"></template><section aria-busy="true" class="border-b border-black/[0.12] py-[120px]"><div class="flex flex-col gap-[48px]"><div class="flex flex-col gap-3 "><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">MEMBER&#x27;S VOICE</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">みんなの実績</h2></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">デザイナー転職の体験談</h3><div class="grid grid-cols-1 gap-[24px] sm:grid-cols-3"><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div></div></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">メンバーのアウトプット</h3><div class="grid grid-cols-1 gap-[24px] sm:grid-cols-3"><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div><div aria-hidden="true" class="flex flex-col gap-3"><div class="aspect-video w-full rounded-[16px] bg-muted-custom"></div><div class="h-4 w-24 rounded bg-muted-custom"></div><div class="h-[54px] rounded bg-muted-custom"></div><div class="h-7 w-1/2 rounded bg-muted-custom"></div></div></div></div></div></section><!--/$--></div></div><!--$--><!--/$--></div>
1<script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0};
2$RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:0","S:0")</script>
2<script>(self.__next_f=self.__next_f||[]).push([0])</script>
2<script>self.__next_f.push([1,"1:I[339756,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"LoadingBoundaryProvider\"]\n2:\"$Sreact.fragment\"\n3:I[479520,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"\"]\n4:I[161786,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"ServiceWorkerRegistrar\"]\n5:I[5100,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"QueryProvider\"]\n8:I[897367,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nb:I[897367,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"ViewportBoundary\"]\nd:I[897367,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"MetadataBoundary\"]\nf:I[168027,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/0jhpuhbft45p5.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/0a4v3tyx6j7pb.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/0q1f5jes82lw9.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/263q9-7kicdn7.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/979870e237799b4d-s.p.3r1_p3ubx9ral.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4096]},\"$undefined\",\"$undefined\",4116],[[\"$\",\"$L1\",null,{\"loading\":[[\"$\",\"div\",\"l\",{\"className\":\"min-h-screen flex items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col items-center justify-center gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"animate-spin rounded-full border-2 border-gray-200 border-t-gray-600 h-12 w-12\"}],[\"$\",\"div\",null,{\"className\":\"font-medium text-gray-700 text-lg\",\"children\":\"読み込み中...\"}]]}]}],[],null],\"children\":[\"$\",\"$2\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0jhpuhbft45p5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0a4v3tyx6j7pb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0q1f5jes82lw9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/263q9-7kicdn7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/immutable/chunks/43tgn399trdzz.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ja\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_mono_5ce8c3f-module__SSBbPG__variable m_plus_1_1eb986dd-module__wXsgxa__variable antialiased\",\"children\":[[\"$\",\"$L3\",null,{\"id\":\"bono-ga4-init\",\"strategy\":\"afterInteractive\",\"children\":\"\\n(function () {\\n  if (![\\\"www.bo-no.design\\\",\\\"bo-no.design\\\"].includes(window.location.hostname.toLowerCase())) return;\\n  if (window.__bonoAnalyticsStarted) return;\\n  window.__bonoAnalyticsStarted = true;\\n  window.dataLayer = window.dataLayer || [];\\n  window.gtag = function () { window.dataLayer.push(arguments); };\\n  window.gtag('js', new Date());\\n  window.gtag('config', 'G-T8RTCENVBF');\\n  var script = document.createElement('script');\\n  script.async = true;
2\\n  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-T8RTCENVBF';\\n  document.head.appendChild(script);\\n})();\"}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{\"children\":\"$L6\"}]]}]}]]}]}],{\"children\":[[\"$\",\"$2\",\"c\",{\"children\":[\"$L7\",null,[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,false,null]},null,false,null],[\"$\",\"$2\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0jhpuhbft45p5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0a4v3tyx6j7pb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0q1f5jes82lw9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/263q9-7kicdn7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"8BhjjSmo9c9MQRXcqRY75\"}\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#102720\"}]]\n10:I[522016,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"\"]\n1d:I[985665,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"Layout\"]\n1e:I[339756,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"default\"]\n1f:I[758298,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\",\"/_next/static/immutable/chunks/2_ybbdtat719g.js\"],\"default\"]\n20:I[837457,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"default\"]\n7:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@graph\\\":[{\\\"@type\\\":\\\"WebSite\\\",\\\"@id\\\":\\\"https://www.bo-no.design/#website\\\",\\\"url\\\":\\\"https://www.bo-no.design\\\",\\\"name\\\":\\\"BONO\\\",\\\"description\\\":\\\"UIUXデザインを体系的に学べるオンライン学習プラットフォーム\\\",\\\"inLanguage\\\":\\\"ja\\\"},{\\\"@type\\\":\\\"Organization\\\",\\\"@id\\\":\\\"https://www.bo-no.design/#organization\\\",\\\"name\\\":\\\"BONO\\\",\\\"url\\\":\\\"https://www.bo-no.design\\\",\\\"logo\\\":{\\\"@type\\\":\\\"ImageObject\\\",\\\"url\\\":\\\"https://www.bo-no.design/images/bono-logo.png\\\"},\\\"sameAs\\\":[\\\"https://www.youtube.com/channel/UCghPjck_LzxNMs2tI4PPYlQ/\\\",\\\"https://x.com/takumii_kai\\\"]}]}\"}}],[\"$\",\"section\",null,{\"className\":\"relative overflow-hidden px-6 lg:px-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"pt-12 pb-8 lg:pt-16\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-6 lg:grid-cols-4 lg:items-end lg:gap-[21px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-full shrink-0 lg:col-span-2\",\"children\":[\"$\",\"h1\",null,{\"className\":\"text-[28px] font-medium leading-[1.6] tracking-[1px] text-text-primary lg:text-[32px]\",\"style\":{\"fontFamily\":\"var(--font-mplus-1-var), 'M PLUS 1', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"block\",\"children\":\"UI/UXデザインとAIで\"}],[\"$\",\"span\",null,{\"className\":\"block\",\"children\":\"ユーザーのきもちを動かす力を\"}],[\"$\",\"span\",null,{\"className\":\"block\",\"children\":\"実践でトレーニングしよう\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:col-span-2\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-sm font-normal leading-[1.8] tracking-[0.7px] text-text-primary\",\"children\":\"ユーザーのゴールから逆算し、自ら考えて提案できるUI/UX・AIのデザインスキルを、実践形式で身につけるトレーニングサービスです。\"}],[\"$\",\"div\",null,{\"className\":\"flex max-w-full flex-wrap items-center gap-4 pt-6\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/subscription\",\"children\":\"メンバーになってはじめる\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer bg-[#102720] text-white hover:opacity-90 h-9 px-6 rounded-[14px] text-sm font-bold tracking-[0.35px] w-fit\",\"ref\":null}]}]]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col\",\"children\":[[\"$\",\"div\",null,{\"className\":\"order-2 sm:order-1\",\"children\":[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.12] pt-1 pb-[5px]\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"sr-only\",\"children\":\"目的から探す\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:gap-[21px]\",\"children\":[[\"$\",\"div\",\"スキルアップ計画を立てる\",{\"className\":\"py-1 lg:py-5\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/roadmap\",\"className\":\"group -mx-3 flex items-center gap-4 roun
2ded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]\",\"style\":{\"backgroundImage\":\"linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)\"},\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-map size-5 text-text-primary\",\"aria-hidden\":true,\"children\":[[\"$\",\"path\",\"169xi5\",{\"d\":\"M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z\"}],\"$L11\",\"$L12\",\"$undefined\"]}]}],\"$L13\"]}]}],\"$L14\",\"$L15\",\"$L16\"]}]]}]}]}],\"$L17\"]}],\"$L18\",\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\"]\n6:[\"$\",\"$L1d\",null,{\"user\":null,\"notificationSlot\":null,\"boardDotSlot\"
2:null,\"children\":[false,[\"$\",\"$L1e\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$1f\",\"errorStyles\":[],\"errorScripts\":[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/2_ybbdtat719g.js\",\"async\":true}]],\"template\":[\"$\",\"$L20\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-[70vh] flex items-center justify-center\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-8xl font-bold text-muted-foreground/30 mb-4\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-2 text-text-primary\",\"children\":\"ページが見つかりません\"}],[\"$\",\"p\",null,{\"className\":\"text-muted-foreground mb-8 max-w-md mx-auto\",\"children\":\"お探しのページは存在しないか、移動した可能性があります。 URLをご確認ください。\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row gap-3 justify-center\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house w-4 h-4 mr-2\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"r6nss1\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"ホームに戻る\"],\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-bold font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer bg-cta-primary-bg text-primary-foreground shadow-[0px_1px_1px_0px_rgba(0,0,0,0.08),0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-cta-primary-bg/90 h-10 px-5 py-2 rounded-[12px]\",\"ref\":null}],[\"$\",\"$L10\",null,{\"href\":\"/lessons\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-arrow-left w-4 h-4 mr-2\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1l729n\",{\"d\":\"m12 19-7-7 7-7\"}],[\"$\",\"path\",\"x3x0zl\",{\"d\":\"M19 12H5\"}],\"$undefined\"]}],\"レッスン一覧へ\"],\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-bold font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer bg-white border border-[#EBEBEB] text-black shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-gray-50 h-10 px-5 py-2 rounded-[12px]\",\"ref\":null}]]}]]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n21:I[528789,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"IntentPrefetchLink\"]\n22:I[605500,[\"/_next/static/immutable/chunks/3vuhqfn8nseb-.js\",\"/_next/static/immutable/chunks/29ty20mqm4ssi.js\",\"/_next/static/immutable/chunks/0ugnpj31j6t22.js\",\"/_next/static/immutable/chunks/3qdd5qfsz8ibs.js\",\"/_next/static/immutable/chunks/1jve738u46ux3.js\",\"/_next/static/immutable/chunks/43tgn399trdzz.js\"],\"Image\"]\n11:[\"$\",\"path\",\"1pn4in\",{\"d\":\"M15 5.764v15\"}]\n12:[\"$\",\"path\",\"1uimfh\",{\"d\":\"M9 3.236v15\"}]\n13:[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":\"ロードマップ\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary\",\"children\":\"スキルアップ計画を立てる\"}]]}]\n14:[\"$\",\"div\",\"プロに改善点をもらう\",{\"className\":\"py-1 lg:py-5\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/how-to/feedback\",\"className\":\"group -mx-3 flex items-center gap-4 roun
2ded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]\",\"style\":{\"backgroundImage\":\"linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)\"},\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-clipboard-check size-5 text-text-primary\",\"aria-hidden\":true,\"children\":[[\"$\",\"rect\",\"tgr4d6\",{\"width\":\"8\",\"height\":\"4\",\"x\":\"8\",\"y\":\"2\",\"rx\":\"1\",\"ry\":\"1\"}],[\"$\",\"path\",\"116196\",{\"d\":\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"}],[\"$\",\"path\",\"df797q\",{\"d\":\"m9 14 2 2 4-4\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":\"フィードバック\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary\",\"children\":\"プロに改善点をもらう\"}]]}]]}]}]\n15:[\"$\",\"div\",\"質問・相談する\",{\"className\":\"py-1 lg:py-5\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/questions\",\"className\":\"group -mx-3 flex items-center gap-4 roun
2ded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]\",\"style\":{\"backgroundImage\":\"linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)\"},\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"ref\":\"$undefined\",\"width\":20,\"height\":20,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M8 22.321c-.28 0-.57-.07-.83-.21-.57-.3-.92-.9-.92-1.54v-1.42c-3.02-.31-5-2.53-5-5.71v-6c0-3.44 2.31-5.75 5.75-5.75h10c3.44 0 5.75 2.31 5.75 5.75v6c0 3.44-2.31 5.75-5.75 5.75h-3.77l-4.26 2.84c-.29.19-.63.29-.97.29ZM7 3.181c-2.58 0-4.25 1.67-4.25 4.25v6c0 2.58 1.67 4.25 4.25 4.25.41 0 .75.34.75.75v2.13c0 .13.08.19.13.22s.15.06.26-.01l4.45-2.96c.12-.08.27-.13.42-.13h4c2.58 0 4.25-1.67 4.25-4.25v-6c0-2.58-1.67-4.25-4.25-4.25H7Z\",\"fill\":\"#2F3037\"}],[\"$\",\"path\",null,{\"d\":\"M12 12.11c-.41 0-.75-.34-.75-.75v-.21c0-1.16.85-1.73 1.17-1.95.37-.25.49-.42.49-.68 0-.5-.41-.91-.91-.91s-.91.41-.91.91c0 .41-.34.75-.75.75s-.75-.34-.75-.75c0-1.33 1.08-2.41 2.41-2.41s2.41 1.08 2.41 2.41c0 1.14-.84 1.71-1.15 1.92-.39.26-.51.43-.51.71v.21c0 .42-.34.75-.75.75ZM12 14.602a.749.749 0 1 1-.002-1.498.749.749 0 0 1 .002 1.498Z\",\"fill\":\"#2F3037\"}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":\"掲示板\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary\",\"children\":\"質問・相談する\"}]]}]]}]}
2]\n16:[\"$\",\"div\",\"UI・UXのコンテンツ\",{\"className\":\"py-1 lg:py-5\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/lessons\",\"className\":\"group -mx-3 flex items-center gap-4 rounded-[8px] px-3 py-3 text-left transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex size-14 shrink-0 items-center justify-center rounded-[4px] border-[0.5px] border-black/10 transition-transform duration-300 group-hover:scale-[1.08]\",\"style\":{\"backgroundImage\":\"linear-gradient(229deg, #dbe0fe 7.5579%, #f0f4fa 41.414%, #f8f1ed 90.967%)\"},\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"ref\":\"$undefined\",\"width\":20,\"height\":20,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"children\":[[\"$\",\"path\",null,{\"d\":\"M3.5 18.75c-.41 0-.75-.34-.75-.75V7c0-4.41 1.34-5.75 5.75-5.75h7c4.41 0 5.75 1.34 5.75 5.75v10c0 .16 0 .31-.01.47-.03.41-.4.73-.8.7a.757.757 0 0 1-.7-.8c.01-.12.01-.25.01-.37V7c0-3.57-.67-4.25-4.25-4.25h-7c-3.58 0-4.25.68-4.25 4.25v11c0 .41-.34.75-.75.75Z\",\"fill\":\"#2F3037\"}],[\"$\",\"path\",null,{\"d\":\"M17 22.75H7a4.26 4.26 0 0 1-4.25-4.25v-.65c0-1.99 1.62-3.6 3.6-3.6H20.5c.41 0 .75.34.75.75v3.5A4.26 4.26 0 0 1 17 22.75Zm-10.65-7a2.1 2.1 0 0 0-2.1 2.1v.65c0 1.52 1.23 2.75 2.75 2.75h10c1.52 0 2.75-1.23 2.75-2.75v-2.75H6.35ZM16 7.75H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h8c.41 0 .75.34.75.75s-.34.75-.75.75ZM13 11.25H8c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h5c.41 0 .75.34.75.75s-.34.75-.75.75Z\",\"fill\":\"#2F3037\"}]]}]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":\"レッスン\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-sm font-medium leading-[24px] text-text-primary\",\"children\":\"UI・UXのコンテンツ\"}]]}]]}]}]\n17:[\"$\",\"div\",null,{\"className\":\"order-1 sm:order-2\",\"children\":[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.12] py-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:-mx-3 sm:flex-row\",\"children\":[[\"$\",\"$L21\",\"/lessons/ai-ui-styling-beginner\",{\"href\":\"/lessons/ai-ui-styling-beginner\",\"className\":\"group -mx-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/thumbnail-aiui.jpg\",\"alt\":\"\",\"fill\":true,\"priority\":true,\"sizes\":\"(min-width: 640px) 33vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70\",\"children\":\"AIにUIデザインの見た目をサポートしてもらう方法\"}],[\"$\",\"span\",null,{\"className\":\"font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline\",\"children\":\"詳しく見る →\"}]]}]]}],[\"$\",\"$L21\",\"/lessons/ui-design-flow-lv1\",{\"href\":\"/lessons/ui-design-flow-lv1\",\"className\":\"group -mx-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/container-uicycle.jpg\",\"alt\":\"\",\"fill\":true,\"priority\":true,\"sizes\":\"(min-width: 640px) 33vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70\",\"children\":\"正解に辿り着くためのデザインワークフローを習得\"}],[\"$\",\"span\",null,{\"className\":\"font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline\",\"children\":\"詳しく見る →\"}]]}]]}],[\"$\",\"$L21\",\"/lessons/ui-layout-basic\",{\"href\":\"/lessons/ui-layout-basic\",\"className\":\"group -mx-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] px-3 py-8 transition-colors duration-200 hover:bg-black/[0.02] sm:mx-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden rounded-[4px] border border-black/[0.03] bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/thumbnail-uihimitsu.jpg\",\"alt\":\"\",\"fill\":true,\"priority\":true,\"sizes\":\"(min-width: 640px) 33vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[16px] font-medium leading-[28px] tracking-[0.22px] text-text-primary transition-opacity duration-300 group-hover:opacity-70\",\"children\":\"モードやアクションなどUIデザインの基本を習得\"}],[\"$\",\"span\",null,{\"className\":\"font-noto-sans-jp text-xs text-text-link underline-offset-4 group-hover:text-text-link-hover group-hover:underline\",\"children\":\"詳しく見る →\"}]]}]]}]]}]}]}]}]\n18:[\"$\",\"$9\",null,{\"fallback\":[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"aria-busy\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.12] py-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex items-baseline justify-between gap-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-[22px] font-medium leading-[1.71] text-text-primary\",\"children\":\"あたらしいコンテンツ\"}],[\"$\",\"$L10\",null,{\"href\":\"/updates\",\"className\":\"shrink-0 font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline\",\"children\":\"一覧を見る →\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-x-12 gap-y-0 sm:grid-cols-2\",\"children\":[[[\"$\",\"div\",\"0\",{\"aria-hidden\":\"true\",\"className\":\"flex items-center gap-4 py-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1 space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 w-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-12 rounded bg-muted-custom\"}]]}]]}],[\"$\",\"div\",\"1\",{\"aria-hidden\":\"true\",\"className\":\"flex items-center gap-4 py-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1 space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 w-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-12 rounded bg-muted-custom\"}]]}]]}],[\"$\",\"div\",\"2\",{\"aria-hidden\":\"true\",\"className\":\"flex items-center gap-4 py-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1 space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 w-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-12 rounded bg-muted-custom\"}]]}]]}],[\"$\",\"div\",\"3\",{\"aria-hidden\":\"true\",\"className\":\"flex items-center gap-4 py-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-[101px] shrink-0 rounded-[2px] bg-muted-custom lg:w-[115px]\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1 space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-4 w-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-12 rounded bg-muted-custom\"}]]}]]}]],[]]}]]}]}],\"children\":\"$L23\"}]\n19:[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.1] pt-[64px] pb-[65px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 mb-12\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"デザイン基礎\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"課題解決のデザインをはじめる\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/roadmap/information-architecture\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/training-info-architecture.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary\",\"children\":\"情報設計×OOUIで実践するUIデザイン\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary\",\"children\":\"ユーザーと目的から最適なUIを設計しよう\"}],[\"$\",\"span\",null,{\"children\":\"詳しく見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],[\"$\",\"$L10\",null,{\"href\":\"/roadmap/ux-design-basic\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/training-ux-research.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary\",\"children\":\"UXリサーチで顧客課題を解決するデザインの基本\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary\",\"children\":\"インタビューで課題を定義してUIを考える\"}],[\"$\",\"span\",null,{\"children\":\"詳しく見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}]]}]]}]}]\n1a:[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.1] pt-[64px] pb-[65px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 mb-12\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"転職×基礎習得\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"UIUXデザイナーに転職する\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/roadmap\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"16px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/career-uiux-roadmap.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary\",\"children\":\"UIUX転職ロードマップ\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary\",\"children\":\"6-8ヶ月で未経験からUIUXの基礎を習得\"}],[\"$\",\"span\",null,{\"children\":\"詳しく見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],[\"$\",\"$L10\",null,{\"href\":\"https://kaikun.bo-no.design/career/beginner\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-black/[0.03]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-muted-custom\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/top5/career-uiux-guide.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-primary\",\"children\":\"未経験からのUIUXデザイナー転職ガイド\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-primary\",\"children\":\"ポートフォリオや面接など転職準備をまとめて解説\"}],[\"$\",\"span\",null,{\"children\":\"詳しく見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-border-strong text-black hover:bg-black/[0.03] h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}]]}]]}]}]\n1b:[\"$\",\"$9\",null,{\"fallback\":[\"$\",\"section\",null,{\"className\":\"bg-dark-section px-6 pt-[64px] pb-[80px] lg:px-[69px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"pt-[64px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 mb-[64px]\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-white/20 text-text-inverse\",\"children\":\"スキルガイド\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-inverse\",\"children\":\"デザインとキャリアを考える\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:gap-12\",\"children\":[[\"$\",\"$L10\",\"デザインとは何か。AIで変わること変わらないこと\",{\"href\":\"/guide/ai-design-experience-shift\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"デザインとは何か。AIで変わること変わらないこと\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"見た目ではなくAI時代に必要なスキルを解説\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],[\"$\",\"$L10\",\"ジュニアUI/UXデザイナーのためのスキルマップ\",{\"href\":\"/guide/uiuxdesigner-skillmap\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"ジュニアUI/UXデザイナーのためのスキルマップ\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"肩書ではなく、何に貢献するかからスキルを考える\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],[\"$\",\"$L10\",\"転職ポートフォリオのポイント\",{\"href\":\"/guide/portfolio-01\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"転職ポートフォリオのポイント\"}],\"$L24\",\"$L25\"]}]]}],\"$L26\"]}]]}]}],\"children\":\"$L27\"}]\n1c:[\"$\",\"div\",null,{\"className\":\"container\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col\",\"children\":[[\"$\",\"$9\",null,{\"fallback\":[\"$\",\"section\",null,{\"aria-busy\":true,\"className\":\"border-b border-black/[0.12] pt-[24px] pb-[25px]\",\"style\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-16 py-[64px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 \",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"レッスン\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"1−2週間でレベルを上げる\"}]]}],[\"$\",\"$L10\",null,{\"href\":\"/lessons\",\"className\":\"font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline\",\"children\":[\"レッスン一覧を見る\",\" →\"]}]]}],[[\"$\",\"div\",\"基本のデザインフローを身につける\",{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"基本のデザインフローを身につける\"}],[\"$\",\"div\",null,{\"className\":\"flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible\",\"children\":[[[\"$\",\"div\",\"0\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"1\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"2\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]]}]],[]]}]]}],[\"$\",\"div\",\"UIデザインをはじめる\",{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"UIデザインをはじめる\"}],[\"$\",\"div\",null,{\"className\":\"flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible\",\"children\":[[[\"$\",\"div\",\"0\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto 
2sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],\"$L28\"]}],\"$L29\",\"$L2a\"],[]]}]]}]]]}]}],\"children\":\"$L2b\"}],\"$L2c\"]}]}]\n24:[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"作るだけでなく、採用でアピールすべきポイントを解説\"}]\n25:[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]\n26:[\"$\",\"$L10\",\"初心者が身につけるべきUXスキルの全体像\",{\"href\":\"/guide/uxresearch_and_uidesign\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"初心者が身につけるべきUXスキルの全体像\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"事業やユーザーへの貢献は課題を知ることから\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}]\n28:[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]\n29:[\"$\",\"div\",\"1\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]]}]\n2a:[\"$\",\"div\",\"2\",{\"aria-hidden\":\"true\",\"className\":\"w-[232px] shrink-0 rounded-[20px] bg-white p-3 sm:w-auto sm:rounded-[24px] sm:p-4 md:rounded-[29px] md:p-5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-4 h-5 w-16 rounded-full bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-1 sm:py-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"aspect-[2/3] w-[90px] rounded bg-muted-custom sm:w-[45%] sm:max-w-[120px]\"}]}],[\"$\",\"div\",null,{\"className\":\"mt-4 h-12 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"mt-2 h-10 rounded bg-muted-custom\"}]]}]\n2c:[\"$\",\"$9\",null,{\"fallback\":[\"$\",\"section\",null,{\"aria-busy\":true,\"className\":\"border-b border-black/[0.12] py-[120px]\",\"style\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-[48px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 \",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"MEMBER'S VOICE\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"みんなの実績\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"デザイナー転職の体験談\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-[24px] sm:grid-cols-3\",\"children\":[[[\"$\",\"div\",\"0\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}
2],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"1\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"2\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}]],[]]}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"メンバーのアウトプット\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-[24px] sm:grid-cols-3\",\"children\":[[[\"$\",\"div\",\"0\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"1\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}],[\"$\",\"div\",\"2\",{\"aria-hidden\":\"true\",\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"aspect-video w-full rounded-[16px] bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-4 w-24 rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-[54px] rounded bg-muted-custom\"}],[\"$\",\"div\",null,{\"className\":\"h-7 w-1/2 rounded bg-muted-custom\"}]]}]],[]]}]]}]]}]}],\"children\":\"$L2d\"}]\n2e:I[27201,[\"/_next/static/immutable/chunks/0x-9rc1bm-510.js\"],\"IconMark\"]\na:null\ne:[[\"$\",\"title\",\"0\",{\"children\":\"BONO - UIUXデザインを学ぶ\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。未経験からUIUXデザイナーへ。\"}],[\"$\",\"link\",\"2\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://www.bo-no.design\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"BONO - UIUXデザインを学ぶ\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。未経験からUIUXデザイナーへ。\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:site_name\",\"content\":\"BONO\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:locale\",\"content\":\"ja_JP\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://www.bo-no.design/opengraph-image?c09ffd9a992bb04d\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:alt\",\"content\":\"BONO - UIUXデザインを学ぶ\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"BONO - UIUXデザインを学ぶ\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"UIUXデザインを体系的に学べるオンライン学習プラットフォーム。ロードマップ、レッスン、記事で効率的にスキルアップ。\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image\",\"content\":\"https://www.bo-no.design/opengraph-image?c09ffd9a992bb04d\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:image:alt\",\"content\":\"BONO - UIUXデザインを学ぶ\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image:type\",\"content\":\"image/png\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"link\",\"22\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.1jo9hc7td2fwu.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"23\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.2po69at1_s4uv.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L2e\",\"24\",{}]]\n"])</script>
2<script>self.__next_f.push([1,"2d:[\"$\",\"section\",null,{\"aria-busy\":\"$undefined\",\"className\":\"border-b border-black/[0.12] py-[120px]\",\"style\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-[48px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 \",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"MEMBER'S VOICE\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"みんなの実績\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"デザイナー転職の体験談\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-[24px] sm:grid-cols-3\",\"children\":[false,[[\"$\",\"$L10\",\"story-/stories/dokugaku-kangaete-tsukuru-graphic-uiux-koji\",{\"href\":\"/stories/dokugaku-kangaete-tsukuru-graphic-uiux-koji\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/4c208303b3330c0a419541e5069f1fec903d9a68-1280x720.jpg\",\"alt\":\"独学で見つけた「考えて作る」面白さ。グラフィックからUI/UXデザイナーへ、決め手はポートフォリオ\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"転職インタビュー\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"独学で見つけた「考えて作る」面白さ。グラフィックからUI/UXデザイナーへ、決め手はポートフォリオ\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/20a2a32459ea6996210cbd9f674e91579d1488c0-512x512.jpg\",\"alt\":\"こじさん\",\"fill\":true,\"className\":\"object-cover\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"こじさん\"}],[\"$\",\"p\",null,{\"className\":\"truncate text-[11px] text-text-primary/60 font-noto-sans-jp\",\"children\":\"業務系サービスでUI/UXデザイナー@関西\"}]]}]]}]]}]]}]}],[\"$\",\"$L10\",\"story-/stories/sobo-selfregi-uiux-dai\",{\"href\":\"/stories/sobo-selfregi-uiux-dai\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/e43e7a3065a8ca74f5aca6b9698a459476e310e2-1280x720.jpg\",\"alt\":\"祖母が使えなかったセルフレジから始まった、未経験UI/UXデザイナー転職の記録\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"転職インタビュー\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"祖母が使えなかったセルフレジから始まった、未経験UI/UXデザイナー転職の記
2録\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/00261fd2a3060efc0496168bbbd0c6187e40b0c9-512x512.jpg\",\"alt\":\"Daiさん\",\"fill\":true,\"className\":\"object-cover\",\"unoptimized\":true}]}],\"$L2f\"]}]]}]]}]}],\"$L30\"]]}]]}],\"$L31\"]}]}]\n"])</script>
2<script>self.__next_f.push([1,"2f:[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"Daiさん\"}],[\"$\",\"p\",null,{\"className\":\"truncate text-[11px] text-text-primary/60 font-noto-sans-jp\",\"children\":\"UI/UXデザイナー(BtoCアプリ事業会社)\"}]]}]\n30:[\"$\",\"$L10\",\"story-/stories/wake\",{\"href\":\"/stories/wake\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/b71dc8d167a3ce7ed910f396aea6331f501580db-1280x720.jpg\",\"alt\":\"非美大・未経験から新卒でデザイン制作会社へ就職。実務とBONOを掛け合わせたデザインスキル獲得法について聞いてみた\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"転職インタビュー\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"非美大・未経験から新卒でデザイン制作会社へ就職。実務とBONOを掛け合わせたデザインスキル獲得法について聞いてみた\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/74f9a31b063abc391ab794a94eb14f45c8e15978-120x120.jpg\",\"alt\":\"和家くん\",\"fill\":true,\"className\":\"object-cover\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"和家くん\"}],[\"$\",\"p\",null,{\"className\":\"truncate text-[11px] text-text-primary/60 font-noto-sans-jp\",\"children\":\"2027年から制作会社の新卒デザイナー\"}]]}]]}]]}]]}]}]\n31:[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"メンバーのアウトプット\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-[24px] sm:grid-cols-3\",\"children\":[false,[[\"$\",\"a\",\"output-https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb\",{\"href\":\"https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://assets.st-note.com/production/uploads/images/318277149/rectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png?fit=bounds\u0026quality=85\u0026width=1280\",\"alt\":\"【情報設計】出張申請サービス作ってみた!|Harumi\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"アウトプット\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"【情報設計】出張申請サービス作ってみた!|Harumi\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"はるみ\"}],\"$undefined\"]}]]}]]}]]}]}],[\"$\",\"a\",\"output-https://note.com/haruchin555/n/n0f8ec8247ee8\",{\"href\":\"https://note.com/haruchin555/n/n0f8ec8247ee8\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://assets.st-note.com/production/uploads/images/303814790/rectangle_large_type_2_3b944eb46dd82eef044d29115f49dfe8.png?fit=bounds\u0026quality=85\u0026width=1280\",\"alt\":\"【UIデザイン】アプリ制作に初挑戦!音声SNS「tono」ができるまで|Harumi\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"アウトプット\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"【UIデザイン】アプリ制作に初挑戦!音声SNS「tono」ができるまで|Harumi\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"はるみ\"}],\"$undefined\"]}]]}]]}]]}]}],[\"$\",\"a\",\"output-https://note.com/ito_uui/n/ncef711871f1e\",{\"href\":\"https://note.com/ito_uui/n/ncef711871f1e\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"group block\",\"children\":[\"$\",\"article\",null,{\"className\":\"flex flex-col gap-3\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://assets.st-note.com/production/uploads/images/299393153/rectangle_large_type_2_9d05994591358d1503b3e13acc985408.png?fit=bounds\u0026quality=85\u0026width=1280\",\"alt\":\"タスク計画アプリ 「today plan」のUIを制作しました|ito\",\"fill\":true,\"className\":\"object-cover transition-transform duration-500 ease-out group-hover:scale-105\",\"unoptimized\":true}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs font-bold text-text-primary/60 font-noto-sans-jp\",\"children\":\"アウトプット\"}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]\",\"children\":\"タスク計画アプリ 「today plan」のUIを制作しました|ito\"}],\"$L32\"]}]]}]}]]]}]]}]\n27:[\"$\",\"section\",null,{\"className\":\"bg-dark-section px-6 pt-[64px] pb-[80px] lg:px-[69px]\",\"children\":[\"$\",\"div\",null,{\"className\":\"pt-[64px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 mb-[64px]\",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-white/20 text-text-inverse\",\"children\":\"スキルガイド\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-inverse\",\"children\":\"デザインとキャリアを考える\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-8 sm:grid-cols-2 lg:gap-12\",\"children\":[[\"$\",\"$L10\",\"デザインとは何か。AIで変わること変わらないこと\",{\"href\":\"/guide/ai-design-experience-shift\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"デザインとは何か。AIで変わること変わらないこと\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"見た目ではなくAI時代に必要なスキルを解説\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],[\"$\",\"$L10\",\"ジュニアUI/UXデザイナーのためのスキルマップ\",{\"href\":\"/guide/uiuxdesigner-skillmap\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"ジュニアUI/UXデザイナーのためのスキルマップ\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"肩書ではなく、何に貢献するかからスキルを考える\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}],\"$L33\",\"$L34\"]}]]}]}]\n23:[\"$\",\"section\",null,{\"className\":\"px-6 lg:px-12\",\"aria-busy\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"border-b border-black/[0.12] py-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-6 flex items-baseline justify-between gap-4\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-[22px] font-medium leading-[1.71] text-text-primary\",\"children\":\"あたらしいコンテンツ\"}],[\"$\",\"$L10\",null,{\"href\":\"/updates\",\"className\":\"shrink-0 font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline\",\"children\":\"一覧を見る →\"}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-x-12 gap-y-0 sm:grid-cols-2\",\"children\":[false,[[\"$\",\"$L21\",\"https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb\",{\"href\":\"https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb\",\"className\":\"group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://assets.st-note.com/production/uploads/images/318277149/rectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png?fit=bounds\u0026quality=85\u0026width=1280\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 115px, 101px\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.06]\"}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":[[\"$\",\"span\",null,{\"children\":\"アウトプット\"}],\"$undefined\"]}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline\",\"children\":\"【情報設計】出張申請サービス作ってみた!|Harumi\"}]]}],false]}],[\"$\",\"$L21\",\"/questions/q-1790470490237-ay225v\",{\"href\":\"/questions/q-1790470490237-ay225v\",\"className\":\"group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/questions-og.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 115px, 101px\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.06]\"}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":[[\"$\",\"span\",null,{\"children\":\"掲示板\"}],\"$undefined\"]}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline\",\"children\":\"【募集】デザイン・IT業種をやるモチベを教えてください!\"}]]}],false]}],[\"$\",\"$L21\",\"/events/uidesign-challenge-2026-autumn\",{\"href\":\"/events/uidesign-challenge-2026-autumn\",\"className\":\"group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[c
2alc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 115px, 101px\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.06]\"}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":[\"$L35\",\"$undefined\"]}],\"$L36\"]}],false]}],\"$L37\"]]}]]}]}]\n"])</script>
2<div hidden id="S:4"><section class="border-b border-black/[0.12] py-[120px]"><div class="flex flex-col gap-[48px]"><div class="flex flex-col gap-3 "><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">MEMBER&#x27;S VOICE</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">みんなの実績</h2></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">デザイナー転職の体験談</h3><div class="grid grid-cols-1 gap-[24px] sm:grid-cols-3"><a class="group block" href="/stories/dokugaku-kangaete-tsukuru-graphic-uiux-koji"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="独学で見つけた「考えて作る」面白さ。グラフィックからUI/UXデザイナーへ、決め手はポートフォリオ" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/4c208303b3330c0a419541e5069f1fec903d9a68-1280x720.jpg"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">転職インタビュー</span><h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">独学で見つけた「考えて作る」面白さ。グラフィックからUI/UXデザイナーへ、決め手はポートフォリオ</h3><div class="flex items-center gap-2"><div class="relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom"><img alt="こじさん" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/20a2a32459ea6996210cbd9f674e91579d1488c0-512x512.jpg"/></div><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">こじさん</p><p class="truncate text-[11px] text-text-primary/60 font-noto-sans-jp">業務系サービスでUI/UXデザイナー@関西</p></div></div></div></article></a><a class="group block" href="/stories/sobo-selfregi-uiux-dai"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="祖母が使えなかったセルフレジから始まった、未経験UI/UXデザイナー転職の記録" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/e43e7a3065a8ca74f5aca6b9698a459476e310e2-1280x720.jpg"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">転職インタビュー</span><h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">祖母が使えなかったセルフレジから始まった、未経験UI/UXデザイナー転職の記録</h3><div class="flex items-center gap-2"><div class="relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom"><img alt="Daiさん" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/00261fd2a3060efc0496168bbbd0c6187e40b0c9-512x512.jpg"/></div><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">Daiさん</p><p class="truncate text-[11px] text-text-primary/60 font-noto-sans-jp">UI/UXデザイナー(BtoCアプリ事業会社)</p></div></div></div></article></a><a class="group block" href="/stories/wake"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="非美大・未経験から新卒でデザイン制作会社へ就職。実務とBONOを掛け合わせたデザインスキル獲得法について聞いてみた" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/b71dc8d167a3ce7ed910f396aea6331f501580db-1280x720.jpg"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">転職インタビュー</span>
2<h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">非美大・未経験から新卒でデザイン制作会社へ就職。実務とBONOを掛け合わせたデザインスキル獲得法について聞いてみた</h3><div class="flex items-center gap-2"><div class="relative size-7 shrink-0 overflow-hidden rounded-full bg-muted-custom"><img alt="和家くん" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://cdn.sanity.io/images/cqszh4up/production/74f9a31b063abc391ab794a94eb14f45c8e15978-120x120.jpg"/></div><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">和家くん</p><p class="truncate text-[11px] text-text-primary/60 font-noto-sans-jp">2027年から制作会社の新卒デザイナー</p></div></div></div></article></a></div></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">メンバーのアウトプット</h3><div class="grid grid-cols-1 gap-[24px] sm:grid-cols-3"><a href="https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb" target="_blank" rel="noopener noreferrer" class="group block"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="【情報設計】出張申請サービス作ってみた!|Harumi" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://assets.st-note.com/production/uploads/images/318277149/rectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png?fit=bounds&amp;quality=85&amp;width=1280"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">アウトプット</span><h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">【情報設計】出張申請サービス作ってみた!|Harumi</h3><div class="flex items-center gap-2"><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">はるみ</p></div></div></div></article></a><a href="https://note.com/haruchin555/n/n0f8ec8247ee8" target="_blank" rel="noopener noreferrer" class="group block"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="【UIデザイン】アプリ制作に初挑戦!音声SNS「tono」ができるまで|Harumi" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://assets.st-note.com/production/uploads/images/303814790/rectangle_large_type_2_3b944eb46dd82eef044d29115f49dfe8.png?fit=bounds&amp;quality=85&amp;width=1280"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">アウトプット</span><h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">【UIデザイン】アプリ制作に初挑戦!音声SNS「tono」ができるまで|Harumi</h3><div class="flex items-center gap-2"><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">はるみ</p></div></div></div></article></a><a href="https://note.com/ito_uui/n/ncef711871f1e" target="_blank" rel="noopener noreferrer" class="group block"><article class="flex flex-col gap-3"><div class="relative w-full aspect-video overflow-hidden rounded-[16px] bg-muted-custom"><img alt="タスク計画アプリ 「today plan」のUIを制作しました|ito" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 ease-out group-hover:scale-105" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://assets.st-note.com/production/uploads/images/299393153/rectangle_large_type_2_9d05994591358d1503b3e13acc985408.png?fit=bounds&amp;quality=85&amp;width=1280"/></div><div class="flex flex-col gap-2"><span class="text-xs font-bold text-text-primary/60 font-noto-sans-jp">アウトプット</span>
2<h3 class="font-rounded-mplus font-medium text-text-primary line-clamp-2 underline-offset-4 group-hover:underline text-[18px]">タスク計画アプリ 「today plan」のUIを制作しました|ito</h3><template id="P:5"></template></div></article></a></div></div></div></section></div><div hidden id="S:2"><section class="bg-dark-section px-6 pt-[64px] pb-[80px] lg:px-[69px]"><div class="pt-[64px]"><div class="flex flex-col gap-3 mb-[64px]"><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-white/20 text-text-inverse">スキルガイド</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-inverse">デザインとキャリアを考える</h2></div><div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:gap-12"><a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/ai-design-experience-shift"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F4
208c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F4
208c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F408c8011551d6e440785f1e7820d2e641fa33cc0-1280x720.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">デザインとは何か。AIで変わること変わらないこと</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">見た目ではなくAI時代に必要なスキルを解説</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a>
2<a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/uiuxdesigner-skillmap"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F14ad401e54bdbc714f8c0fbd8b7b061a416ceddc-1920x1080.webp&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">ジュニアUI/UXデザイナーのためのスキルマップ</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">肩書ではなく、何に貢献するかからスキルを考える</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a><template id="P:6"></template><template id="P:7"></template></div></div></section></div><div hidden id="S:1"><section class="px-6 lg:px-12"><div class="border-b border-black/[0.12] py-8"><div class="mb-6 flex items-baseline justify-between gap-4"><h2 class="font-rounded-mplus text-[22px] font-medium leading-[1.71] text-text-primary">あたらしいコンテンツ</h2><a class="shrink-0 font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline" href="/updates">一覧を見る →</a></div><div class="grid grid-cols-1 gap-x-12 gap-y-0 sm:grid-cols-2"><a class="group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]" href="https://note.com/haruchin555/n/nf359d7aaf60d?sub_rt=share_sb"><div class="relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.06]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 115px, 101px" srcSet="/_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=32&amp;q=75 32w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=48&amp;q=75 48w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F318277149%2Frectangle_large_type_2_408058f470fb04bdfadbd40520ab53db.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280&amp;w=3840&amp;q=75"/></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]"><span>アウトプット</span></div><h3 class="font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline">【情報設計】出張申請サービス作ってみた!|Harumi</h3></div></a><a class="group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[c
2alc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]" href="/questions/q-1790470490237-ay225v"><div class="relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.06]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 115px, 101px" srcSet="/_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=32&amp;q=75 32w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=48&amp;q=75 48w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=3840&amp;q=75"/></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]"><span>掲示板</span></div><h3 class="font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline">【募集】デザイン・IT業種をやるモチベを教えてください!</h3></div></a><a class="group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]" href="/events/uidesign-challenge-2026-autumn"><div class="relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.06]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 115px, 101px" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=32&amp;q=75 32w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=48&amp;q=75 48w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F8821d6239f483335c91c4470ac1ba0a730597f9e-1920x1080.jpg&amp;w=3840&amp;q=75"/></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]"><template id="P:8"></template></div><template id="P:9"></template></div></a><template id="P:a"></template></div></div></section></div>
2<script>self.__next_f.push([1,"32:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[[\"$\",\"p\",null,{\"className\":\"truncate text-xs font-bold text-text-primary font-noto-sans-jp\",\"children\":\"ito\"}],\"$undefined\"]}]]}]\n33:[\"$\",\"$L10\",\"転職ポートフォリオのポイント\",{\"href\":\"/guide/portfolio-01\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/cc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"転職ポートフォリオのポイント\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"作るだけでなく、採用でアピールすべきポイントを解説\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}]\n34:[\"$\",\"$L10\",\"初心者が身につけるべきUXスキルの全体像\",{\"href\":\"/guide/uxresearch_and_uidesign\",\"className\":\"group -m-3 flex flex-1 flex-col gap-4 roun
2ded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]\",\"children\":[false,[\"$\",\"div\",null,{\"className\":\"relative w-full overflow-hidden bg-white/10\",\"style\":{\"aspectRatio\":\"16/9\",\"borderRadius\":\"4px\"},\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 50vw, 100vw\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.04]\"}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse\",\"children\":\"初心者が身につけるべきUXスキルの全体像\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse\",\"children\":\"事業やユーザーへの貢献は課題を知ることから\"}],[\"$\",\"span\",null,{\"children\":\"詳細を見る\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg]:size-4 [\u0026_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1\",\"ref\":null}]]}]]}]\n35:[\"$\",\"span\",null,{\"children\":\"イベント\"}]\n36:[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline\",\"children\":\"もうすぐ秋だよ🍂数字で取り組むUI改善デザインチャレンジ〆27日\"}]\n37:[\"$\",\"$L21\",\"/questions/q-1790218025685-giylup\",{\"href\":\"/questions/q-1790218025685-giylup\",\"className\":\"group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"/images/questions-og.jpg\",\"alt\":\"\",\"fill\":true,\"sizes\":\"(min-width: 1024px) 115px, 101px\",\"className\":\"object-cover transition-transform duration-500 group-hover:scale-[1.06]\"}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]\",\"children\":[[\"$\",\"span\",null,{\"children\":\"掲示板\"}],\"$undefined\"]}],[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline\",\"children\":\"複数人インタビューのまとめ方、アウトプットとは?\"}]]}],false]}]\n2b:[\"$\",\"section\",null,{\"aria-busy\":\"$undefined\",\"className\":\"border-b border-black/[0.12] pt-[24px] pb-[25px]\",\"style\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-16 py-[64px]\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-3 \",\"children\":[[\"$\",\"span\",null,{\"className\":\"inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary\",\"children\":\"レッスン\"}],[\"$\",\"h2\",null,{\"className\":\"font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary\",\"children\":\"1−2週間でレベルを上げる\"}]]}],[\"$\",\"$L10\",null,{\"href\":\"/lessons\",\"className\":\"font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline\",\"children\":[\"レッスン一覧を見る\",\" →\"]}]]}],[[\"$\",\"div\",\"基本のデザインフローを身につける\",{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"基本のデザインフローを身につける\"}],[\"$\",\"div\",null,{\"className\":\"flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible\",\"children\":[false,[[\"$\",\"div\",\"PGqGZxK4L4IsRU1CbFSDjI\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"0ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/ui-architect-beginner\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rou
2nded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.prod.website-files.com/6029d01deccd0a2530d2d878/63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png\",\"alt\":\"ゼロからはじめるUI情報設計のサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"ゼロからはじめるUI情報設計\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2\",\"children\":\"「どこに何をなぜ置くべきか?」の情報設計基礎をトレースしながら身につけられます。必須!\"}],\"$undefined\"]}]]}]}]}]}],[\"$\",\"div\",\"ae7022b5-aaf0-4201-986a-5b934019c155\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"60ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/ui-design-flow-lv1\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":\"$L38\"}]}]}],\"$L39\"]]}]]}],\"$L3a\"]]}]}]\n"])</script>
2<script>self.__next_f.push([1,"38:[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.sanity.io/images/cqszh4up/production/e66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg\",\"alt\":\"UIが上手くなる人の“デザインサイクル” ─ 入門編βのサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"UIが上手くなる人の“デザインサイクル” ─ 入門編β\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2\",\"children\":\"デザインで迷走しなくなる「正しい進め方」を、実践しながら体で覚えるAI時代にも必須な入門レッスンです。\"}],\"$undefined\"]}]]}]\n39:[\"$\",\"div\",\"g4rl1HmkpTXIsvYhaJftnY\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"120ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/uxdezaintohahe-ka-copy\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://uploads-ssl.webflow.com/6029d01deccd0a2530d2d878/66b852d11e31799915c3be71_new-ux-beginner.jpg\",\"alt\":\"顧客体験デザインの基本のサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"顧客体験デザインの基本\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2\",\"children\":\"ゴールダイレクトデザインを使って顧客価値を生む体験デザインの基本を習得\"}],\"$undefined\"]}]]}]}]}]}]\n3a:[\"$\",\"div\",\"UIデザインをはじめる\",{\"className\":\"flex flex-col gap-12\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary\",\"children\":\"UIデザインをはじめる\"}],[\"$\",\"div\",null,{\"className\":\"flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible\",\"children\":[false,[[\"$\",\"div\",\"g4rl1HmkpTXIsvYhaJuR0G\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"0ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/figmabeginner\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rou
2nded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.prod.website-files.com/6029d01deccd0a2530d2d878/6853b92b765bd35f8e0efc2c_Property%201%3DFigma%2C%20Property%202%3DBeginner%2C%20Property%203%3Dturtorial_figma.webp\",\"alt\":\"Figmaの使い方入門のサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"Figmaの使い方入門\"}],[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2\",\"children\":\"デジタルデザインの定番ツールFigmaの使い方を学びます\"}],\"$undefined\"]}]]}]}]}]}],[\"$\",\"div\",\"5L61YDQGhEJIMMl0pmn5zV\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"60ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/tutorial-uivisual\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://uploads-ssl.webflow.com/6029d01deccd0a2530d2d878/641428711d3fee1b8928a365_book-tutorial-uivisual.webp\",\"alt\":\"ゼロからはじめるUIビジュアルのサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"ゼロからはじめるUIビジュアル\"}],\"$L3b\",\"$undefined\"]}]]}]}]}]}],\"$L3c\"]]}]]}]\n"])</script>
2<div hidden id="S:5"><div class="flex items-center gap-2"><div class="min-w-0"><p class="truncate text-xs font-bold text-text-primary font-noto-sans-jp">ito</p></div></div></div>
2<script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:5","P:5")</script>
2<script>$RC("B:4","S:4")</script>
2<div hidden id="S:6"><a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/portfolio-01"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fcc8843db997bf97b87a2430011df26a785050fb5-1920x1080.webp&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">転職ポートフォリオのポイント</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">作るだけでなく、採用でアピールすべきポイントを解説</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a></div>
2<script>$RS("S:6","P:6")</script>
2<div hidden id="S:7"><a class="group -m-3 flex flex-1 flex-col gap-4 rounded-[8px] p-3 transition-colors duration-200 hover:bg-white/[0.06]" href="/guide/uxresearch_and_uidesign"><div class="relative w-full overflow-hidden bg-white/10" style="aspect-ratio:16/9;border-radius:4px"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.04]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 50vw, 100vw" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2F34bec3c620dc0cb6170b53865db591d44d996add-1280x720.jpg&amp;w=3840&amp;q=75"/></div><div class="flex flex-col gap-2"><h3 class="font-rounded-mplus text-xl font-medium leading-[1.4] tracking-[0.22px] text-text-inverse">初心者が身につけるべきUXスキルの全体像</h3><p class="font-noto-sans-jp text-base font-normal leading-[1.8] tracking-[0.8px] text-text-inverse">事業やユーザーへの貢献は課題を知ることから</p><span class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-noto ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 cursor-pointer border border-white/20 text-white shadow-[0px_0px_3px_0px_rgba(0,0,0,0.04)] hover:bg-white/10 h-8 w-fit self-start px-6 rounded-[6px] text-xs font-medium tracking-[0.6px] mt-1">詳細を見る</span></div></a></div>
2<script>$RS("S:7","P:7")</script>
2<script>$RC("B:2","S:2")</script>
2<div hidden id="S:8"><span>イベント</span></div>
2<script>$RS("S:8","P:8")</script>
2<div hidden id="S:9"><h3 class="font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline">もうすぐ秋だよ🍂数字で取り組むUI改善デザインチャレンジ〆27日</h3></div>
2<script>$RS("S:9","P:9")</script>
2<div hidden id="S:a"><a class="group flex items-center gap-4 text-left outline-none transition duration-200 -mx-3 w-[calc(100%+24px)] rounded-[8px] px-3 py-3 hover:bg-black/[0.03]" href="/questions/q-1790218025685-giylup"><div class="relative aspect-video w-[101px] shrink-0 overflow-hidden bg-muted-custom lg:w-[115px] rounded-[2px]"><img alt="" loading="lazy" decoding="async" data-nimg="fill" class="object-cover transition-transform duration-500 group-hover:scale-[1.06]" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1024px) 115px, 101px" srcSet="/_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=32&amp;q=75 32w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=48&amp;q=75 48w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=%2Fimages%2Fquestions-og.jpg&amp;w=3840&amp;q=75"/></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-2 font-noto-sans-jp text-xs font-medium leading-[24px] text-text-primary/[0.56]"><span>掲示板</span></div><h3 class="font-rounded-mplus text-sm font-medium leading-[24px] text-text-primary group-hover:underline">複数人インタビューのまとめ方、アウトプットとは?</h3></div></a></div>
2<script>$RS("S:a","P:a")</script>
2<script>$RC("B:1","S:1")</script>
2<div hidden id="S:3"><section class="border-b border-black/[0.12] pt-[24px] pb-[25px]"><div class="flex flex-col gap-16 py-[64px]"><div class="flex flex-col gap-2"><div class="flex flex-col gap-3 "><span class="inline-flex w-fit items-center justify-center rounded-full border px-3 py-1 font-rounded-mplus text-xs tracking-[1.6px] border-black/20 text-text-primary">レッスン</span><h2 class="font-rounded-mplus text-2xl font-medium leading-[1.4] tracking-[1.6px] sm:text-[28px] text-text-primary">1−2週間でレベルを上げる</h2></div><a class="font-noto-sans-jp text-sm text-text-link underline-offset-4 hover:text-text-link-hover hover:underline" href="/lessons">レッスン一覧を見る<!-- --> →</a></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">基本のデザインフローを身につける</h3><div class="flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible"><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:0ms"><a class="block h-full" href="/lessons/ui-architect-beginner"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="ゼロからはじめるUI情報設計のサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F63f4430070331f6a0a5815fb_20230221T0405-ccb460c1-3fdf-403e-9826-5122f334c92c.png&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">ゼロからはじめるUI情報設計</h3><p class="font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2">「どこに何をなぜ置くべきか?」の情報設計基礎をトレースしながら身につけられます。必須!</p></div></div></article></a></div><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:60ms"><a class="block h-full" href="/lessons/ui-design-flow-lv1"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rou
2nded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="UIが上手くなる人の“デザインサイクル” ─ 入門編βのサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fcqszh4up%2Fproduction%2Fe66d96a573bf74f2124cf7a56e333c29d39c435c-400x602.jpg&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">UIが上手くなる人の“デザインサイクル” ─ 入門編β</h3><p class="font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2">デザインで迷走しなくなる「正しい進め方」を、実践しながら体で覚えるAI時代にも必須な入門レッスンです。</p></div></div></article></a></div><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:120ms"><a class="block h-full" href="/lessons/uxdezaintohahe-ka-copy"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="顧客体験デザインの基本のサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F66b852d11e31799915c3be71_new-ux-beginner.jpg&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">顧客体験デザインの基本</h3><p class="font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2">ゴールダイレクトデザインを使って顧客価値を生む体験デザインの基本を習得</p></div></div></article></a></div></div></div><div class="flex flex-col gap-12"><h3 class="font-rounded-mplus text-[20px] font-medium leading-[1.4] tracking-[1.6px] text-text-primary">UIデザインをはじめる</h3><div class="flex overflow-x-auto scrollbar-hide gap-[27px] pb-4 -mx-4 px-4 sm:mx-0 sm:px-0 sm:grid sm:grid-cols-3 sm:pb-0 sm:overflow-visible"><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:0ms"><a class="block h-full" href="/lessons/figmabeginner"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rou
2nded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="Figmaの使い方入門のサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F6853b92b765bd35f8e0efc2c_Property%25201%253DFigma%252C%2520Property%25202%253DBeginner%252C%2520Property%25203%253Dturtorial_figma.webp&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">Figmaの使い方入門</h3><p class="font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2">デジタルデザインの定番ツールFigmaの使い方を学びます</p></div></div></article></a></div><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:60ms"><a class="block h-full" href="/lessons/tutorial-uivisual"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rou
2nded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="ゼロからはじめるUIビジュアルのサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fuploads-ssl.webflow.com%2F6029d01deccd0a2530d2d878%2F641428711d3fee1b8928a365_book-tutorial-uivisual.webp&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">ゼロからはじめるUIビジュアル</h3><template id="P:b"></template></div></div></article></a></div><template id="P:c"></template></div></div></div></section></div>
2<script>self.__next_f.push([1,"3b:[\"$\",\"p\",null,{\"className\":\"font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2\",\"children\":\"ステップバイステップでUIデザインを一緒にしていくコンテンツ。 Todoアプリの主要画面を、やり方を真似しながらデザイン。作りながらUIデザインの基本原則を学びます\"}]\n3c:[\"$\",\"div\",\"webflow-series-67e51906e5339d3194c7c43d\",{\"className\":\"w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up\",\"style\":{\"animationDelay\":\"120ms\"},\"children\":[\"$\",\"$L21\",null,{\"href\":\"/lessons/steel-design-sense\",\"className\":\"block h-full\",\"children\":[\"$\",\"article\",null,{\"className\":\"bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]\",\"onClick\":\"$undefined\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4\",\"children\":[\"\",[\"$\",\"div\",null,{\"className\":\"flex justify-center items-center py-1 sm:py-2 flex-1\",\"children\":[\"$\",\"div\",null,{\"className\":\"relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden\",\"children\":[\"$\",\"$L22\",null,{\"src\":\"https://cdn.prod.website-files.com/6029d01deccd0a2530d2d878/67efb7295bb3a3db69ce138e_book-steel.jpg\",\"alt\":\"センスを盗む技術のサムネイル\",\"fill\":true,\"sizes\":\"(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px\",\"loading\":\"lazy\",\"className\":\"object-cover\"}]}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-0.5 sm:gap-1\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]\",\"children\":\"センスを盗む技術\"}],\"\",\"$undefined\"]}]]}]}]}]}]\n"])</script>
2<div hidden id="S:b"><p class="font-noto-sans-jp text-[10px] sm:text-[11px] md:text-[13px] font-medium text-[rgba(13,34,29,0.48)] leading-[1.6] line-clamp-2">ステップバイステップでUIデザインを一緒にしていくコンテンツ。 Todoアプリの主要画面を、やり方を真似しながらデザイン。作りながらUIデザインの基本原則を学びます</p></div>
2<script>$RS("S:b","P:b")</script>
2<div hidden id="S:c"><div class="w-[232px] flex-shrink-0 sm:w-auto animate-fade-in-up" style="animation-delay:120ms"><a class="block h-full" href="/lessons/steel-design-sense"><article class="bg-white flex flex-col p-3 sm:p-4 md:p-5 rounded-[20px] sm:rounded-[24px] md:rounded-[29px] cursor-pointer w-full h-full text-[#0d221d] opacity-100 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)] transition-[transform,box-shadow] duration-200 ease-out will-change-transform hover:-translate-y-1 hover:scale-[1.01] hover:shadow-[0px_4px_18px_0px_rgba(0,0,0,0.16)]"><div class="flex h-full flex-col justify-between gap-2 sm:gap-3 md:gap-4"><div class="flex justify-center items-center py-1 sm:py-2 flex-1"><div class="relative w-[90px] sm:w-[45%] sm:max-w-[120px] aspect-[2/3] rounded-tr-[4px] rounded-br-[4px] shadow-[0px_0px_32px_0px_rgba(0,0,0,0.16)] overflow-hidden"><img alt="センスを盗む技術のサムネイル" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) 120px, (min-width: 640px) 10vw, 90px" srcSet="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=64&amp;q=75 64w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=96&amp;q=75 96w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=128&amp;q=75 128w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=256&amp;q=75 256w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=384&amp;q=75 384w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=3840&amp;q=75 3840w" src="/_next/image?url=https%3A%2F%2Fcdn.prod.website-files.com%2F6029d01deccd0a2530d2d878%2F67efb7295bb3a3db69ce138e_book-steel.jpg&amp;w=3840&amp;q=75"/></div></div><div class="flex flex-col gap-0.5 sm:gap-1"><h3 class="font-rounded-mplus-bold text-[13px] sm:text-sm md:text-base font-bold !text-[#0d221d] !opacity-100 leading-[1.4]">センスを盗む技術</h3></div></div></article></a></div></div>
2<script>$RS("S:c","P:c")</script>
2<script>$RC("B:3","S:3")</script>
2</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.