2026-06-24

JS】美容サロンサイトを作る

JavaScript

JavaScriptのロゴアイコン by Icons8

デモサイト

　
これまで習ってきたことを総動員して、美容サロンサイトを作ってみましょう。

素材をダウンロード　
　

作業手順

HTML

【ポイント】

メインビジュアルの画像は、モニター幅に応じて切り替えるため、今回はpictureタグを使います。
「３つの約束」では、見出しの箇条書き番号をpositionでデザインしますので、それを考慮したHTML構造を作ります。
「料金表」はtableタグで作ります。列幅を整えるために、colgroupタグで幅を指定します。
「よくあるお問い合わせ」はアコーディオンメニューで開閉させます。常時表示する「質問」と、クリック時に表示する「回答」の位置関係を踏まえながらコーディングします。
今回のハンバーガーメニューは、１つのnavをPC・SPサイトで共有します。

コードを参照

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Felica Beauty Salon</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<header>
<div class="header_wrapper">
<h1><a href="#"><img src="img/logo_b.svg" alt="フェリカ・ビューティー・サロン"></a></h1>
<nav>
<ul class="en">
<li><a href="#news">NEWS</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#features">FEATURES</a></li>
<li><a href="#menu_price">MENU</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="main_visual">
<h2>新しい私<span>に</span><br>
会いに行こう
</h2>
<ul class="image_wrapper slider">
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_s.webp">
<img src="img/main_visual.webp" alt="メインビジュアル">
</picture>
</li>
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_02_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_02_s.webp">
<img src="img/main_visual_02.webp" alt="メインビジュアル">
</picture>
</li>
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_03_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_03_s.webp">
<img src="img/main_visual_03.webp" alt="メインビジュアル">
</picture>
</li>
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_04_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_04_s.webp">
<img src="img/main_visual_04.webp" alt="メインビジュアル">
</picture>
</li>
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_05_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_05_s.webp">
<img src="img/main_visual_05.webp" alt="メインビジュアル">
</picture>
</li>
<li>
<picture>
<source media="(max-width:1280px)" srcset="img/main_visual_06_m.webp">
<source media="(max-width:600px)" srcset="img/main_visual_06_s.webp">
<img src="img/main_visual_06.webp" alt="メインビジュアル">
</picture>
</li>
</ul>
</section>
<section class="news fadeUp" id="news">
<h2 data-subtitle="お知らせ" class="en">NEWS</h2>
<dl>
<div class="news_row">
<dt>2026.05.20</dt>
<dd>［サロン］定休日変更（火曜定休）のお知らせ</dd>
</div>
<div class="news_row">
<dt>2026.04.15</dt>
<dd>［メニュー］新しい髪質改善トリートメントメニューが加わりました</dd>
</div>
<div class="news_row">
<dt>2026.03.01</dt>
<dd>［その他］ホームページをリニューアルオープンいたしました</dd>
</div>
</dl>
</section>
<div class="bg fadeUp">
<section class="about" id="about">
<div class="about_wrapper">
<img src="img/about.webp" alt="私たちについて">
<div class="about_message">
<h2 data-subtitle="私たちについて" class="en">ABOUT</h2>
<p>当店では、目の前のお客様一人ひとりのライフスタイルに寄り添い、じっくり時間をかけた丁寧なカウンセリングを大切にしています。<br>
無理に飾るのではなく、あなたの髪が持つ本来の美しさを引き出し、毎日の鏡の前に立つ時間が少しだけ楽しみになる。そんな「心地いい日常」を、この街の皆さまへお届けします。</p>
</div>
</div>
</section>
</div>
<section class="features fadeUp" id="features">
<h2 data-subtitle="３つの約束" class="en">FEATURES</h2>
<ul class="point_list">
<li>
<span>01.</span>
<h3>じっくり向き合う<br>丁寧なカウンセリング</h3>
<p>髪のクセや骨格のお悩みだけでなく、普段のお手入れ方法や理想の雰囲気を細かくお伺いします。初めての方でも緊張せず、何でも話しやすいリラックスした空間づくりを心がけています。</p>
<img src="img/features.webp" alt="カウンセリング">
</li>
<li>
<span>02.</span>
<h3>5年後を見据えた<br>髪質改善と薬剤選定</h3>
<p>使用するシャンプーやカラー剤は、すべて頭皮と髪に優しいオーガニック・低刺激なものを厳選。施術を重ねるごとに、芯から潤う健康な髪へと導きます。</p>
<img src="img/features_02.webp" alt="ヘアケア・スキンケア">
</li>
<li>
<span>03.</span>
<h3>お家でも簡単に<br>再現できるカット技術</h3>
<p>サロン帰りの美しさがお家でもずっと続くよう、ドライヤーの乾かし方ひとつで綺麗にまとまる再現性の高いカットをご提案。毎朝のスタイリング時間をグッと短縮します。</p>
<img src="img/features_03.webp" alt="ヘアカット">
</li>
</ul>
</section>
<div class="bg fadeUp">
<section class="menu_price" id="menu_price">
<h2 data-subtitle="料金表" class="en">MENU & PRICE</h2>
<div class="table_scroll_x">
<table>
<colgroup>
<col style="width: 24%;">
<col style="width: 14%;">
<col style="width: 14%;">
<col style="width: auto;">
</colgroup>
<tr>
<th>MENU</th>
<th>TIME</th>
<th>PRICE</th>
<th>DETAILS</th>
</tr>
<tr>
<td>Hair Cut & Blow</td>
<td>60min</td>
<td>¥6,600</td>
<td>髪質改善/骨格に合わせたオリジナルカット</td>
</tr>
<tr>
<td>Organic Color</td>
<td>90min</td>
<td>¥8,800</td>
<td>低刺激・ハーブエキス配合のダメージレスカラー</td>
</tr>
<tr>
<td>Head Spa & Treat</td>
<td>45min</td>
<td>¥5,500</td>
<td>極上のアロマオーガニックスパ</td>
</tr>
</table>
</div>
</section>
</div>
<section class="faq fadeUp" id="faq">
<h2 data-subtitle="よくあるお問い合わせ" class="en">FAQ</h2>
<ul class="faq_list">
<li>
<p class="q_text"><span>Q1</span> 初めての利用ですが、事前に髪型を決めていかなくても大丈夫ですか？</p>
<dl class="a_text">
<dt>A1.</dt>
<dd>はい、まったく問題ありません。<br>
当店では、最初のカウンセリングに十分なお時間をとっています。「具体的なイメージはないけれど、雰囲気を変えたい」「自分に似合うスタイルを知りたい」という状態でも、髪質や骨格、普段のお手入れ方法を伺いながら、一緒に最適なスタイルをご提案させていただきます。どうぞリラックスしてお越しください。
</dd>
</dl>
</li>
<li>
<p class="q_text"><span>Q2</span> カウンセリングや施術にはどのくらいの時間がかかりますか？</p>
<dl class="a_text">
<dt>A2.</dt>
<dd>はい、まったく問題ありません。<br>
初めてご来店のお客様は、丁寧なカウンセリングと髪質診断を行うため、通常の施術時間に加えて、15〜20分ほど長めにお時間をいただいております。<br>
目安として、カット＋カラーで約2時間半、髪質改善メニューを含む場合は3時間前後となります。お急ぎの場合は、事前に終了希望時間をお伝えいただければ柔軟に対応いたします。
</dd>
</dl>
</li>
<li>
<p class="q_text"><span>Q3</span>髪質改善トリートメントは、どのくらい効果が持続しますか？</p>
<dl class="a_text">
<dt>A3.</dt>
<dd>お客様の髪のダメージ状態やホームケアによって個人差はありますが、初回はおおよそ3週間〜1ヶ月程度効果が持続します。<br>
当店の髪質改善は、回数を重ねるごとに髪の芯に栄養が定着していくため、定期的に（1ヶ月半〜2ヶ月周期で）続けていただくことで、より手触りの良い健康な状態が長持ちするようになります。
</dd>
</dl>
</li>
<li>
<p class="q_text"><span>Q4</span>ロング料金や、担当者の指名料はかかりますか？</p>
<dl class="a_text">
<dt>A4.</dt>
<dd>当店では、髪の長さに応じた「ロング料金」は一切いただいておりません。すべてのメニューが提示価格通りの安心なワンプライスです。<br>
スタイリストの指名料もいただいておりませんので、スタッフのプロフィールをご覧いただき、ご希望のスタイリストをご自由にお選びください。
</dd>
</dl>
</li>
<li>
<p class="q_text"><span>Q5</span> 敏感肌でカラー剤がしみやすいのですが、対応してもらえますか？</p>
<dl class="a_text">
<dt>A5.</dt>
<dd>ご安心ください。<br>
当店では頭皮と髪への優しさを第一に考え、オーガニック成分を配合した低刺激な薬剤を厳選しております。<br>
また、施術前に頭皮を保護する専用のオイルを塗布するほか、ご希望に応じて地肌に薬剤を極力つけない特別な塗布技術（ゼロテク）での施術も可能です。不安な点がございましたら、事前のカウンセリングで何でもご相談ください。
</dd>
</dl>
</li>
</ul>
</section>
</main>
<footer>
<div class="footer_wrapper">
<div class="shop_info">
<a href="#"><img src="img/logo_w.svg" alt="フェリカ・ビューティー・サロン"></a>
</div>
<nav class="l_nav">
<ul>
<li><a href="#news">お知らせ</a></li>
<li><a href="#about">私たちの想い</a></li>
<li><a href="#features">3つのこだわり</a></li>
<li><a href="#menu_price">施術メニュー</a></li>
<li><a href="#faq">よくあるお問い合わせ</a></li>
</ul>
</nav>
</div>
<p><span><small>&copy; <span id="thisYear"></span> Felica Beauty Salon</span> All Rights Reserved.</small></p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/script.js"></script>
</body>

</html>

JavaScript

【ポイント】

スライダー表示は、jQuery［slick］を使います。
slickの本体はこちらからダウンロードしてください。
その他の要素はJavaScriptで記述します。
headerはposition: sticky;で画面上に常時表示させ、footerがモニター内に入ったら非表示にします。
各セクション要素は、通常時は非表示にし、モニター内に入ったらフェードアップさせます。
JavaScriptはclassを与えるだけで、class追加後、transform-delayを使って時間差で動きを付けます。
アコーディオンの動きは、通常時は「回答」のheightをゼロにし、クリック時に要素の高さを測定し、それを「回答」のheightに書き込む形で開閉させます。

コードを参照

<script>
// ――――――――――――――――――――――――
// メインビジュアル
// ――――――――――――――――――――――――

// jQuery「slick」を実装
$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    centerPadding: '5%',
});

// ――――――――――――――――――――――――
// アコーディオンメニュー
// ――――――――――――――――――――――――

// 「＋」アイコンを回転させる
// ――――――――――――――――――――――――

// 要素を取得する
const spinBtns = document.querySelectorAll('.q_text');

// 質問項目の数だけ下記の処理を実行
spinBtns.forEach(spinBtn => {
    // 質問項目をクリックした時
    spinBtn.addEventListener('click', () => {
        // クリックした要素にclassを追加
        spinBtn.classList.toggle('spin');

        // 「回答」欄を開閉する
        // ――――――――――――――――――――――――
        // 回答要素（dl）を取得する
        const aText = spinBtn.nextElementSibling;
        // 該当要素にclassを追加
        aText.classList.toggle('open');

        // 該当要素にclassが追加されていたら
        if (aText.classList.contains('open')) {
            // 該当要素の高さを測定しHTMLに書き込む
            aText.style.height = `${aText.scrollHeight + 16}px`;
            // classがなくなればHeightをゼロに戻す
        } else {
            aText.style.height = 0;
        }
    });
});

// ――――――――――――――――――――――――
// ヘッダー表示・非表示
// ――――――――――――――――――――――――

// 要素を取得
const headerEl = document.querySelector('header');
const footerEl = document.querySelector('footer');

// スクロールイベント
window.addEventListener('scroll', () => {
    // footerの位置情報を取得
    const footerRect = footerEl.getBoundingClientRect();
    const footerTop = footerRect.top;

    // footerがモニター内に入ったら
    if (footerTop < window.innerHeight) {
        // headerのstickyを無効にする
        headerEl.classList.add('remove_sticky');
    } else {
        // headerのstickyを有効にする
        headerEl.classList.remove('remove_sticky');
    }
});

// ――――――――――――――――――――――――
// フェードアップ
// ――――――――――――――――――――――――

// 要素を取得する
const fadeUp = document.querySelectorAll('.fadeUp');

// スクロールイベントを追加
window.addEventListener('scroll', () => {
    // 要素の数だけ下記の処理を繰り返す
    fadeUp.forEach((e) => {
        // フェードアップさせたい要素の位置情報を取得
        const rect = e.getBoundingClientRect();
        const top = rect.top;
        const bottom = rect.bottom;

        // 該当要素がモニター内に入ったら
        if (top < window.innerHeight - 100 && bottom > 0) {
            // 該当要素にclassを追加
            e.classList.add('active');
        }
    });
});

// ――――――――――――――――――――――――
// ハンバーガーメニュー
// ――――――――――――――――――――――――

// 要素を取得する
const burger = document.querySelector('.burger');
const burgerLogo = document.querySelector('.header_wrapper h1 a img')
const headerBg = document.querySelector('header');

// バーガーボタンをクリックした時の挙動
burger.addEventListener('click', () => {
    // ボタンとドロワーメニューにclassを追加
    burger.classList.toggle('spin');
    headerBg.classList.toggle('drawer');

    // ボタンクリック時にロゴを差し替え
    if (burger.classList.contains('spin')) {
        burgerLogo.src = 'img/logo_w.svg';
    } else {
        burgerLogo.src = 'img/logo_b.svg';
    }
});

// ドロワーメニューのリンククリック時の挙動
const links = document.querySelectorAll('.header_wrapper nav ul li a');

// クリック時 バーガーとドロワーメニューからclassを削除
links.forEach((link) => {
    link.addEventListener('click', () => {
        burger.classList.remove('spin');
        headerBg.classList.remove('drawer');
    });
});

// ――――――――――――――――――――――――
// 最新の西暦を表示する
// ――――――――――――――――――――――――
// 要素を取得
const thisYear = document.querySelector('#thisYear');

// 最新の日時情報を取得
const infoYear = new Date().getFullYear();

// 日時情報を要素に書き込む
thisYear.textContent = infoYear;
</script>

CSS

【ポイント】

今回はフェードアップやスライドインさせる要素が多いので、はじめは「すべて表示した状態」で作り、JavaScriptを書く段階で非表示にし、class追加後のコードを記述していきます。
jQuery［slick］がCSSに影響を与える場合があります。　　想定外に幅が広がってしまう場合は、親要素にoverflow: hidden;をかけて、それ以上広がらないように手当てをしましょう。
SP表示に切り替えることを想定して、見出し・説明を横並びにする必要がある要素はtableではなく、メディアクエリと相性の良いdl、dt、ddタグを使って記述しましょう。
「３つの約束」は３つの子要素が並ぶカードレイアウトです。
内容の文字数によって「行の高さ」がズレてしまうことがありますので、subgridを使って行の高さを揃えましょう。

コードを参照

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #232323;
}

img {
    max-width: 100%;
}

/* ―――――――――――――――――――――――――――― */
/* カスタムプロパティ */
/* ―――――――――――――――――――――――――――― */

:root {
    /* カラー */
    --color-base: #FCFAF7;
    --color-text: #4A3E3D;
    --color-accent: #D4A373;
    --color-bg-text: #fff7ee;
    --color-white: #FFFFFF;
    --color_bg: #F5F5F5;

    /* フォント */
    --font_base: "Noto Serif JP", serif;
    --font_jp_go: "Noto Sans JP", sans-serif;
    --font_en: "Playfair Display", serif;
}

body {
    font-family: var(--font_base);
    color: var(--color-text);
    letter-spacing: .05em;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    background-color: var(--color-base);
}

h1,
h2,
h3,
h4,
li,
dt,
dd,
::before,
::after {
    color: var(--color-text);
}

.jp_go {
    font-family: var(--font_jp_go);
}

.en {
    font-family: var(--font_en);
}

/* ―――――――――――――――――――――――――――― */
/* 共通設定 */
/* ―――――――――――――――――――――――――――― */

/* ページ内リンクをスムーズに */
html {
    scroll-behavior: smooth;
}

/* モニター幅いっぱいに背景を広げる */
.bg {
    width: 100%;
    background-color: var(--color-bg-text);
    padding: 60px 0;
    margin-bottom: 100px;
}

/* セクション設定 */
section {
    width: min(90%, 1080px);
    margin: 0 auto 100px;
    padding: 40px;
    scroll-margin-top: 60px;
}

/* 背景を持つセクションの下余白 */
.bg>section {
    margin-bottom: 0;
}

/* h2要素の表示設定 */
h2 {
    font-size: clamp(30px, 4vw, 40px);
    text-align: center;
    margin-bottom: 40px;
}

/* h2要素の疑似要素 */
h2::after {
    display: block;
    content: attr(data-subtitle);
    font-size: 0.4em;
    font-family: var(--font_base);
}

/* h3要素の表示設定 */
h3 {
    text-align: center;
    margin-bottom: 32px;
}

/* ―――――――――――――――――――――――――――― */
/* ヘッダー */
/* ―――――――――――――――――――――――――――― */

/* モニター幅いっぱいに */
header {
    width: 100%;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.7);
    position: sticky;
    top: 0;
    transition: all 0.6s ease;
    z-index: 10;
}

/* ロゴとnavを両端揃えに */
.header_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(90%, 1280px);
    margin: 0 auto;
    padding: 0 30px;
}

/* ロゴの幅 */
.header_wrapper h1 {
    width: 150px;
}

/* ロゴのリンク設定 */
.header_wrapper h1 a {
    width: 100%;
    display: flex;
    align-items: center;
}

/* ロゴ・リンク内の画像設定 */
.header_wrapper h1 a img {
    display: block;
    object-fit: cover;
}

/* navの幅 */
.header_wrapper nav {
    width: 65%;
}

/* navを横並びに */
.header_wrapper nav ul {
    display: flex;
    width: 100%;
}

/* nav内のli要素の幅 */
.header_wrapper nav ul li {
    width: calc(100% / 5);
}

/* li要素内のリンク設定 */
.header_wrapper nav ul li a {
    display: block;
    text-align: center;
    padding: 4px 0;
    transition: all 0.4s ease;
}

/* リンクのホバー設定 */
.header_wrapper nav ul li a:hover {
    background-color: var(--color-text);
    color: #fff;
}

/* ―――――――――――――――――――――――――――― */
/* メインビジュアル */
/* ―――――――――――――――――――――――――――― */

/* slickのはみ出し防止にoverflowを追加 */
.main_visual {
    width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.main_visual .image_wrapper {
    width: 100%;
    height: 100%;
}

.main_visual .image_wrapper li img {
    object-fit: cover;
    width: 100%;
    height: 70vh;
}

.main_visual h2 {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    font-size: clamp(40px, 5vw, 70px);
    font-weight: 500;
    text-align: left;
    letter-spacing: .06em;
    text-shadow: 0 0 10px #000000ca, 0 0 4px #0000006e;
    color: #fff;
    line-height: 1.6;
    width: fit-content;
    z-index: 10;
}

.main_visual h2 span {
    font-size: 0.7em;
}

/* メインビジュアル｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media (width < 1080px) {
    .main_visual .image_wrapper li img {
        aspect-ratio: 2.5/3;
    }
}

@media(width < 800px) {
    .main_visual h2 {
        position: absolute;
        top: auto;
        transform: none;

        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        text-align: center;
        width: 100%;
    }
}

/* ―――――――――――――――――――――――――――― */
/* お知らせ */
/* ―――――――――――――――――――――――――――― */

.news {
    width: min(90%, 880px);
}

/* 日付と説明を横並びに */
.news_row {
    display: flex;
    gap: 0 30px;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-accent);
}

/* 日付の幅 */
.news dt {
    width: 120px;
    flex-shrink: 0;
    padding-left: 1rem;
}

/* 説明の幅 */
.news dd {
    flex: 1;
}

/* お知らせ｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media(width < 720px) {

    .news_row {
        flex-direction: column;
        gap: 4px 30px;
    }

    .news .news_row dd {
        padding-left: 3rem;
    }
}

@media(width < 550px) {
    .news .news_row dd {
        padding-left: 0;
    }
}

/* ―――――――――――――――――――――――――――― */
/* 私たちについて */
/* ―――――――――――――――――――――――――――― */

/* セクション内の表示面積 */
.about .about_wrapper {
    position: relative;
    width: 100%;
    height: 400px;
}

/* 画像をスペースに合わせる */
.about .about_wrapper img {
    width: 50%;
    height: 100%;
    background-color: #ccc;
    object-fit: cover;
}

/* 見出し・テキストの表示設定 */
.about .about_wrapper .about_message {
    width: 65%;
    height: fit-content;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6%;
    margin: auto;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.7);
}

/* 私たちについて｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media(width < 1080px) {

    .about .about_wrapper {
        height: auto;
    }

    .about .about_wrapper img {
        width: 70%;
        display: block;
        margin: 0 auto;
        margin-bottom: 24px;
    }

    .about .about_wrapper .about_message {
        position: static;
        background-color: transparent;
    }
}

@media(width < 800px) {
    .about .about_wrapper .about_message {
        width: 70%;
    }
}

@media(width < 800px) {
    .about .about_wrapper img {
        width: 90%;
    }

    .about .about_wrapper .about_message {
        width: 100%;
    }
}

/* ―――――――――――――――――――――――――――― */
/* ３つの約束 */
/* ―――――――――――――――――――――――――――― */

/* 見出しの下余白 */
.features h3 {
    margin-bottom: 56px;
}

/* 子要素の幅や列数をモニター幅に応じて可変 */
.features .point_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 40px;
}

/* subgridで行の高さを揃える */
.features .point_list li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
    background-color: var(--color-bg-text);
    padding: 30px;
    position: relative;
}

/* 箇条書きをpositionで配置 */
.features .point_list li span {
    color: var(--color-accent);
    position: absolute;
    top: -32px;
    left: 20px;
    font-size: 36px;
}

/* 斜線を作るために見出し側にrelativeを付ける */
.features .point_list li h3 {
    position: relative;
    margin-bottom: 24px;
}

/* 擬似要素で斜線を作る */
.features .point_list li h3::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -31px;
    width: 138px;
    height: 1px;
    background-color: var(--color-accent);
    transform: rotate(-45deg);
}

.features .point_list li p {
    margin-bottom: 24px;
}

.features .point_list li img {
    object-fit: cover;
    width: 100%;
    height: 250px;
}

/* ３つの約束｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media(width < 790px) {
    .features .point_list {
        gap: 70px 40px;
    }
}

/* ―――――――――――――――――――――――――――― */
/* 料金表 */
/* ―――――――――――――――――――――――――――― */

/* 表の表示設定 */
.menu_price table {
    width: 88%;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 見出し・説明セルの余白 */
.menu_price table tr th,
.menu_price table tr td {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-accent);
}

/* 見出しセルの表示設定 */
.menu_price table tr th {
    text-align: center;
}

/* 「MENU」と「DETAILS」の表示設置絵 */
.menu_price table tr td:first-of-type,
.menu_price table tr td:last-of-type {
    width: fit-content;
    padding: 0 1rem;
}

/* 「TIME」と「PRICE」の表示設定 */
.menu_price table tr td:nth-of-type(2),
.menu_price table tr td:nth-of-type(3) {
    text-align: center;
}

/* 料金表｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media(width < 1080px) {

    /* SP時に横スクロールさせる */
    .table_scroll_x {
        width: 100%;
        overflow-x: auto;
    }

    /* 最小サイズを指定 */
    .table_scroll_x table {
        min-width: 860px;
    }

    /* スクロールバーの高さ */
    .table_wrapper::-webkit-scrollbar {
        height: 6px;
    }

    /* スクロールバーの表示設定 */
    .table_wrapper::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
}

/* ―――――――――――――――――――――――――――― */
/* よくあるお問い合わせ */
/* ―――――――――――――――――――――――――――― */

/* 項目全体の幅 */
.faq .faq_list {
    width: 80%;
    margin: 0 auto;
}

/* 各問答間の余白 */
.faq .faq_list li {
    margin-bottom: 32px;
}

/* 質問文の表示設定 */
.faq .faq_list li p {
    padding: 16px;
    letter-spacing: .08em;
    line-height: 1.7;
}

/* 質問文の箇条書き番号の表示設定 */
.faq .faq_list li p span {
    font-size: 1.5em;
    padding-right: 1rem;
}

/* 質問文の表示設定 */
.faq .faq_list li .q_text {
    background-color: var(--color-bg-text);
    position: relative;
    cursor: pointer;
}

/* 回答文の箇条書き番号と説明文を横並びに */
.faq .faq_list li .a_text {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    padding: 0 1rem 0 3rem;
    height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* 回答文の表示設定 */
.faq .faq_list li .a_text dt,
.faq .faq_list li .a_text dd {
    letter-spacing: .08em;
    line-height: 1.7;
}

/* 回答文が開いた後は、上下に余白を追加 */
.faq .faq_list li .a_text.open {
    padding-top: 16px;
    padding-bottom: 32px;
}

/* 「＋」ボタンの表示設定 */
/* ひとつの線は横向きに */
.faq .faq_list li .q_text::before,
.faq .faq_list li .q_text::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 16px;
    width: 16px;
    height: 3px;
    background-color: var(--color-text);
    transform: rotate(0);
    transition: all 0.5s ease;
}

/* ひとつの線は縦向きに */
.faq .faq_list li .q_text::after {
    transform: rotate(90deg);
}

/* クリック時｜ひとつの線はナナメ向きにに */
.faq .faq_list li .q_text.spin::before {
    transform: rotate(405deg);
}

/* クリック時｜上に45度角度を追加してナナメ向きに */
.faq .faq_list li .q_text.spin::after {
    transform: rotate(495deg);
}

/* ―――――――――――――――――――――――――――― */
/* フッター */
/* ―――――――――――――――――――――――――――― */

/* フッターの表示設定 */
footer {
    width: 100%;
    background-color: var(--color-text);
    color: #fff;
    padding: 40px 0 10px;
    font-size: 15px;
}

/* ロゴとnavを横並びに */
footer .footer_wrapper {
    width: min(90%, 980px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 50px;
    margin: 0 auto;
}

/* ロゴの幅 */
footer .footer_wrapper .shop_info {
    width: 30%;
}

/* ロゴ画像の大きさ */
footer .footer_wrapper .shop_info img {
    width: 150px;
}

/* 残りのスペースをnavに */
footer .l_nav {
    flex: 1;
}
/* navを横並びに */
footer .l_nav ul {
    display: flex;
    gap: 0 24px;
}

/* li要素ひとつあたりの表示設定 */
/* hoverアニメのためにoverflowを */
footer .l_nav ul li {
    width: calc((100% - 96px)/ 5);
    margin-bottom: 16px;
    overflow: hidden;
}

/* リンク要素の表示設定 */
footer .l_nav ul li a {
    display: block;
    color: #fff;
}

/* li要素に疑似要素で下線を引く */
/* 通常時は左に待機させる */
footer .l_nav ul li::after {
    content: "";
    width: 100%;
    display: block;
    height: 1px;
    background-color: #fff;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

/* hover時にスライドインさせる */
footer .l_nav ul li:hover::after {
    transform: translateX(0);
}

footer>p {
    text-align: center;
}

/* フッター｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

@media (width < 1080px) {
    
    /* ロゴとnavを縦並びに */
    footer .footer_wrapper {
        flex-direction: column;
        gap: 32px 50px;
    }

    /* ロゴを親要素の中心に配置 */
    footer .footer_wrapper .shop_info {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* 画像を中心に配置 */
    footer .footer_wrapper .shop_info img {
        margin: 0 auto;
    }

    /* navの幅を親要素いっぱいに */
    footer .l_nav {
        width: 100%;
        margin-bottom: 30px;
    }

    /* li要素とライセンス表示の間に余白を追加 */
    footer .l_nav ul li {
        margin-bottom: 16px;
    }

    /* リンク要素を中央揃えに */
    footer .l_nav ul li a {
        text-align: center;
    }
}

@media (width < 660px) {

    /* 改行させる */
    footer .l_nav ul {
        gap: 16px 24px;
        flex-wrap: wrap;
    }

    /* navを３列に */
    footer .l_nav ul li {
        width: calc((100% - 48px)/ 3);
    }
}

@media (width < 400px) {
    
    /* navの幅を広げる */
    footer .l_nav {
        width: 80%;
    }

    /* navを２列に */
    footer .l_nav ul li {
        width: calc((100% - 24px)/ 2);
    }

    /* リンク要素を左揃えに */
    footer .l_nav ul li a {
        text-align: left;
    }

    /* ライセンスを２行表示に */
    footer>p>span {
        display: block;
    }
}

/* ―――――――――――――――――――――――――――― */
/* ヘッダー表示・非表示 */
/* ―――――――――――――――――――――――――――― */

/* フッターがモニター内に入ったら、ヘッダーを非表示に */
header.remove_sticky {
    opacity: 0;
    visibility: hidden;
}

/* ―――――――――――――――――――――――――――― */
/* フェードアップ */
/* ―――――――――――――――――――――――――――― */

/* フェードアップ要素の初期表示 */
.fadeUp {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.4s ease;
}

/* classが追加されたらフェードアップ */
.fadeUp.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 【ABOUT】フェードアップ後に右からスライドイン */
.about .about_message {
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: all 0.7s ease;
}

/* class追加後にアニメを発動 */
.fadeUp.active .about_message {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
    transition-delay: 1.5s;
}

@media(width < 1080px) {

    /* セクションが縦並びになったら
    フェード方向を縦に切り替える */
    .about .about_message {
        transform: translate(0, 50px);
    }

    .fadeUp.active .about_message {
        transform: translate(0, 0);
        transition-delay: 0.9s;
    }
}

/* 【FEATURES】フェードアップ後に時間差で表示 */
.features .point_list li {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.7s ease;
}

/* class追加後にフェードアップ */
.fadeUp.active .point_list li:nth-of-type(1),
.fadeUp.active .point_list li:nth-of-type(2),
.fadeUp.active .point_list li:nth-of-type(3) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/* 各要素を0.2秒ずつ遅延させる */
.fadeUp.active .point_list li:nth-of-type(1) {
    transition-delay: 1s;
}

.fadeUp.active .point_list li:nth-of-type(2) {
    transition-delay: 1.2s;
}

.fadeUp.active .point_list li:nth-of-type(3) {
    transition-delay: 1.4s;
}

/* 【FAQ】フェードアップ後に時間差で表示 */
.faq .faq_list li {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px);
    transition: all 0.7s ease;
}

/* class追加後にフェードアップ */
.fadeUp.active .faq_list li {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/* 各要素を0.2秒ずつ遅延させる */
.fadeUp.active .faq_list li:nth-of-type(1) {
    transition-delay: 1s;
}

.fadeUp.active .faq_list li:nth-of-type(2) {
    transition-delay: 1.2s;
}

.fadeUp.active .faq_list li:nth-of-type(3) {
    transition-delay: 1.4s;
}

.fadeUp.active .faq_list li:nth-of-type(4) {
    transition-delay: 1.6s;
}

.fadeUp.active .faq_list li:nth-of-type(5) {
    transition-delay: 1.8s;
}

/* ―――――――――――――――――――――――――――― */
/* ハンバーガー｜メディアクエリ */
/* ―――――――――――――――――――――――――――― */

.burger {
    display: none;
}

@media(width < 1080px) {

    /* ハンバーガーボタン */
    /* ―――――――――――――――――――――――――――― */

    /* ボタンの外観・位置 */
    .burger {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        width: 70px;
        height: 80px;
        background-color: var(--color-text);
        z-index: 100;
    }

    /* 三本線の位置 */
    .burger span {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 70%;
        height: 4px;
        background-color: #fff;
        border-radius: 10px;
        transition: all 0.4s ease;
    }

    /* 三本線（上） */
    .burger span:nth-of-type(1) {
        transform: translateY(-16px);
    }

    /* 三本線（中） */
    .burger span:nth-of-type(2) {
        transform: translateY(0);
    }

    /* 三本線（下） */
    .burger span:nth-of-type(3) {
        transform: translateY(16px);
    }

    /* クリック時　三本線（上） */
    .burger.spin span:nth-of-type(1) {
        transform: translateY(0) rotate(45deg);
    }

    /* クリック時　三本線（中） */
    .burger.spin span:nth-of-type(2) {
        transform: translateY(0) rotate(45deg);
    }

    /* クリック時　三本線（下） */
    .burger.spin span:nth-of-type(3) {
        transform: translateY(0) rotate(-45deg);
    }

    /* ドロワーメニュー */
    /* ―――――――――――――――――――――――――――― */

    /* ヘッダーをドロワーメニューに切り替え */
    header {
        padding: 0;
        background-color: var(--color-text);
        position: fixed;
        transform: translateX(100%);
        transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        inset: 0;
        z-index: 90;
    }

    /* ロゴとnavを縦並びに */
    .header_wrapper {
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding: 10vh 0 5vh 0;
    }

    /* navの幅を広げる */
    .header_wrapper nav {
        width: 90%;
    }

    /* navを縦並びに */
    .header_wrapper nav ul {
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 auto;
    }

    /* リンクの表示設定 */
    /* 下線アニメのために親要素にoverflowを追加 */
    .header_wrapper nav ul li {
        padding: 16px 0;
        width: 50%;
        margin: 0 auto;
        overflow: hidden;
    }

    /* リンクの表示設定 */
    .header_wrapper nav ul li a {
        color: #fff;
        font-size: 1.5em;
    }

    /* 各a要素に下線を表示 */
    .header_wrapper nav ul li a::after {
        content: "";
        display: block;
        border-bottom: 1px solid #fff;
        transform: translateX(-100%);
        transition: all 0.4s ease;
    }

    /* クリック時｜ドロワーメニュー */
    /* ―――――――――――――――――――――――――――― */

    /* ハンバーガーボタンをクリックしたら
    ドロワーメニューを表示させる */
    header.drawer {
        transform: translateX(0);
    }

    /* ドロワーが開いたら下線を表示 */
    header.drawer .header_wrapper nav ul li a::after {
        transform: translateX(0);
    }

    /* 各a要素の下線を、0.1秒ずつ遅延させて表示 */
    header.drawer .header_wrapper nav ul li:nth-of-type(1) a::after {
        transition-delay: 0.6s;
    }

    header.drawer .header_wrapper nav ul li:nth-of-type(2) a::after {
        transition-delay: 0.7s;
    }

    header.drawer .header_wrapper nav ul li:nth-of-type(3) a::after {
        transition-delay: 0.8s;
    }

    header.drawer .header_wrapper nav ul li:nth-of-type(4) a::after {
        transition-delay: 0.9s;
    }

    header.drawer .header_wrapper nav ul li:nth-of-type(5) a::after {
        transition-delay: 1s;
    }

    /* 余白 */
    /* ―――――――――――――――――――――――――――― */
    section {
        padding: 0;
    }

    .faq .faq_list {
        width: 100%;
        margin: 0 auto;
    }

    .faq .faq_list li p {
        padding: 16px 3rem 16px 1rem;
    }
}

2026-06-18

【AI】AI講座（入門編）

Photoshop JavaScript

　ア）基本形

　イ）完成条件を提示する

　ウ）情報の精度を明示させる

５）補足

５）注意

１）生成AIの主な用途（2026年現在）

Adobe社によるアンケート調査によれば、世界のクリエイターの86％が「クリエイティブ生成AIを活用している」と回答。また回答者の80％以上が、用途、クオリティ、タスクに合わせて複数のAIツールを使い分けているとのこと。

上記のほかに、日本フリーランスリーグによるアンケート調査では、60％以上が「利用しておらず、今後も利用するつもりはない」と回答。その一方で、約30％のAI利用層では、主な用途として「アイデア出し」や「背景制作・文章校正などの定型作業の自動化」にAIを使用していると回答。

現時点での生成AIの利用状況は、コンテンツの根幹にかかわる領域では「品質の担保」「著作権・無断学習の不信感」を配慮し、使用を控えていると言えます。

２）AIの得意なこと・不得意なこと

得意なこと

・パターンの作成

・HTML/CSSなどのコード翻訳

・文章の要約

・ブレインストーミング段階でのアイデア出し

苦手なこと

・「正しさ」の保証（ハルシネーション＝もっともらしい嘘をつく）

・ユーザーの感情に深く寄り添ったエモーショナルな体験デザイン

３）AI生成でやってはいけないこと

・機密情報の入力
クライアントの未公開プロジェクト情報、社外秘データ、個人情報などはAIのプロンプトに入力しないでください（二次学習の対象になり、情報の漏洩リスクが高まります）。

・著作権にかかわる生成依頼
有名なキャラクターや実在するクリエイターの作品を、そのまま模倣・過剰に参考にして画像を生成すると、権利侵害としてトラブルに発展する危険性アリ。商用利用時は特に注意が必要です。

４）プロンプトの書き方

ア）基本形

生成AIは、いわば「とても優秀な、空気の読めない新入社員」です。

「いい感じにして」「上手くやって」といった曖昧な指示では、期待したレベルの回答は返ってきません。

生成AIを、ユーザーの思惑通りに動かすためのプロンプトの基本形は以下の通りです。

要　素	何を書くか
役　割	AIに何者になってほしいか（例：プロのコーダー）
指　示	具体的に何をさせたいか（例：コードのレビュー）
例　示	期待する成果物の参考事例（例：既存のサイトのコード）
形　式	制約条件（文字数、トーン＆マナー、禁止事項など
目　的	指示する理由、成果物の使用目的など

例えば「コードのレビュー」を求めるにしても、生成AIはどのレベルのレビューをすればいいか分かりません。

実務レベルのガチレビューなのか、初心者向けのレビューなのかといったサジ加減が分かるように、「あなたはプロのコーダーです」とか「あなたはWeb専門学校の教師です」といった役割を与えると、それに沿って生成AIは仕事をします。

上記項目は、プロンプトを書くたびにすべてを埋める必要はありませんが、生成AIに指示を出す時は、先読み、忖度、空気読みなどは一切期待せず、誤解のないように指示することを心掛けましょう。

イ）完成条件を提示する

生成AIはゴールを設定してあげないと、無難な回答で終わりがちです。

いま生成AIに回答を求める骨子が「１．○○○…」「２．△△△…」「３．□□□…」と決まっているなら、それらを「条件を満たすまで自分で見直して」とプロンプトに追加します。

そうすることで生成AIは、ユーザーが求める完成条件を満たすまで、自分で出した回答を自分で見直して、より精度の高い回答を返してくれます。

ウ）根拠の精度を明示させる

生成AIによる回答は必ずしも正解ではありません。パッと見た感じ、もっともらしいことを述べていても、それが精度の高い情報なのか、単なる推測なのかは分かりません。

そこで、「推測なら精度を％で書いて」とか「分からないなら分からないと書いて」といった文言を足すと、生成AIの回答に「推測」や「一般知識」と明示され、情報が受け取りやすくなります。
※ここで書かれる精度も、言ってしまえば生成AIの自己申告にすぎませんが、何も明示されていない情報と比べれば、格段に優先順位のつけやすくなっています。

５）補　足

・忖度をなくす

生成AIは、基本的に人に対して肯定的・好意的な返しをするように設計されています。

しかし、例えばプレゼン資料について本気のダメ出しが欲しい時に、優しさや忖度の混じったレビューはむしろ有害です。そのような時は、「忖度なしで」「客観的に」などの文言を交えてプロンプトを作成すると、欲しい回答が得られます。

・優先順位をつける

生成AIにパターン化されたカテゴリからのアイデア出しや、すでに出来上がった成果物のレビューなどを求めると、求めた数だけ回答を出してくれますが、その優先順位はユーザー任せになりがちです。

そこで、「優先順位をつけて」とか「高・中・低」といった評価基準を追加するようにプロンプトを書くと、より適切な回答に近づきます。

・マークダウン記法

生成AIは、私たちが思っている以上にプロンプトの文章構造を強く意識して、読解しています。

特定のアプリを使わず、テキストだけで「見出し」や「箇条書き」などの表現できるマークダウン記法で記述すると、生成AIに対して、プロンプトの「意味」をより細かく伝えることができます。

見出し（#）
文の先頭に「#」を入れることで見出しであることを表現できます。
#が少ないほど重要度の高い見出しとなります。
※記号の後は半角スペースが入ります（以下同じ）。

箇条書き（*または-）
文の先頭に「-」を入れることで箇条書きであることを表現できます。

コードブロック（```）
文の先頭と文末に「`（バッククオート）」を３つ入力することで、該当箇所をグレーで囲むことができます。

６）注　意

コーディングに詰まった時に、生成AIに記述ミスの検索や正解コードの作成を指示すると、劇的にコーディング速度が向上します。

これは実務においては有効ですが、コーディングを学習している時期に多用するとマイナスに働く場合があります。

「なぜ想定通りに動かないのか？」「どのように記述すれば解決するのか？」といったことを検索・思考・実践・チェックするのも大事な学習です。まずは自力解決を試みて、どうしても無理な時だけ生成AIに頼りましょう。

また生成AIに代替コーディングを指示した場合は、なぜそのような記述にしたのかといった解説を付けてもらうと、コーディングに対する理解を一層深められます。

2026-06-11

【DTP】チラシを作る（A4）

DTP illustrator

素材をダウンロード

拡大・縮小用の素材

作業データ

カラーモードに注意

印刷時に使用するカラーモードはCMYKです。

Illustratorで［新規ファイル］をクリック時に［印刷］を選択すると、自動的にカラーモードがは［CMYK］になります。

Photoshopで画像を調整する際には、メニューバー［イメージ］→［モード］→［CMYKカラー］を選択することで、画像のカラーモードを変更できます。

その上で、CMYKに対応した画像形式で保存する必要があります（後述）。

画像を保存する際は、CMYKに対応した形式で保存すること。

環境設定

WEBで使用するものを制作している時は、IllustratorもPhotoshopも表示単位は「ピクセル」で行いますが、印刷物を制作する時は「ミリメートル」や「ポイント」を使用します。

再作物に応じて表示単位を変更する際は、メニューバー［編集］→［環境設定］→［単位］で表示単位を変更します。

※変更した後は、きちんと元に戻しておきましょう。

文字サイズ

ターゲット層の年齢によって文字サイズを決めましょう。

ヤング層は、8～10ptでも十分に文字を読むことができます。
ただし、小さい文字や細い文字はデザイン性が高い反面、印刷がかすれたり、文字がつぶれたりする可能性がありますので、多用は避けましょう。

ミドル層は、9～11ptが適切です。
行間を広めにとって可読性を確保しましょう。また一部では老眼が進んでいる方もいますので、細い明朝系の書体の多用は避けましょう。

シニア層は、11～14ptが適切です。
老眼が進んでいますので、コントラストを強めにして可読性を確保しましょう。文字を大きくすると同時に行間も広めにとりましょう。

見た目に優先順位をつけて
読者の目線を誘導しましょう

最初に目に入る情報がとても重要です。
作り手側が見せたい順に、情報が目に入るように大きさ・色・位置を調整しましょう。

失敗しやすいのは、情報の優先順位が付けられず、すべての要素の文字を大きくしたり、色のコントラストを強めにしたりして、あれもこれも強調してしまうケースです。

情報が渋滞すると、紙は見ているのに、情報が目に入ってこないということになります。

塗り足し

紙媒体では、「紙に印刷する」という工程上、印刷位置のズレという事態が発生します。具体的には、印刷した紙を裁断する時です。

例えば、A4（210×297mm）サイズちょうどに原稿を作ると、ズレた部分には何も印刷されません。これを防ぐために、制作時点で「ズレる」ことを前提に、規定の印刷範囲よりも大きく原稿を作っておきます。

特にズレが印刷に影響するには、紙のタチキリ（紙の端）までデザインが施されている場合です。このような時は、タチキリ線から、さらに3mmほど外側にデザインを延長させます。これを塗り足しと言います。

フリー素材をより便利に活用しましょう

フリー素材の中で、AI形式（またはEPS形式）で作られているものの中には「線」の情報を持ったままの素材があります。

「線」の情報が含まれていると、原稿に合わせて「線」の太さを調整できて便利なのですが、事前の設定方法を知らないと、上記のようなトラブルが起きることもあります。

画像自体の大きさに応じて「線」の太さを可変するようにするには、メニューバー［編集］→［環境設定］→［一般］で行います。

今回のケースでは、［線幅と効果も拡大・縮小］にチェックを入れると、解決します。

※その他では、オブジェクトにかけた「角丸が、大きさの拡大・縮小に対して可変しない」とか、「パターンが可変しない」といったことで思った通りにならない場合があります。これらも、同じ画面にある［パターンを変形］や［角を拡大・縮小］にチェックを入れることで解決します。

※もちろん、可変しない方が都合がいいというケースもありますので、状況に応じて環境設定を変更しましょう。

画像の管理

Photoshop上における「画像の配置」のほとんどは埋め込み扱いなので、元の画像データを移動させたり、削除させたり、ファイル名を変更したりしても、Photoshop上に表示された画像には影響がありません。

※Illustratorで作成したオブジェクトを、Photoshopにスマートオブジェクトとして貼り付けた場合は「外部リンク扱い」となります。

それと比べて、Illustratorにおける「画像の配置」のほどんとは、外部ファイルをリンクするという扱いです。
アートボード上に表示されている画像は、リンク元の画像を疑似的に表示しているだけなので、リンク元の画像データに移動や削除などの変更があると、リンクを更新しないと正常に表示されません。

Illustratorで画像を扱う場合は、リンク元の画像データを管理しておかないと、後々面倒なことになります。

特に、大元のデータはRGBのものであり、それをリサイズしたり、カラーモード（とともに拡張子）を変更したりすると、同じ内容の画像がいくつも作成されます。その結果、「リンクしたのはどの画像データか？」が分からなくなってきますので、変更前と変更後の画像データ用にフォルダを分けるなどしましょう。

画像の埋め込み

Illustratorにおいて画像をリンクとする理由の一つに、ファイルサイズの増大化を防ぐというのがあります。
印刷に使用する画像は、高画質印刷に耐えるためにサイズが大きいことが多く、それらを何枚も埋め込むと１ファイルあたりに50～100MBを超えることは珍しくありません。

ただし、画像をリンク扱いにしたままでは、取引先に原稿チェックを求めたり、最終納品をしたりする際は、リンク元の画像とセットで納品しなければ、先方のパソコンでは正常に表示されません。
先方に余計な作業をさせることになるため、画像の扱いは、制作中はリンク扱いとし、納品時にすべて埋め込み処理をします。

メニューバー［ウインドウ］→［リンク］で、現在アートボードにリンクがはられている画像データを一覧できます。

※リンクファイル右に表示されている鎖マークが、「このファイルはリンクされている」ことを表示しています。

［リンク］パネル右上の三本線をクリック→［画像を埋め込み］をクリック

こうすることで、該当画像はリンクではなく、埋め込まれた状態になります（リンク元画像を移動・削除しても影響を受けません）。

原稿を納品する際は、すべての画像を埋め込んでおきましょう。

納品時に用意するもの

原稿を納品する際に大事なのは、先方のパソコンで、正常に制作側と同じ内容・デザインで表示されることです。問題になりがちなのは、「テキストのフォントデータがない」という点と、「画像のリンク切れ」です。

※「画像のリンク切れ」については、前項の通り、納品前にはすべて埋め込み処理を行います。

Illustratorで作った原稿は、

ア）アウトラインをかける前のaiファイル
　・テキストが文字データのままなので編集可

イ）アウトラインをかけた後のaiファイル
　・テキストがパスデータ化されているので、
　　制作パソコン以外でも、同じようにテキストを表示できる

ウ）上記イ）をPDF化したファイル
　・先方がIllustratorを
　　インストールしていなくても閲覧できる

エ）リンク元の画像ファイル一式
　・上記ア）イ）が正常に表示される

以上の４点をセットにして納品します。

2026-06-08

【PS】モックを作る（その２）ラベルを缶に合成

Photoshop JavaScript

Photoshop icon by Icons8

作業手順

１）選択範囲の作成

２）ラベルのカーブを缶に合わせる

３）仕上げ・書き出し

４）注意点

素材をダウンロード

１）選択範囲の作成

［ドキュメント］からモック用の缶画像をドラッグ＆ドロップする

画面右上の［○］ボタン、またはコンテキストバーの［完了］を押下して、貼り付けを実行する

ツールバー［オブジェクト選択ツール］をクリック

［オブジェクト選択ツール］で選択範囲を作成

メニューバー［選択範囲］→［選択範囲の保存］をクリック

※今回は缶の胴体部分だけを選択範囲としたかったのですが、［オブジェクト選択ツール］では上手く選択範囲を作成できなかったため、一部手動で選択範囲を作成します。

缶の輪郭を指定した選択範囲を「輪郭線」という名前で保存

ツールバー［ペンツール］をクリック

缶の胴体部分をなぞるようにペンツールでパスを描く

パスを閉じた後、右クリック→［選択範囲の作成］をクリック

缶の胴体部分の選択範囲ができたので、これも前項と同様に、メニューバー［選択範囲］→［選択範囲を保存］をクリック

今度の選択範囲は「内側」と名前を付けて保存する

※ペンツールで作成したのは、缶の天板と底面のカーブに沿った選択範囲だけです。
缶のリブ（溝）部分をすべてペンツールでなぞるのは大変なので、これは前項で保存した「輪郭線」を使います。
この２つの選択範囲を、次項の操作でまとめます。

いったん選択範囲を解除する

メニューバー［選択範囲］→［選択範囲の読み込み］をクリック

［チャンネル］のプルダウンリストから［輪郭線］を選択する

選択範囲［輪郭線］が読み込まれた

再びメニューバー［選択範囲］→［選択範囲を読み込む］をクリック

前記と同様に［チャンネル］のプルダウンリストから［内側］を選択する

この際、［現在の選択範囲との共通範囲］にチェックを入れて［OK］をクリック

すると、先に読み込んだ「輪郭線」と、あとに読み込んだ「内側」の共通範囲が選択範囲として表示された

［CTRL］キー＋Ｊキーで缶の胴体部分を複製する

２）ラベルを缶のカーブに合わせる

ラベルデータ（AIファイル）をダブルクリックしてillustratorで開く

※ドラッグ＆ドロップしないでください。

［CTRL］キー＋Ａキーを押下して、アートボード内のオブジェクトをすべて選択する

※ロックがかかっているレイヤーは選択されません。必ずチェックしましょう。

Photoshopに戻り、［CTRL］キー＋Ｖキーを押下する

［ペースト］画面で［スマートオブジェクト］を選択し［OK］をクリック

ラベルデータが、スマートオブジェクトとして貼り付けられた

缶の胴体部分を覆うように、バウンディングボックスをドラッグしてラベルデータを拡大させる

ラベルレイヤーを右クリック→［クリッピングマスクを作成］をクリック

ラベルレイヤーが缶の胴体部分でクリップされた

再びラベルレイヤーで右クリック→［スマートオブジェクトに変換］をクリック

※この次に、ラベルレイヤーを缶のカーブに沿って婉曲に変形させる操作を行います。
現時点では、ラベルレイヤーはillustratorデータのままなので［変形］が上手く動かないことがあります。それを回避するために、改めてPhotoshop側で［スマートオブジェクトに変換］を実行することで［変形］機能が扱えるようにします。

メニューバー［編集］→［変形］→［ワープ］をクリック

コントロールバー［ワープ］のプルダウンリストの［円柱］をクリック

ラベルレイヤーに［円柱］が適用された

［円柱］が適用されると、ラベルレイヤーの右上・左下・中央上・中央・中央下に丸い点（コントロールポイント）が表示されます。
これをドラッグして背面の缶のカーブにラベルを合わせます。

下の缶レイヤーが見えないと作業がしづらいので、ラベルレイヤーの［不透明度］を少し下げます。

右上のコントロールポイントをドラッグして、缶の右上に合わせる

左下のコントロールポイントをドラッグして、缶の左下に合わせる

缶の中央上のコントロールポイントをドラッグして、缶のカーブ（上辺）に合わせる

缶の中央下のコントロールポイントをドラッグして、缶のカーブ（下辺）に合わせる

缶の中央のコントロールポイントをドラッグして、ラベルレイヤーの絵柄の婉曲具合を缶のカーブに合わせる

上記のコントロールポイントを細かくドラッグして、ラベルレイヤーの見え方を、缶のカーブに合わせる

コントロールバー［ワープ］のプルダウンリストの［カスタム］をクリック

※［カスタム］を選択すると［円柱］モードで再調整することはできなくなります。

さらに細かくカーブを操作して、ラベルレイヤーの見え方を缶のカーブに合わせる

３）仕上げ・書き出し

ラベルレイヤーを選択した状態で描画モードを［乗算］に変更

缶の影の部分がラベルレイヤーと合成された

ただし（乗算を適用した結果）明るい部分が見えなくなってしまったので、次の操作でハイライト要素を加えます。

［レイヤー］パネル下の［＋］ボタンをクリックして、レイヤーを新規追加する

描画色を白色（#ffffff）にして、ツールバー［ブラシツール］をクリック

ブラシの種類は［ソフト円ブラシ］にして、ブラシの太さは缶のハイライト部分に合わせる

缶のハイライト部分に沿うように、白い直線を引く

※直線の開始箇所をクリックした後、直線の終了箇所で［SHIFT］キーを押下しながらクリックすると直線が引けます。

描画モードを［オーバーレイ］に変更

合成効果が効きすぎているため、［不透明度］を下げて馴染ませる

缶の影に続いて、光っている（ハイライト）部分が追加された

メニューバー［ファイル］→［書き出し］→［Web用に保存］をクリック

［プリセット］で［JPG］を選択し［保存］をクリックして、データを書き出す

４）注意点

本来ラベルは印刷するものなので、カラーモード［CMYK］で制作されています。

このデータを使ってモックアップする（見本 or 試作品を作る）場合は、「あくまでも完成イメージを掴むため」のものとしてRGBで制作します。

したがって色が変化するのは避けられないため、クライアントには「若干色がくすんで表示される」ことを事前に伝えておきましょう。

2026-06-04

Sassの書き方

HTML CSS

Sass icon by Icons8

１）コンパイラの準備

２）コンパイラの起動

３）パーシャルファイルを設定する

４）変数を設定する

５）関数を設定する

６）ネスト表記する

７）スニペッドを登録する

素材をダウンロード

１）コンパイラの準備

Visual Studio Codeを起動する

画面左の［拡張機能］をクリック

検索フォームで［sass］と入力する

［Live Sass Compailer］をクリック

［インストール］をクリック

以上で、［Live Sass Compailer］のインストールは完了です。

２）コンパイラの起動

SassでCSSを記述する際は、［style.css］ファイルは編集しません。

別途［scss］フォルダを作り、そこに［style.scss］ファイルを作成します。

［Live Sass Compailer］に［style.scss］ファイルを［style.css］ファイルにコンパイルさせることでCSSを自動作成します。

SassやCSSに関係なく、HTMLは通常通りに記述します。

［Live Sass Compailer］をインストールすると、VSコードのタスクバーに［Watch Sasss］の文字列が表示

この文字列をクリックする

表示が［Watching］に変わる

これで［Live Sass Compailer］が起動しました。

※SassでCSSを記述している時、表示が［Watching］になっていないと、いくら記述しても［style.css］にはまったく反映されません。クリックを忘れないようにしましょう。

［Live Sass Compailer］は一文字単位で入力内容を監視しています。

入力に内容に誤りがなければ［Success］と表示され、正常に［style.css］にコンパイルされます。

正常にコンパイルされると、CSSフォルダ内に［style.css］ファイルと［style.css.map］ファイルが自動的に出力されます。

【補足】

初期設定のままですと、コンパイルされたCSSファイルがSCSSフォルダに出力されてしまいます。以下のコードをsetting.jsonファイルに追加して、出力先をCSSフォルダに変更します。

    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
  } 

最新ではないものの［-webkit］などのベンダープレフィックス（まだ各ブラウザが適用していない新しいCSSに対応するためのコード）を含めて、自動的にCSSをコーディングしてくれます。

入力内容に誤りがあれば［Error］と表示され、［style.css］にコンパイルされません。

※通常のCSSでは、どこかにエラーがあってもブラウザが表示してくれることがありましたが、Sassでは、どこかにエラーがあるとコンパイルが完全に止まります。

タスクバーの表示が［Watching］になっているのに、いくら記述してもブラウザに反映されない場合は、どこかにエラーが発生してる可能性があります。

３）パーシャルファイルを設定する

Sassでは、設定したCSSをWebサイト上の各パーツごとに分割して読み込むことを推奨しています。この分割したファイルのことを「パーシャルファイル」呼びます。

以下はパーシャルファイルの設定・読み込み方法です。

画面左のエクスプローラーバーの［SCSS］フォルダを選択した場で、［新しいファイルの追加］をクリック

新しいファイルが追加されるので［_reset.scss］と名前を付けます。

※先頭に「_（アンダースコア）」を記入すると、該当のSCSSファイルはコンパイルされません。

※［_reset.scss］ファイルは［style.scss］ファイルに読み込ませるだけ。HTMLに読み込ませるのは、あくまでもコンパイルされた［style.cssのみです。

※今回は、大量のリセットCSSをパーシャルファイルに登録して、［style.scss］ファイルに読み込ませます。

［style.scss］ファイルの先頭に［@use "reset";］と記述することで、パーシャルファイルを読み込みます。

［_（アンダースコア）］と［.scss］は省略しても正常に読み込まれます。

４）変数を設定する

CSSでは、セレクター［:root］とし、その中に［--（変数名）：設定内容;］とすることで変数を設定し、［var(変数名)］で変数を呼び出せました。

それと同様にSassでは、［$（変数名）：設定内容］とすることで変数を設定でき、［$（変数名）］で呼び出せます。

５）関数を設定する

Sassを使うメリットの一つに、特定コードを関数化できるという点があります。

例えばメディアクエリを記述する際は、その都度［@media (…)］と記述する必要があります。それを、前項の変数を利用してブレイクポイントを登録しておき、それを下図のように関数に組み込むことで、メンテナンス性の高い記述ができます。

［@mixin］の後に続くのが［関数名（任意）］です。

登録した関数を呼び出すときは、［@include（関数名）］と記述することで呼び出せます。

※［@content;］は、その都度書かれたCSSを「差し込む」という働きがあります。

６）ネスト表記する

従来のCSSは、セレクターごとにバラバラに記述しているのに比べて、ネスト表記は、HTMLと同じように入れ子で表記する記述の仕方です。

従来のCSSの記述では、例えばnavを記述する場合［nav { }］［nav ul { }］［nav ul li { }］とそれぞれのセレクターを記述する必要がありました。

それと比べてネスト表記にすると、子要素を親要素の「入れ子」として記述するため、nav { ul { li { }}}というように、HTMLと同じ構造で記述できます。

このように記述すると読みやすく、修正しやすいというメリットがあります。

ただし、ネストが深くなりすぎると読みづらくなるというデメリットも発生しますので、ネストの階層は３～４階層くらいまでにしましょう。

ネスト表記固有の表現で、例えばリンクボタンにhover設定をする際は、親要素である［a { }］の中で、［&（アンパサンド）:hover { }］と記述することで親セレクターを参照できます（「：（コロン）」の前後はスペースを入れない）。

疑似要素（::before、::after）でも同様です。

７）スニペッドを登録する

よく使うコードは、あらかじめVSコードに登録することができます。

今回は、実務で使うレベルになると100行を超えるリセットCSSを登録します。

VSコード左下の歯車マークをクリック→［スニペット］をクリック

検索フォームに［scss］ と入力する

選択肢に［scss.json(SCSS)］と表示されるので、これをクリック

［scss.json］が表示される

上記の内容は、スニペット登録する際のフォーマット（例文）がコメントアウト状態で表示されています。

［Print to console ］から［description］までをドラッグし、下に貼り付ける

貼り付けた方のコメントアウトを解除する

［prefix（呼び出し語）］を入力する

※今回登録するのはリセットCSSなので、prefixを［reset］と登録します。

今回は［"$2"］の内容は不要なので削除します。

［console.log('$1');］と表記されたところに、コピーしたリセットCSSを上書きする形で貼り付けます。

［description］に、本スニペットの説明文を入力します（日本語可）。

実際にSCSSファイルを入力している時に［reset］と入力すると…、

登録したリセットCSSが自動入力されました。

登録するリセットCSS

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search][type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted}[type=reset],[type=submit],button,html [type=button]button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}img{max-width: 100%;vertical-align: bottom;}

2026-06-04

【PS】バナー作成（北陸キャンペーン）

Photoshop

見本

模写

上記画像を踏まえて、バナーを模写しましょう。

参考サイト：バナーライブラリー

素材をダウンロード

出典：写真AC　素材ID：4002397／4338763／5114061／33330655

2026-05-28

【JS】プログラムを組む（スライダー/手動）

JavaScript

JavaScriptのロゴアイコン by Icons8

デモサイト

　
スライダー表示をJavaScriptで作りましょう。
今回のプログラムは、preボタンとnextボタンを押すことでスライダーが動くタイプです。

作業データ　
　

HTML

コードを参照

<body class="slider">
    <header>
        <h1>スライダーを作る</h1>
    </header>
    <main>
        <div class="container">
        <div class="pre_btn"></div>
        <img src="img/slider.jpg" alt="食事の画像">
        <div class="next_btn"></div>
        </div>
    </main>
    <footer>
        <p><small>&copy; <span id="thisYear"></span> スライダーを作る</small></p>
    </footer>

    <script src="js/script.js"></script>
</body>

JavaScript

【ポイント】

変数let imageIndex = 0;を用意し、preボタンやnextボタンをクリックするごとに、その値を１つずつ増減させます。
その値を配列データのインデックス番号として使い、該当する画像をHTMLに流し込むことでスライダーとしての機能を作ります。

コードを参照

<script>
/* ―――――――――――――――――――――――――― */
/* スライダーを作る（slider） */
/* ―――――――――――――――――――――――――― */

// 画像のパス情報を用意
const slideImage = [
    'img/slider.jpg',
    'img/slider_02.jpg',
    'img/slider_03.jpg',
    'img/slider_04.jpg',
    'img/slider_05.jpg'
];

// ループするインデックス番号を用意
let imageIndex = 0;

// 要素を取得する
const slider = document.querySelector('.container img');
const preBtn = document.querySelector('.pre_btn');
const nextBtn = document.querySelector('.next_btn');

// ［前に戻る］ボタンにイベントリスナーを追加
preBtn.addEventListener('click', () => {
    // インデックス番号を１マイナス
    imageIndex--;
    // インデックス番号がゼロより小さくなったら
    if (imageIndex < 0) {
        // インデックス番号の上限値－１に戻す
        imageIndex = slideImage.length - 1;
    }
    // 該当する画像のパス情報を反映
    slider.src = slideImage[imageIndex];
});

// ［次に進む］ボタンにイベントリスナーを追加
nextBtn.addEventListener('click', () => {
    // インデックス番号を１プラス
    imageIndex++;
    // インデックス番号が上限値以上になったら
    if (imageIndex >= slideImage.length) {
        // インデックス番号をゼロに戻す
        imageIndex = 0;
    }
    // 該当する画像のパス情報を反映
    slider.src = slideImage[imageIndex];
});
</script>

CSS

今回のCSSで手間取りそうなのは、preボタンとnextボタンの見た目です。
positionと疑似要素を駆使して作りますので、コードが冗長しないように注意しながら作成しましょう。

コードを参照

@charset "UTF-8";

/* ―――――――――――――――――――――――――― */
/* 共通設定 */
/* ―――――――――――――――――――――――――― */

:root {
    --main_color: #ff8585;
    --main_text: #232323;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #232323;
}

/* ページ内スクロールをゆっくり移動 */
html {
    scroll-behavior: smooth;
}

/* 画面を垂直方向に３分割 */
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    color: #232323;
}

/* リンク先の上に余白を */
section {
    scroll-margin-top: 60px;
}

header {
    height: auto;
}

/* 余ったスペースはメイン割り当てる */
main {
    flex: 1;
    height: auto;
}

/* タイトルの書式設定 */
h1 {
    text-align: center;
    color: #fff;
    padding: 30px 0 20px;
    background-color: #ff8585;
    margin-bottom: 50px;
    font-size: clamp(24px, 4vw, 32px);
}

/* フッター */
footer {
    text-align: center;
    color: #fff;
    height: 30px;
    background-color: #ff8585;
}

/* ―――――――――――――――――――――――――― */
/* スライダーを作る（slider） */
/* ―――――――――――――――――――――――――― */

/* 表示スペース */
.container {
    width: min(85%, 500px);
    height: 300px;
    margin: 0 auto 30px;
    position: relative;
}

/* スペースに画像を合わせる */
.container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* 両ボタンの表示・位置（共通） */
.container .pre_btn,
.container .next_btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff8585b1;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* ［前に戻る］ボタンの位置 */
.container .pre_btn {
    left: -15px;
}

/* ［次に進む］ボタンの位置 */
.container .next_btn {
    right: -15px;
}

/* 両ボタンの矢印マーク（共通） */
.container .pre_btn::before,
.container .next_btn::before {
    content: "";
    display: block;
    width: 30%;
    height: 30%;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    position: absolute;
    inset: 0;
    margin: auto;
}

/* ［前に戻る］ボタンの［＜］マーク */
.container .pre_btn::before {
    transform: rotate(-135deg);
    left: 18%;
}

/* ［次に進む］ボタンの［＞］マーク */
.container .next_btn::before {
    transform: rotate(45deg);
    left: -18%;
}

作業手順

HTML

JavaScript

CSS

１）生成AIの主な用途（2026年現在）

２）AIの得意なこと・不得意なこと

３）AI生成でやってはいけないこと

４）プロンプトの書き方

５）補 足

６）注 意

カラーモードに注意

環境設定

文字サイズ

見た目に優先順位をつけて読者の目線を誘導しましょう

塗り足し

フリー素材をより便利に活用しましょう

画像の管理

納品時に用意するもの

１）選択範囲の作成

２）ラベルを缶のカーブに合わせる

３）仕上げ・書き出し

４）注意点

１）コンパイラの準備

２）コンパイラの起動

３）パーシャルファイルを設定する

４）変数を設定する

５）関数を設定する

６）ネスト表記する

７）スニペッドを登録する

HTML

JavaScript

CSS

５）補　足

６）注　意

見た目に優先順位をつけて
読者の目線を誘導しましょう