学科 ユーザーインターフェイス基礎③【オンライン】

学科 ユーザーインターフェイス基礎③【オンライン】

訓練日誌

<本日のテーマ>納品する作品の準備です。

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

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

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

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

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

参考資料：「デザインの考え方」の教科書②.pdf

アクセスマップ とは？

一般的な地図とは違い、アクセスマップは「ある特定の目的地へのアクセス」に特化した地図です。 曲がり角や交差点など、ポイントとなるところを大きく目立たせたり、逆に必要でない情報はバッサリ削ってしまうなど、「見せたいもの」「いらないもの」の見極めが重要です。

参考サイト

note memo

  1. 目的地に対して
  2. 何処から
  3. どこを通って
  4. どのくらいの距離を
  5. どのように

レイアウトの5つの法

  1. 余白
  2. 近接
  3. 整列
  4. 反復
  5. コントラスト

アクセスマップ制作で使える基本操作

  • 線パネル
  • アピアランスパネル
  • スタイライズ
  • クリッピングマスク
  • アウトライン
  • アピアランスの分割

線パネル

 線パネルでは、線の太さを設定するだけでなく、線の両端の形や、角の形を変える事ができます。また点線や矢印も作る事ができます。

参考サイト

アピアランスパネル

Adobe Illustrator で効果、アピアランスパネルおよびグラフィックスタイルパネルを使用すると、オブジェクト、グループまたは、レイヤーのアピアランスを変えることができます。また、1 つのオブジェクトを複数の必須部分に分割して、オブジェクト要素を個別に修正することもできます。

参考サイト

スタイライズ

【illustrator】オブジェクトに「スタイライズ」効果で影やぼかしをつける 「スタイライズ」効果で、選択したオブジェクトに影や角を丸くするなどができます。

参考サイト

クリッピングマスク

クリッピングマスクは、その形状によってほかのアートワークをマスクするオブジェクトです。クリッピングマスクの内側にあるエリアのみが見えるように、アートワークをマスクの形状にクリップします。クリッピングマスクとマスクされたオブジェクトは、クリッピングセットと呼ばれます。

参考サイト

アウトライン

イラレで基本的に入力する文字フォントツールがありますが、そのフォントツールをアウトライン化することでオブジェクトにすることができます。
何が違うのかというと、フォントは文字情報、アウトライン化したのはオブジェクト(図形)情報ということです。
このアウトライン化をすれば、インストールしたフォントで別のパソコンで開く場合置き換わってしまうということを防ぐことができます。

Illustrator「アウトライン」という言葉で
覚えておく３つ！

「オブジェクト」＞「パス」＞「パスのアウトライン」
「書式」＞「アウトラインの作成」
「表示」＞「アウトライン（Ctrl+Ｙ）」

参考サイト

参考サイト

アピアランスの分割

 1つのオブジェクトには塗り、線、効果、不透明度の4つのアピアランス属性があります。例えば”1つのオブジェクトに4つのアピアランス属性”を”1つのアピアランス属性で1つのオブジェクト”にしてくれるのがアピアランスを分割する機能

参考サイト

実践

手書きでいいので、「アクセスマップ」のイメージを作りましょう。
それぞれの作品の方向性をしっかりとイメージし、制作を進めていきましょう。

目的：かつしかシンフォニーヒルズの最寄駅からの道案内

ターゲット：区外から電車、徒歩で来られる利用者

デザイン：初めての利用者の方でもわかりやすいランドマークと施設のクラシックなイメージを取り入れる。