ZeroPlus Media > Web制作 > Webデザイン > 図解！Webデザインの現場で使う単語6選を解説

図解！Webデザインの現場で使う単語6選を解説

Webデザイン

2025/04/01

2025/03/22

デザインの専門用語は、視覚的なバランスや見やすさのためにとても大切な概念を指しています。

この記事では、Webデザインの現場でよく使われる基本用語の意味と役割を図解していきます。知識として整理しておきたい方やデザイン初心者の方にも端的にわかりやすくお伝えします。

この記事はこんな人に向けて書きました

デザインの現場で使われる単語について知っておきたい

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

ラフスケッチ・ワイヤーフレーム
デザインカンプ・トンマナ
視認性・可読性
まとめ

ラフスケッチ・ワイヤーフレーム

ラフスケッチとは、デザイン作業の初期段階で作成される手描きの簡単なスケッチのことです。

最終的なデザインが完成する前に、大まかなイメージやレイアウト、配置などを視覚化して検討するために用います。細かい装飾や具体的な画像などは入れず、あくまで概要を示すことが目的です。デザイナーだけでなく、依頼者やチームメンバーとイメージを共有し、方向性を早期に固めるために欠かせない作業です。

ワイヤーフレームとは、ウェブサイトやアプリなどのページ構造を視覚的に表現するための設計図のことです。

ボタンや画像、テキストの位置など基本的な骨組みを示すことが目的なので、具体的な色やデザイン要素は入れません。白・黒・グレーのシンプルな配色でページのレイアウトや要素の位置を示します。ワイヤーフレームをもとにして、ユーザー体験（UX）や機能性について、チームやクライアントとすり合わせを行います。

デザインカンプ・トンマナ

デザインカンプとは、実際の完成イメージに非常に近い形で作成されたデザインの見本のことです。

色使いやフォント、画像、レイアウトを正確に再現し、クライアントやチームメンバーに最終的な完成品の見た目をわかりやすく伝えるために作成します。ワイヤーフレームが構造を示すだけの簡素な設計図であるのに対し、デザインカンプは具体的なビジュアル要素を明確に提示するため、デザインの方向性を確認したり、細かな修正点を洗い出したりするのに役立ちます。

トンマナ（トーン＆マナー）とは、デザインや表現の一貫性を保つために定められたルールのことです。

具体的には配色、フォント、画像のスタイルなど、ブランドやプロジェクトごとに統一感を持たせるための規則を指します。トンマナを守ることで、ブランドのイメージを強化し、ユーザーに一貫した印象を与えることができます。また競合他社との差別化にも有効で、デザイン作業を進めるうえでの基準として重要な役割を担っています。

視認性・可読性

視認性とは、情報が瞬時に明確に認識できるかどうかを指す用語です。

要素の色や形、文字サイズ、コントラストなどが適切に調整されていると視認性が高くなります。逆に背景と文字色のコントラストが弱かったり、文字が小さすぎたり、複雑なデザインが使われていたりすると、視認性が低下し、ユーザーが情報を把握するのに時間や労力がかかります。特にウェブサイトや案内表示など、瞬時の理解が求められる場面では重要な要素です。

可読性とは、文章の読みやすさを指す用語です。

可読性には、フォントの選択、サイズ、行間、文字間隔、背景と文字色のコントラストなどが関係してきます。可読性が低いと読者が内容を把握するまでに時間がかかったり、途中で読むことを諦めたりする可能性があります。特に情報伝達を主な目的とするウェブサイトや資料では、読みやすさを意識したデザインが不可欠です。