学科 ユーザーインターフェイス基礎②OnLine
講師：小原先生
1限 作品の制作について
✎ܚ今後作成予定の作品
・アクセスマップ（1/15）
・名刺（1/17）
→テーマを決める
*フォント/色/レイアウト/あしらい等を変えて別Ver.を作る方法もあるので参考に
小原先生より：
センスと言う言葉に惑わされないで下さい。センスはデザインの引き出し。
求められる物を造る為に1番大事なのは『情報を正確に伝えられるかどうか』なので。
柔軟な発想が大切。インプットとアウトプットを重ねて。自分の好きな物を大切に
動画「アクセスマップ制作に向けて」
✎ܚアクセスマップ制作のポイント 「私」「あなた」「誰か」を主語に
*箇条書きで良いので文字起こしをしておく
*目的地はできるだけ真ん中
*駅から来る
*メイン的なランドマーク
✎ܚアクセスマップ制作のポイント レイアウト５つの法則
①目的に対して
②何処から
➂どこを通って
④どのくらいの距離を
⑤どのように？
→目的のロジックを配置する
→情報を整理して形にする 明確化
✎ܚレイアウト５つの基本原則
①余白 ②近接(グループ化) ➂整理(揃える) ④反復(パターン) ⑤コントラスト(強弱を付ける)
✎ܚアクセスマップ制作のポイントその他
*なるべく更新できるデータで作る
*目的の起点と終点をなるべく一つに絞る
*ランドマークは公共施設交番コンビニ等帰りにくいものにすると良い
*種別にレイヤーを分けた方が整理しやすい 道ランドマークテキストなど
*地図に著作権があるので、利用についての規約はしっかり確認すること
2限 アクセスマップと名刺制作について
✎ܚ小原先生のアクセスマップ
大まかな手順→ Googleマップをトレースして架空の地図を作成
→レイヤーをgoogle mapテンプレにしてロック→別レイヤーでペンツールで道を描く レイヤーの順序が大事
✎ܚ小原先生のアクセスマップのレイヤーの順序（下から）
→下地→水路→大通り→細道→新幹線→私鉄(イメージカラーが決まっている)→JR(黒白の決まりがあるので確認)→道順→建物→信号→文字という順でレイヤーを重ねている
✎ܚ仕上げにクリッピングマスクできれいな四角に切り取る
→イラレはクリッピングマスクをすると全てのレイヤーがクリッピンググループというレイヤーにまとめられてしまうので、データをコピーしておくこと
*アピアランスパネルで線に線を重ねて線路を作る
*アクセスマップ参考サイトをチェック！大事！
動画「名刺制作に向けて」
✎ܚ名刺は一枚で完成形 計算して考える
→誰が見るかわからないことを踏まえてレイアウト、文字、配色を考える
*これは今後ずっと続きます デザインをする限りレイアウト文字配色はずっと続きます レイアウトを考えることは常に頭に置いておきましょう
*文字が小さいと見えない可能性が高いです
*一番伝えたい情報を大きく
動画「名刺制作のポイント」
✎ܚ名刺は覚えてもらうもの
→まずは作成したロゴをもとに作ってみましょう
*ロゴ＝特徴を掴む＋目的の表現
*アクセスマップ＝「私」「あなた」「誰か」
*とにかく覚えてもらうため、読みやすさを意識すること、必ず読めること 当たり前ですが忘れないこと
3限 名刺制作についての続き
動画「名刺制作に向けて」
✎ܚまずレイアウト 次に文字 最後に色 色は強い力があるので最後にします
→フォントはクセのないもの、色も白黒からで、まず基本を考えていきましょう
✎ܚみっつのポイント
・可読性=読みやすさ 細字の方が読みやすい 太字は目を疲れさせる コントラストの違い
・視認性＝パッと見た時の認識のしやすさ 遠くからでも分かる 読むより見るの部分
・判読性＝わかりやすさ 正確に文章の意味が伝わるかどうか
✎ܚ小原先生の名刺デザインのラフ
・手書きラフをillustratorに取り込んでいる
・縦パターン横パターン
・入れる情報の選別（名前 住所 電話番号 QRコード ロゴ メアド LINE 役職など）
・文具店なので学校に寄せた青緑色
・原稿用紙デザインを取り入れている
*縦書きは漢数字がおすすめ
*フォントの使い分け
*ふりがなの揃え方 スペースの使い方 太字と細字でコントラスト
✎ܚトリムマーク（トンボ）3mmは必ず入れます（印刷物などで裁ち落としが必要）
*イラストレーターに入れてくれる機能がありますので次回実習します
4・5限 アクセスマップ、名刺に向けて各自作業
やった事→
✎ܚアクセスマップ参考サイトを見てみる
*1.起点 2.ルート 3.目印
*シンプルに！
*初めて店に来る人の気持ちで
✎ܚGoogleMapで実際に使う場所を探す&スクショ
✎ܚデザインラフ描き
✎ܚ小原先生が共有して下さった参考ページ
→伊賀市『地図のユニバーサルデザイン』(PDF)
外国人にもわかりやすい工夫→飲食店のみ、観光名所のみ等テーマを絞って簡素化した地図
日本人にはなじみのある温泉マークも外国人には伝わり辛い→地図記号にピクトグラムを融合して伝わりやすく
注意書きにも英語表記を
→Pinterest
・カーニングを調節すべき10の文字
→流れで見つけた別サイトよりカーニングのコツ
・逆さまにしてカーニング→文字列にとらわれずにカーニング出来る
・3文字ずつなどに区切ってカーニングして後で合わせる
*詰めすぎると窮屈で見辛くなるのでやり過ぎに注意！⚠️
*大文字のWYVTLP 小文字のykなどはカーニング要注意文字⚠️
✎ܚ今後の予定
・1/15 アクセスマップ作成
・1/17 名刺作成
・1/18 DTP基礎
・1/20 成績考査
アクセスマップに名刺
どちらも気を付けるべき事や押さえるべきポイントなど
考えることが多いですね💦
見て下さる方に心地良く感じていただけるような
かつわかりやすく伝わりやすい
そんなデザインを作れるように頑張らないと！です٩( ᐛ )و
今日も小原先生がみんなの為に一生懸命参考ページを探して下さったり
ご自身の制作物の共有や考え方などのお話をして下さって
とてもありがたかったです🙏✨
