JavaScriptでできること5つの実例と、デザイナーが動きを指定する伝え方

HTMLとCSSを学ぶと、次に出てくるのがJavaScriptです。
「プログラミングは無理…」と身構えなくて大丈夫。デザイナーに必要なのは書く力ではありません。

JavaScriptとは、Webページに動きをつけるためのプログラミング言語（コンピュータへの指示を書くための言葉）です。HTMLが骨組み、CSSが見た目、そしてJavaScriptが動きを担当します。

必要なのは、JavaScriptで何ができるかを知っていること。それだけで「この動きはお願いできますか」と実装者に伝えられます。
この記事では、文法には触れず、できることの実例と伝え方だけを解説します。読み終わる頃には、Webサイトの「動き」を言葉にできるようになりますよ◎

JavaScriptの役割（HTML・CSSとの分担）

Webページは3つの言語で作ります。分担ははっきり分かれています。

• HTML：文章と構造。見出し・本文・画像を置く
• CSS：見た目。色・大きさ・配置を決める
• JavaScript：動きと変化。押したら開く、入力したら反応する

JavaScriptがなくてもページは表示できます。表示したあとに変化を起こすのがJavaScriptの仕事です。「クリックしたら」「入力したら」「スクロールしたら」のような、閲覧者のアクションへの反応だと考えてください。

HTMLとCSSをまだ読んでいない方は、先にHTMLの役割とCSSの役割を見ておくと、この分担がすっと入ってきます。

JavaScriptでできること（Webデザインで出会う実例）

デザインの現場でよく出会う実例を5つ挙げます。どれも、あなたが毎日見ているサイトで動いているものです。

1. 開く・閉じる

スマホサイトの右上にある三本線（ハンバーガーメニュー）を押すと、メニューが出てきます。質問をタップすると答えが開くアコーディオンも同じ仕組みです。
「押したら表示が切り替わる」は、JavaScriptのいちばん基本的な仕事です。

2. 切り替える

トップページで画像が数秒ごとに横へ流れるスライダー（カルーセル）。「料金」「機能」を押すと中身が入れ替わるタブ。
どちらも、複数の内容を1つの場所で見せたいときに使います。

3. 入力に反応する

お問い合わせフォームでメールアドレスを打ち間違えると、送信前に「形式が正しくありません」と赤い文字が出ます。これが入力チェック（バリデーション）です。
送信してからエラーを返すより、その場で教えるほうが親切ですよね。フォームの使いやすさはここで決まります。

4. スクロールに反応する

ページを下へ送ると、要素がふわっと現れる。ある位置まで進むと、ヘッダーが小さくなって画面上部に固定される。
スクロール量を監視して、決めた位置で変化を起こしています。LP（1枚で完結する縦長の宣伝ページ）の演出はほぼこれです。

5. データを読み込んで表示する

「もっと見る」を押すと、ページを移動せずに記事が追加で表示される。検索窓に文字を打つと、候補がすぐ下に出る。
ページ全体を読み直さずに、必要なデータだけを取ってきて差し込んでいます。地図やチャートの埋め込みも同じ仲間です。

CSSでできる動きと、JavaScriptが要る動き

実は「動き」の全部にJavaScriptが要るわけではありません。簡単な動きはCSSだけで作れます。この境界を知っていると、実装者との会話が一段具体的になります。

動き	CSSだけでできる	JavaScriptが要る
マウスを乗せたら色が変わる	◯	不要
ふわっと現れる（読み込み時）	◯	不要
押したらメニューが開く	一部可	基本はこちら
スライダー・タブ切り替え	×	◯
入力チェック・データ読み込み	×	◯

目安はこうです。マウスを乗せたときの変化や単純なアニメーションはCSS、クリックへの反応やデータのやり取りはJavaScript。CSSで済む動きは実装が軽く、修正も速いです。

動きを言葉で伝えるコツ

デザイナーがJavaScriptの知識を使う場面は、実装者への依頼です。「いい感じに動かしてください」では伝わりません。
次の3点をそろえると、一度で伝わります。

• きっかけ：いつ動くか（押したら／スクロールしたら／読み込んだら）
• 対象：何が動くか（メニューが／画像が／見出しが）
• 変化：どうなるか（右から出る／ふわっと現れる／固定される）

例：「三本線のボタンを押したら（きっかけ）、メニューが（対象）、右からスライドして出てくる（変化）」。
近い動きをしている実在のサイトのURLを添えると、さらに確実です。動きは言葉より実物のほうが速く伝わります💡

コードの見た目も1つだけ紹介します。読めなくて大丈夫、「こういう形をしている」と知るだけで十分です。

button.addEventListener("click", openMenu);
// 「ボタンをクリックしたら、メニューを開く」という指示

「何かが起きたら、これをする」。JavaScriptの中身は、ほぼこの形の積み重ねです。

ミニ実践：好きなサイトで「動き」を3つ探す

道具は要りません。スマホかパソコンで10分あればできます。

1. よく見るサイトを1つ開く（ECサイト（通販サイト）やメディアが見つけやすいです）
2. ページを触って、「変化した」と感じた瞬間を3つ探す
3. それぞれを「きっかけ・対象・変化」の3点で言葉にしてメモする
4. CSSだけでできそうか、JavaScriptが要りそうか、さっきの表で予想してみる

3つ言葉にできたら、もう「動きの指示が出せる人」です。予想が合っているかは気にしなくて大丈夫。言葉にする練習そのものに価値があります。

よくある質問

JavaScriptで何ができますか？

Webページに動きと変化を足せます。代表例は、メニューの開閉、スライダーやタブの切り替え、フォームの入力チェック、スクロールに合わせた演出、ページを移動せずにデータを読み込む表示です。
Webページ以外でも、スマホアプリやサーバー側の開発にも使われる、用途の広い言語です。

PythonとJavaScript、どっちを学ぶべきですか？

Webデザインに関わるなら、JavaScriptが先です。ブラウザの中で動く言語はJavaScriptだけなので、Webサイトの「動き」の正体はほぼすべてJavaScriptです。
Pythonはデータ分析やAI開発が主戦場で、Webデザインの現場で直接触れる機会は多くありません。

JavaScriptとJavaは同じものですか？

別の言語です。名前が似ているのは歴史的な事情で、中身に互換性はありません。
Webページの動きを作るのがJavaScript、業務システムやAndroidアプリの開発で使うのがJavaです。現場で言い間違えると話がかみ合わなくなるので、ここだけは区別して覚えてください。

デザイナーもJavaScriptを書けたほうがいいですか？

書けなくても仕事は成立します。まず必要なのは「何ができるか」を知って、動きを言葉で指定できることです。
そのうえで興味が出たら、書く学習に進むのはもちろんプラスです。コピペしたコードを少し変えて試すところから始めると、挫折しにくいですよ。

次に学ぶこと

今回のポイントをまとめます。

• HTML＝構造、CSS＝見た目、JavaScript＝動きと変化
• できることは、開閉・切り替え・入力チェック・スクロール演出・データの読み込み
• マウスオーバー程度の動きはCSSで足りる。クリックへの反応とデータのやり取りはJavaScript
• 動きの指定はきっかけ・対象・変化の3点で伝える

次のレッスンは「デザインカンプからコーディングへ」。作ったデザインを実装者へ渡すときの実務を扱います。今回の「言葉で伝える」の続きにあたる内容です。

コースの全体像はデザイン基礎コースの目次から確認できます。