デザイン用語を覚えて円滑なコミュニケーションを
Webデザイナーとの会話が捗る！エンジニアが知っておきたい13個のデザイン用語
Webサイトやアプリの制作・修正には、Webデザイナーとのコミュニケーションが欠かせません。
何と伝えればよいのかわからない、デザイナーが使う言葉がよくわからないといった理由でディスコミュニケーションが発生しないように、デザイン用語を最低限おぼえておきましょう。
Webデザイナーとの会話が捗る13個のデザイン用語をまとめてご紹介します。
フラットデザイン
iOS Human Interface Guidelines
「フラットデザイン」は、2012年ごろから広まりはじめたWebデザインのスタイルで、装飾をできるだけ抑えたデザインを指します。
影や奥行き、光沢をつけて立体感を表現した「リッチデザイン」とは反対に、視覚効果を抑えた立体感がほとんどないデザインを「フラットデザイン」と呼びます。
「フラットデザイン」はiOSのUIやWindowsのモダンUIに使われるなど、現在主流のスタイルとなっています。
マテリアルデザイン
「マテリアルデザイン」は、Googleが提唱しているデザインの指針で、Webサイトに限らず、ひとつのUIフレームワークをテレビ、腕時計、車など、さまざまなデバイスでの使用を想定しています。
「Gmail」「Googleマップ」「Android」などで採用されており、まだフラットデザインより知名度は低いですが、採用するサイトも増えています。
マテリアルデザインについては、こちらの記事が参考になります。
マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー
また、Google公式の動画も参考になります。
マテリアルデザインの思想は動きがあった方が理解しやすいです。
DesignBytes: Intro To Material Design
レスポンシブWebデザイン
「レスポンシブWebデザイン」は、単一のファイルでPC、スマートフォン、タブレットなど、複数のデバイスに対応するWebデザインの手法です。
1つのHTMLをCSSで制御し、デバイスの画面サイズに応じて表示を切り替えます。
デバイスごとにHTMLファイルを用意しなくて済み、1つのHTMLファイルで対応できるのでメンテナンスがしやすいというメリットがあります。
パララックスデザイン
「パララックス（parallax）」は「視差」という意味で、Webでは視差効果で立体的に見せるテクニックを指します。
「パララックスデザイン」では、複数のイメージ画像のスクロール時の速度をそれぞれ変えることで、奥行きのある立体的な動きを演出します。
たとえば、Nikonのカメラ「Nikon 1 AW1」の製品サイトでは「パララックスデザイン」を取り入れており、カメラと背景のスクロール速度が異なるので、スクロールすると立体的に見えます。
タイポグラフィ
「タイポグラフィ」は、もともとは「活版印刷術」という意味でしたが、現在では文字を適切に配列させる技法を指します。
文字を美しく見せるために、フォント同士の字間・行間・大きさ・高さを揃える、余白を調整する、といった作業を行います。
フォントの書体や組み合わせ、配置の仕方によってデザインの完成度には大きな差がでます。
Webデザインをする上で「タイポグラフィ」の技法は欠かせないものといえるでしょう。
以下のサイトでは、「タイポグラフィ」の技法のひとつである「カーニング（文字詰め）」をゲーム感覚で体験できるので、ぜひトライしてみてください。
ベクター画像 / ビットマップ画像（ラスタ画像）
「ベクター画像」は、線を用いて図形を描画した画像で、拡大縮小しても画像が劣化しないのが特徴です。
線や面の輪郭がハッキリしているイラストに向いており、写真などの画像の処理には向いていません。
Adobe Illustratorなどでこの保存形式がサポートされています。
「ビットマップ画像」は、多数のピクセル（画素）の集まりで表現する画像で、「ラスタ画像」とも呼びます。
Window標準の画像処理ソフト「ペイント」のデフォルト保存形式がbmp（ビットマップ）ですが、広義にはpngやjpg、gif画像も「ビットマップ画像」に含まれます。
Adobe Photoshopは「ビットマップ形式」を採用しており、写真などの画像を処理するのに向いていますが、画素の集まりなので高倍率で拡大すると劣化が目立ってしまいます。
ベジェ曲線
「ベジェ曲線」は、Adobe Illustratorなどで採用されている線の描画方法で、フランス人のピエール・ベジェ氏がコンピューター上で滑らかな曲線を描くために開発しました。
複数の点をつなぐ線を滑らかに表現してくれるので、イラストを書くのに向いています。
Adobe Illustratorでは、ペンツールを用いて描いた「ベジェ曲線」を「パス」と呼んでいます。
トリミング
「トリミング」は、画像の不要な部分を切り取ることを指します。
Phtoshopなどの画像編集ソフトで画像を加工する際、画像の一部を切り取ることを「トリミングする」と表現します。
サイズを変更する「リサイズ」とは異なります。
ワイヤーフレーム / ワイヤ
「ワイヤーフレーム」とは、Webサイト・Webページのおおまかなレイアウトを記した図を指します。
「ワイヤ」と省略する場合もあります。
いわば骨組みの状態で、細かいデザインなどは省いて書かれたWebデザインの設計図のようなものです。
モックアップ / モック
「モックアップ」は、実物そっくりに作った実物大の模型のことで、Web制作やアプリ開発においては「試作品」を指します。
紙に書いた手書きのものから、実際の操作が可能なものまでモックアップの完成度はさまざまで、目的によって使い分けられます。
デザインカンプ /カンプ
「デザインカンプ」もしくは「カンプ」は、本格的な制作に着手する前に関係者に見せる「デザイン案」を指します。
スタイルガイド
「スタイルガイド」は、特定の言語において決まり事などを定義した手引きを指します。
Web制作では、デザイン、コーディングの規約をまとめた仕様書を指し、デザインやコーディングに統一感を持たせるため、配色やフォント、CSSコーディングなどのルールを記しておきます。
ピクトグラム
「ピクトグラム」は、図記号の一種で「絵文字」「絵言葉」「絵単語」などと呼ばれます。
何らかの情報を視覚的に伝えるための図記号で、2色、または単色で表現されます。
Web制作では、しばしば以下のような「ピクトグラムアイコン」が使われます。
最後に
制作の現場でスムーズにコミュニケーションをとるには、エンジニアもデザイナーもお互い歩み寄る姿勢が大事です。お互いが使っている用語を覚えればコミュニケーションが円滑になり、開発・制作の効率も向上するでしょう。今回紹介したのはほんの一部ですが、基本的なデザイン用語ですので、ぜひ覚えてみてください。
フリーランス（個人事業主）とは、特定の企業・...