{"version":3,"sources":["webpack:///./src/pages/projects/index.js","webpack:///./node_modules/gatsby-plugin-smoothscroll/index.js"],"names":["ProjectsPage","query","render","data","property","content","name","className","onClick","scrollTo","id","fluid","yasausa","childImageSharp","goods","event","class","licence1","licence3","design_thinking","fixed","yasausa_cp","step","time_graph","comparison","to","exports","__esModule","_default","selector","blockPosition","element","document","querySelector","scrollIntoView","behavior","block"],"mappings":"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","file":"component---src-pages-projects-index-js-822e6db1b744af89789c.js","sourcesContent":["import React from 'react';\nimport { Link, StaticQuery, graphql } from 'gatsby';\nimport Img from 'gatsby-image';\nimport { Helmet } from 'react-helmet';\nimport scrollTo from 'gatsby-plugin-smoothscroll';\n\nimport Layout from '../../components/Layout';\nimport './index.scss';\n\nconst ProjectsPage = () => (\n  <StaticQuery\n    query={query}\n    render={(data) => (\n      <Layout>\n        <Helmet>\n          <title>事業内容| STINGS</title>\n          <meta property=\"og:title\" content=\"事業内容 | STINGS\" />\n          <meta name=\"twitter:title\" content=\"事業内容 | STINGS\"></meta>\n        </Helmet>\n        <div className=\"content\">\n          <div className=\"business-header\">\n            <div className=\"section-heading-blue\">\n              <h2>PROJECTS</h2>\n            </div>\n          </div>\n          <div className=\"business-nav\">\n            <div className=\"business-nav__inner\">\n              <button\n                onClick={() => scrollTo('#chara_dev')}\n                className=\"square-btn-business\"\n              >\n                <span>自社キャラクター開発事業 ></span>\n              </button>\n              <button\n                onClick={() => scrollTo('#chara_pd')}\n                className=\"square-btn-business\"\n              >\n                <span>キャラクタープロダクション事業 ></span>\n              </button>\n              <button\n                onClick={() => scrollTo('#cd')}\n                className=\"square-btn-business\"\n              >\n                <span>クリエティブディレクション ></span>\n              </button>\n            </div>\n          </div>\n          <div className=\"business-content\" id=\"chara_dev\">\n            <div className=\"business-title\">\n              <span>Character development</span>\n              <div className=\"heading-blue\">\n                <h3>自社キャラクター開発事業</h3>\n              </div>\n            </div>\n            <div className=\"business-content__inner\">\n              <div className=\"business-message\">\n                <h4 className=\"business-heading-center\">\n                  STINGSはコミュニケーションを届ける仕事をしています。\n                </h4>\n                <p>\n                  SNSに投稿されたイラストや友達から送られてきたスタンプで嬉しくなって\n                  ほしい。ふとした瞬間にグッズを眺めて、やさしい気分になってほしい。\n                  たまのリアルイベントで心に残る思い出を作ってほしいと願っています\n                </p>\n              </div>\n              <Img\n                fluid={data.yasausa.childImageSharp.fluid}\n                className=\"business-yasausa-img\"\n              />\n              <p className=\"business-yasausa-caption\">\n                「やさしい たのしい\n                みんなの友だち」である『やさうさちゃん』と一緒にやさしい気分になりたい人をキャラクターの力で応援することを念頭にグッズ開発やリアルイベントなど様々な活動を\n                実施しています。\n              </p>\n            </div>\n            <ul className=\"business-list\">\n              <li className=\"business-list-item__half\">\n                <Img fluid={data.goods.childImageSharp.fluid} />\n                <h4 className=\"business-heading\">グッズ開発</h4>\n                <p>\n                  自社デザインのグッズ開発及び販売をしています。古今東西のカルチャーの良い部分を選択的にマッシュアップし、流行の半歩先を見据えたデザインを目指して制作しています。\n                </p>\n              </li>\n              <li className=\"business-list-item__half\">\n                <Img fluid={data.event.childImageSharp.fluid} />\n                <h4 className=\"business-heading\">リアルイベント</h4>\n                <p>\n                  私達にとってリアルイベントは実際にファンと触れ合うことで「いま、ここ」についての理解をアップデートする重要な機会です。みんなに楽しんでもらえているのかどうか直接自分たちの目で見て理解することが必要だと考えています。\n                </p>\n              </li>\n              <li className=\"business-list-item\">\n                <div class=\"business-list-thumbnail2\">\n                  <Img fluid={data.licence1.childImageSharp.fluid} />\n                  <Img fluid={data.licence3.childImageSharp.fluid} />\n                </div>\n                <h4 className=\"business-heading\">ライセンシー事業</h4>\n                <p>\n                  『やさうさちゃん』のライセンスを提供し、グッズ制作やコラボカフェなどのタイアップ施策を実施しております。2019年からは全国の「サンキューマート」で商品展開を開始したほか、2020年8月に横浜RokuCafeにて開催したコラボカフェでは連日予約だけで満席となる盛況を迎えることができました。今後も様々なブランドとタイアップしたイベント、商品開発のお手伝いをさせていただければと考えております。\n                </p>\n              </li>\n            </ul>\n          </div>\n          <div className=\"business-section-border\" id=\"chara_pd\"></div>\n          <div className=\"business-content\">\n            <div className=\"business-title\">\n              <span>Character production</span>\n              <div className=\"heading-blue\">\n                <h3>キャラクタープロダクション事業</h3>\n              </div>\n            </div>\n            <p className=\"business-heading-text\">\n              「やさうさちゃん」運用のノウハウをもとに、クライアント企業の新規キャラクター開発や既存キャラクターの育成支援を行っております。SNS運用や商品デザイン、リアルイベントを実施していくことで、「企業の顔」を低コストから育成していくことが可能です。\n            </p>\n            <div className=\"cp-content1\">\n              <div className=\"\">\n                <h4 className=\"business-heading\">\n                  「かわいい」だけで終わらせないために\n                </h4>\n                <p className=\"business-text__half\">\n                  通常のマーケティング施策と同様にキャラクター運用にも正解はありません。目的やターゲット属性に応じたコミュニケーション設計と、継続的な改善が不可欠です。\n                  STINGSではキャラクター開発のノウハウに加えて、「誰に」「何をして」「どんな感情を抱いてもらえたいか」を考えながら運用・改善していく広告的発想を加えることで、ただ可愛いだけのキャラクター運用を超えた運用を実現します。\n                </p>\n              </div>\n              <Img fluid={data.design_thinking.childImageSharp.fluid} />\n            </div>\n\n            <div className=\"cp-content2\">\n              <Img fixed={data.yasausa_cp.childImageSharp.fixed} />\n              <div>\n                <h4 className=\"business-heading\">「企業の顔」を定着させる</h4>\n                <p className=\"business-text\">\n                  企業のマーケティング活動においても、商品名やブランド名を浸透させるのは苦労の連続です。キャラクターは情報ではなくイメージとして人々の記憶に残りやすいことから、「企業の顔」として認知を広げやすい特性を持っています。認知心理学の知見によると、「かわいいモノ」を見た人はその対象に近づいてそばにいたいという気持ち\n                  = 接近動機づけが喚起されることがわかっています。\n                </p>\n                <p className=\"business-text\">\n                  キャラクターへのビジュアル的な好意度がブランドへの好感度と一体化し、購買行動などを喚起する要因となり得るのです。また、オンライン・オフライン問わずキャラクターには「そのキャラクターかわいいね！」といったコミュニケーションのきっかけを作る力があります。こうした特徴は企業からの一方的なメッセージ発信ではなく、熱心な”ファン”の口コミ増加を重要視する近年のマーケティングトレンドとの親和性が極めて高いと言えるでしょう。\n                </p>\n              </div>\n            </div>\n            <div className=\"cp-content3\">\n              <div>\n                <h4 className=\"business-heading\">小さく始めて、大きく広げる</h4>\n                <p className=\"business-text\">\n                  キャラクター運用の仮説検証は、素早く大量に積み重ねることが重要なため、まずはSNSへのイラスト投稿のように小規模かつ検証結果の確認までに時間がかかりにくいものから始め、知見を貯めていくのがおすすめです。一定の成果を確認できた後は、徐々にキャラクターを用いたコミュニケーションを商品デザインや各種広告に派生させていくことで、効率を最大化させていくステップに移行します。\n                </p>\n              </div>\n              <div className=\"business-graph\">\n                <Img fluid={data.step.childImageSharp.fluid} />\n              </div>\n            </div>\n          </div>\n          <div className=\"business-section-border\" id=\"cd\"></div>\n          <div className=\"business-content\">\n            <div className=\"business-title\">\n              <span>Character production</span>\n              <div className=\"heading-blue\">\n                <h3>クリエイティブディレクション</h3>\n              </div>\n            </div>\n            <p className=\"business-heading-text\">\n              キャラクター運用を通じて培ったクリエイティブを制作・編集する知見を応用し、SNSマーケティングや商品訴求に向けたクリエイティブ企画及びディレクションを実施しております。\n            </p>\n\n            <div className=\"business-content__inner\">\n              <h4 className=\"business-heading\">\n                生活者に「届く」クリエイティブ制作\n              </h4>\n              <p className=\"business-text\">\n                現代の生活者は、テレビ、SNS、Youtubeなど複数のメディアを行き来しつつ1日の大半を過ごしています。多種多様なメディアとの可処分時間を巡る競争を勝ち抜き、生活者にメッセージを届けるのは容易ではありません。\n                生活者は、あふれかえった情報の中から注目に値するコンテンツを見つけ出すため、ほとんど一瞬でコンテンツにエンゲージするか否かの判断をくだしています。企業が発信するメッセージに関しても、生活者にとって注目に値するクリエイティブであることが重要です。\n              </p>\n              <div className=\"business-graph\">\n                <Img fluid={data.time_graph.childImageSharp.fluid} />\n              </div>\n              <div className=\"cd-content1\">\n                <p className=\"business-text__half\">\n                  特にスマホネイティブ世代のトレンドはビジュアルを重視した方向へと変化を続けています。なかでもエンゲージメント率が高く製作コストが低いイラスト制作は、ビジュアル訴求のPDCAを回していくのに最適な手段です。\n                </p>\n                <div className=\"business-comparison\">\n                  <Img fluid={data.comparison.childImageSharp.fluid} />\n                </div>\n              </div>\n            </div>\n          </div>\n          <section className=\"business-contact\">\n            <div className=\"business-contact__inner\">\n              <h4 className=\"business-heading\">CONTACT</h4>\n              <p>\n                事業・キャラクターIPコンテンツに関するお問い合わせはこちらからお願いします\n              </p>\n              <Link to=\"/contact\" className=\"square-btn-business\">\n                <span>お問合せフォーム</span>\n              </Link>\n            </div>\n          </section>\n        </div>\n      </Layout>\n    )}\n  />\n);\n\nexport default ProjectsPage;\n\nconst query = graphql`\n  query {\n    yasausa: file(relativePath: { eq: \"biz_yasausa.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1000, quality: 100) {\n          ...GatsbyImageSharpFluid_noBase64\n        }\n      }\n    }\n    goods: file(relativePath: { eq: \"biz_goods.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 600, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    event: file(relativePath: { eq: \"biz_event.jpg\" }) {\n      childImageSharp {\n        fluid(maxWidth: 600, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    licence1: file(relativePath: { eq: \"biz_licence1.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 600, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    licence3: file(relativePath: { eq: \"biz_licence3.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 600, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    design_thinking: file(relativePath: { eq: \"biz_design_thinking.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1000, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    yasausa_cp: file(relativePath: { eq: \"biz_face.png\" }) {\n      childImageSharp {\n        fixed(width: 160, height: 160) {\n          ...GatsbyImageSharpFixed\n        }\n      }\n    }\n    step: file(relativePath: { eq: \"biz_step.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1000, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    time_graph: file(relativePath: { eq: \"biz_time_graph.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1000, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n    comparison: file(relativePath: { eq: \"biz_comparison.png\" }) {\n      childImageSharp {\n        fluid(maxWidth: 1000, quality: 100) {\n          ...GatsbyImageSharpFluid\n        }\n      }\n    }\n  }\n`;\n","\"use strict\";\n\nexports.__esModule = true;\nexports[\"default\"] = void 0;\n\n/**\n * Smooth scrolling onClick event handler\n * @param {string} selector argument will be passed to `querySelector`, usually an HTML id\n * @param {string} [blockPosition='start'] argument will be used to determine position where will be scrolled to (start, center, end, nearest)\n * @returns {boolean} false if `document.querySelector` doesn't find a match, otherwise true\n */\nvar scrollTo = function scrollTo(selector, blockPosition) {\n  if (blockPosition === void 0) {\n    blockPosition = 'start';\n  }\n\n  var element = document.querySelector(selector);\n\n  if (element) {\n    element.scrollIntoView({\n      behavior: 'smooth',\n      block: blockPosition\n    });\n    return true;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    console.warn(\"gatsby-plugin-smoothscroll:\\n The selector: '%s' wasn't found in the document.\\n Make sure you pass in a valid CSS selector string.\", selector);\n  }\n\n  return false;\n};\n\nvar _default = scrollTo;\nexports[\"default\"] = _default;"],"sourceRoot":""}