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

訓練日誌

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

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

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

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

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


本日のテーマ

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


ロゴ・ピクトグラムの制作

Illustrator(イラストレーター)を使って作成してみます。
ソフトの特徴、利便性を理解しながら作成し、後にポスターやWebサイ
トでの利用、その他動画コンテンツや看板利用など様々な用途に使わ
れることをイメージしながら作成してみましょう。


ピクトグラム制作

何はともあれ、目的は ⇒ 誰もがそう見えるように作る

一番の考案のポイントは 「特徴を掴む」

思い当たる特徴を箇条書きするのも良いかもしれません。
例えば「サッカー」ならボール、シュート、キック、「野球」ならボール、バット、打つ、投げる
そうすると、例にある「サッカー」と「野球」はボールが重複してしまいます。そうなったら更に特徴を考える
「サッカーボール」は、白黒の模様、大きさ、足で蹴る
「野球ボール」は、縫い目、大きさ、手で投げる
というような、特徴をまず整理していきましょう。
そして、その特徴をどう表現し伝わるデザインにしていくかを考えてみましょう。


  • 検索や身の回りの物などを見るなどでリサーチしてみましょう。
  • 例えば検索で「サッカーボール ピクトグラム」や「サッカーボール イラスト」「サッカーボール アイコン」と検索してみましょう。
  • ピクトグラムの製作時間は5分!
  • 扱うソフトの特徴をイメージしてみましょう。
  • Illustratorを使うときならば、この機能を使えば作れる。という操作イメージをしっかり整えておきましょう。
  • またその操作の復習や確認を事前に行っておきましょう!
  • ユニバーサルカラーを考える☝️✨
  • 色弱者の方から見ると色が見えにくくなる事があるので白黒や単色が多い✨

ピクトグラムのデザインポイント!

  • デザインはとにかくシンプルに

ピクトグラムはとにかくシンプルで分かりやすいデザインであることが重要です。ピクトグラムは、文字や複雑な説明文に頼ることなく、ひと目で意味や目的を伝える必要があるからです。そのため、具体的な形状や色を使いながら、余分な要素や複雑なディテールを省く必要があります。ピクトグラムを作るときは、デザインがシンプルになっているか必ずチェックしましょう。


  • 統一性のあるデザイン

ピクトグラムを作るときは、同じ種類の情報を伝えるピクトグラムの形状やスタイルと統一性のあるデザインにする必要があります。ピクトグラムは言語に依存せず国や文化を超えて理解されることが重要だからです。デザインする前に同じ種類の情報を伝えるピクトグラムがどんなデザインなのかを確認しておきましょう。


  • 直感的に理解できるデザイン

ピクトグラムは直感的に理解できるように設計する必要があります。国籍や言葉の壁を超えて、多くの人が目的や意味を即座に理解出来ることが共通の認識を持って、コミュニケーションをはかるためには、最も重要だからです。言葉がわからなくても、ピクトグラムを見ただけで、意味や目的が直感的に理解できるのかという視点を持つことを忘れないようにしましょう。


  • 色にも情報を伝える意味を持たせる

ピクトグラムを作るときには、色にも情報を伝える意味を持たせることができるということを覚えておきましょう。具体的には信号機や道路標識を思い出してもらうと分かりやすいと思いますが、赤や黄は危険や警告を表し、青や緑は安全や許可を表すことが一般的です。「形」だけでなく「色」もピクトグラムの表現手段として工夫してみてください。


時短できる作業の進め方

STEP1. 作りたいピクトグラムの意味や果たす役割について理解する

STEP4. イメージが浮かんだら、紙またはPCと向かうTEP2. 参考になるデザインを参考サイトなどを使用して確認する

STEP4. イメージが浮かんだら、紙またはPCと向かうTEP3. ピクトグラムのデザイン要素を理解して、イメージを作る

STEP4. イメージが浮かんだら、紙またはPCと向かう


作成手順

  • ガイドを作成する


  • パスをアウトライン化する

アウトライン化とは、文字や線、パス、ブラシなどのアピアランス(装飾)をオブジェクトに変換することを指します。 文字をアウトライン化すると、画像下側のようにパスで囲まれたオブジェクトに変換されます。 文字をアウトライン化する理由は、違うパソコンでデータを開いてもフォントが置き換わらないようにするためです。

  • パスファインダーを活用する

課題

ピクトグラムの下書きやイメージする(10個程)


感想

今日はピクトグラムについて学びました✨

作ったことがないのでうまく作れるか不安ですが5分で作成出来るようになりたいです😸❣️

コメント

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