Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインの基礎
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Designsprint
December 15, 2016
Design
1
190
デザインの基礎
Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。
Designsprint
December 15, 2016
Tweet
Share
More Decks by Designsprint
See All by Designsprint
spj-01book2019_.pdf
designsprint
0
150
ExOスプリント
designsprint
0
350
designsprint デザインスプリントのすすめ
designsprint
0
170
DESIGN SPRINT lecture and Workshop Strategic IT Management in Yahoo! LODGE
designsprint
1
140
Exponential Transformation - ExO SPRINT
designsprint
3
560
ExO SPRINT 説明会
designsprint
0
110
デザインスプリント1日説明会+ワークショップ
designsprint
0
200
Designsprint-Massive-Transformative-Purpose01.pdf
designsprint
0
290
designsprint-Jobs-To-Be-Done01
designsprint
0
140
Other Decks in Design
See All in Design
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
320
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
2
490
From the Visible Crossroads: Turning Outputs into Outcomes
takaikanako
2
1.1k
Figmaレクチャー会Part1 基本のき編@千株式会社 社内勉強会
designer_no_pon
2
250
デザインするために「多様性」について考える
iflection
0
180
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
0
380
root COMPANY DECK / We are hiring!
root_recruit
2
26k
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
730
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
7k
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
300
mount_company_profile
mount_inc
0
4.9k
Featured
See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
120
A better future with KSS
kneath
240
18k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Odyssey Design
rkendrick25
PRO
1
490
Art, The Web, and Tiny UX
lynnandtonic
304
21k
GraphQLとの向き合い方2022年版
quramy
50
14k
The SEO Collaboration Effect
kristinabergwall1
0
350
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Crafting Experiences
bethany
1
48
Writing Fast Ruby
sferik
630
62k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
How STYLIGHT went responsive
nonsquared
100
6k
Transcript
「デザインの基礎」 Webデザイン基礎講義 currently v 1.1
デザインとは? 2/29 デザインの基礎
3/29 デザインとは? デザイン(design)[名](スル) 1.建築・工業製品・服飾・商業美術などの分野で、実用 面などを考慮して造形作品を意匠すること。「都市を―す る」「制服を―する」「インテリア―」 2.図案や模様を考案すること。また、そのもの。「家具 に―を施す」「商標を―する」 3.目的をもって具体的に⽴案・設計すること。「快適な 生活を―する」
「Basic Design Note」などから引用・抜粋
4/29 デザインの語源 デザインの語源は“計画を記号に表す”という意味のラテン 語「designare」である。 デザインとは、ある問題を解決するために思考・概念の組 み⽴てを⾏い、それを様々な媒体に応じて表現することと 解釈されている。 ⽇本では図案・意匠などと訳されて、単に表面を飾り⽴て ることによって美しくみせる⾏為と解されるような社会的 風潮もあったが、最近では語源の意味が広く理解・認識さ
れつつある。 形態に現れないものを対象にその計画、⾏動指針を探るこ とも含まれ、キャリアデザイン、ライフデザイン等がこれ にあたる。
5/29 美術史から⾒た グラフィックデザイン小史 デザインの基礎
6/30 《赤像式スタムノス:蛇を絞め殺す幼児ヘラクレス》 古代 紀元前〜1C
7/30 《ミラノの大聖堂》 ロマネスク時代 ゴシック時代 (中世) 2-14C
8/30 ルネッサンス時代 15C
9/29 ルネッサンス時代 15C
10/30 ルネッサンス時代 15C
11/29 バロック時代 バロック ロココ 17-18C
12 近代 新古典主義 ロマン主義 写実主義 18-19C
13 近代 ラファエル前派 19C /29
14/29 蒸気機関、鉄鋼、印刷、 毛織物など様々な産業の 発達と境構造の変化によ り製品の販売が増えるが 同時に粗悪品が横⾏した。 産業⾰命による粗悪品の横⾏は、結果的にデザインの 始まりきっかけとなった。 産業⾰命 (18世紀後半〜19世紀)
15/30 アーツ&クラフツ運動 ヴィクトリア朝の時代、 産業⾰命の結果として大 量生産による安価で粗悪 な商品があふれていた。 「モダンデザインの父」 と呼ばれる思想家・デザ イナーのウィリアム・モ リスはこうした状況を批
判して、中世の手仕事に 帰り、生活と芸術を統一 することを主張した。 (1836〜1896)
16/29 バウハウス ドイツ・ヴァイマルに設 ⽴された、工芸・写真・ デザインなどを含む美術 と建築に関する総合的な 教育を⾏った造形学校。 また、その流れを汲む合 理主義的・機能主義的な 芸術。その活動は現代美
術に大きな影響を与えた。 (1919〜1933)
17/30 アール・ヌーヴォー 19世紀末から20世紀初頭 にかけてヨーロッパを中 心に開花した国際的な美 術運動。「新しい芸術」 を意味する。花や植物な どの有機的なモチーフや 自由曲線の組み合わせに よる従来の様式に囚われ
ない装飾性や、鉄やガラ スといった当時の新素材 の利用などが特徴。分野 としては建築、工芸品、 グラフィックデザインな ど多岐に亘った。 (19世紀後半〜20世紀)
18/30 アール・デコ アール・ヌーヴォーの時 代に続き、ヨーロッパお よびアメリカ合衆国(ニ ューヨーク)を中心に 1910年代半ばから1930年 代にかけて流⾏、発展し た装飾の一傾向。源流は 装飾美術。
幾何学的・記号的表現、 原色による対比表現など の特徴を持つ。グラフィ ックデザインのもととな った。
19/29 ⽇本のグラフィックデザイン デザインの基礎
20/29 ⾥美宗次 ⽇本のグラフィックデザ イナーの祖と言われてい る。大正時代に渡仏し、 第二次世界大戦の時期を 除いて戦前・戦後のパリ で活動。主にパリで活動 した。 (1904-1996)
21/30 ⾥美宗次の実績
22/29 ⻲倉雄策 ⽇本で「グラフィックデ ザイナー」という職種を 切り開いた。代表作にフ ジテレビジョンの旧シン ボルマーク(8マーク) や⽇本電信電話(NTT) のマーク(ダイナミック ループ)、1964年東京オ
リンピックのポスターな どがある。 (1915-1997)
23/29 その他のグラフィックデザイナー Webデザイナーを志望するなら、ひとりふたりくらいは名前と主な 実績を知っておいてください。 田中一光 琳派に大きな影響を受け、代表作にロフトのシンボルマークや無 印良品のトータルデザインなどがある。 大貫卓也 資生堂「TSUBAKI」や新潮文庫の「Yonda?」のプロモーション を担当。広告の枠を超え販売施策の設計が得意。
佐藤可士和 売れっ子アートディレクター。ユニクロ、楽天、TSUTAYAの部 ランディング、キリンの商品パッケージなど多数。 佐藤卓 ニッカ「ピュアモルト」、ロッテ「キシリトールガム」、大正製 薬「ゼナ」などの商品デザインを手がける。
24/29 視覚デザイン デザインの基礎
25/30 視覚デザイン 工芸 プロダクト デザイン 空間デザイン デザインの中の、視覚要 素(ビジュアル )つまり 絵や写真、文字、図表な
どで情報を伝達すること を目的としたデザインの 総称。 ビジュアルデザイン、視 覚伝達デザイン、または ビジュアルコミュニケー ションデザインとも言う。 映像や音声など視覚以外 の伝達方法が含まれる場 合もある。
視覚デザイン デザインの中の、視覚要 素(ビジュアル )つまり 絵や写真、文字、図表な どで情報を伝達すること を目的としたデザインの 総称。 ビジュアルデザイン、視 覚伝達デザイン、または
ビジュアルコミュニケー ションデザインとも言う。 映像や音声など視覚以外 の伝達方法が含まれる場 合もある。 グラフィックデザイン イラストレーション タイポグラフィ エディトリアルデザイン インフォグラッフィクス ブックデザイン パッケージデザイン
27/29 「グラフィックデザイン」 「イラストレーション」 は、別途個別に取り上げます。 ※「ブックデザイン」は、Webデザインと直接関連性がないので、説明は諸略します。
タイポグラフィ 活字(あるいは一定の文 字の形状を複製し反復使 用して印刷するための媒 体)を用い、それを適切 に配列することで、印刷 物における文字の体裁を 整える技芸である。
エディトリアルデザイン 新聞・雑誌・書籍・カタ ログ・マニュアルなどの 出版物のデザイン。読み 手の視線、意図を考えて 視覚的に効果的な図や写 真等を整理・配列・編集 あるいは計画すること。 紙面構成。 この仕事をする職種をエ
ディトリアルデザイナー と言うが、グラフィック デザイナーと兼ねる場合 が多く、その境界線はあ いまいである。
30/30 インフォグラッフィクス 情報、データ、知識を視 覚的に表現したもの。 情報を素早く簡単に表現 したい場面で用いられ、 標識、地図、報道、技術 文書、教育などの形で使 われている。 また、計算機科学や数学、
統計学においても概念的 情報を分かりやすく表現 するツールとしてよく用 いられる。