学科 ユーザーインターフェイス基礎④【オンライン】名刺作成

1限目
学科ユーザーインターフェイス基礎④
作品の制作について

2限目
学科ユーザーインターフェイス基礎④
作品の立案

3限目
学科ユーザーインターフェイス基礎④
作品の立案

4限目
学科ユーザーインターフェイス基礎④
作品の立案

5限目
学科ユーザーインターフェイス基礎④
作品の立案

本日のテーマ

納品する作品の準備です。

名刺の作成
文字や文章の｢読みやすさ｣
トリムマーク
パスのオフセット
配置
Adobe Fonts （Typekit ）
レイアウトデザインのポイントとして(復習)

名刺の作成

「名刺」は、名前や住所、連絡先などを印刷したクレジットカードほどの大きさの紙（主に91×55mm）です。名刺の主な役割は「自己紹介ツール」であり、
初対面の相手に自分の名前や連絡先、所属などのプロフィール情報を伝えます。ごあいさつと同時に、話のきっかけづくりにも利用されます。名刺に載せた
名前や連絡先以外の情報から話を広げ、相手と打ち解けるきっかけにもつながります。

名刺をデザインをする上で、適切に情報を伝えられるように、「レイアウト」「文字」「配色」を調整する必要がある。

名刺を作成するにあたり、ピクトグラムの「特徴を掴む」を前提として、ロゴの「目的の表現」
これに加えて、アクセスマップの「私」「あなた」「誰か」の主語を意識したうえで、デザインの基本である「レイアウト」「文字」「配色」を意識して、
作成してみましょう。

名刺は「覚えてもらうもの」です。

ロゴ考案のポイントの「特徴を掴む」＋「目的の表現」
名刺は「覚えてもらうもの」です。
アクセスマップの「私」「あなた」「誰か」の主語を意識して
とにかく覚えてもらう為「読みやすい」作品にしましょう。

名刺デザインは、「レイアウトデザイン」「文字デザイン」「配色デザイン」の全てを意識して制作しましょう。

まずは、「レイアウト」９１ｘ５５ｍｍの中で、面積比率を意識しながら、見せたい順番を作ってレイアウトしましょう。

最初、「フォントは癖の無いもの」「色は黒」として、イメージに引っ張られないように気を付けましょう！

そこに、「文字」選びで「印象を変える」明朝系のフォントとゴシック系のフォントの2つの使い分けだけでも、大きく印象は変わります。いろいろ試してみてください。

最後に「配色で雰囲気を与える」事をプラスしてみましょう。

赤は攻撃的な印象や強制力をもったり、上手く使えば力強い生命力を表現したりできます。青は冷静な雰囲気や自然や爽やかな印象を持てたりなど、配色を変えるだけで様々な表現に変わります。多くのパターンを試してみましょう。

文字や文章の｢読みやすさ｣

文字や文章の｢読みやすさ｣は、可読性、視認性、判読性という３つの要素から成ります。

参考サイト

文字の視認性・可読性を高めるデザインの作り方

バナーやサムネイルのデザインを作っていると文字が「読みにくい・見えづらい」デザインになってしまう時があります。『文字』と『背景（写真）』を組み合わせた際に「可読性」と「視認性」を高める定番テクニックやコツを解説していきます。

読みやすく見やすい文字組みレイアウトの基本を解説

文字組みのやり方を間違えると、読みにくい、わかりにくい、勘違いしやすいなど、読んでもらえないデザインになってし…

トリムマーク

トリムマーク（トンボ）とは、印刷時や、断裁位置を明確にするために必要不可欠な「しるし」のことです。 … 内トンボは仕上がり線を示しており、内トンボから外トンボの間は裁ち落としのための”塗り足し”部分を示しています。

参考になるサイト

Illustratorでトンボを作成する方法

このページではAdobe Illustratorでトンボ（トリムマーク）を作成する方法を掲載しています。

トリムマークは塗で作成する　線で作成してはダメ🙅
トリムマークはレイヤーの一番上に置く❕❕

パスのオフセット

「オフセット」という言葉にあまり馴染みはないでしょう。しかし、この機能を覚えておくと、イラレの使い方の幅が広がる可能性があります。

Illustratorでパスのオフセットを上手に使う方法とは？ – 時短を極めるためのパソコン術

イラストレーターの「パスのオフセット」について説明していきます。「パスのオフセット」とは、選択しているパスから指定した距離だけ離れたところに新しいパスを作成する機能です。オフセット機能を覚えておくと、イラレの使い方の幅が広がる可能性がありま...

配置

Illustratorの画像配置リンク画像と埋め込み画像の違いと正しい使い方. Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つの方法があります。

参考サイト

配置画像（リンク画像）設定：Illustrator | ご利用ガイド｜印刷のラクスル

イラストレーターでは、画像をドラッグして配置してもイラストレーターファイル自体に画像データの情報は取り込まれま

Adobe Fonts （Typekit ）

Adobe Creative Cloudユーザーが利用できるサービスの一つです。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。
（Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。）

参考サイト

Adobeフォントライブラリ「Typekit」を使用してみる｜ Tips Note by TAM

TAM のテクニカルチームがお届けする WEB技術ブログ！

レイアウトデザインのポイントとして(復習)

作成した作品を改めてみた時、「配置した内容のグループ化」「縦横の整列」「表現のルール化」「表現の差別化」「余白」を改めて見てみましょう。

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なことです。「理論やストーリーをレイアウトする」ことが大切であるということを忘れないでください。

参考サイト