30:T1b3b,html`

この投稿をInstagramで見る

Kamala HQ(@kamalahq)がシェアした投稿

`31:T1049,// アニメーションセル { // ボタンが押されたイベントを監視 replay1; const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 50 }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#D1DCE2"); // 背景色を設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_YT, (d) => d.日付)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([ 0, d3.max(dataset_YT, (d) => Math.max(d["お料理得意なんです"], d["恋のハンバーグ"]) ) ]) .nice() .range([height - margin.bottom, margin.top]); const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(d3.timeDay.every(1)).tickSizeOuter(0)) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const line = d3 .line() .x((d) => x(d.日付)) .y((d) => y(d.value)); const drawLine = (data, color) => { const path = svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 4) .attr("d", line) .attr("stroke-dasharray", function () { const length = this.getTotalLength(); return `${length} ${length}`; }) .attr("stroke-dashoffset", function () { return this.getTotalLength(); }) .transition() .duration(4000) .attr("stroke-dashoffset", 0); }; drawLine( dataset_YT.map((d) => ({ 日付: d.日付, value: d["お料理得意なんです"] })), "#80BEAF" // 「お料理得意なんです」の色を変更 ); drawLine( dataset_YT.map((d) => ({ 日付: d.日付, value: d["恋のハンバーグ"] })), "#EE9C6A" // 「恋のハンバーグ」の色を変更 ); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid #ccc") .style("padding", "10px 15px 10px") // パディングを大きくします .style("font-size", "15px") // フォントサイズを大きくします .style("box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.1)") .style("pointer-events", "none"); const verticalLine = svg .append("line") .attr("class", "vertical-line") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke", "gray") .attr("stroke-width", 1) .style("opacity", 0); svg .append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .on("mouseover", () => { tooltip.style("opacity", 1); verticalLine.style("opacity", 1); }) .on("mouseout", () => { tooltip.style("opacity", 0); verticalLine.style("opacity", 0); }) .on("mousemove", function (event) { const mouse = d3.pointer(event); const x0 = x.invert(mouse[0]); const i = d3.bisectLeft( dataset_YT.map((d) => d.日付), x0, 1 ); const d0 = dataset_YT[i - 1]; const d1 = dataset_YT[i]; const d = x0 - d0.日付 > d1.日付 - x0 ? d1 : d0; tooltip .html( ` ${d3.timeFormat("%Y
%m / %d")( d.日付 )}

お料理得意: ${ d["お料理得意なんです"] }
恋のハンバーグ: ${d["恋のハンバーグ"]}` ) .style("left", `${event.pageX + 100}px`) .style("top", `${event.pageY - 28}px`); verticalLine.attr("x1", x(d.日付)).attr("x2", x(d.日付)); }); return svg.node(); }32:T910,graph = { const width = 800; const height = 400; const margin = { top: 20, right: 30, bottom: 40, left: 50 }; const x = d3 .scaleBand() .domain(video_counts.map((d) => d.date)) .range([margin.left, width - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(video_counts, (d) => d.count)]) .nice() .range([height - margin.bottom, margin.top]); const svg = d3 .create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .style("background-color", "#D1DCE2"); // 背景色の変更 svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat(d3.timeFormat("%Y-%m-%d")) .tickValues(video_counts.map((d) => d.date)) ) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-35)"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(255, 255, 255, 0.8)") .style("border-radius", "5px") .style("pointer-events", "none"); svg .selectAll(".bar") .data(video_counts) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => x(d.date)) .attr("y", (d) => y(d.count)) .attr("width", x.bandwidth()) .attr("height", (d) => height - margin.bottom - y(d.count)) .attr("fill", "#80BEAF") // 棒グラフの色を変更 .on("mouseover", function (event, d) { d3.select(this).attr("fill", "#EE9C6A"); // マウスオーバー時の色を変更 tooltip .html(`日付: ${d3.timeFormat("%Y-%m-%d")(d.date)}
件数: ${d.count}`) .style("visibility", "visible"); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function () { d3.select(this).attr("fill", "#80BEAF"); // 元の色に戻す tooltip.style("visibility", "hidden"); }); return svg.node(); }33:T1d49,graph4 = { // SVGのサイズ設定 const width = 800; const height = 300; const margin = { top: 20, right: 70, bottom: 40, left: 50 }; // 折れ線グラフのスケール設定 const xLine = d3 .scaleTime() .domain(d3.extent(dataset_KOI_P, (d) => d.date)) .range([margin.left, width - margin.right]); const yLine = d3 .scaleLinear() .domain([0, d3.max(dataset_KOI_P, (d) => d.play_count)]) .nice() .range([height - margin.bottom, margin.top]); // 棒グラフのスケール設定 const xBar = d3 .scaleBand() .domain(dataset_KOI_N.map((d) => d.date)) .range([margin.left, width - margin.right]) .padding(0.1); const yBar = d3 .scaleLinear() .domain([0, d3.max(dataset_KOI_N, (d) => d.movie)]) .nice() .range([height - margin.bottom, margin.top]); // SVGの作成 const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#D1DCE2"); // 背景色を変更 // 棒グラフの軸（左側のY軸）とグリッドライン const yAxisBar = svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yBar).tickSize(-width + margin.left + margin.right)) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-dasharray", "2,2") .attr("stroke-opacity", 0) ) .call((g) => g.select(".domain").remove()); // 折れ線グラフの軸（右側のY軸）とグリッドライン const yAxisLine = svg .append("g") .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(yLine).tickSize(-width + margin.left + margin.right)) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-dasharray", "2,2") .attr("stroke-opacity", 0.2) ) .call((g) => g.select(".domain").remove()); // 棒グラフの棒 svg .selectAll(".bar") .data(dataset_KOI_N) .enter() .append("rect") .attr("class", "bar") .attr("x", (d) => xBar(d.date)) .attr("y", (d) => yBar(d.movie)) .attr("width", xBar.bandwidth()) .attr("height", (d) => height - margin.bottom - yBar(d.movie)) .attr("fill", "#F5B994") // 棒グラフの色を変更 .on("mouseover", function (event, d) { tooltip .html(`日付: ${d.date}
映画数: ${d.movie}`) .style("visibility", "visible"); guideLine .attr("x1", xBar(d.date) + xBar.bandwidth() / 2) .attr("x2", xBar(d.date) + xBar.bandwidth() / 2) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("opacity", 1); }) .on("mousemove", function (event) { tooltip .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); }); // 折れ線グラフのライン const line = d3 .line() .defined((d) => !isNaN(d.play_count)) .x((d) => xLine(d.date)) .y((d) => yLine(d.play_count)); svg .append("path") .datum(dataset_KOI_P) .attr("class", "line") // この行を追加して、パスに 'line' クラスを適用します .attr("fill", "none") .attr("stroke", "#80BEAF") // 折れ線グラフの色を変更 .attr("stroke-width", 4) .attr("d", line); // ツールチップの設定 const tooltip = d3 .select("body") .append("div") .attr("class", "mytooltip") .style("position", "absolute") .style("visibility", "hidden") .style("padding", "10px") .style("background", "rgba(255, 255, 255, 0.8)") .style("border-radius", "5px") .style("pointer-events", "none"); // ガイドラインの設定 const guideLine = svg .append("line") .style("stroke", "#aaa") .style("stroke-dasharray", "3,3") .style("opacity", 0); // 日付のフォーマット設定 const formatDate = d3.timeFormat("%m月%d日"); // SVGにマウスムーブイベントリスナーを追加 svg .on("mousemove", function (event) { const [mouseX] = d3.pointer(event, this); const xDate = xLine.invert(mouseX); // マウスX座標から日付を逆算 // 最も近い日付のデータポイントをdataset_sから特定 const playCountIndex = d3 .bisector((d) => d.date) .left(dataset_KOI_P, xDate, 1); const playCountData = dataset_KOI_P[playCountIndex - 1]; // 最も近い日付のデータポイントをdataset_s_kensuuから特定 const movieCountIndex = d3 .bisector((d) => d.date) .left(dataset_KOI_N, xDate, 1); const movieCountData = dataset_KOI_N[movieCountIndex - 1]; if ( playCountData && movieCountData && +playCountData.date === +movieCountData.date ) { // ツールチップの位置と内容を更新 tooltip .html( `日付: ${formatDate(playCountData.date)}
` + `動画数: ${movieCountData.movie}
` + `平均再生数: ${formatPlayCount(playCountData.play_count)}` ) .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") .style("visibility", "visible"); // ガイドラインの位置を更新 guideLine .attr("x1", xLine(playCountData.date)) .attr("x2", xLine(playCountData.date)) .attr("y1", margin.top) .attr("y2", height - margin.bottom) .style("opacity", 1); } else { // データが一致しない場合はツールチップとガイドラインを非表示に tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); } }) .on("mouseout", function () { // マウスがSVG要素から外れたときにツールチップとガイドラインを非表示に tooltip.style("visibility", "hidden"); guideLine.style("opacity", 0); }); // 日付フォーマット関数を定義（例: "9月10日"） const formatDateAxis = d3.timeFormat("%m / %d"); // 12/14と1/1は月/日で表示、それ以外は日のみ表示 // X軸の設定を変更してカスタムのフォーマット関数を使用 const xAxis = d3 .axisBottom(xLine) .tickFormat(formatDateAxis) // 日付のフォーマット関数を設定 .ticks(d3.timeDay.every(1)); // 一日ごとに表示 // X軸をSVGに追加 svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-35)"); function drawGraph(svg, selectedMetric) { const barOpacity = selectedMetric === "動画数" ? 1 : 0.3; const lineOpacity = selectedMetric === "平均再生数" ? 1 : 0.8; // 棒グラフの透明度を更新 svg.selectAll(".bar").style("opacity", barOpacity); // 折れ線グラフの透明度を更新 svg.selectAll(".line").style("opacity", lineOpacity); // 左右のy軸の透明度を更新 yAxisBar.style("opacity", barOpacity); yAxisLine.style("opacity", lineOpacity); } // 'graph' セル内で 'drawGraph' 関数を呼び出す際に 'svg' を渡す drawGraph(svg, selectMetric); // SVGを返す return svg.node(); }34:T834,viewof chart = { const svg = d3 .create("svg") .attr("width", 960) .attr("height", 500) .attr("viewBox", [0, 0, 960, 500]) .style("background-color", "#D1DCE2"); // 背景色を設定 const margin = { top: 20, right: 30, bottom: 30, left: 40 }; const width = 960 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 日付データをパースする関数 const parseDate = d3.timeParse("%Y-%m-%d"); // 日付形式に合わせて調整してください // データセットの日付をパース dataset_KOI_548.forEach((d) => { d.date = parseDate(d.date); // 日付形式に合わせて調整してください }); const x = d3 .scaleBand() .domain(dataset_KOI_548.map((d) => d.date)) .range([0, width]) .padding(0.1); const y = d3.scaleLinear().domain([0, 1]).range([0, height]); // 上下を逆にするためにレンジを逆に設定 const color = d3 .scaleOrdinal() .domain(["Falt", "Joke", "Succes", "Other"]) .range(["#80BEAF", "#EDB5D2", "#C8A8DA", "#708aa3"]); // 色を設定 const stack = d3 .stack() .keys(["Falt", "Joke", "Succes", "Other"]) .order(d3.stackOrderNone) .offset(d3.stackOffsetExpand); const series = stack(dataset_KOI_548); g.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (d) => color(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d) => x(d.data.date)) .attr("y", (d) => y(d[0])) // y座標を逆に設定 .attr("height", (d) => y(d[1]) - y(d[0])) // 高さを逆に設定 .attr("width", x.bandwidth()); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%m/%d"))) // 日付フォーマットを変更 .selectAll("text") .attr("transform", "rotate(45)") .style("text-anchor", "start"); g.append("g").call(d3.axisLeft(y).ticks(10, "%")); return svg.node(); } 35:T64d,// 円グラフの表示を作成 function createSinglePieChart(dataset_C_C) { // データの取得 const data = dataset_C_C[0]; // データは1つのオブジェクトとして格納されている const keys = dataset_C_C.columns; // カラム名を取得 const values = keys.map((key) => data[key]); // 各カラムの値を取得 // SVG寸法の設定 const width = 500; const height = 500; const radius = Math.min(width, height) / 2; // カラースケール（D3のデフォルト） const color = d3.scaleOrdinal(d3.schemeCategory10); // SVG作成 const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); // グラフの中心位置 const chartGroup = svg .append("g") .attr("transform", `translate(${width / 2}, ${height / 2})`); // 円グラフ用のデータ生成 const pie = d3.pie().value((d) => d)(values); // 弧（arc）を作成 const arc = d3.arc().innerRadius(0).outerRadius(radius); // 円グラフのセクションを作成 chartGroup .selectAll("path") .data(pie) .join("path") .attr("d", arc) .attr("fill", (d, i) => color(keys[i])) .attr("stroke", "white") .attr("stroke-width", 2); // セクションにラベルと値を表示 chartGroup .selectAll("text") .data(pie) .join("text") .attr("transform", (d) => `translate(${arc.centroid(d)})`) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", "white") .text((d, i) => `${keys[i]}: ${d.value}`); return svg.node(); }36:Tefd,{ { // SVGのサイズ設定 const width = 600; const height = 200; const margin = { top: 20, right: 30, bottom: 40, left: 30 }; // スケールの設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_W_H, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 100]) // y軸の最大値を100に固定 .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(d3.timeYear.every(1)) .tickSizeOuter(0) .tickFormat(d3.timeFormat("'%y年")) // x軸のラベルフォーマットを設定 .tickPadding(10) // メモリとラベルの間にスペースを追加 ) .call((g) => g.selectAll(".tick line").attr("stroke", "#474746")) // メモリの色を変更 .call((g) => g.selectAll(".tick text").attr("fill", "#474746")); // 文字色を変更 const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("stroke", "#474746")) // メモリの色を変更 .call((g) => g.selectAll(".tick text").attr("fill", "#474746")); // 文字色を変更 // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // ラインジェネレータの設定 const line = d3 .line() .x((d) => x(d.date)) .y((d) => y(d.value)); // 軸の描画 svg.append("g").call(xAxis); svg.append("g").call(yAxis); // データラインの描画 const drawLine = (data, color) => { svg .append("path") .datum(data) .attr("fill", "none") .attr("stroke", color) // 折れ線グラフの色を変更 .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); }; // 各データセットのラインを描画（well_count, han_count, ham_countの順） drawLine( dataset_W_H.map((d) => ({ date: d.date, value: d.han_count })), "#EE9C6A" ); drawLine( dataset_W_H.map((d) => ({ date: d.date, value: d.hum_count })), "#FF6347" ); drawLine( dataset_W_H.map((d) => ({ date: d.date, value: d.well_count })), "#B3DDD1" ); // ツールチップ要素の追加 const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); // マウスオーバーイベントのためのオーバーレイ svg .append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .on("mouseover", function () { tooltip.style("display", "block"); }) .on("mouseout", function () { tooltip.style("display", "none"); }) .on("mousemove", mousemove); function mousemove(event) { const mouse = d3.pointer(event); const x0 = x.invert(mouse[0]); const i = d3.bisectLeft( dataset_W_H.map((d) => d.date), x0, 1 ); const d0 = dataset_W_H[i - 1]; const d1 = dataset_W_H[i]; const d = x0 - d0.date > d1.date - x0 ? d1 : d0; tooltip .html( `日付: ${d.date}
検索数: ${d.well_count}, ${d.han_count}, ${d.ham_count}` ) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); } return svg.node(); } }37:Td5c,{ { // SVGのサイズ設定 const width = 600; const height = 200; const margin = { top: 20, right: 30, bottom: 40, left: 30 }; // スケールの設定 const x = d3 .scaleTime() .domain(d3.extent(dataset_c_J, (d) => d.date)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, d3.max(dataset_c_J, (d) => d.search_count)]) .nice() .range([height - margin.bottom, margin.top]); // 軸の設定 const xAxis = (g) => g .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(d3.timeYear.every(1)) // 1年ごとにメモリを表示 .tickSizeOuter(0) .tickFormat(d3.timeFormat("'%y年")) // x軸のラベルフォーマットを設定 .tickPadding(10) // メモリとラベルの間にスペースを追加 ) .call((g) => g.selectAll(".tick line").attr("stroke", "#80BEAF")) // メモリの色を変更 .call((g) => g.selectAll(".tick text").attr("fill", "#474746")); // 文字色を変更 const yAxis = (g) => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").attr("stroke", "#80BEAF")) // メモリの色を変更 .call((g) => g.selectAll(".tick text").attr("fill", "#474746")); // 文字色を変更 // SVGの作成 const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // ラインジェネレータの設定 const line = d3 .line() .defined((d) => !isNaN(d.search_count)) .x((d) => x(d.date)) .y((d) => y(d.search_count)); // 軸の描画 svg.append("g").call(xAxis); svg.append("g").call(yAxis); // データラインの描画 svg .append("path") .datum(dataset_c_J) .attr("fill", "none") .attr("stroke", "#B3DDD1") // 折れ線グラフの色を変更 .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line(dataset_c_J)); // ツールチップ要素の追加 const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); // マウスオーバーイベントのためのオーバーレイ svg .append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .style("fill", "none") .style("pointer-events", "all") .on("mouseover", function () { tooltip.style("display", "block"); }) .on("mouseout", function () { tooltip.style("display", "none"); }) .on("mousemove", mousemove); function mousemove(event) { const mouse = d3.pointer(event); const x0 = x.invert(mouse[0]); const i = d3.bisectLeft( dataset_c_J.map((d) => d.date), x0, 1 ); const d0 = dataset_c_J[i - 1]; const d1 = dataset_c_J[i]; const d = x0 - d0.date > d1.date - x0 ? d1 : d0; tooltip .html(`日付: ${d.date}
検索数: ${d.search_count}`) .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 28 + "px"); } return svg.node(); } }38:T82f,style = html` `39:[{"id":"b25be692c3518d41dbb1a185ed67a32604a8fbec50148e4fab0e1e73e8c1fdfd78d3bdcd0038d3a956a83508903c514de71334e9384c03c5bf3f3072ced81b0c","href":"https://static.observableusercontent.com/files/b25be692c3518d41dbb1a185ed67a32604a8fbec50148e4fab0e1e73e8c1fdfd78d3bdcd0038d3a956a83508903c514de71334e9384c03c5bf3f3072ced81b0c","name":"coment.jpg","type":"image/jpeg","lastModified":1738398921420.611,"size":161704},{"id":"7ab28c03e1880443df6f834d098855ac75489ff121a9a0cd6510a025522d8017b6067c1688519ab42b8cc9af15566649cf716d6802e02763d04ed327659cc211","href":"https://static.observableusercontent.com/files/7ab28c03e1880443df6f834d098855ac75489ff121a9a0cd6510a025522d8017b6067c1688519ab42b8cc9af15566649cf716d6802e02763d04ed327659cc211","name":"Z_TV_Data.png.webp","type":"image/webp","lastModified":1738398921420.611,"size":42364},{"id":"124acbb1de981bf4b536bbe7e28e7d5b6d640e0fb237f286c0f086a1f4fc89f5d83b84329eb7cbfedf2a5d2f94fe91b4b7a963dbf34bf62f9c5b1df493a4ff96","href":"https://static.observableusercontent.com/files/124acbb1de981bf4b536bbe7e28e7d5b6d640e0fb237f286c0f086a1f4fc89f5d83b84329eb7cbfedf2a5d2f94fe91b4b7a963dbf34bf62f9c5b1df493a4ff96","name":"仮サムネ.png","type":"image/png","lastModified":1738398921420.611,"size":158333},{"id":"bb7be21e566668a3ab75fb9028b84234addfdde29a444e45d555fb9c0642152aa8e3958523081dd012da1d9bf754aa0a06247e162c7869e16af0f3aed5a9c5ef","href":"https://static.observableusercontent.com/files/bb7be21e566668a3ab75fb9028b84234addfdde29a444e45d555fb9c0642152aa8e3958523081dd012da1d9bf754aa0a06247e162c7869e16af0f3aed5a9c5ef","name":"video_data-4.json","type":"application/json","lastModified":1738422297962.491,"size":787247},{"id":"f6522cc685929cc460f131f8abe59cb4ad40d91878abe899690a351e4acb7859d4da3df66a80dbaca982fe435260813ccc1669221f97268548760f3a3eb1c9a5","href":"https://static.observableusercontent.com/files/f6522cc685929cc460f131f8abe59cb4ad40d91878abe899690a351e4acb7859d4da3df66a80dbaca982fe435260813ccc1669221f97268548760f3a3eb1c9a5","name":"1122.jpg","type":"image/jpeg","lastModified":1738497955446.287,"size":378736}] 2e:{"title":"ネットミームはいつ「オワコン化」してしまうのか（テストページ）","cells":[{"id":0,"value":"# ネットミームはいつ「オワコン化」してしまうのか（テストページ）\n#### インターネット上の流行を活用するために -流行のピーク予測とその原因考察-","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"

by Aki-Kaz

","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":123,"value":"

はじめに

","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"

\n 皆さんはネットミームというものをご存知だろうか
\n
\n ネットミームとは基本的に、インターネット上で模倣・改変・拡散が重ねられて広まるネタ的なコンテンツの事を指す。\n 日本で近年大きく話題になったものといえば2024年YouTube流行語大賞にも選ばれた「猫ミーム」が記憶に新しいだろう。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1510,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1507,"value":"

\n 近年その影響力はネット上での内輪ネタの域を越えてどんどん大きくなっており、
\n 時に海外では政治的なシーンでネットミームを活用する例も目にするようになった。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1549,"value":"

\n2024年大統領選で大きな話題を呼んだ「『Kamala brat』ミーム」
\n に反応したカマラ陣営Instagramの投稿\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1530,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"{\n const script = document.createElement(\"script\");\n script.src = \"//www.instagram.com/embed.js\";\n script.async = true;\n document.head.appendChild(script);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1521,"value":"

\n そんな高い影響力を持つネットミームだが、その大半が爆発的な流行ののち、なぜかすぐに見かけなくなり自然消滅してしまう。
\n 今回私はそこに目をつけた。
\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1700,"value":"### このサイトの目的","pinned":false,"hidden":false,"mode":"md"},{"id":1703,"value":"

\n 「ネットミームがいつ人々に飽きられてしまうのか」
\n 「いつ流行のピークを迎えるのか」
\n
\n それがわかれば、目まぐるしく変化するインターネット上の流行りのうち、どれを利用すれば多くの人々のもとに自分のメッセージが届くのか、いつ発信すればより長い間多くの人の記憶に残るのかが予測しやすくなるだろうと私は考える。
\n
\n今回このサイトでは、インターネット上の流行が、いつ頃ピークを迎えるのか、なぜそのピークを過ぎ人々に飽きられてしまうのかを、データの可視化を通して考察し、今後それらの流行を用いる際の手助けになるようなデータをまとめることを目的とする。","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"## 目次","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"

\n ① 【今回の調査対象】
\n ② 【タイトルにある「オワコン化」について】
\n ③　【検証① 検索件数の変化】
\n ④　【検証② 動画数の変化】
\n ⑤　【検証③ 再生数の変化】
\n ⑥ 【結論①】
\n ⑦ 【なぜ流行が終了したのか】
\n ⑧　【仮説① コンテンツ内容の変化】
\n

","pinned":false,"hidden":false,"mode":"md"},{"id":187,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1128,"value":"## 今回の調査対象","pinned":false,"hidden":false,"mode":"md"},{"id":1134,"value":"

\n 今回の調査では2025年1月現在、最新のミームを一つ例に挙げて、そのミームを中心にデータを集める。
\n 今回対象としたミームは 「『お料理得意なんです！』ミーム」 だ。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"### 2025年最新のミーム『お料理得意なんです！』とは","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"

\n このミームは、2016年にリリースされた楽曲「恋のHamburg」を使用した料理動画全般のことを指すもので、主にYouTubeShort上で2024年度末から爆発的な流行を見せたミームである。
\n 動画内容は、 『お料理、得意なんです！』 という「恋のHamburg」の歌詞と共に、
\n ”大失敗した料理” の動画を載せるというものが主流。
\n つまり、「自分の失敗した料理」を「お料理、得意なんです！」と言いながら投稿する、いわば自虐的なコンテンツがウケたミームなのである。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1656,"value":"

\n そんな『お料理得意なんです』ミームだが、最盛期の1月前半〜半ばごろに比べて最近（1/31現在）はあまり見かけなくなった様に感じる。\n 筆者自身の周囲や、SNS上でも話題にあげている人はめっきりいなくなり、ひいてはあれほど流れてきていたYouTubeのおすすめ欄にも流れなくなってきた様に感じる。そこで今回、最も最近流行したミームで、すでにそのピークを過ぎているかもしれない良例としてこのミームを取り扱うことにした。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1602,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"### 対象となる動画一覧 (12/14~1/31)","pinned":false,"hidden":false,"mode":"md"},{"id":1571,"value":"

\n 今回の調査では、
\n 初めて『お料理得意なんです！』というフレーズを含んだ動画が投稿された 2024年12月14日 から、 2025年1月31日現在までの間に投稿された全動画のうち、
\n
\n 『お料理得意なんです』というフレーズをタイトルもしくは概要欄に含む動画を対象に調査を行った。","pinned":false,"hidden":false,"mode":"md"},{"id":1095,"value":"

\n 2024年12/14 ~ 2025年1/31 に投稿された『お料理得意なんです』を含む動画一覧
\n日付をクリックすることで、その日に投稿された全動画を見ることができる\n

","pinned":false,"hidden":false,"mode":"html"},{"id":995,"value":"viewof currentDate = Inputs.radio(Object.keys(youtube_videos_daily), {\n label: \"日付を選択\",\n value: Object.keys(youtube_videos_daily)[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"md`

\n${youtube_videos_daily[currentDate]\n .map((d) => ({ id: d.id.videoId, url: d.snippet.thumbnails.default.url }))\n .map(\n ({ id, url }) =>\n `

`\n )\n .join(\"\\n\")}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"youtube_videos_daily = FileAttachment(\"video_data-4.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"## タイトルにある「オワコン化」について","pinned":false,"hidden":false,"mode":"md"},{"id":1648,"value":"### オワコンとは","pinned":false,"hidden":false,"mode":"md"},{"id":1469,"value":"

\n まず、タイトルにもある「オワコン」という単語について解説しようと思う。
\n
\n 「オワコン」とは、通称「終わってしまったコンテンツ」の略で、
\n 旬を過ぎたコンテンツ・顧客が離れてしまったコンテンツのことを指すネットスラングである。
\n 今回このサイトでは「流行が終わってしまったコンテンツ」という意味で用いらせてもらう。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1461,"value":"### オワコン化の定義","pinned":false,"hidden":false,"mode":"md"},{"id":1122,"value":"

\n 私は、ミームが「オワコン」化した時 とは 「人々の関心が離れた時」だ、と定義した。
\n そこで、ミームがいつオワコン化したのか、そもそもオワコン化しているのかを複数のデータから調査することにした。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1138,"value":"## 検証① YouTube上での検索件数","pinned":false,"hidden":false,"mode":"md"},{"id":1653,"value":"

\n まず、YouTube上での検索件数の変化に目をつけた。\n YouTubeでの検索件数がピークに比べ大幅に減っていれば、人々の関心が離れたと言って問題ないだろう。\n 今回、キーワードである『お料理得意』と、音源名である『恋するハンバーグ』の２フレーズの検索数の推移を調査した。\n その調査結果が以下のグラフだ。
\n 縦軸は最も検索された際の検索数を100とした際の数値で記録している。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1787,"value":"// ボタンセル\nviewof replay1 = Inputs.button(\"リプレイ\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"

\n \n 「お料理得意」\n \n 「恋のハンバーグ」\n
\n 検索数の推移グラフ　左上リプレイボタンを押すことでアニメーションを再生できる\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1141,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"

\n⚠️縦軸の数値は、特定の地域と期間について、グラフ上の最高値を基準として検索インタレストを相対的に表したものです。100 の場合はそのキーワードの人気度が最も高いことを示し、50 の場合は人気度が半分であることを示します。0 の場合はそのキーワードに対する十分なデータがなかったことを示します。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":1672,"value":"

\n どちらも1月2日~4日三が日のあたりから急激に検索数が増え始め、そこから二週間検索数が増え続けていることがわかる。\n そして、二週間経った1月14日をピークとして検索数が激減していることが判明した。
\n 少なくとも、 2月1日現在すでに視聴者の関心のピークは過ぎ去っていると言って良いだろう。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1145,"value":"Well_YT_trends = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRSuOoLMjdzf5oc9OZDu5LV6Djf0lRZVvOEZyb9IAKAPVUHdseQa0S8a3M35VbpvDyqu0zKJD7cMlz9/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1149,"value":"dataset_YT = d3.csv(Well_YT_trends, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"## 検証② 動画数の変化","pinned":false,"hidden":false,"mode":"md"},{"id":1811,"value":"

\n 視聴者側の関心が薄れていることはわかった。それでは投稿者側はどうだろうか？
\n 視聴者側同様投稿者側もこのコンテンツに飽きて、動画の投稿数が落ちているということも考えられるだろう。もしかしたら動画の投稿数が減少し、それに伴って視聴者も関心が薄れたのかもしれない。
\n
\n そう考え、期間内に投稿された動画の数を日付順で並べた。結果は以下の通りだ。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1864,"value":"

\n 2024年12/14 - 2025年1/31 動画投稿数
\n マウスオーバーで詳細な件数を確認できる\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1077,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1850,"value":"

\n 検索件数と同様、1月2日~4日三が日のあたりから投稿数が増え始め、1月8-11日ごろがピークになっていることがわかる。
\n しかし、検索件数と異なるのはピークを過ぎても大きく投稿数が減っていないという点だ。多少のブレはあるが、基本的にピーク時の半分以上程度の動画が毎日投稿されている。
\n ピークが起こるタイミングは同じでも、投稿者と視聴者では熱量の下がり方に違いがあるのだろうか。それを確かめるためもう一つ検証を行うことにした。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1056,"value":"video_counts = Object.entries(youtube_videos_daily).map(([date, videos]) => ({\n date: new Date(date),\n count: videos.length\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"## 検証③ 再生数の変化","pinned":false,"hidden":false,"mode":"md"},{"id":1853,"value":"

\n 最後の検証として、日毎の平均再生回数で比較することにした。Short動画の仕様のことも考えると、検索件数だけでは視聴者側の関心の度合いを図る指標として不十分だと考えたため、今回再生回数という新たな指標を設けることにした。
\n 投稿数と比較ができるようにまとめたものが以下のグラフである。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1872,"value":"

\n １日ごとの平均再生回数をまとめた折れ線グラフ
\n プルダウンで動画投稿数を表す棒グラフを薄くすることができる。
\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1436,"value":"viewof selectMetric = Inputs.select([\"平均再生数\", \"動画数\"], {\n label: \"グラフを選択\",\n value: \"動画数\", // 初期値\n class: \"custom-select-metric\" // クラスを追加\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1885,"value":"

\n 再生回数は、前述の２データとは異なり12/25の投稿から大きく数を伸ばし始めている。が、1/5ごろに最高記録の平均再生回数を出したのち、どんどんと下がっていき、1/17の投稿を最後に以降10万再生を超えることは無くなってしまった。
\n 動画の投稿数に対する再生数の比率で考えると、初期に比べても大きく下がってしまっているのがわかるだろう。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1343,"value":"dataset_KOI_P = d3.csv(ave_Pl_KOI, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"dataset_KOI_P","pinned":true,"hidden":false,"mode":"ojs"},{"id":1363,"value":"ave_Pl_KOI = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQOuVH5J0xmvlfXykAm2zEr3T_4xSXE9vbCPK5NcmayxEuBjxP_iR29I63-ycyu-iKOchAteD8CWUZp/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"dataset_KOI_N = d3.csv(KOI_Number, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"KOI_Number = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSZ00XymEpRaLNnebzdyKitHaxVQSnnN2_S7xOC9OniLKYvTU-KFfOm5_3RLpK97bM65SeixAZf8Xl-/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"function formatPlayCount(playCount) {\n if (playCount >= 10000) {\n // 10000以上の場合、「一万」の形式で表示\n const rounded = Math.round(playCount / 1000) * 1000; // 100の位で四捨五入\n return `${(rounded / 10000).toFixed(1)}万`; // 小数点第一位まで表示\n } else {\n // 10000未満の場合、小数点以下を切り捨て\n return Math.floor(playCount);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"## 結論① 『お料理ミーム』はオワコン化しているのか","pinned":false,"hidden":false,"mode":"md"},{"id":1895,"value":"### A. 既にピークは過ぎており、特に視聴者の関心はもうほとんどない","pinned":false,"hidden":false,"mode":"md"},{"id":1898,"value":"

\n 今回の調査で分かったことは以下の３つである。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1900,"value":"

\n ① 流行から二週間ほどのごく短い期間でピークを迎えていた事
\n ② 視聴者側も、投稿者側も流行のピークはほぼ同時に訪れていた事
\n ③ しかし、ピーク後の流行の止み方には視聴者側と投稿者側でずれが生じていること。","pinned":false,"hidden":false,"mode":"md"},{"id":1908,"value":"

\n つまり、今後ネット上の流行を活用して発信をする際に気をつけなければいけないことは以下の2点である。\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1910,"value":"
\n ❶ 流行は想像よりも早く収束してしまうこと
\n
\n ❷ 何より、動画がまだ多く投稿されているからといって、大衆の関心も未だそのミームにあるとは限らないということ\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1933,"value":"
\n 今回、このネットミームがオワコン化していること、ピークの時期、流行の傾向は確かめることができた。
\n 次は、なぜ流行が終わってしまったのかを考えよう。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1935,"value":"## なぜ流行が終了したのか","pinned":false,"hidden":false,"mode":"md"},{"id":1938,"value":"
\n なぜ、ミームの流行が終わってしまうのか、これも仮説をたてながらデータを用いて検証していこう。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1942,"value":"## 仮説① コンテンツの内容の変化","pinned":false,"hidden":false,"mode":"md"},{"id":1944,"value":"
\n ミームの模倣・拡散が加速していくにつれ、だんだんと当初の形から離れてしまい、結果、視聴者のニーズと合わなくなってしまったのではないだろうか。\n そう考えたため以下の検証を行うことにした。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1948,"value":"### 検証④ 「お料理得意」動画の比率調査","pinned":false,"hidden":false,"mode":"md"},{"id":1951,"value":"
\n 最初のミーム紹介で述べた通り『お料理得意なんです！』ミームとは大失敗した料理を投稿することでバズったコンテンツである。
\n しかし、1月なかばごろから本当にお料理が得意な動画が時々流れてくる様になり、しまいには料理と関係のない動画も見られるようになった様に感じる。
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":1955,"value":"
\nそこで、今回、1/31までの間に投稿された『お料理得意なんです』という言葉をタイトルもしくは概要欄に含んでいる動画、
\n 全 548 動画を全て視聴し、コンテンツの内容を分類して、 計47日分、全日付におけるその割合を算出した。","pinned":false,"hidden":false,"mode":"md"},{"id":1963,"value":"### 本来の『お料理得意なんです！』動画は何割あるのか","pinned":false,"hidden":false,"mode":"md"},{"id":1958,"value":"
\n 「お料理得意なんです」を含む 全548件の動画 を以下の 4つに分類した。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":879,"value":"
\n ①　大失敗している料理動画
\n ②　本当に料理が得意だが、見た目等がネタに走っているもの （見た目が犬の糞など）
もしくは、ちゃんとした料理だが、意図して汚く食べているもの
\n ③　本当にお料理が得意な動画
\n ④　その他　料理に関係のない動画
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":891,"value":"
\n 今回の ① 大失敗 の定義は、
\n
\n①　火災や 器物破損 などの二次被害が発生しているもの
\n
\n②　料理として成立しているか怪しい もの
\n　　(床に落ちていたり、異物混入や、極度の黒焦げ等が発生しているもの）
\n
\n③　投稿者本人が、 失敗した料理である事を説明 しているもの
\n（例）
\n･ #汚料理、特異なんです！が付いているもの
\n･失敗や事故等の文章がタイトル、もしくは概要欄に書いてある物。
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"
\n これら3つのいずれも満たしていない動画は②もしくは③とみなす。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":2074,"value":"dataset_KOI_548 = d3.csv(KOI_548_Memo, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1981,"value":"KOI_548_Memo = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSJKNgsvApVu4CO4G7BJgC1P75ygDU6D3S9wnr4I4x5hHhckcxOyGIhx-PdIIjDy86UjEw1cj6DngkZ/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2071,"value":"dataset_KOI_548","pinned":true,"hidden":false,"mode":"ojs"},{"id":2028,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2006,"value":"
\n 結果としては\n
","pinned":true,"hidden":false,"mode":"md"},{"id":1347,"value":"a","pinned":true,"hidden":false,"mode":"md"},{"id":390,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":360,"value":"
\n そこで今回この音源を使用しているShort動画のうち、
\n おすすめに出てきた上位100件の動画を対象に調査を行った。
","pinned":false,"hidden":false,"mode":"md"},{"id":710,"value":"### 本当に『得意なんです！』と言えるお料理はあるのか","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"
\n 「恋するHumburg♪」を使用している 100件の動画 を以下の 4つに分類した。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"グラフ","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"Cocking_Count = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR-d3ZCMsTE1pkGL9-MnmlNIYmxCFzsK6zeh-PoqzsUjmHoP-D3VZDd6lTKmRZ8hvjv1nDQv561G_NY/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"dataset_C_C = d3.csv(Cocking_Count, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"dataset_C_C","pinned":true,"hidden":false,"mode":"ojs"},{"id":867,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"createSinglePieChart(dataset_C_C)","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"
\n 正直自分の想定よりも多くのお料理得意動画があったが、
\n それでも、過半数が大失敗したお料理の動画である事がわかる。
\n なぜ、上手な料理を写した動画ではなく、大失敗した動画が流行ったのだろうか。
\n ここからは、このミームが流行った理由を考えていこうと思う。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"## 検証② 流行の経緯調査","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"
\n 音源となっている「恋するHamburg」は2016年10月に発表された音楽である。
\n それでは、この音源が使われている動画の数の変化を
\n 発表された日から現在まで の時系列順に見ていこう。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"### 「恋のHamburg」動画数推移","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"グラフ
\nYoutube API v3 を使用","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"
\n 続いて、Googleでの検索結果を見てみよう。
\n 曲名の 「恋のHamburg」「恋のハンバーグ」 と、
\n 今回流行した「お料理得意なんです」 というフレーズの検索数を比較してみた。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"### Google検索件数推移","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"
\n \n 「恋のHamburg」 \n \n 「恋のハンバーグ」\n \n 「お料理得意なんです」\n
","pinned":false,"hidden":false,"mode":"html"},{"id":591,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"
\n⚠️縦軸の数値は、特定の地域と期間について、グラフ上の最高値を基準として検索インタレストを相対的に表したものです。100 の場合はそのキーワードの人気度が最も高いことを示し、50 の場合は人気度が半分であることを示します。0 の場合はそのキーワードに対する十分なデータがなかったことを示します。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"
\nこのようにリリースから16年ほど経っていたにも関わらず
\n ごく最近まで音源としては利用されておらず、
「お料理得意なんです」という歌詞に注目されることもなかった事がわかる。
\n
\nしかし、 昨年12月 をきっかけに大きく投稿数が伸びている。
\n その大きなきっかけになったのがxxさんのxxという動画だろう\n
","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"
","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"
\nこの動画のバズりをきっかけに、それ以前は投稿されていなかったお料理動画が激増している。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"
\nではなぜ、近年になりこのような流行の仕方が起こるようになったのだろう。
\n私はその理由として「テレビのコンプライアンスの過激化」および、「若者のテレビ離れ」が原因にあると考える。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"## ネット上での流行についての考察","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"### テレビのコンプラと若者の流行","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"
\n昨今「コンプラ」という言葉が果敢に叫ばれているのは皆さんも体感しているだろう。\nGoogle の提供する GoogleTrendsからも、近年検索数が急増していることがわかる。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":544,"value":"### 「コンプラ」検索件数の推移","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"
\n⚠️縦軸の数値は、特定の地域と期間について、グラフ上の最高値を基準として検索インタレストを相対的に表したものです。100 の場合はそのキーワードの人気度が最も高いことを示し、50 の場合は人気度が半分であることを示します。0 の場合はそのキーワードに対する十分なデータがなかったことを示します。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":955,"value":"なんとなく思ってることを形にしたい〜〜
\n軸を増やせば、、？","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"### 若者のテレビ離れ","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"
\nZ世代の高校生・大学生・社会人 6953人を対象にしたアンケートでも、 「SNS (YouTube等動画共有サイト含む) 」 が
\n 普段チェックする情報源 として 79.8％、
\n さらに最もチェックしている情報源 としても 55.8％ を獲得し
\n 「テレビ番組／テレビCM」と41ポイントの大差を付けている。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":768,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"
\n前述のような「コンプラ」という言葉の流行りもあって、近年
\n 過激なものや攻めた表現のもの がテレビから消えていっているように感じる。
\n そして更にテレビを視聴する層が減ってきたことで、
\nそういった 刺激的なコンテンツをネットに求める ようになっているのではないだろうか。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"## まとめ","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"
\n今回の「お料理得意」動画も、考えようによっては 食品ロスをコンテンツ化している として炎上する可能性のある危険なコンテンツだった。
\n\nそこで、自虐的な要素を入れた上でネット上でコンテンツ化することにより、若者たちに受け入れられ瞬く間に流行していったのではないだろうか。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"
\n 他にも最近流行った過激なコンテンツとしては、
「水曜日のダウンタウン」プロデューサーがYouTubeに投稿した
\n 「麻酔ダイイングメッセージ」 という動画が大きく話題を呼んだ。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":458,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":442,"value":"
\n 近年、このようなテレビでは放映されない過激な内容がネット上で流行る例が度々目撃されるようになった。
\n 今回の「お料理得意」動画の流行りはまだまだ可愛いものだが、
\n 今後過激な動画を求める風潮が加速する可能性は十分にありうる のではと私は考える。
\n
\n 自分たちもインターネットを利用して流行を助長する一人なんだと自覚を持ち、過激なコンテンツがエスカレートしすぎないように一人一人が自覚を持つことが大事だと私は考える。\n
","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"Data","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"Well_HA_trends = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQMHKyTzrbeTxcUiJhwKQWP9wRhYBmIdSqQ2dWJ4_X-dIkmP1HdmouK0zg4jMbG6nwm6WatzQP2Gp3h/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"comp_Ja_trends = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSwCxGbSUCNeDnbUE0srj7k3_tMY1hnaS0Bj86OivbDE-gkDp3YNol9Suwxso-fnHZyARVt9km8nBYq/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"Data Set","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"dataset_W_H = d3.csv(Well_HA_trends, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"dataset_W_H","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"dataset_c_J = d3.csv(comp_Ja_trends, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"dataset_c_J","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}