現役受講生が解説!Webデザイン初心者が最初に覚えるべき基本用語10選

公開日: 2025.12.04
更新日: 2025.12.04

今回の記事では、Webデザインを学習中の受講生に執筆いただき、Webデザインの基礎知識となる専門用語についてご紹介します。

【受講生プロフィール】---------------------------------------------------------------------------------
 氏名:N.Hさん(女性)
 2025年4月に副業・フリーランスコースを受講、現在も学習を進めながら副業案件にチャレンジ中。
 -------------------------------------------------------------------------------------------------------

Webデザインとは、WebサイトやWebページの見た目と使いやすさを作る(設計する)仕事です。Webデザインの世界に足を踏み入れると、専門用語の多さに戸惑うことがあるかもしれません。 そこで今回は、Webデザイン初心者が最初に知っておきたい 基本用語を10個に絞って紹介します。

これらの言葉を理解しておくことで学習効率がぐっと上がりますよ!

HTML(エイチティーエムエル)

役割:Webページの「骨組み」を決める設計図です。

お家でいうと、柱や壁、部屋の配置など、どこに何があるか(文字、写真、ボタンなど)を決める大切な土台を作る言葉です。

HTMLとは具体的に以下のようなものが存在します。

・<p>:段落

・<h1>~<h6>:見出し

・<a>: リンク

CSS(シーエスエス)

役割:ウェブページの「見た目」をきれいにする飾りつけです。

HTMLで作った骨組みに、色を塗ったり、文字を大きくしたり、場所を動かしたりして、ウェブサイトをデザインし、見やすく整えるお仕事です。

例:・ボタンを黄色にする

  ・見出しの文字を2倍の大きさにする

レスポンシブデザイン

役割:見る画面に合わせて「自動で形が変わる」仕組みです。

パソコンやスマートフォンなど、アクセスするデバイスの画面サイズに合わせてウェブサイトが自動でレイアウトを最適化することです。

ワイヤーフレーム

役割:ウェブサイトの「かんたんな下書き」です。

デザインに入る前に、どこにどんな要素(見出し、画像、ボタンなど)を置くかを線や四角だけで書いた設計図のことです。ワイヤーフレームは色やフォント等を考慮しないで、構造と機能を確認するために作成します。

UI(ユーザーインターフェース)

役割:ユーザーが「さわったり、見たりする部分」です。

ウェブサイトにあるボタン、メニュー、写真など、操作(そうさ)できる場所や、目に見えるもののことです。

UX(ユーザーエクスペリエンス)

役割:サイトを使ったときに「ユーザーが感じる体験や気持ち」です。

「このサイトは使いやすい!」「すぐに欲しいものが見つかった!」といった、楽しい、満足できる体験をしてもらうことを指します。

UIとUXの違い:

UIはユーザーが「見る・触れる」デザインや操作部分のことで、UXはそれを通じてユーザーが得るすべての体験を指します。

カラーコード

役割:インターネットで使う「色の名前(番号)」です。

「#FFFFFF」=白、「#FF0000」=赤のように、数字と記号で色を正確に決めるためのルールです。これがあれば、誰が見ても同じ色に見えます。

フォント

役割:文字の「書体」です。

丸い文字や、キリッとした文字など、文字の見た目を変えることで、Webサイトの雰囲気をガラッと変えることができます。

Webフォントとは:閲覧者のデバイス環境に依存せず、Webサーバーからフォントデータを読み込んで、製作者が意図した通りのデザインの文字を表示させる技術です。これにより、ユーザーのデバイスにフォントが入っていなくても、指定したフォントを確実に表示できます。

ナビゲーション

役割:サイトの中で迷子にならないための「道しるべ」です。

他のページに移動するためのメニューやボタンのことです。ユーザーが目的の情報に簡単にたどり着けるように案内してくれます。

ドメイン / サーバー

役割:ウェブサイトをインターネットに「置くための場所」です。

ドメインはウェブサイトのインターネット上の住所(「〜.com」など)で、サーバーはウェブサイトのデータ(情報)をしまっておく大きな倉庫のことです。

まとめ

Webデザインを学び始めたばかりの頃は、専門用語に圧倒されがちですが、まずは今回紹介した10個の言葉をしっかり押さえておきましょう。

基礎がわかれば、次のステップに進むのもスムーズになりますよ!

さあ、この基礎を武器に、早速HTMLやCSSを具体的に学んでいきましょう!

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2025 WEBCAMP MEDIA Powered by AFFINGER5