Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインの基礎

Designsprint
December 15, 2016

 デザインの基礎

Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。

Designsprint

December 15, 2016
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

  1. 「デザインの基礎」
    Webデザイン基礎講義
    currently v 1.1

    View full-size slide

  2. デザインとは?
    2/29
    デザインの基礎

    View full-size slide

  3. 3/29
    デザインとは?
    デザイン(design)[名](スル)
    1.建築・工業製品・服飾・商業美術などの分野で、実用
    面などを考慮して造形作品を意匠すること。「都市を―す
    る」「制服を―する」「インテリア―」
    2.図案や模様を考案すること。また、そのもの。「家具
    に―を施す」「商標を―する」
    3.目的をもって具体的に⽴案・設計すること。「快適な
    生活を―する」
    「Basic Design Note」などから引用・抜粋

    View full-size slide

  4. 4/29
    デザインの語源
    デザインの語源は“計画を記号に表す”という意味のラテン
    語「designare」である。
    デザインとは、ある問題を解決するために思考・概念の組
    み⽴てを⾏い、それを様々な媒体に応じて表現することと
    解釈されている。
    ⽇本では図案・意匠などと訳されて、単に表面を飾り⽴て
    ることによって美しくみせる⾏為と解されるような社会的
    風潮もあったが、最近では語源の意味が広く理解・認識さ
    れつつある。
    形態に現れないものを対象にその計画、⾏動指針を探るこ
    とも含まれ、キャリアデザイン、ライフデザイン等がこれ
    にあたる。

    View full-size slide

  5. 5/29
    美術史から⾒た
    グラフィックデザイン小史
    デザインの基礎

    View full-size slide

  6. 6/30
    《赤像式スタムノス:蛇を絞め殺す幼児ヘラクレス》
    古代
    紀元前〜1C

    View full-size slide

  7. 7/30
    《ミラノの大聖堂》
    ロマネスク時代
    ゴシック時代
    (中世)
    2-14C

    View full-size slide

  8. 8/30
    ルネッサンス時代
    15C

    View full-size slide

  9. 9/29
    ルネッサンス時代
    15C

    View full-size slide

  10. 10/30
    ルネッサンス時代
    15C

    View full-size slide

  11. 11/29
    バロック時代
    バロック
    ロココ
    17-18C

    View full-size slide

  12. 12
    近代
    新古典主義
    ロマン主義
    写実主義
    18-19C

    View full-size slide

  13. 13
    近代
    ラファエル前派
    19C
    /29

    View full-size slide

  14. 14/29
    蒸気機関、鉄鋼、印刷、
    毛織物など様々な産業の
    発達と境構造の変化によ
    り製品の販売が増えるが
    同時に粗悪品が横⾏した。
    産業⾰命による粗悪品の横⾏は、結果的にデザインの
    始まりきっかけとなった。
    産業⾰命
    (18世紀後半〜19世紀)

    View full-size slide

  15. 15/30
    アーツ&クラフツ運動
    ヴィクトリア朝の時代、
    産業⾰命の結果として大
    量生産による安価で粗悪
    な商品があふれていた。
    「モダンデザインの父」
    と呼ばれる思想家・デザ
    イナーのウィリアム・モ
    リスはこうした状況を批
    判して、中世の手仕事に
    帰り、生活と芸術を統一
    することを主張した。
    (1836〜1896)

    View full-size slide

  16. 16/29
    バウハウス
    ドイツ・ヴァイマルに設
    ⽴された、工芸・写真・
    デザインなどを含む美術
    と建築に関する総合的な
    教育を⾏った造形学校。
    また、その流れを汲む合
    理主義的・機能主義的な
    芸術。その活動は現代美
    術に大きな影響を与えた。
    (1919〜1933)

    View full-size slide

  17. 17/30
    アール・ヌーヴォー
    19世紀末から20世紀初頭
    にかけてヨーロッパを中
    心に開花した国際的な美
    術運動。「新しい芸術」
    を意味する。花や植物な
    どの有機的なモチーフや
    自由曲線の組み合わせに
    よる従来の様式に囚われ
    ない装飾性や、鉄やガラ
    スといった当時の新素材
    の利用などが特徴。分野
    としては建築、工芸品、
    グラフィックデザインな
    ど多岐に亘った。
    (19世紀後半〜20世紀)

    View full-size slide

  18. 18/30
    アール・デコ
    アール・ヌーヴォーの時
    代に続き、ヨーロッパお
    よびアメリカ合衆国(ニ
    ューヨーク)を中心に
    1910年代半ばから1930年
    代にかけて流⾏、発展し
    た装飾の一傾向。源流は
    装飾美術。
    幾何学的・記号的表現、
    原色による対比表現など
    の特徴を持つ。グラフィ
    ックデザインのもととな
    った。

    View full-size slide

  19. 19/29
    ⽇本のグラフィックデザイン
    デザインの基礎

    View full-size slide

  20. 20/29
    ⾥美宗次
    ⽇本のグラフィックデザ
    イナーの祖と言われてい
    る。大正時代に渡仏し、
    第二次世界大戦の時期を
    除いて戦前・戦後のパリ
    で活動。主にパリで活動
    した。
    (1904-1996)

    View full-size slide

  21. 21/30
    ⾥美宗次の実績

    View full-size slide

  22. 22/29
    ⻲倉雄策
    ⽇本で「グラフィックデ
    ザイナー」という職種を
    切り開いた。代表作にフ
    ジテレビジョンの旧シン
    ボルマーク(8マーク)
    や⽇本電信電話(NTT)
    のマーク(ダイナミック
    ループ)、1964年東京オ
    リンピックのポスターな
    どがある。
    (1915-1997)

    View full-size slide

  23. 23/29
    その他のグラフィックデザイナー
    Webデザイナーを志望するなら、ひとりふたりくらいは名前と主な
    実績を知っておいてください。
    田中一光
    琳派に大きな影響を受け、代表作にロフトのシンボルマークや無
    印良品のトータルデザインなどがある。
    大貫卓也
    資生堂「TSUBAKI」や新潮文庫の「Yonda?」のプロモーション
    を担当。広告の枠を超え販売施策の設計が得意。
    佐藤可士和
    売れっ子アートディレクター。ユニクロ、楽天、TSUTAYAの部
    ランディング、キリンの商品パッケージなど多数。
    佐藤卓
    ニッカ「ピュアモルト」、ロッテ「キシリトールガム」、大正製
    薬「ゼナ」などの商品デザインを手がける。

    View full-size slide

  24. 24/29
    視覚デザイン
    デザインの基礎

    View full-size slide

  25. 25/30
    視覚デザイン
    工芸
    プロダクト
    デザイン
    空間デザイン
    デザインの中の、視覚要
    素(ビジュアル )つまり
    絵や写真、文字、図表な
    どで情報を伝達すること
    を目的としたデザインの
    総称。
    ビジュアルデザイン、視
    覚伝達デザイン、または
    ビジュアルコミュニケー
    ションデザインとも言う。
    映像や音声など視覚以外
    の伝達方法が含まれる場
    合もある。

    View full-size slide

  26. 視覚デザイン
    デザインの中の、視覚要
    素(ビジュアル )つまり
    絵や写真、文字、図表な
    どで情報を伝達すること
    を目的としたデザインの
    総称。
    ビジュアルデザイン、視
    覚伝達デザイン、または
    ビジュアルコミュニケー
    ションデザインとも言う。
    映像や音声など視覚以外
    の伝達方法が含まれる場
    合もある。
    グラフィックデザイン
    イラストレーション
    タイポグラフィ
    エディトリアルデザイン
    インフォグラッフィクス
    ブックデザイン
    パッケージデザイン

    View full-size slide

  27. 27/29
    「グラフィックデザイン」
    「イラストレーション」
    は、別途個別に取り上げます。
    ※「ブックデザイン」は、Webデザインと直接関連性がないので、説明は諸略します。

    View full-size slide

  28. タイポグラフィ
    活字(あるいは一定の文
    字の形状を複製し反復使
    用して印刷するための媒
    体)を用い、それを適切
    に配列することで、印刷
    物における文字の体裁を
    整える技芸である。

    View full-size slide

  29. エディトリアルデザイン
    新聞・雑誌・書籍・カタ
    ログ・マニュアルなどの
    出版物のデザイン。読み
    手の視線、意図を考えて
    視覚的に効果的な図や写
    真等を整理・配列・編集
    あるいは計画すること。
    紙面構成。
    この仕事をする職種をエ
    ディトリアルデザイナー
    と言うが、グラフィック
    デザイナーと兼ねる場合
    が多く、その境界線はあ
    いまいである。

    View full-size slide

  30. 30/30
    インフォグラッフィクス
    情報、データ、知識を視
    覚的に表現したもの。
    情報を素早く簡単に表現
    したい場面で用いられ、
    標識、地図、報道、技術
    文書、教育などの形で使
    われている。
    また、計算機科学や数学、
    統計学においても概念的
    情報を分かりやすく表現
    するツールとしてよく用
    いられる。

    View full-size slide