すなこ

画像

Date

自己紹介

クラス名

ロールアップ

日付 1

Formula

学生のメールアドレス

ウェブサイトURL

電話番号

学生の出席番号

学生の誕生日

学生の住所

学生の性別

学生の国籍

学生の成績

学生の所属クラブ

学生を選択

投稿者

名前

サムネ画像

作成日

更新日

クラス

タイトル

publish

プロトアウトブログALL📗

運営日記

卒業生インタビュー

ニュース

プロトアウトスタジオ受講生用

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPR78R9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>


<script>
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded イベントが発火しました');

  // 1. 除外ページの判定（末尾スラッシュ除去なしで正確に）
  const exclusionWords = ['/', '/biz', '/school', '/contact', '/lp-fb'];
  const currentPath = window.location.pathname;
  console.log('現在のパスは:', currentPath);

  const isOtherPage = !exclusionWords.includes(currentPath);
  if (!isOtherPage) {
    console.log('除外対象ページのため、処理をスキップします');
    return;
  }
  console.log('除外ページではないので、処理を実行します');

  // 2. ヘッダーリンク非表示（スマホ・PC共通）
  const updateBlogHeader = () => {
    const headerLinks = document.querySelectorAll([
      '#header-link-0',
      '#header-link-2',
      '#header-link-6',
      '#header-link-7',
      '#header-menu-link-0',
      '#header-menu-link-2',
      '#header-menu-link-6',
      '#header-menu-link-7'
    ].join(', '));
    console.log('非表示対象の要素数:', headerLinks.length);
    headerLinks.forEach(link => {
      if (link) link.style.display = 'none';
    });
  };
  updateBlogHeader();

  // 3. PCサイズのみ CSS 注入
  if (window.innerWidth > 767) {
    console.log('PCサイズなので、CSSを注入します');
    const style = document.createElement('style');
    style.innerHTML = `
      /* ヘッダーCTAボタン */
      #header-link-8 {
        background: #fff;
        border-radius: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 260px;
        padding: 5px 15px;
        color: #06C755;
        transition: 0.3s ease-in-out;
        border: solid 2px #06C755;
        margin-left: 15px;
      }
      #header-link-8:hover {
        background: #06C755;
        color: #FFF;
      }
      #header-link-9 {
        background: #fff;
        border-radius: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        max-width: 260px;
        padding: 5px 15px;
        color: #c40010;
        transition: 0.3s ease-in-out;
        border: solid 2px #c40010;
        margin-left: 15px;
      }
      #header-link-9:hover {
        background: #c40010;
        color: #FFF;
      }
    `;
    document.head.appendChild(style);
  } else {
    console.log('スマホサイズのため、CSSは注入しません');
  }


  // 4. 記事下部に CTA バーを追加する
  // 4-1. CTA 用スタイルを <head> に注入
  const ctaStyle = document.createElement('style');
  ctaStyle.innerHTML = `
    /* 固定表示のCTAバー */
    .article-cta-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      background-color: #f5f5f5;
      padding: 16px 1rem;
      z-index: 1000;
    }
    /* ボタン共通 */
    .article-cta {
      flex: 1;
      max-width: 300px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.5rem;
      border-radius: 6px;
      font-weight: bold;
      text-decoration: none;
      font-size: 1rem;
      white-space: nowrap;
      transition: background-color 0.3s, color 0.3s;
    }
    .article-cta--white {
      background-color: #fff;
      color: #003366;
      border: 2px solid #003366;
    }
    .article-cta--white:hover {
      background-color: #003366;
      color: #fff;
    }
    .article-cta--red {
      background-color: #c40010;
      color: #fff;
      border: 2px solid #c40010;
    }
    .article-cta--red:hover {
      background-color: #9a000c;
    }
    .article-cta-arrow {
      display: inline-block;
      margin-left: 0.5em;
      font-size: 1.2em;
      line-height: 1;
    }
    /* フル／ショートテキストの切り替え */
    .cta-label--short { display: none; }
    @media (max-width: 767px) {
      /* 縦並び */
      .article-cta-bar {
        flex-direction: column;
        gap: 1rem;
      }
      .article-cta {
        max-width: 100%;
      }
      .cta-label--full { display: none; }
      .cta-label--short { display: inline; }
    }
    /* 本文が隠れないよう余白確保 */
    .page, body {
      padding-bottom: calc(50px + 16px);
    }
  `;
  document.head.appendChild(ctaStyle);

  // 4-2. HTML を .container の末尾に差し込む
  const container = document.querySelector('.container');
  if (container) {
    container.insertAdjacentHTML('beforeend', `
      <div class="article-cta-bar">
        <a href="https://protoout.studio/?utm_source=blog_article" class="article-cta article-cta--white">
          <span class="cta-label--full">プロトアウトスタジオの詳細はこちら</span>
          <span class="cta-label--short">スクール詳細はこちら</span>
          <span class="article-cta-arrow">〉</span>
        </a>
        <a href="https://forms.gle/j3DJFqjMxfn7EWyw6?utm_source=blog_article&utm_medium=post&utm_campaign=download" class="article-cta article-cta--red">
          <span class="cta-label--full">お役立ち資料無料ダウンロード</span>
          <span class="cta-label--short">無料資料請求</span>
          <span class="article-cta-arrow">〉</span>
        </a>
      </div>
    `);
  } else {
    console.warn('.container が見つかりませんでした。CTA バーを挿入できません。');
  }

});
</script>

ChatGPTやClaudeなどの生成AIを活用した実践的研修カリキュラムを提供する日本初のプロトタイピング専門スクール。テクノロジーを活用する文化を組織に根付かせ、Difyなどの最新ツールを使いこなし、問題解決力を持つ次世代の人材を育成します。

「プロトアウトスタジオ | 日本初のプロトタイピング専門スクール」

プロトアウトスタジオのWebサイトはNotionを使って作っていますが、
同じようにNotionからWebサイトを作成するサービスは調べるとそこそこあるみたいなので、少し使いつつ紹介したいと思います。だいたい調べるとSuperが出てきますが、Potion、Simple.ink、Bullet、Wraptasなどいろいろ紹介していきます。

プロトアウトスタジオは、ビジネスを加速するために必要なプログラミングとプランニング（企画）のスキルを兼ね備えた人材を育成する専門スクールです。法人向けのコースも充実しています。お問い合わせはこちらから。

ビジネスを加速するスキルを身につける | プロトアウトスタジオ 

プロトアウトスタジオ | 日本初のプロトタイピング専門スクール

プロトアウトスタジオは、初心者でも簡単にプロトタイピングが学べるスクールです。プログラミングとプランニング（企画）の両方のスキルを身につけ、アイデアをかたちにすることができます。自分の可能性を広げたい方におすすめです。無料体験会も随時開催中。

アイデアを形にするスキルを身につける | プロトアウトスタジオ

現場の引継ぎ「言ったはず…」をゼロにする挑戦

制作物の紹介

使用ツール

なぜそれを作ろうと思ったのか

制作してみた結果

最後に