とんちんかんなデザインにしないためのアートディレクション講座vol1

こんなときに役立つ授業です

・パーツを作る毎日に不安を感じている
・会社のサイト担当で1人だけの制作部、我流アートディレクションに不安を感じている
・上司のアートディレクターからの依頼を巧くこなしたい


パーツによりすぎて、サイト全体で見ると浮いているボタン、細部にこだわりすぎてレイアウトしにくいパーツなど、独りよがりなとんちんかんなデザインになっていませんか?

パーツ制作物で、接近レンズの視野になっているデザイナーさんに、細部を制作する時も常に広角レンズの目で全体を見渡せる視野を身につける授業です。
最初のコンセプトからかけ離れたオプションの依頼があった場合も、トータルデザインを損なわない手法で、アートディレクターの依頼の意図を的確に判断する手法を学びます。
この後続く、各パーツごとのデザインテクニックの勉強をする前にまず、サイト全体をデザインする手法を学びます。


■受講にあたって準備するもの

Adobe Photoshop (ヴァージョンは問いません)

・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー
ドしてください。
https://creative.adobe.com/ja/products/download/photoshop

・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って
いる事が望ましいです。

・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。
https://helpx.adobe.com/jp/photoshop.html

▼本授業は全2回の連続授業です。両方受講することでより深く学ぶことができます。

・とんちんかんなデザインにしないためのアートディレクション講座vol1
とんちんかんなデザインにしないためのアートディレクション講座vol2

詳細を開く
とんちんかんなデザインにしないためのアートディレクション講座vol1
2014年9月27日公開
01:30:00
とんちんかんなデザインにしないためのアートディレクション講座vol2
2014年9月27日公開
01:20:00
  • 自己紹介&アジェンダ
  • 02:03
  • 前回のとんちんかんデザインの原因のまとめ
  • 01:32
  • アートディレクターの意図を把握したら、制作にとりかかろう!
  • 04:04
  • 実例1:研修サービスの会社
  • 03:22
  • 実例1のアートディレクション対応
  • 05:16
  • 実例2:研修サービスの会社
  • 03:59
  • 実例2:研修サービスの会社に案件を持っていく
  • 09:30
  • 旅行サイトの都市別ホテルページに飛ぶバナーの案件実例
  • 06:27
  • アートディレクターの指示にそって作成してみよう
  • 11:45
  • 実践:アートディレクター対応
  • 10:55
  • 実践:アートディレクター対応2
  • 04:12
  • Q:有料の画像で作ったら、他のWebサイトにも自分が作ったのと同じ感じに見えるWebサイトがあり、見た目が同じになる場合がありますが、そんな時はどうしたらいいでしょうか?
  • 01:58
  • Q:デザインガイドを作る際のルールや手順はありますか?
  • 01:55
  • Q:田中先生は今後ないし既にフラットデザインの時代に日本の制作会社やクライアントもなる、ないし既になっていると思いますか?
  • 02:09
  • Q:デザインが新作かどうかはどうやって見分けるのでしょうか?
  • 01:43
  • Q:ボタンやグローバルナビなど画像で作る場合、日本語表記がベストでしょうか?
  • 03:20
  • Q:案がいいのが浮かばない時や、差し戻しで何がダメか分からない場合、田中先生はどうされますか?
  • 01:34
  • レポート課題発表
開く
【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方
2014年10月4日公開
01:30:00
  • 自己紹介&アジェンダ
  • 01:28
  • 押せる感って一体何?
  • 10:00
  • サイトは押されてなんぼ
  • 10:06
  • ボタン制作実演
  • 01:14
  • レイヤーの中にあるBLUE BUTTONSを使って押せる感を出そう
  • 03:49
  • BIG Button→Over画像を選択して、配置してみよう
  • 03:29
  • Medium Buttons →Overを選択して、配置してみよう
  • 03:06
  • ボタンの切り出しをやってみよう
  • 15:42
  • Normalがみえてしまっている状態 →BigもMediumもNormalを非表示にしよう
  • 07:59
  • コーストボタンを作成する為に、右下のフォルダのアイコン(レイヤーグループ)をクリックする→新しいのができる→gbtと名前をつけよう
  • 01:15
  • 多角形選択ツールを長押し→長方形ツール シェイプ、塗りをなしに(赤ななめの線) 線→白線 3pt
  • 17:57
  • Q:PNG8とPNG24の違いは何かありますか?どちらでしても大丈夫ですか?
  • 01:57
  • Q:CSS3で可能なボタンとは、その知識もやはり必要だと思うのですが、そんな参考になるサイトはありますか?
  • 02:35
  • Q:キーボード操作の考慮に:hover擬似クラスへ:focus擬似クラスを併用することが殆ど啓発されていませんが、どのように考えますか?
  • 00:55
  • Q:フラットデザインのスマホサイトはどうやってボタンのおせる感を出すと良いのでしょうか?
  • 01:02
  • Q:ラスタライズの件ですが、イラストレーターでラスタライズ済みのものをフォトショップで使っても問題ないでしょうか?
  • 02:35
  • Q:CSSとCSS3の違いって何か違いはありますか?
  • 01:48
  • Q:フォントで、小塚のような、メジャーものでも、ラスタライズした方がよいのでしょうか?
開く
【パーツ制作実践】パーツを組み立てる!ランディングページの作り方
2014年10月25日公開
01:30:00
  • 自己紹介&アジェンダ
  • 01:44
  • ランディングページとは
  • 02:00
  • ランディングページを見てみよう
  • 11:01
  • ランディングページの構造について
  • 01:57
  • スクーWebデザイナー学部を訴求してみよう
  • 11:40
  • 僻地在住者向けにランディングページを作ってみよう
  • 04:30
  • 2次元CGを描く趣味を持った層向けにランディングページを作ってみよう
  • 05:22
  • 既にWeb制作に携わっている層向けにランディングページを作ってみよう
  • 05:23
  • Q:画面サイズはデバイスによっていろいろあると思いますが、ファーストビューのサイズ(横×縦 のピクセル数)はどのくらいで考えれば良いでしょうか?
  • 03:39
  • 前々回のレポート課題の添削
  • 09:33
  • 前々回のレポート課題の添削②
  • 02:01
  • 前々回のレポート課題の添削③
  • 01:11
  • 前々回のレポート課題の添削④
  • 01:06
  • 前々回のレポート課題の添削⑤
  • 07:26
  • Q:スキルは当然必要ですが、年齢や過去の職歴は関係あると思いますか?
  • 04:23
  • Q:ランディングページの文章の所はPhotoshopなどでJPGで作ってHTMLで貼り付けるのがいいのですか?
  • 04:14
  • Q:ランディングページでキャッチコピーを考えるのに、おすすめなサイトや勉強の仕方などありますか?
  • 03:35
  • Q:まったく会社に所属しないでフリーでという道は険しいのでしょうか?
  • 02:40
  • Q:コンバージョンボタンをいくつも配置して行く間に、アクションを起こさせるための要素(「こんな特徴が」とか「こんないいことが」とか)を入れていく訳ですが、その要素の順番などを決めるコツはありますか?
  • 03:04
  • レポート課題発表
開く
デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話
2014年10月13日公開
01:30:00
  • 自己紹介&アジェンダ
  • 02:33
  • 悩まなくていいところ、悩むべきところをしっかり理解
  • 01:47
  • 最初は理論。センスは関係ない
  • 03:49
  • 神は細部に宿る?
  • 03:14
  • 良いデザインとは?
  • 03:50
  • 問題を解決できるデザイン
  • 03:55
  • すべて理論
  • 02:40
  • 相手に伝えるコミュニケーション
  • 04:33
  • 整列と反復
  • 04:57
  • アフォーダンス
  • 02:50
  • デザイン三原則の近接
  • 05:00
  • 統一感や美しさのために
  • 03:02
  • 見るべきものを、見てもらうために
  • 01:48
  • 文字の大きさに注意
  • 03:35
  • 明確な優先順位を作る
  • 02:40
  • 伝えたい情報の順番が正しく読まれていくか
  • 02:50
  • 今回の授業のバナーを実例にみてみよう
  • 02:55
  • 優先順位を細かく付けていこう
  • 01:50
  • 商業デザインとアートの違い
  • 03:50
  • デザイナーとのコミュニケーションに困っているディレクターへ
  • 03:47
  • デザインを考える順番が分かれば
  • 03:48
  • Q:センスではなく理論だということは、訓練や努力で出来るようになるということだと思いますが、 どのような訓練や努力を日々すれば、いいのでしょうか?
  • 02:20
  • Q:フラットデザインの時代になっていますが、フラットデザインで作るなら、 ボタンもグラテやシャドウは絶対に使ってはいけないものなのでしょうか?
  • 01:46
  • Q:ヒアリングの段階で、最大限の認識の差を出さない為にも、必ず押さえるべき項目を教えて下さい。
  • 02:02
  • Q:クライアントとディレクションが直接とれない場合(コンペ式受注など)で、もらえる依頼内容の情報が少ないときは、どういう風に優先順位を考えたらよろしいでしょうか?
  • 02:52
  • Q:イシジマ先生のプレゼンのコツを教えて下さい。
  • 03:33
  • Q:デザインではなく、クライアントや営業からソフトの技術的なことで、ちんぷんかんぷんな質問をされた時はどう対応したらいいでしょうか。
  • 04:11
  • Q:クライアントの窓口の方はその上司の言いなりで要望が日々変わります。この場合先生はどう対応していますか。
開く
書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術
2014年10月20日公開
01:30:00
  • 自己紹介&アジェンダ
  • 03:45
  • デザイナーとのコミュニケーションに困っているディレクターへ
  • 11:38
  • 同じターゲット、同じニュアンスで伝えているものを探す
  • 20:39
  • センスがないと敬遠している人へ
  • 16:16
  • 書体選びのポイント
  • 05:10
  • ソフトは使えるけど、デザイン力に自信がない人へ
  • 12:45
  • Q:先生はアイデアや参考になるデザインをストックしたり、まとめるときは、何かソフトとか使ってますか?
  • 01:04
  • Q:デザインを作るときも、見るときも、イメージやニュアンスの違いを言語化するのが難しいです。色や書体、レイアウトがもたらす効果を言語化するにはどういった訓練をすればいいでしょうか?
  • 02:53
  • Q:日本酒とワインと招き猫と見たからに怪しい中国製の化粧品の素材もらって「高級感がテーマで」とチラシ作成の依頼をされたことがあるのですが、先生だったらどのようにアプローチしますか?
  • 01:44
  • Q:バナー制作を行ったときに、青と黄色を使った所、この二つは愛称の悪い色なので一緒に近接して使わないように言われました。補色に近いからかなと思ったのですが、補食に近い色は愛称の悪い色なので一緒に近接して使わないべきなのでしょうか?
  • 01:37
  • Q:補色の効果的な使い方が知りたいです!
  • 01:06
  • Q:イシジマさんは街中でデザインの勉強のために看板やお店のポップやチラシやショップカードなど見たあとに自分なりに咀嚼するときに心がけることってなにかありますか。
  • 03:22
  • Q:先生はアイディアにつまったときにヒントをもらうものはなんですか?またよくインスピレーションをもらうものはんですか?
  • 03:28
  • Q:一度無難な組み合わせを見つけてしまうとなかなか色使いで冒険できなくなるのですが、そんな時に抜け出すにはどうしたらよいでしょう?
  • 01:08
  • Q:フリーのフォントでおすすめのものはありますか?
開く
こんな人にオススメ
WEBデザイナー(中級)

アートディレクターを目指すWEBデザイナーさん・デザイナーの卵さん

スライド資料
授業で使用するファイル
担当の先生
学生代表
  • 鈴木 顕照

    鈴木 顕照

    スクー放送部

関連授業