2f:T13a6, 30:Taee,chart1 = { const width2 = width; const height = width2 / 2 / 2; const marginTop = height / 10; const marginRight = width / 10; const marginBottom = height / 20; const marginLeft = width / 5; const filteredDataset = dataset2.filter((d) => d.item !== null); const titleCounts = d3.rollup( filteredDataset, (v) => v.length, (d) => d.item ); const uniqueAttributes = Array.from( new Set(filteredDataset.map((d) => d.item)) ); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() .domain(sortedAttributes) .range([marginTop, height - marginBottom]) .padding(0.1); const x = d3 .scaleLinear() .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width2 - marginRight]); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .attr("viewBox", [0, 0, width2, height]) .attr("style", "max-width:100%; height: auto;") .style("font-family", "ヒラギノ角ゴ ProN"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -50) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ) svg .append("g") .attr("font-weight", "bold") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 3)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") ); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", (d) => marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "#778899"); svg .append("g") .selectAll("text") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("text") .attr("y", (d) => y(d[0]) + height / 10) .attr("x", (d) => x(d[1]) + width / 100) .text((d) => d[1]) .attr("font-size", height / 20) .attr("fill", "black"); return svg.node(); }31:Tafe,chart2 = { const width2 = width; const height = width2 / 2 / 2; const marginTop = height / 10; const marginRight = width / 10; const marginBottom = height / 20; const marginLeft = width / 5; const filteredDataset = dataset2.filter((d) => d.attribute !== null); const titleCounts = d3.rollup( filteredDataset, (v) => v.length, (d) => d.attribute ); const uniqueAttributes = Array.from( new Set(filteredDataset.map((d) => d.attribute)) ); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() .domain(sortedAttributes) .range([marginTop, height - marginBottom]) .padding(0.1); const x = d3 .scaleLinear() .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width2 - marginRight]); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .attr("viewBox", [0, 0, width2, height]) .attr("style", "max-width:100%; height: auto;") .style("font-family", "ヒラギノ角ゴ ProN"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -50) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ); svg .append("g") .attr("font-weight", "bold") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 3)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") ); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", (d) => marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "#abced8"); svg .append("g") .selectAll("text") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("text") .attr("y", (d) => y(d[0]) + height / 10) .attr("x", (d) => x(d[1]) + width / 100) .text((d) => d[1]) .attr("font-size", height / 20) .attr("fill", "black"); return svg.node(); }32:T9c1,chart3 = { const width2 = width; const height = width2 / 2; const marginTop = height / 10; const marginRight = width / 10; const marginBottom = height / 20; const marginLeft = width / 5; const filteredDataset = dataset2.filter((d) => d.maker !== null); const ColorOfCountry = dataset2.filter((d) => d.country !== null); const titleCounts = d3.rollup( filteredDataset, (v) => v.length, (d) => d.maker ); const uniqueAttributes = Array.from( new Set(filteredDataset.map((d) => d.maker)) ); const sortedAttributes = uniqueAttributes.sort((a, b) => { const countA = titleCounts.get(a) || 0; const countB = titleCounts.get(b) || 0; return countB - countA; }); const y = d3 .scaleBand() .domain(sortedAttributes) .range([marginTop, height - marginBottom]) .padding(0.1); const x = d3 .scaleLinear() .domain([0, d3.max(titleCounts.values())]) .nice() .rangeRound([marginLeft, width2 - marginRight]); const svg = d3 .create("svg") .attr("width", width2) .attr("height", height) .attr("viewBox", [0, 0, width2, height]) .attr("style", "max-width:100%; height: auto;") .style("font-family", "ヒラギノ角ゴ ProN"); svg .append("g") .attr("transform", `translate(0, ${marginTop})`) .call(d3.axisTop(x).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("y", -50) .attr("dy", null) .attr("font-weight", "bold") .attr("text-anchor", "start") .text("count") ); svg .append("g") .attr("font-weight", "bold") .attr("transform", `translate(${marginLeft}, 0)`) .call(d3.axisLeft(y).tickSizeOuter(0)) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -(height - marginTop * 3)) .attr("dy", null) .attr("text-anchor", "start") .attr("font-weight", "bold") ); svg .append("g") .selectAll("rect") .data( sortedAttributes.map((attribute) => [ attribute, titleCounts.get(attribute) || 0 ]) ) .join("rect") .attr("y", (d) => y(d[0])) .attr("x", (d) => marginLeft) .attr("height", y.bandwidth()) .attr("width", (d) => x(d[1]) - marginLeft) .attr("fill", "#bbc8e6"); return svg.node(); }33:Tc3a,{ const width = 700; const height = 400; const margin = { top: 20, right: 20, bottom: 50, left: 70 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const x = d3 .scaleBand() .domain(dataset3.map((d) => d.year)) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 120]) .range([height - margin.bottom, margin.top]); const xAxis = d3.axisBottom().scale(x).tickValues(x.domain()); const yAxis = d3.axisLeft().scale(y).ticks(10); const lineA = d3 .line() .x((d) => { return x(d.year) + x.bandwidth() / 2; }) .y((d) => { return y(d.raito); }); const lineB = d3 .line() .x((d) => { return x(d.year) + x.bandwidth() / 2; }) .y((d) => { return y(d.man); }); const lineC = d3 .line() .x((d) => { return x(d.year) + x.bandwidth() / 2; }) .y((d) => { return y(d.woman); }); const pathA = svg.append("path"); const pathB = svg.append("path"); const pathC = svg.append("path"); /* pathA .datum(dataset3) .attr("fill", "none") .attr("stroke", "black") .attr("d", lineA); */ pathB .datum(dataset3) .attr("fill", "none") .attr("stroke", "green") .attr("d", lineB); pathC .datum(dataset3) .attr("fill", "none") .attr("stroke", "#b8d200") .attr("d", lineC); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) .selectAll("text") .attr("transform", "rotate(-90)") .attr("dy", "-0.5em") .attr("dx", "-1em") .style("text-anchor", "end"); const yAxisGroup = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); yAxisGroup .selectAll("g.tick") .append("line") .attr("class", "grid-line") .attr("x1", 0) // x1の値は0に設定 .attr("x2", width - margin.left - margin.right) // x2の値をグラフエリアの幅に設定 .attr("y1", 0) .attr("y2", 0) .style("stroke", "lightgrey") .style("stroke-dasharray", "3,3"); const legend1 = svg.append("g").attr("transform", `translate(${600}, ${50})`); const legendItem1 = legend1.append("g"); legendItem1 .append("text") .attr("x", 12) .attr("y", 5) .text("man") .attr("font-size", "15px") .attr("font-family", "sans-serif"); const legend2 = svg.append("g").attr("transform", `translate(${600}, ${30})`); const legendItem2 = legend2.append("g"); legendItem2 .append("text") .attr("x", 12) .attr("y", 5) .text("woman") .attr("font-size", "15px") .attr("font-family", "sans-serif"); /* const legend3 = svg.append("g").attr("transform", `translate(${600}, ${70})`); const legendItem3 = legend3.append("g"); legendItem3 .append("text") .attr("x", 12) .attr("y", 5) .text("rate") .attr("font-size", "15px") .attr("font-family", "sans-serif");*/ //legendItem3.attr("fill", "black"); legendItem2.attr("fill", "#b8d200"); legendItem1.attr("fill", "green"); return svg.node(); } 34:[{"id":"9a637397828f739f71e174687b7df3d000878edb2997056efda93c95adcdefaf986492bf93b0c1700de9c94afd37d45cea36d6550ff0acccec95884f947bb5be","href":"https://static.observableusercontent.com/files/9a637397828f739f71e174687b7df3d000878edb2997056efda93c95adcdefaf986492bf93b0c1700de9c94afd37d45cea36d6550ff0acccec95884f947bb5be","name":"スクリーンショット 2024-01-15 13.25.20.png","type":"image/png","lastModified":1705292776679.833,"size":31745},{"id":"59c9654cdb8d7f155a372c0fa559e6ed27a59845a187b531e885514d66ec5bb9d71dc77830c9b2049291e4bf1caa76e9ff22e1fd06eff8444f891cdbb3349222","href":"https://static.observableusercontent.com/files/59c9654cdb8d7f155a372c0fa559e6ed27a59845a187b531e885514d66ec5bb9d71dc77830c9b2049291e4bf1caa76e9ff22e1fd06eff8444f891cdbb3349222","name":"スクリーンショット 2024-01-15 13.26.23.png","type":"image/png","lastModified":1705292841056.112,"size":36459},{"id":"d5749343349ce7f3fd5c4b6adcd1534d5d57c45275970f7d4127683f509464fb1af86d1c70b8583a07e5a553cc7ed80adccf8156b1d9ac22d14ada9432dee9cb","href":"https://static.observableusercontent.com/files/d5749343349ce7f3fd5c4b6adcd1534d5d57c45275970f7d4127683f509464fb1af86d1c70b8583a07e5a553cc7ed80adccf8156b1d9ac22d14ada9432dee9cb","name":"スクリーンショット 2024-01-15 13.26.47.png","type":"image/png","lastModified":1705292850980.459,"size":43990}] 2d:{"title":"Trend of Cosmetic Advertising","cells":[{"id":1515,"value":"

Trend of Cosmetic Advertising

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

by suzukichi

","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"\n\n

\n男性が化粧品広告に登場することについて、どのような印象を抱くだろうか。特にここ数年、テレビcmや雑誌、SNSの広告で、男性がモデルとして起用された化粧品の広告を目にする機会が増えたように思う。\n\n
そこで、これらの広告にはどのようなメッセージが込められているのかを考察するために、広告の要素を分析する。

\n","pinned":false,"hidden":false,"mode":"md"},{"id":539,"value":"

・データ取集方法

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

@Cosme TOKYO にて、顔に使用する化粧品の品数が10以上あるブランドの広告を分析する。

「ブランドが公開する動画や画像などの広告媒体に登場する」「ブランドアンバサダー（ブランドの化粧品について宣伝する役割）に就任している」「商品とのコラボやキャンペーンで登場する」を基準とし、いずれかに当てはまる事例を各ブランドの公式Youtube、X、instagram、ホームページなどで検索した。\n

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

以下の表のとおり、対象の89ブランドのうち広告に男性が起用されたことのあるブランドは32ブランドであった。また、この32ブランドのうち「メンズ向け」と記載のある商品の取り扱いがあるブランドは9ブランドであった。しかし、SHISEIDO MENを除く8ブランドは特にメンズ向けの商品をPRしているとは限らず、男女問わず使用できる商品をPRしている。

","pinned":false,"hidden":false,"mode":"html"},{"id":469,"value":"Inputs.table(dataset)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"

次の表は、男性が登場する広告の事例をブランド名の五十音順に記載してまとめたものである。左から順にブランドのメーカー、人物名、広告が出た年（登場する人物がブランドアンバサダーである場合は就任した年）、強調されている商品（スキンケア、ベースメイク、アイメイク、リップ）、URLとなる。

","pinned":false,"hidden":false,"mode":"html"},{"id":1655,"value":"dataset2","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"

・ブランド公式YouTubeなどで見ることができる広告

","pinned":false,"hidden":false,"mode":"html"},{"id":302,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":431,"value":"

・広告で強調されているもの

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

広告内で強調されている商品はスキンケア用品が最も多い。\n

","pinned":false,"hidden":false,"mode":"html"},{"id":406,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"

・広告に登場する人物

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

一定数のファンがいる俳優やアイドルが多く起用されている。化粧品を宣伝することで、彼らのファンの多くが商品に対しての購買意欲をもつことに繋がるのではないかと考える。従来の化粧品広告のイメージとは異なる男性を起用することで幅広い属性の人々が化粧品、特にスキンケアやベースメイクといった挑戦しやすい商品への印象が深まるのかもしれない

","pinned":false,"hidden":false,"mode":"html"},{"id":435,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"

・男性が起用されている広告はどこの化粧品メーカーのものが多いか

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

やはり多くのブランドを抱えるメーカーが多く男性を起用していると言える。

","pinned":false,"hidden":false,"mode":"html"},{"id":476,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"

・男性起用が特徴的な3ブランド

\n
","pinned":false,"hidden":false,"mode":"html"},{"id":1355,"value":"

1. HERA

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

韓国の化粧品メーカーであるアモーレパシフィックは、広告への男性起用ブームの比較的早い時期である2017年にVT cosmeticsで韓国アイドルグループBTSとのコラボを果たした。そこで、前述で集計対象外であった同社ブランドの1995年に韓国で誕生したラグジュアリーコスメブランドHERAの広告に着目する。

HERA公式インスタグラムの投稿2486件(2024年1月時点)のうち、女性と男性の登場回数を集計した。初めて男性が登場したのは2018年である。特に2021年は多くの男性が起用されている。2015〜2016年の投稿は「健康的でアクティブな女性」の印象が強く、2021年以降の投稿は性別や人種を超えた美しさや力強さが目立っている印象だ。

下のグラフは2017年から2023年の投稿で女性と男性が登場した回数を表したものである。

","pinned":false,"hidden":false,"mode":"html"},{"id":1055,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"

HERA公式Youtubeにて、男性のスキンケアやシンプルなメイクの様子が投稿されている。左からそれぞれ2013年、2013年、2021年の動画である。

","pinned":false,"hidden":false,"mode":"html"},{"id":1139,"value":"\n\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":1309,"value":"

2. KATE

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

KATEは1997年にカネボウ化粧品から誕生したブランドである。KATEの広告の特徴的な部分はKATE MAGAZINEというコンテンツでモデルに対してインタビュー形式を取りながらメイク例を紹介している点だ。また、公式Instagramでは商品を用いた幅広いメイクが紹介されている。

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

3. 雪肌精

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

雪肌精は1985年にKOSEから誕生したスキンケアブランドである。男性向けというジャンルはあえて作らず、特定の世代や性別にフォーカスしないブランディング方針をとっている。大谷翔平や羽生結弦などのアスリートを起用することで、どんな人でも使用できるというブランドのイメージを生み出している。

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

・まとめ

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

1980年代から2000年以前にかけては女性の社会進出が活発になり、化粧品の広告は『輝く女性像』を生み出し、宣伝してきた。しかし現代では化粧の価値観はより自由になり、誰でもなりたい自分像に近づくことが簡単となった。男性がコスメ広告に起用されることによる効果について、大まかに
「化粧品に興味がある層に対して視覚的な新鮮さを提供する」
「化粧品に馴染みのない層に対して新しい価値観を認知させる」
「広告に登場する人物に興味がある層に対してブランドの品物をPRする」
があると考える。今や化粧品といえば女性だけのものというイメージも、これらの広告により薄まりつつあるのではないか。
\n

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