学科ユーザーインターフェイス基礎②

2025.03.01

アジェンダ

  1. 作品の制作について
  2. 作品の制作について
  3. 作品の立案
  4. 作品の立案
  5. 作品の立案

テーマ:納品する作品の準備

*デザインするときは機械の力と一緒に正確なレイアウトを心がけてみましょう

ロゴ製作

ピクトグラムに目的をプラスした考案

  1. 目的を文字で箇条書き
    会社の特徴の表現をプラスする
    ・会社理念
    ・会社の業種
    ・会社の歴史
    商品の特徴の表現をプラスする
    ・商品内容
    ・価格
    ・歴史
    製品の特長の表現をプラスする
    ・使用頻度
    ・価格
    ・歴史
  2. リサーチする
    「カフェ ロゴ」
    「コーヒー ロゴ」
    「コーヒー豆 ロゴ」
  3. ロゴはひとつ5分~10分くらい
  4. 数は10~20個は作る

ロゴとは?

会社や製品を代表するもの

図案化・装飾化された

記号・マーク・文字などで作成されたもの

ロゴマークの役割

意味のあるロゴマークを作る

業種・歴史・理念 + 普遍性 = ロゴ

*使用規約があるものもある

ロゴの特徴

ロゴを構成するもの

  • シンボルマーク
  • ロゴタイプ
  • ロゴマーク

ロゴには、文字が入っている場合とは言っていない場合がある

タイポグラフィ・レタリングなど

小文字ロゴの特徴

 優しい印象

大文字ロゴの特徴

 堂々とした印象

文字を使う際の注意点

  • フリーフォントを使うこと
  • フォントの利用規約チェック(変型や加工も不可のときがあるため)
  • 商用利用許可しているものを使用(制作者に許可をもらうこと)
  • 商用登録を許可しているものを使う
  • 制作者のクレジットを使用する

使い方として

  • ロゴガイドライン(ルール)が存在している
  • 一貫性を維持する
  • 色、形、バランスなどを崩してはいけない
  • アイソレーションエリアを守る
  • 最小サイズを守る

*アイソレーションエリアとは

 マークに対して、これ以上重ねないなどのルールが設けられている

*文字は必ずアウトライン化する

*線はすべて塗りにしておく

ロゴ製作で使えるIllustratorの基本操作

  • 文字ツール
  • 文字パネル/段落パネル
  • 字形パネル
  • 整列パネル
  • 変形パネル
  • パス上文字ツール
  • アウトライン表示

文字

ポンと文字とエリア文字に分けられる

エリア文字

  • 範囲を指定し、その範囲内またはオブジェクト内に文字を書く
  • 段落パネル内で行末をそろえてくれるなど利点がある
  • バウンディングボックスの右側の記号をダブルクリックすることでポイント/エリアの切り替え可能
  • バウンディングボックス内に隠れた文字がある場合、赤い+マークが出る

段落ツール内

文字を一部修正、装飾が可能

かけっこ のっのみ上に移動や回転、隙間を空けるなど

段落

エリア内、行始点終点位置を移動(エリア範囲外にも)できる

改行の前後の行間を変える

字形

L,M,Hなどが選べないものもある

新しいフォントにはバリアブルフォント(細かなサイズも指定できる)がある…百千鳥

パス上文字ツール

文字アイコン長押しでパス上文字ツールを選択

オブジェクトを選択し文字を張り付け→オブジェクトのパス線上に文字が書ける

選択しTの位置で動かすと文字をパス内外に移動できる

整列パネル(ウィンドウタブより整列)

上下中央など整列が出来る

分布、等間隔に分布などの機能もある

文字のアウトライン(書式のアウトラインを作成)

アウトライン化された文字はもう文字として編集ができない

パス化されているので文字をパスとしていじれる

*文字データーがあるものとパス化したものを両方取っておくこと

 日付+ファイル名+OL(アウトライン化されたもの、納品物)

 日付+ファイル名のみ(編集可能な文字データ)

習性があることを常に想定しておく

アウトライン表示(ctlr+y)

オープンパスになっていないかチェック

重なった線、途切れた線などは線が太いと気づけないことがある

アピアランス(効果)

テキスト(文字が生きた状態)で変形編集をすると文字が太くなったりしてしまう

→アピアランスパネルで調整可能

 テキストのみ

 テキスト+線(上に重なる)

 テキスト+線+線

銭と塗りの位置をパネル内で移動し塗りより下に線を置く

利点

文字のままなので、テキスト編集が可能

注意点として、文字のままなのでアウトライン化すると効果が消えてしまうことがある

対策としてアピアランスの分割をする(分割、拡張)

その他文字を重ねて書いて、背後の文字の太さを太くして2重などもできる

Ctlr+D 繰り返し

Ctlr+C コピー

Ctlr+V 貼り付け

Ctlr+F コピーしたものを手前に貼り付け

Ctlr+B コピーしたものを背後に貼り付け

実際にロゴを作るための案を手書きで出してみる

  1. 題材を決める
    どんな会社か、どんな商品かなどを決める
  2. 何を一番伝えたいのか考える
    会社の理念、商品のコンセプトなど
  3. イメージカラー、イメージのフォントなどを考える
    優しい、強い、おいしそう、楽しそう、おごそか
  4. 手書きでイメージを膨らませる
    会社や商品のイメージを最大限に伝える工夫がなされているか
  5. 実際に書いてみる
  6. カラー、フォント、バランス調整
  7. 色違いやバランスなどを違えたものを数種類作成してみる

\ 最新情報をチェック /

コメント

PAGE TOP