オンラインカウンセリング実施中

Webデザイナーとの会話が捗る!エンジニアが知っておきたい13個のデザイン用語

Webサイトやアプリの制作・修正には、Webデザイナーとのコミュニケーションが欠かせません。
何と伝えればよいのかわからない、デザイナーが使う言葉がよくわからないといった理由でディスコミュニケーションが発生しないように、デザイン用語を最低限おぼえておきましょう。
Webデザイナーとの会話が捗る13個のデザイン用語をまとめてご紹介します。

Webデザイン案件を提案してもらう

目次

 フラットデザイン
 マテリアルデザイン
 レスポンシブWebデザイン
 パララックスデザイン
 タイポグラフィ
 ベクター画像  / ビットマップ画像(ラスタ画像)
  ベジェ曲線
 トリミング
 ワイヤーフレーム / ワイヤ
 モックアップ / モック
 デザインカンプ /カンプ
 スタイルガイド
 ピクトグラム
 まとめ

フリーランスの収入見込みをチェック

 

簡単60秒! 無料登録

フラットデザイン

「フラットデザイン」でデザインされたiOSのUI画像

iOS Human Interface Guidelines
「フラットデザイン」は、2012年ごろから広まりはじめたWebデザインのスタイルで、装飾をできるだけ抑えたデザインを指します。
影や奥行き、光沢をつけて立体感を表現した「リッチデザイン」とは反対に、視覚効果を抑えた立体感がほとんどないデザインを「フラットデザイン」と呼びます。
「フラットデザイン」はiOSのUIやWindowsのモダンUIに使われるなど、現在主流のスタイルとなっています。

Webデザイン案件を提案してもらう

マテリアルデザイン

「マテリアルデザイン」は、Googleが提唱しているデザインの指針で、Webサイトに限らず、ひとつのUIフレームワークをテレビ、腕時計、車など、さまざまなデバイスでの使用を想定しています。
「Gmail」「Googleマップ」「Android」などで採用されており、まだフラットデザインより知名度は低いですが、採用するサイトも増えています。
マテリアルデザインについては、こちらの記事が参考になります。
マテリアル・デザインって何? Androidデザイン責任者にインタヴュー

また、Google公式の動画も参考になります。
マテリアルデザインの思想は動きがあった方が理解しやすいです。
DesignBytes: Intro To Material Design

レスポンシブWebデザイン

 

「レスポンシブWebデザイン」で作られたサイトのイメージ画像

「レスポンシブWebデザイン」は、単一のファイルでPC、スマートフォン、タブレットなど、複数のデバイスに対応するWebデザインの手法です。
1つのHTMLをCSSで制御し、デバイスの画面サイズに応じて表示を切り替えます。
デバイスごとにHTMLファイルを用意しなくて済み、1つのHTMLファイルで対応できるのでメンテナンスがしやすいというメリットがあります。

パララックスデザイン

 

「パララックス(parallax)」でデザインされたニコンのサイト画像
Nikon 1AW1

「パララックス(parallax)」は「視差」という意味で、Webでは視差効果で立体的に見せるテクニックを指します。
「パララックスデザイン」では、複数のイメージ画像のスクロール時の速度をそれぞれ変えることで、奥行きのある立体的な動きを演出します。
たとえば、Nikonのカメラ「Nikon 1 AW1」の製品サイトでは「パララックスデザイン」を取り入れており、カメラと背景のスクロール速度が異なるので、スクロールすると立体的に見えます。

タイポグラフィ

 

タイポグラフィの技法「カーニング」を体験できるサイトの画像。詳細は以下
KERNTYPE a kerning game

「タイポグラフィ」は、もともとは「活版印刷術」という意味でしたが、現在では文字を適切に配列させる技法を指します。
文字を美しく見せるために、フォント同士の字間・行間・大きさ・高さを揃える、余白を調整する、といった作業を行います。

フォントの書体や組み合わせ、配置の仕方によってデザインの完成度には大きな差がでます。
Webデザインをする上で「タイポグラフィ」の技法は欠かせないものといえるでしょう。
以下のサイトでは、「タイポグラフィ」の技法のひとつである「カーニング(文字詰め)」をゲーム感覚で体験できるので、ぜひトライしてみてください。

ベクター画像  / ビットマップ画像(ラスタ画像)

「ベクター画像」は、線を用いて図形を描画した画像で、拡大縮小しても画像が劣化しないのが特徴です。
線や面の輪郭がハッキリしているイラストに向いており、写真などの画像の処理には向いていません。

Adobe Illustratorなどでこの保存形式がサポートされています。
「ビットマップ画像」は、多数のピクセル(画素)の集まりで表現する画像で、「ラスタ画像」とも呼びます。

Window標準の画像処理ソフト「ペイント」のデフォルト保存形式がbmp(ビットマップ)ですが、広義にはpngやjpg、gif画像も「ビットマップ画像」に含まれます。

Adobe Photoshopは「ビットマップ形式」を採用しており、写真などの画像を処理するのに向いていますが、画素の集まりなので高倍率で拡大すると劣化が目立ってしまいます。

ベジェ曲線

「ベジェ曲線」は、Adobe Illustratorなどで採用されている線の描画方法で、フランス人のピエール・ベジェ氏がコンピューター上で滑らかな曲線を描くために開発しました。
複数の点をつなぐ線を滑らかに表現してくれるので、イラストを書くのに向いています。
Adobe Illustratorでは、ペンツールを用いて描いた「ベジェ曲線」を「パス」と呼んでいます。

トリミング

「トリミング」は、画像の不要な部分を切り取ることを指します。
Phtoshopなどの画像編集ソフトで画像を加工する際、画像の一部を切り取ることを「トリミングする」と表現します。
サイズを変更する「リサイズ」とは異なります。

ワイヤーフレーム / ワイヤ

「ワイヤーフレーム」とは、Webサイト・Webページのおおまかなレイアウトを記した図を指します。
「ワイヤ」と省略する場合もあります。
いわば骨組みの状態で、細かいデザインなどは省いて書かれたWebデザインの設計図のようなものです。

モックアップ / モック

「モックアップ」は、実物そっくりに作った実物大の模型のことで、Web制作やアプリ開発においては「試作品」を指します。
紙に書いた手書きのものから、実際の操作が可能なものまでモックアップの完成度はさまざまで、目的によって使い分けられます。

デザインカンプ /カンプ

「デザインカンプ」もしくは「カンプ」は、本格的な制作に着手する前に関係者に見せる「デザイン案」を指します。

スタイルガイド

「スタイルガイド」は、特定の言語において決まり事などを定義した手引きを指します。
Web制作では、デザイン、コーディングの規約をまとめた仕様書を指し、デザインやコーディングに統一感を持たせるため、配色やフォント、CSSコーディングなどのルールを記しておきます。

ピクトグラム

 

「ピクトグラムアイコン」を検索できるサイトの画像。詳細は以下
Noun Project

「ピクトグラム」は、図記号の一種で「絵文字」「絵言葉」「絵単語」などと呼ばれます。
何らかの情報を視覚的に伝えるための図記号で、2色、または単色で表現されます。
Web制作では、しばしば以下のような「ピクトグラムアイコン」が使われます。

まとめ

制作の現場でスムーズにコミュニケーションをとるには、エンジニアもデザイナーもお互い歩み寄る姿勢が大事です。お互いが使っている用語を覚えればコミュニケーションが円滑になり、開発・制作の効率も向上するでしょう。今回紹介したのはほんの一部ですが、基本的なデザイン用語ですので、ぜひ覚えてみてください。

最後に

簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!

※相場算出に個人情報の取得はおこないません。
 

Webデザイン案件を提案してもらう

 



 

■求人・案件をお探しの方へ
フロントエンドの求人・案件
JavaScriptの求人・案件

  • このエントリーをはてなブックマークに追加
いきなり相談するのは不安な方へ フリーランスになった時にどんな案件を提案されるのかメールでわかる! 詳しくはこちらから

関連案件

もっと案件を見る

プライバシーマーク

© 2014-2021 Levtech Co., Ltd.