初めての方でも入りやすく、SGSジャパンの専門コンテンツを体系的に見始められるシリーズです。

 

【クリックするとyoutubeへ飛びます】

短い動画と詳しい記事を、ひとつの学習導線としてまとめています。

 

import React, { useEffect, useMemo, useState } from "react"; import { ArrowRight, BookOpen, ChevronDown, Clock3, ExternalLink, Filter, Menu, Play, Search, ShieldCheck, X } from "lucide-react"; const YOUTUBE = "https://www.youtube.com/@fscssgs2788/shorts"; const NOTE = "https://note.com/sgsjapan_fsafety"; const SERVICE = "https://sgsjapan-portal.jp/info_detail.php?id=276"; const COMPANY = "https://sgsjapan-portal.jp/page_detail.php?id=1"; const topics = ["すべて", "自動車機能安全", "半導体・産業機器", "サイバーセキュリティ", "自動駐車・SOTIF"]; const series = [ { id: "aps", category: "自動駐車・SOTIF", eyebrow: "注目シリーズ", title: "自動駐車システム（APS）の実践的な安全設計", summary: "APSという具体的なシステムを題材に、安全設計を実務の視点から段階的に学ぶシリーズです。", benefit: "自動駐車の基本から、品質と安全設計の考え方までをつかめます。", tags: ["APS", "ISO 26262", "SOTIF", "Automotive SPICE"], videoTitle: "自動駐車システム（APS）とは？", articleTitle: "理論から実作業へつなぐAPS安全設計", step: "短い動画で全体像をつかみ、noteで設計上の論点を深掘り", featured: true }, { id: "three-standards", category: "自動車機能安全", eyebrow: "基礎から体系的に", title: "車載開発の重要3規格を攻略せよ！", summary: "A-SPICE、機能安全、SOTIFの基礎と違い、相互関係、成果物マッピングを整理します。", benefit: "複数規格へ個別対応するのではなく、関係性を見通して効率よく考えるための入口になります。", tags: ["Automotive SPICE", "ISO 26262", "ISO 21448"], videoTitle: "A-SPICE・機能安全・SOTIFの違い", articleTitle: "3規格の基礎から統合マッピングまで", step: "各規格の違いを動画で確認し、noteで相互関係を整理", featured: true }, { id: "semiconductor-safety", category: "半導体・産業機器", eyebrow: "半導体エンジニア向け", title: "ISO 26262 / IEC 61508 機能安全ノート", summary: "SILとASIL、SEooC、監査における説明の軸など、半導体開発で押さえたい論点を扱います。", benefit: "自動車と産業機器の規格思想の違いを理解し、自社の説明や成果物整理に役立てられます。", tags: ["ISO 26262", "IEC 61508", "SIL", "ASIL", "SEooC"], videoTitle: "SILとASIL、似て見えるけど全然ちがう", articleTitle: "半導体エンジニアの機能安全ノート", step: "動画で論点を把握し、noteで規格背景と実務上の観点を確認", featured: true }, { id: "semiconductor-cs", category: "サイバーセキュリティ", eyebrow: "ハードウェア視点", title: "車載半導体サイバーセキュリティ", summary: "車載半導体、とくにハードウェアの観点からサイバーセキュリティを考えるシリーズです。", benefit: "車両の攻撃面と、ハードウェアが担う防御の考え方を短時間で整理できます。", tags: ["ISO/SAE 21434", "車載半導体", "ハードウェアセキュリティ"], videoTitle: "ハードウェアが『最後の砦』になる", articleTitle: "車載半導体サイバーセキュリティ", step: "ショート動画で問題意識を得て、noteで技術的な背景を読む" } ]; function track(event, data = {}) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event, ...data }); } function LogoPlaceholder() { return ; } function Header() { const [open, setOpen] = useState(false); return <>

setOpen(!open)} className="grid h-11 w-11 place-items-center border border-neutral-300 lg:hidden" aria-expanded={open} aria-label="メニューを開く">{open ? : }

{open && }

; } function ContentPair({ item }) { return

{item.eyebrow}

YouTube × note

［YouTubeサムネイル／noteアイキャッチ正式画像を配置］

短く見る 深く読む

{item.category}

{item.title}

{item.summary}

このシリーズで得られること
{item.benefit}

{item.tags.map(t=>{t})}

track('content_click',{content_id:item.id,content_type:'youtube',cta_label:'YouTubeで動画を見る'})} className="flex min-h-12 items-center justify-center gap-2 bg-[#e36f1e] px-4 py-3 text-center text-sm font-bold text-white hover:bg-[#bd5413]"> YouTubeで動画を見る track('content_click',{content_id:item.id,content_type:'note',cta_label:'noteで解説を読む'})} className="flex min-h-12 items-center justify-center gap-2 border-2 border-neutral-800 px-4 py-3 text-center text-sm font-bold hover:bg-neutral-900 hover:text-white"> noteで解説を読む

おすすめの閲覧順

{item.step}

; } export default function App() { const [topic, setTopic] = useState("すべて"); const [search, setSearch] = useState(""); const visible = useMemo(() => series.filter(x => (topic === "すべて" || x.category === topic) && (x.title + x.summary + x.tags.join(' ')).toLowerCase().includes(search.toLowerCase())), [topic, search]); useEffect(() => { const p = new URLSearchParams(window.location.search); const content = p.get('content'); if (content) setTimeout(() => document.getElementById(content)?.scrollIntoView({behavior:'smooth',block:'start'}), 80); track('content_hub_view',{utm_source:p.get('utm_source') || '(direct)',utm_medium:p.get('utm_medium') || '(none)',featured_content:content || ''}); const milestones = new Set(); const onScroll = () => { const max = document.documentElement.scrollHeight - innerHeight; const pct = max > 0 ? Math.round(scrollY / max * 100) : 100; [25,50,75,90].forEach(m => { if(pct >= m && !milestones.has(m)){ milestones.add(m); track('scroll_depth',{percent_scrolled:m}); }}); }; addEventListener('scroll',onScroll,{passive:true}); return ()=>removeEventListener('scroll',onScroll); },[]); return ; }