今さら聞けないWeb(制作現場に出てくる)用語集 第4回 Web デザインアプリ編

No Photo

「坂の上の雲」が面白かったです、toyama です。

はい、今さら聞けないWeb(制作現場に出てくる)用語集、連載 4 回目の今回は「Web デザインアプリ編」としまして、画面デザインや画像制作にかかわる用語をピックアップしたいと思います。
単語だけでは辞書見ればわかってしまうので、実際シーブレインでどんな会話に登場するかの使用例を含めてお届けしたいと思います。

カーニング(トラッキング)

文字と文字の間のスキマを奇麗に整えること。文字詰めともいいます。
タイトルやボタンに文字を使う場合には特に気をつけたいです。
段落全体に行うことをトラッキングといいます。
使用例)この見出しんとこカーニング甘いよ。

カンプ

Webデザインでは Composite の略、広告デザインではComprehensive の略(だそうです)。
広告デザインでは写真やイラストなどの予算がかかる行程に入る前に出す詳細なレイアウト見本を意味します。
Webデザインでは操作に関係する場所と情報を掲載する場所などを配置したもの。ワイヤーフレームと意味合いは同じ感じ。
toyamaはしばらくの間「乾布」に変換していたおかげで『出力後インクが乾いた状態→完成品』だと思い込んでひどい目にあったことがある。
使用例)とりあえず提案書に使うカンプ作ってー

グリッドシステム(グリッドレイアウト)

元は印刷メディアのレイアウト方法で、グリッドの最小単位は本文の1文字サイズでした。
画面を縦や横の罫線で規則的に区切っていくのでWebでの表現に適しているとされています。
使用例)グリッドレイアウトってむずかしいよー

コントラスト

画像の明るい部分と暗い部分との差のこと。
明暗の差が大きいほどコントラストが強く、シャープな画像になります。
使用例)写真のコントラストを上げてくっきりさせよう。

スライス

Fireworks などのソフトの機能の一つで、画像をこの範囲で Gif や Jpg や Png に書き出せ!と指示する便利機能です。Fireworks では切り出すスライスひとつひとつに書き出し後のファイル名や圧縮率が設定できます。
使用例)画面デザインをスライスしといてー、ついでに書き出しまでやっといてねー

白抜き

ベタの背景の上に、文字やオブジェクトを白や地の色で作ること。
使用例)ここのボタンは可読性が低いからもっと背景色濃くして、字は白抜きにしたら?

タイポグラフィ

文字(フォント)を使って意味の取れる内容を画面に構成すること。
既存のフォントを色彩や視覚効果を加えて、書いてあることの内容とデザインから伝わるメッセージ性も重要とされています。
使用例)タイポグラフィを目指して資料作ったらいつの間にか単なる文字ばっかりの読み物みたいになった

トリミング

写真の必要ない部分を切り落とすこと。どこを残して配置するかはセンス次第。

ベジェ

ベジェ曲線。フランスのベジェさんが考案した、コンピュータ上で曲線を書く際に利用される方法のこと。
Illustrator などのペンツールで書かれるベジェ曲線をパスと呼びます。
少しとっつきにくい方法で描くため苦手意識を持つ人が多いけど、算数におけるかけ算の九九暗唱みたいなもので、基礎であり、できないよりできた方が断然便利でスピードもクオリティも変わってくるもの(だと思ってる)。

ピクトグラム

形と意味が一致している絵文字。交通機関や観光施設などの公共物に描かれている記号。
地域や言語を超えて機能するように配慮されています。

フォトレタッチ

写真を加工・修正すること。
色調補正やトリミングだけでなく、よけいなオブジェクトをなかったことにしたり、あっては困るものを消したりすることも含まれるので、やりすぎると詐欺みたいになる。

フォント(ゴシック/明朝/セリフ/サンセリフ/)

文字のスタイル。大きく分けて4つに分類されます。
明朝体:毛筆による字形の特徴を受けて、とめ・はね・はらいが表現されて、線の端にウロコがつくもの。
ゴシック:縦と横の線が同じ幅。ウロコがつかないもの。
セリフ:ウロコつきアルファベット。飾りやウロコを「セリフ」といいます。
サンセリフ:フランス語で「セリフがない」という意味。飾りのついていないアルファベットのこと。

プロトタイプ

使用状況の検証が必要なプロダクトデザインの経過で作られる試作品のこと。
webデザインではペーパープロトタイピングがそれにあたります。
動的に作られるページを仮に静的に作ってページ遷移の使用感を確認したりもします。
使用例)カンプだけだとわかりにくいから、プロトタイプ作って動きを見てもらおう。

ホワイトスペース

素材を置く場所とそうでない場所を意図的につくったとき、何もおかれていない部分をいいます。
置くものがなかったから空いてしまったわけではなく、レイアウト構成の重要なパーツとなります。
例)ここの(ホワイト)スペースが気持ち悪いなあ。もっと離すかくっつけるかした方が。

まとめ

以上です。少しでも現場の雰囲気が伝われば幸いです。
用語の解説には以下の書籍も参考にさせていただきました。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ