2023/09/29

実技ECサイトデザイン実習②

今日のテーマ

馴染んでください

クライアントへの確認方法

デザインした制作物をクライアント(発注者)に確認を入れる場合は、そのまま見せる事が最も解りやすい方法。バナーを作成したらページにそのまま当て込んで(テストアップ等)確認をとる。

ワンポイントアドバイス

バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。

今日の課題

バナー作成練習 当て込み

【作品】

Re:See | アイウェアブランド

 https://resee.jp/

■ 2パターン(使用ソフト:Photoshop 作成時間:各40分)

■バナーサイズ(953px × 794px)

色調補正を行いよりサイトに馴染むような色合いにしました。

①パターン目                    

②パターン目

①                       ②

【作成ポイント】

老若男女眼鏡でおしゃれが楽しめるをコンセプトに考えて作成しました。

【元画像】

眼鏡のみのバナー部分を自身で作成したバナーに置き換えました

【反省点】

・最初に作成していたバナーが画像解像度を誤って作成していた。

→ 300dpi×(印刷用) 72dpi〇(web用)

・最初に作成するバナーのサイズを誤ってしまったため、はめ込んだ際に違和感が出た。

→予め作成する場所のサイズを見ておく

・2パターン目の文字が白く背景と同化して見える

→ドロップシャドウを背景と同じくらいの色味でつける

2023/09/23

実技ECサイトデザイン実習①

今日のテーマ

サムネイル画像について

サムネイル画像とは?

サムネイル画像とは、親指(サム)の爪(ネイル)のように小さい画像という意味で、実際に撮影した画像から解像度を下げたり、圧縮したりするなどの手法で、ファイルサイズを小さくしたデータ。 情報量が少ないので読み込みが早く、一覧表示で多くの画像を素早く見ることができる。

今日の課題

サムネイルを作成してportfolioサイトに目標二つ上げよう

(楽天サイトの規定を参考に作成)

  • 外枠を付けない
  • 背景は白か写真のままの背景
  • テキストは20%以内

サムネイル3つ

左 210×210 右 600×600

【FUJIFILM カメラ】

使用ソフト|Illustrator 制作時間|60分

【Diptyque 香水】

使用ソフト|Illustrator 制作時間|20分

【黒毛和牛】

使用ソフト|Illustrator 制作時間|30分

サムネイル作成をしての感想

楽天などのECサイトにはガイドラインがあり、それぞれに順って作成をしていかなければペナルティがあるので、作成する際は必ず確認を行うことが大切であると感じた。また、食品は色彩調整がとても重要であると学びました。色味によって美味しそうであるかそうで無いかが今って来るため、クリックしたくなるような画像を使用することことが必要であると感じた。また、フォントのサイズ感は楽天のサムネイルだと210×210で見えるか見えないかが求められてくる重要性も感じた。

反省点

①のカメラは左下の4つの文字が少し小さかった

②の香水は右下のフォントが小さかったため大きく調整する

③のお肉は色彩調整ができたのでロゴやフォントにもう少し時間を掛ける

作品のこだわった点

①はかっこいい雰囲気が出るようにコントラストを調整しました。また、フォントは軽いを一番に強調したかったため、【軽い】の文字を大きく見せました。公式感が出るようにFUJIFILMのロゴを入れました。

②はディプティックのシックな雰囲気が出るようにフォントシンプルでオシャレに見えるようなものにしました。また香りが爽やかなものなので、背景が明るいものを選びました。

③のお肉はよりお肉が美味しそうに見えるように色彩調整を行い、トーンカーブなど取り入れました。また、高級感が出るように、黒と金を基調にし一番目立たせたいグラムを赤色にしました。

まとめ

  • サムネイルのサイズで見えるようなフォントのサイズ設定
  • ECサイトでのガイドラインを確認
  • 食品の色彩調整
  • 企業によっての色彩感覚(ex.サンリオ→パステル等)

2023/09/20

学科ECサイト運用

本日のテーマ

まずはバナー「模写」で表現の完全コピーを目指そう

覚えておくとよい基本操作

  • レイヤースタイル
  • ブレンドモード
  • 塗りつぶしツール

バナー政策で覚えておきたい復習

  • スマートオブジェクト
  • 調整レイヤー
  • トリミング復習
  • レタッチ復習
  • クリッピングマスク
  • レイヤーマスク
  • ベクトルマスク

今日の課題

ご自身で選んだジャンルのバナー模写を作成し、portfolioサイトへ投稿しよう

模写作品

①【PAL お友達紹介してポイントプレゼント】

使用ソフト|Photoshop 制作時間|90分

(見本)                    (作品)

参考サイト

https://www.palcloset.jp/display/article/detail/?acd=200515all_001

【Starbucks Coffee おさつバター】

使用ソフト|Photoshop 制作時間|90分

(見本)                        (作品)     

参考サイト

https://www.starbucks.co.jp/index.html

作成してみての感想

レイヤーの順番が大切であると改めて感じました。また、サイズも全く同じに模写するのであれば事前にプロパティで確認しておく必要があるなと感じた。

反省点

②のスタバはサイズを最初に確認していなかったため違うサイズになってしまいました。時間がなく修正する時間がなかったため、このをと修正する。

2023/09/14

実技 写真合成・補正加工実習①

今日のテーマ

DM・ポストカードを作ってみよう ・・・ 定型(郵便) はがきサイズ:100×148mm

CM・ポストカード制作のポイント

可視性と配色を意識してみよう。

写真に文字を乗せる時はとにかく可視性に気を付ける。
配色のバランスや影を付けたり、ぼかしやオーバレイなどの工夫を考え、写真の世界観を壊さないように表現する。

今日の基本操作

  • 画像解像度
  • モード
  • 配置

画像解像度

ピクセル寸法は、画像の幅と高さのピクセル総数を示す。解像度はビットマップ画像の細かさで、1 インチあたりのピクセル数(ppi)で示される。1 インチあたりのピクセル数が増加すると、解像度は高くなる。一般的に、画像の解像度が高いほど、プリントした画像の品質が高くなる。

モード

Adobe Photoshop を使って、1 つのカラーモードから別のカラーモードに変換する(CMYK から RGB、カラーからグレースケールなど)

配置

Illustratorの画像配置 リンク画像と埋め込み画像の違いと正しい使い方. Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つの方法がある。

デザインの基本「配色デザイン」

印刷物には「」を欠かすことができない。白黒の単調なものよりも、いくつかの色を使ったものの方が魅力的ですし、理解を助けてくれることもしばしばある。適当に色を選んだり、むやみにたくさんの色を使うことはよくありません。色の正しい使い方を覚えておくと、快適で見やすい発表資料ができる。

今日の課題

「bonheur coffee Grand Open」

【使用した画像】

【ロゴ】

【内容】

架空のコーヒーショップのオープンDMを作成しました。コンクリート調のお店をイメージして落ち着いたシックな雰囲気を出すために文字は黒くし、オープンの日付を目立たせるために黄色の文字を使用しました。珈琲の中にお店のロゴを作成し、珈琲の泡のようなイメージで入れました。

2023/09/09

学科DTP基礎【オンライン】

今日のテーマ

納品する作品の準備③「DTP=印刷物」

DM制作のポイント

可視性と配色を意識してみよう

写真に文字を載せる時はとにかく可視性に気をつけよう。配色のバランスや影をつけたり、ぼかしや、オーバーレイなどの工夫を考え、写真の世界観を壊さないように表現してみよう。

ベクターデータとビットマップデータ

Adobe Illustratorは、Adobeシステムが販売するベクターデーターイメージ編集ソフトウェアである。Adobe Photoshopは、Adobeシステムズが販売しているビットマップ画像編集アプリケージョンソフトウェアである。

ベクターデータ

ベクターデータとは、図形やイラストなどのデータを占める Illustratorが採用しているベクタ形式のことで、画像を点の座標とそれを結ぶ線などの数値データをもとにして再現していることを指す。

ビットマップデータ

ビットマップデータとは、 Photoshopの画像データなどのことで、ピクセル(点)の集合体として、画像データを保持している。一般的に写真のような画像データは、ビットマップで構成されていることが多く、拡大や変形をすると画像が荒れてしまう性質がある。

CMYKとRGB

RGBカラーは、光の三原色「R(赤)・G(緑)・B(青)」のことです。
PCのモニターやデジカメ、スキャナなどは、このRGBカラーで色が表現されています。これらは混ぜれば混ぜるほど色が明るくなり、白色に近づいていくため『加法混色』と言われている。CMYカラーは、色料の三原色「C(シアン)・M(マゼンタ)・Y(イエロー)」のことです。これらは混ぜれば混ぜるほど色が暗くなり、理論上は黒色に近づいていくため『減法混色』と言われている。理論上と書いたのには訳があり、実際にはどんどん濁った灰色になっていくのですが、一般的にイメージする『黒色』にはなってくれない。 プロセスカラー印刷では、黒の部分を引き締めるために、シアン(C)・マゼンタ(M)・イエロー(Y)にブラック(K)のインキを加えた4色(プロセスカラー)でフルカラーを表現している。

2023/09/08

イラストロゴ作成実習④

今日のテーマ

名刺作成

文字の(フォント)デザインについて

まず、フォントとはすでにデザインされている文字であると考えましょう。既に特徴や印象を持っていていて、さらに昨今では様々なフォントが存在している。ここでは、フォントの基礎知識を確認してみよう。

【おすすめフォント】

・源ノ角ゴシック
・源ノ明朝
・貂明朝
・A-OTF UD新ゴ 
・筑紫A丸ゴシック
・VDL ロゴJrブラック
・TA-F1ブロックライン 
・TBシネマ丸ゴシック
・VDL ペンレディ
・砧 山本庵クラシック

本日の基本操作

  • トリムマーク
  • パスのオフセット
  • 配置
  • Adobe Font(Typekit)

トリムマーク

トリムマーク(トンボ)とは、印刷時や、断裁位置を明確にするため必要不可欠な「しるし」のこと。内トンボは仕上がり線を示しており、内トンボから外トンボの間は太刀落としのための塗りたし部分を示している。

パスのオフセット

「オフセット」という言葉にあまり馴染みはないでしょう。しかし、この機能を覚えておくと、イラレの使い方の幅が広がる可能性がある。

配置

Illustratorの画像配置リンク画像と埋め込み画像の違いと正しい使い方、Illustratorに画像を配置する場合、「リンク配置」と「埋め込み」配置の、二つがある。

「リンク配置」

別の場所に保存してある画像をファイルに紐づける方法。 イラストレーターのファイル自体には「画像がどこに保存されているか」という情報しかないため、常にリンクをたどって画像を参照しなければならない。

「画像埋め込み」

使いたい画像データをまるごとイラストレーターのファイルに取り入れる方法。

Adobe Fontz(Typekit)

Adobe Creative Cloudユーザーが利用できるサービスの一つ。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能。
(PhotoshopやIllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応している。)

引き続きの基本操作

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

文字のデザインのポイントとして

文字や文章の「読みやすさ」は、可読性、視認性、判読性という三つの要素からなる。「可読性」とは、文章が読みやすいか、「視認性」とは、パッとみた瞬間の認識しやすさ、「判読性」とは、誤読がないか、と言う指標。書体(フォント)の種類や文字のサイズを変えたり、行間やも時間を調節することで、これらの要素を高めることができる。ただし、どの要素を優先させるかは資料の目的や状況によって変わる。プレゼンのPowerPointスライドなどでは視認性と判読性を、申請書などのWord文書などでは可読性を重視する。

レイアウトデザインのポイントとして(復習)

作成した作品を改めてみた時、「配置した内容のグループ化」「縦横の整列」「表現のルール化」「表現の差別化」「余白」を改めてみてみよう。

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置することです。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所においたり、という簡単なこと。「理論やストーリーをレイアウトする」ことが大切であるということを忘れない。

今日の課題

名刺を作成し投稿

①coffee shopの名刺をイメージしました

DM作成の際に作成したcoffee shopのロゴを使用しました。また名前が一番伝わるようにフォントを大きくしました。

②八百屋さんの名刺をイメージして作成

こちらも名前が一番最初に伝わるように大きくしました。また、表面は色味で八百屋さんが伝わるよう、裏面ではしっかりと色とイラストを使って八百屋の雰囲気を出しました。

2023/09/05

実技イラストロゴ作成実習③

今日のテーマ

アクセスマップの作成

作成のポイント

まず目的地を中心に配置しレイアウトを考えてみると良い。
また、土地勘のない場合はストリートビューなどを利用すると便利。

レイアウトデザインのポイント

作成した作品を改めてみたとき、「配置した内容のグループ化」「縦横の整列」「表現のルール化」「余白」を改めてみてみる。これら5つを踏まえて、2提案(ブラッシュアップ)した作品を作成してみよう。

レイアウトデザイン

見やすいレイアウト、わかりやすいレイアウトを作るときの重要なポイントは、ただ闇雲に文字や絵を配置するのではなく、発表者の頭の中にある「ロジック」や「事柄と事柄の関係性」に即して文字や絵を配置すること。関係性の強いもの同士は、近くに配置したり、同じ色を使ったり、線で結んだり、大切な事項を目立つ色にしたり、目立つ場所に置いたり、という簡単なこと。「理論やストーリーをレイアウトする」ことが大切である。

本日の基本操作

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

線パネル

線パネルでは、線の太さを設定するだけではなく、線の両端の形や、過度の形を変えることができる。また、点線や↓も作ることができる。

アピアランスパネル

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

スタイライズ

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

クリッピングマスク

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

アウトライン

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

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

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

アピアランスの分割

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

今日の課題

千葉県東金市 『themol』

JR東金駅から徒歩5分

2023/09/02

ユーザーインターフェイス基礎②【オンライン】

今日のテーマ

納品する作品の準備②

名刺作成

「名刺」は、名前や住所、連絡先などを印刷したクレジットカードほどの大きさの紙(主に91×55m)。名刺の主な役割は「自己紹介ツール」であり、初対面の相手に自分の名前や連絡先、所属などのプロフィール情報を伝える。名刺デザインは、「レイアウトデザイン」「文字デザイン」「配色デザイン」の全てを意識して制作する。まずは、「レイアウト」91×55mの中で、面積比をいい気しながら、見せたい順番を作ってレイアウトしよう。

2023/09/26

学科ECサイトデザイン基礎②【オンライン】

今日のテーマ

バナーは作る過程も大事!

ポートフォリオサイトに乗せるバナー等の作品は、ブラッシュアップも含めて掲載しましょう。最初に作成したバナーから、他のデザインを見たり聞いたりして、もっと良い作品にしていく過程も解り易く掲載して「制作過程」を明確にして成長力もアピールしちゃいましょう!!

今日のテーマ②

プロとして写真利用のルールの理解を高めておきましょう

Webというお仕事ですから、当然これらのルール(法律)について理解を高めておかなければならない。Webの法律は過渡期!
これから新たな法律が制定される可能性もあるかもしれないし、逆に法律が追いつかない技術が生み出される可能性もある。
まずは、現在のルールの理解を高めて良い作品に利用していこう。

2023/09/22

学科 ECサイトデザイン基礎①【オンライン】

今日のテーマ

ECのお仕事を理解しよう

ECサイト

ECサイトとは、自社の商品やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerceの略。 複数の企業や個人商店がインターネット上の1か所で出店する形態のウェブサイトは、電子商店街の項目を参照。

one point

まずは様々な作品を見てみようみて真似してまた見るの繰り返しが上達のコツ!!!