こんにちは、デジタルハリウッドSTUDIO三宮です！

前回のブログでは、マーケティング用語をご紹介しましたが、今回はデザイン用語をご紹介していこうと思います。

今回も軽い辞書代わりに活用していただければ嬉しいです！

UI/UX

UIは、ユーザーとの間に現れるサービスやプロダクトの外観を表す言葉です。WebサイトにおけるユーザーのUIを例に出すと、サイトのデザインやフォントなどのユーザーの視界に触れる情報がすべてUIになります。また、UIはユーザーとサービスやプロダクトのタッチポイントを表す言葉なので、Web上の情報だけでなく、PCやスマートフォンなどのデバイス本体の外観なども含まれます。

一方UXは、ユーザーがプロダクトやサービスを通じて得られた体験を表す言葉です。ユーザーが商品を購入し、使用後、また購入したいとしたいと思う一連の流れすべてがユーザー体験で、UXです。

ユーザビリティ

ユーザビリティとは、一般的には使いやすさのことと言われています。使いやすいとは、具体的には、特定のユーザーが特定の状況においてやりたいことが効率よくできているのか・嫌な思いをしないか・また使いたいと思えるかなどを指しています。

なので、アプリやWebサービスのユーザビリティを議論するためには、まずそのユーザー・状況・目的を明確にしておく必要があります。

トンマナ

トンマナとは、トーン（調子や色調）＆マナー（様式や作風）の略した言葉です。つまり、色調や様式、つまりデザインやスタイルなどに一貫性をもたせるルールのことです。

トンマナを合わせることで、受け手側にコンテンツのイメージを印象付けられ、魅力が増し記憶に残りやすくなります。また、製品・サービスを選ぶ際に、トンマナから得る印象で「自分がターゲットになっている」と強く感じることにもつながります。

フラットデザイン

フラットデザインとは、デザインにおける余分な要素を排除して、立体感を生み出すグラデーションなどの細かい加工をする代わりに、対象物を抽象化してシンプルでダイナミックなレイアウトや色使いで勝負するデザイン手法です。

フラットデザインは、マルチデバイスに対応するコンテンツを制作することに向いています。

レスポンシブデザイン

レスポンシブデザインとは、Webサイトのデザインを閲覧ユーザーが使用するデバイスの画面サイズに応じて表示を最適化するデザインのことです。

もともとはPC画面でコンテンツを閲覧している人が多かったのですが、スマートフォンやタブレットなどの普及により、それぞれの画面サイズに対応しなければいけなくなりました。

ワイヤーフレーム

ワイヤーフレームとは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。ワイヤーフレームを作成する目的はWebサイトのレイアウトを決めることです。

デザイン優先で考えると必要なコンテンツが抜けてしまう可能性があります。なので盛り込みたいコンテンツをリストアップし、ワイヤーフレームを用いてレイアウトを組み立てる工程が必要です。

デザインカンプ

デザインカンプとは、デザインの完成見本のことです。クライアントさんへの提案やチームメンバーとのデザイン共有のために欠かせないものです。

デザインカンプ作成時点で、レスポンシブデザインやユーザビリティを意識できていればよりよいWebサイトをつくれることになるのでとても大事です。

タイポグラフィ

タイポグラフィとは、読みやすいフォント（文字の種類）で適切な位置に文字をレイアウトしていくこと・文字で一つのデザインを作ることです。普段見ている本やWebサイトもすべてタイポグラフィによってスラスラと読めるように考えられて配置されています。

タイポグラフィの基本のテクニックは、フォント種類は多くても3種類・フォントサイズを調整する・適切な配色にする・過剰な装飾はしないなどがあげられます。

カリグラフィ

カリグラフィとは、西洋や中東における文字を美しく見せる手法のことです。筆ではなく、筆記やペン、それに類する道具を用いて表現し、毛筆とは違った線の美しい文字を書きます。

最近では、カリグラフィを用いたデザインも注目されています。具体的な組み合わせは、カリグラフィ×イラスト・カリグラフィ×ロゴマークなどがあります。

ピクトグラム

ピクトグラムとは、何らかの情報や注意を示すために表示される視覚記号のことです。

一般的な看板は、見る者に何か情報を伝えようとアピールするために使用されますが、ピクトグラムは視覚に訴えるようなデザインではなく、情報が誰にでも伝わりやすいデザインに単純化したものです。

インフォグラフィックス

インフォグラフィックスとは、言葉や数字だけでは伝わりづらい情報を整理・分析・編集してイラストやグラフ、表などで表現したものです。インフォグラフィックスは、認識されやすい・記憶に残りやすい・理解度が高まる・利用できる場面が多い・言葉じゃなくても伝わるという性質を持っています。

代表的なものは、ピクトグラムや相関図などがある。

モーショングラフィックス

モーショングラフィックスは、文字やイラストなどグラフィックスに動きや音を付ける手法のことです。情報を分かりやすく伝えることができること・印象に残りやすいこと・制作コストが安いこと・表現の幅が広がることなどがメリットとしてあげられます。

身近に使われている例をあげると、インターネット上の動画広告やテレビCM、企業のPR動画などで使われています。

CMYK

CMYKは、紙などの印刷物に使われる表現方法です。シアン・マゼンダ・イエロー・キープレートという色を混ぜ合わせることにより、色を表現しています。

印刷をするときの標準色はCMYKが標準色です。表現できる色の幅が狭いため、印刷を前提にデータを作成する場合は考慮する必要があります。

RGB

RGBは、レッド・グリーン・ブルーの光の三原色でパソコンやタブレット、テレビなどのディスプレイにおいて光で色を表示する際に使われます。注意しないといけない部分は、色の数値が同じだったとしても、モニターやディスプレイによって見え方が変わってしまうことがあります。

Webデザインをするときに使うカラーモードは、このRGBです。

ここまで全14個のデザイン用語について解説していきました。

このページを見る前よりも理解が深まっていただけていたら嬉しいです！

こちらもチェック

▼トレーナーインタビュー

▼デジタルハリウッドSTUDIO三宮の受講生ってどんな人？

デジタルハリウッドSTUDIO

デジタルハリウッドSTUDIOは 忙しい社会人の方でも 仕事と両立し、 好きなときに好きな場所で学ぶ学習スタイルです。

目的別に選べるコースラインナップで、 就職・転職やフリーランス、パラレルワーク、副業 など、 一人ひとりに合った「オーダーメイドの」学びが可能となっています。

動画教材とアウトプットですぐに実践できる知識とスキルを身に着けられ、現役クリエイターからの指導を受けることができる個別トレーニングで、現場で使われる最新スキルが身につくカリキュラムです！

１．カウンセリングで疑問を解消

２．学校・コース／カリキュラムの詳細を解説

３．卒業生作品・実績をポートフォリオでご紹介

４．あなたの目的に合った就転職プランのご提案

５．学習環境・設備のご案内

６．ご希望の方には体験もご案内

※ご予約の際、ご希望のスクールは『STUDIO三宮』をご選択ください。

デジタルハリウッドSTUDIO三宮 説明会

デジタルハリウッドSTUDIO三宮へ入学を検討されている方を対象に説明会を随時開催しています。

新しい環境で学びたい方、クリエイティブな環境に身を置き学習を進めたい方、ぜひご参加ください。