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

本日のテーマ:地図(アクセスマップ)の作成

ポイント:更新等の運用の事もイメージして作成

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


アクセスマップとは

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

レイアウトの目的

情報の優先度や因果関係などを明確にして情報が「伝わりやすく」することがレイアウトの目的。
盛り込みたい要素(情報)の従属関係(親子にあたる関係)・並列関係(対等な関係)、優先度や因果関係などを明確にすると情報が「伝わりやすく」なる。

レイアウトの5つの基本原則

1.余 白 Margin … 余白をとる
2.近 接 Proximity … グループ化する
3.整 列 Alignment … 揃える
4.反 復 Repetition … 繰り返す
5.コントラスト(対比) Contrast … 強弱をつける

作業手順

①目的地に対して、②何処から、③どこを通って、④どのくらいの距離を、⑤どのように、を基本に考える。
ピクトグラムやロゴのように、箇条書きで良いので、文字に起こして作業をはじめる。

参考サイト

※参考サイト「案内地図(アクセスマップ)作成の4つのコツ」
 ①.起点を決める:どの起点から店舗にやってくるのかルートを想定して作成(電車や車など)参考:幕張メッセ
 ②ルートを決める:多少遠回りになっても、わかりやすい道を選択することが大切
 ③目印を決める:公園や公共施設、信号など、頻繁に建て替えが起こることがないものを目印にするのがポイント
 ④到着地がすぐにわかる工夫が必要:到着した人が目的地に着いたことを確認できる目印(看板等)を確認

※地図は著作物(著作権法10条で例示されている中の、6号「図形の著作物」に該当)
 著作物性の判断において範囲が狭く限定的に認められることもあるが、著作権法により保護されるため、権利者の許諾無くコピー(著作権法22条)したりSNSやホームページに掲載(著作権法23条)することはできない
Googleマップの場合:特定の条件において画一的に利用が許諾(「利用規約」)されている。規約の内容に従うことはもちろん、 
重要となるのが「権利帰属を明確に表示」すること。書籍、雑誌などの定期刊行物、プレゼン資料や提案書などのビジネス文書においてもGoogleマップを利用することができるが、「印刷広告」については利用は許諾されていない(他、道案内を目的とするガイドブック、Tシャツなどの商品や商品パッケージにおいても使用不可)。

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

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

線パネル

 線の太さの設定や線の両端の形や、角の形を変える事ができ、点線や矢印も作る事ができる。

アピアランスパネル

オブジェクト、グループまたは、レイヤーのアピアランスを変えることができ、1 つのオブジェクトを複数の必須部分に分割して、オブジェクト要素を個別に修正することもできる。

参考サイト

スタイライズ

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

参考サイト

クリッピングマスク

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

参考サイト

アウトライン

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

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

「オブジェクト」>「パス」>「パスのアウトライン」
「書式」>「アウトラインの作成」
「表示」>「アウトライン(Ctrl+Y)」

参考サイト

参考サイト

アピアランスの分割

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

参考サイト

コメント

タイトルとURLをコピーしました