// ヒトヤク — Top Page (トップページ) // Sections: Hero / Problem / What we do / Pick-your-own / Pharmacist preview // / How it works / Corporate intro / Pharmacist intro / Trust / FAQ / Final CTA function PageTop() { const { PHARMACISTS, SPECIALTIES } = window.HY_DATA; const featured = PHARMACISTS.slice(0, 4); return (
); } // ── Hero ───────────────────────────────────────────────────── function Hero() { const t = window.HY_TWEAKS || {}; const isMobile = useIsMobile(); const layout = isMobile ? 'stack' : (t.heroLayout || 'right'); // 'left' | 'right' | 'fullbleed' | 'stack' const copy = (
薬剤師を、選んで相談する。

薬の不安は、
聞ける人がいれば
やわらぐ。

飲み合わせ、副作用、市販薬、漢方、サプリ、受診の目安。 日常のちいさな疑問を、自分に合った薬剤師にゆっくり相談できる場所をつくりました。

{window.HY_DATA.PHARMACISTS.slice(0,4).map((p,i)=>(
))}
5名 の薬剤師が在籍・随時拡大中。
); const visual = ; if (layout === 'fullbleed') { return (
{copy}
); } if (layout === 'stack') { return (
薬剤師とのご相談
{copy}
); } return (
{layout==='left' ? <>{visual}{copy} : <>{copy}{visual}}
); } function HeroVisual({ decorative }) { const { PHARMACISTS } = window.HY_DATA; return (
薬剤師とのご相談 {/* floating cards — inside container so they never overflow into the copy */} {!decorative && ( <>
{PHARMACISTS[0].name}
漢方 / 女性の健康
{Ico.chat}
今日の相談
サプリと薬の飲み合わせ
)}
); } function DecorPortrait() { // Soft SVG composition meant to read as "two people talking softly", lifestyle-mag style return ( {/* sun / window */} {/* table */} {/* mugs */} {/* steam */} {/* person 1 (pharmacist, slight smile) */} {/* white coat collar */} {/* person 2 (patient) */} {/* sweater */} {/* eyes — closed crescents, soft */} {/* mouths */} ); } // ── Problem ────────────────────────────────────────────────── function ProblemSection() { const isMobile = useIsMobile(); const problems = [ {q:'ネット検索だけでは、不安が逆に増える。', d:'信頼できる情報源にたどり着けず、結局判断できない。'}, {q:'病院に行くほどではない気がする。', d:'でも、誰かに確かめておきたい気持ちはある。'}, {q:'薬局では、ゆっくり聞きにくい。', d:'忙しそうだったり、人の目が気になったり。'}, {q:'家族の薬や、サプリの飲み合わせが心配。', d:'年齢が上がると、確認したいことが増えてくる。'}, ]; return (
診てもらうほどでもないけれど、
誰かに聞きたい。} lede="多くの方が、薬や体調について「聞ける専門家」を見つけられずにいます。ヒトヤクは、その距離を埋めるためのサービスです。" />
{problems.map((p,i)=>(
{String(i+1).padStart(2,'0')}
{p.q}
{p.d}
))}
); } // ── Features ───────────────────────────────────────────────── function FeatureSection() { const isMobile = useIsMobile(); const features = [ { tag:'01 / SELECT', title:'薬剤師を、自分で選べる。', lede:'専門・人柄・話し方が分かったうえで、相談相手をあなたが選びます。', bg:'var(--brand-wash)', accent:'var(--brand-deep)', icon:(), }, { tag:'02 / ASK', title:'気軽に、でもしっかり聞ける。', lede:'LINEやオンライン面談など、相談しやすい方法を選べます。', bg:'var(--accent-warm-soft)', accent:'#8B5A2B', icon:(), }, { tag:'03 / CONTINUE', title:'必要なときだけ、続けて頼れる。', lede:'契約や月額制ではなく、必要に応じて、その都度ご相談できます。', bg:'var(--bg-tint)', accent:'var(--brand-deep)', icon:(), }, ]; return (
「薬剤師を選ぶ」という
あたらしい体験。} />
{features.map((f,i)=>(
{f.tag} {f.icon}

{f.title}

{f.lede}

))}
); } // ── Pick (薬剤師を選べることの説明) ─────────────────────────── function PickSection() { const isMobile = useIsMobile(); return (
— なぜ「選べる」が大切か

合う薬剤師に出会えると、
聞き方も変わる。

漢方が得意な方、子どもの薬に詳しい方、英語で話せる方、ご家族の薬整理に向き合ってきた方。 ヒトヤクでは、それぞれの薬剤師の専門と人柄を、相談する前に知っていただけます。

); } function PickIllustration() { const { PHARMACISTS } = window.HY_DATA; const list = PHARMACISTS.slice(0, 6); return (
{list.map((p, i)=>(
{p.name}
{p.specialties.slice(0,2).map(sid=>window.HY_DATA.SPECIALTIES.find(s=>s.id===sid)?.label).join(' / ')}
{i===2 && (
あなたの選んだ薬剤師
)}
))}
); } // ── Pharmacist Preview ─────────────────────────────────────── function PharmacistPreview({ pharmacists }) { const isMobile = useIsMobile(); const shown = isMobile ? pharmacists.slice(0, 2) : pharmacists; return (
気になる薬剤師から、
はじめてみる。} />
{shown.map(p=> )}
); } // Reusable card — variant aware (used in list page too) function PharmacistCard({ p, variant='medium', onClick }) { const t = window.HY_TWEAKS || {}; const style = t.cardStyle || variant; // 'large' | 'row' | 'compact' | 'medium' const { SPECIALTIES } = window.HY_DATA; const handleClick = () => { if (onClick) onClick(p); else window.HY_NAV?.('detail', { id: p.id }); }; if (style === 'row') { return (
{p.name}
{p.title}
「{p.shortMessage}」
{p.specialties.slice(0,4).map(sid=>( {SPECIALTIES.find(s=>s.id===sid)?.label} ))}
); } if (style === 'compact') { return (
{p.name}
{p.specialties.slice(0,2).map(sid=>SPECIALTIES.find(s=>s.id===sid)?.label).join(' / ')}
{Ico.arrow}
); } // medium / large const big = style === 'large'; const hue = p.photoHue ?? 140; return (
{p.photo ? {p.name} :
{p.name?.[0] || 'P'}
}
{p.status==='online'?'相談OK':p.status==='busy'?'やや混雑':'受付停止'}
{p.name}
{p.location}
{p.title}
「{p.shortMessage}」
{p.specialties.slice(0,3).map(sid=>( {SPECIALTIES.find(s=>s.id===sid)?.label} ))}
); } // ── How it works (相談までの流れ) ────────────────────────────── function FlowSection() { const isMobile = useIsMobile(); const steps = [ { n:'01', t:'薬剤師を探す', d:'得意分野や対応方法から、気になる薬剤師を見つけます。' }, { n:'02', t:'プロフィールを読む', d:'人柄・経歴・相談スタンスを確認。「合いそう」と感じたら次へ。' }, { n:'03', t:'相談内容を送る', d:'直接相談、またはヒトヤク運営に相談して薬剤師を紹介してもらう。' }, { n:'04', t:'返信を受け取る', d:'LINE・メール・オンライン面談など、ご希望の方法で。' }, ]; return (
相談するまでの、
4つのステップ。}/>
{!isMobile &&
}
{steps.map((s,i)=>(
{s.n}
{s.t}
{s.d}
))}
); } // ── Dual entry (法人 + 薬剤師・薬局) ────────────────────────── function DualEntrySection() { const isMobile = useIsMobile(); return (
); } function EntryCard({eyebrow, title, lede, ctaLabel, ctaTarget, bg, accent, features}) { return (
— {eyebrow}

{title}

{lede}

); } // ── Trust ──────────────────────────────────────────────────── function TrustSection() { const isMobile = useIsMobile(); const stats = [ { v:'5名', l:'登録薬剤師数（順次拡大中）' }, { v:'15年+', l:'平均薬剤師経験年数' }, { v:'24h', l:'平均初回返信時間' }, { v:'無料', l:'初回運営相談' }, ]; return (
はじめての方にも、
安心していただける工夫を。}/>
{stats.map((s,i)=>(
{s.v}
{s.l}
))}
); } // ── FAQ (short) ────────────────────────────────────────────── function FaqShort() { return (
); } // ── Final CTA ──────────────────────────────────────────────── function FinalCTA() { const isMobile = useIsMobile(); return (

はじめての方も、まずは
運営にご相談ください。

「どの薬剤師に聞いたらいいか分からない」「相談内容がうまく言えない」そんなときは、ヒトヤク運営に。 内容を整理して、合いそうな薬剤師をご紹介します。

{/* deco wave */}
); } Object.assign(window, { PageTop, PharmacistCard });