はじめに

今回のブログ記事では、「デザインの歴史とWebデザイン、動画制作について」 について詳しくご紹介します。

デザインとは？

そもそもデザインとは何でしょうか？どう考えれば良いのでしょうか？Webデザイン、動画の構成はどうやるのでしょうか？

デザインの歴史

アーツ＆クラフト運動

19世紀のイギリスで始まったアーツ＆クラフト運動は、ウィリアム・モリスによって提唱されました。「もっといいものを使ってもらいたい」という彼の想いから、機械生産ではなく職人による手仕事の価値を重視し、自然をモチーフにした美しいデザインを目指しました。モリス商会を立ち上げ、人工着色料を使わない製品を制作しました。

しかし、アーツ＆クラフト運動は、あまりにも高価で一般の人々には手が届きませんでした。

アール・ヌーヴォー

アーツ＆クラフト運動は、フランスでアール・ヌーヴォーへと発展しました。イギリス製の自然をモチーフにした芸術がブームとなる一方で、「もっと作りやすくて、安くて、おしゃれなものがほしい！」というニーズが高まりました。

アール・デコ

そんなニーズに応えるように、アール・デコ様式が登場します。直線や幾何学模様をモチーフにし、見た目も美しく、作りやすい、そして大衆でも手の届くものが生まれました。シンプルで機能的なデザインが受け入れられ始めたのもこの頃です。

ドイツ工作連盟

「おしゃれな産業品を作ればよくね？」という発想から、ヨーロッパの芸術や工芸の世界に新しい産業革命を取り入れるドイツ工作連盟が設立されました。

ドイツは、「イギリスに追いつかねば」という強い思いから、芸術性よりも新技術と生産を重視しました。伝統的な芸術では産業革命についていけないと考え、新しい美を創造しようとしたのです。

規格化論争

アール・ヌーヴォーのドンであったヘンリー・ヴァン・デ・ヴェルデは、「規格化とか言ったら、職人の創造性がなくなってしまう」と反論。

バウハウス

バウハウスは、機械化、大量生産に合う新しい芸術を研究する場所として設立されました。

西部開拓とシカゴ派

一方、新大陸アメリカでは西部開拓が進められていました。18世紀中頃に産業革命が起こり、未開の土地は自分たちが頑張ればどんどん住める土地が増え豊かになると信じられていました。

そんなアメリカでは、機能的で効率的な高層ビルを建てられるシカゴ派が登場しました。

フォーディズムとスタイリング

製品を流れ作業で効率的に作るフォーディズムが登場する一方で、「デザインの世界は効率だけじゃなくね？」という疑問も生まれます。

フォード社のライバルであったゼネラルモーターズ（GM）社は、シンプルで安い車だけでなく、細部まで凝った高級車も販売し、「売れる形こそ正義！」という商業主義の考え方が広まりました。

ストリームライン様式とMoMAのMachine Art展

世界中が世界恐慌に陥り、アメリカの企業もどんどん倒産する中、見た目を変えるだけで売れるスタイリングが流行しました。速そうな流線形、かっけぇ！という発想から、ストリームライン様式（後期アールデコ）が登場し、機械生産されたものを美しいものとして扱うようになりました。

ニューヨークのMoMA（ニューヨーク近代美術館）では、機械美術展「Machine Art」が開催され、アートからデザインの展示へとシフトしていきました。

国際様式とモダニズム

第一次世界大戦でヨーロッパは貧しく、アメリカは儲けた上、ナチスの誕生で多くの人が逃げてきた時代。装飾はあってもOKというアール・デコに対し、装飾は悪であるとするモダニズムが登場します。

CIAM（近代建築国際会議）で建築やモダニズムについて議論が重ねられ、現代でも人気の高いモダニズム建築の基礎が築かれました。

ニューバウハウスとフォトジャーナル

バウハウスはナチスによって1933年に解散し、卒業生たちは散り散りになりましたが、シカゴに招かれた卒業生によってニューバウハウスが設立されました。

当時、写真は肖像画の代用品であり、性能も良くありませんでしたが、わかりやすく伝えやすいフォトジャーナルは瞬く間に普及しました。フォトモンタージュを使用してプロパガンダを作った日本の雑誌FRONTは、グラフィックデザインへと繋がっていきます。

WWIIでのデザインの変化とポピュラックス

第二次世界大戦を経て、デザインは大きく変化しました。

• アール・デコ → 商業主義
• モダニズム → 機能主義
• バウハウス → グラフィックデザイン

商業主義が極まれり、売れればとにかく何でも良いというポピュラックスが登場。 WWIIが明けてさらに豊かになったアメリカで、家電が登場し、テクノロジーで余暇ができて豊かになるというアメリカン・ドリームが実現しました。

カラフルで色鮮やか、派手なスタイリング、キャッチーな売り文句が特徴で、豊かなアメリカ、カラー印刷の登場、カラフルなプラスチックの登場などにより、大衆の憧れが大事にされ、売れる形こそ正義という商業主義が加速しました。

グットデザインとは？ ミッドセンチュリー、そして郊外の発明

そんな中、「デザインは、技術や素材に適した形のことである」というグットデザインという考え方も生まれました。ついに形だけを変えて、新製品として毎年売り出す時代が到来し、MoMAでモダン・デザインの展覧会が行われました。

International Style(モダニズム) が流行し、あらゆる家具は消え、椅子だけが残ったミッドセンチュリーの時代。住宅を大量生産するために、分業や流れ作業を建築に応用する郊外が発明されました。

近代都市の誕生と後期モダニズム、そしてポスト・モダン

人の生活も「分業化」し、住む・働く・余暇の3つに分けられるという近代都市が誕生します。

しかし、効率重視の豆腐建築だけではつまらないという反省から、美しい構造を見せる後期モダニズムが登場します。

人の生活を単純化、画一化しすぎたモダニズムは衰退し、人々の生活を「豊か」にするポスト・モダンが登場。モダニズムに楽しさを取り入れようという動きが活発化しました。

ヴァナキュラー、民芸、アノニマス、そして多様性へ

長年愛されて使われることで自然発生で出現したヴァナキュラー、民芸、アノニマスのデザイン。

モダニズム＋楽しそう ではなく、 モダニズム＋個性は？という発想から、ポスト・モダン、ヴァナキュラー、アノニマスは、現代のデザインへと繋がっていき、多様性が尊重される時代へと変わっていきました。

Webデザイン

Webデザインの基礎

Webデザインの4原則は、近接・整列・反復・コントラストです。

近接

同じ情報はまとめて、異なる情報は離す。大分類・中分類・小分類で余白を使い分け、入れ子構造にしたほうが読みやすい。

整列

安易なセンター揃えはやめましょう。基本は左寄せ、ボタン以外は左寄せ！！レイアウトが左右対称な時のみ中央揃えにしましょう。

反復

同じ機能を持っているものは、同じ形、構造をもたせる。

コントラスト

目立たせるものは目立たせる、目立たせないものは目立たせない。弱くするところは徹底的に弱く、目立たせるものは徹底的に強くしましょう。10までの段階なら大胆に1,5,10の段階のみを使用する！

色の基礎知識

色相と彩度と明度の使い分けが重要です。アクセントカラーは5%のみにする。たとえ、イメージカラーが赤だとしてもすべてが赤になってしまうため、赤はここぞという時にとっておきましょう。また、流行色はWebサイトなど何年も使うものには使わないほうが無難です。

色のイメージは、2色合わさって初めて表せるため、色相などをいじって2色目を選びましょう。単なるグレーや黒は臭くなりやすいので、カラーを混ぜるとよいでしょう。

アクセシビリティーチェッカーとWebサイトを作るコツ

見にくいと思ったら、アクセシビリティーチェッカーを使う。

色やレイアウト、構造などはパクって、理論で調整し、自分のものへと昇華しましょう。

動画制作

動画の企画の立て方、テーマの決め方

お題を「なぜ」や「もしも」で情報やアイデアを出す。

お題に対して、なぜを突き詰める「KUMECはおもしろいよ」→「なぜ？」→「～～～だからだよ」→「なぜ～～～なの？」

次に「もしも〇〇がXXだったら・・・」 の文脈で考えてみる。

基本：まず誰に届けるか？何を届けるか？より具体的に：「～の何？」を深めていく。物わかりの悪いおじいちゃんに説明、会話していくイメージで考えましょう。

既知の事柄からテーマ設定し、要素を抽出：その事柄には、どんな要素があるか分解し、誰の視点でそれを描くか？

動画の構成・台本の決め方、テロップの置き方

テーマを決めたら、ブレーンストーミングして、メッセージにしたい内容を決めましょう。

究極は映像だけで示すこと。テロップは補助だと考えましょう。

写真・動画の構図と動画のトランジッション

写真・動画の構図を使うと注目を誘導して、きれいな図を作れます。

主な構図は以下のようなものがあります。

• 三分割構図
• リーディングライン
• 額縁構図
• シンメトリー
• DEPTH
• 日の丸構図
• ネガティブスペース

動画のトランジッションには、

• Smash cut
• Eye Trace
• Standard cut
• Whip pan Transition
• Cause and Effect
• Action and Reaction

まとめ

いかがでしたでしょうか？今回のブログ記事では、デザインの歴史からWebデザイン、動画制作についてご紹介しました。

by Bantam