画面に見えている側のこと。ボタンの配置や文字の大きさなど、利用者が直接触れる部分を指す。
フロントエンドとは、Webサービスのうち利用者が直接見て、触れる部分のことです。画面のデザイン、ボタン、文字、アニメーション——ブラウザに表示されるものすべてがフロントエンドです。
レストランの「客席と接客」です。内装の雰囲気、メニューの見やすさ、店員さんの気持ちいい対応——お客さんの体験を決める部分がフロントエンド。料理を作る厨房（バックエンド）がどれだけ優秀でも、客席が汚く注文しづらい店には人が来ません。
実際の開発では、この3つを効率よく書くための道具（ReactやNext.jsなどのフレームワーク）を使うのが主流です。本サイトもNext.jsで作られています。
訪問者は中身を読む前に、見た目で「信頼できるか」を数秒で判断します。同じ内容でも、読みやすく整ったページと崩れたページでは、成約率（CVR）がまるで違います。フロントエンドは「デザインの話」ではなく「売上の話」なのです。
初心者がつまずきやすいポイント
パソコンの画面だけで確認して完成にしてしまうことです。実際の訪問者の半分以上はスマホから来ます。スマホ表示（レスポンシブ対応）の確認を必ずセットにしましょう。もう一つ、機密データの出し分けを見た目側だけでやるのは厳禁です（バックエンドの項を参照）。
API（エーピーアイ）
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS（シーエスエス）
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub（ギットハブ）
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML（エイチティーエムエル）
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript（ジャバスクリプト）
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js（ネクストジェイエス）
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。