この記事はUX CollectiveのThe Guide To Designを翻訳転載したものです。配信元・著者の許諾のもと配信しています。
翻訳元記事：Chapter 7 Balancing form & function
デザインとは、見た目だけではなく、機能的なものでもあります。この2つのマインドセットのバランスを上手にとることが、デザイナースキルの至高の目標なのです。
右脳も左脳もデザイナーとして等しく価値があると言ったらどう思いますか？
ゴール
グラフィックデザインの基本的な概念と、それがデジタルプロダクトにどのように応用されるかを探求します。
まず、デザインとは単に綺麗なものを作ることだという迷信を打ち破ることから始めましょう。メディアの性質を考えると、デジタルプロダクトのデザインでは、インターフェイスの背後にあるロジックを考え出すことにデザイナーは力を注いでいます。デザイナーの一日の大部分は、頭の中の論理的な部分を使い、洗練されたインタラクションをどのように機能させるかを考えることに費やされています。
また、デザイナーは製品を美しくシンプルに見せたいと考えています。人々がどのように体験したか、ひいてはブランドをどのように認識するかにおいて、美学が重要な役割を果たしています。クリーンなビジュアル、明確に定義されたタイポグラフィの階層、調和のとれたグリッドなどは、デザイナーが視覚的にバランスのとれた製品を構築するために使用できる要素の一部です。さらに、色、イメージ、動きを適切に使うことで、デザイナーはユーザーのさまざまな感情を喚起する製品を作ることができます。
この機能（ユーザビリティ）と見た目（美学）のバランスをとる行為は、デジタルデザイナーであることの最もやりがいとやりがいのある部分の一つです。このことについてはよく耳にするでしょう。企業によっては、この2つの考え方が分離されていて、結局、2人の異なる専門家がこの問題のどちらか一方を見ていることになります。他の企業では、1人の専門家が両方を担当しているのを目にすることがあります。現実には、見た目と機能は切り離すことができません。人によってはどちらか一方を重視する人もいるかもしれませんが、デザイナーとしては両方を理解し、進化し続ける必要があります。
“情報は理解されて初めて役に立つ”
Muriel Cooper
グラフィックデザインは、タイポグラフィー、写真、図解、イラストを使用した、視覚的なコミュニケーションと問題解決のプロセスとして定義することができます。グラフィックデザインは身の回りのいたるところにあります。ベッドの横に置いてある本の表紙。朝食に飲んだオレンジジュースのラベル。リビングの壁に貼ってある映画のポスター。このサイトのイラスト。視覚的に魅力的なものをつくり、感動を呼び起こし、物語を語るというのは、人類の太古の昔からの概念です。
視覚的に魅力的とされるものの質は、歴史の中でかなり劇的に変化してきました。スマホにインストールされているアプリをクリックしてみると、デジタル製品のデザインに関しては、デザイナーはビジュアルスタイルのかなり狭い範囲を追いかけてきたことに気づくでしょう。その狭いスタイルの中にあっても、年々、特定のビジュアルのトレンドが流行っては消えていくのを目にします。
“スタイルは流行りすたりがある。良いデザインとは言語であって スタイルではない”
Massimo Vignelli
グラフィックデザインの歴史だけでなく、美術史も勉強しておくことは、デザイナーとして本当に大切なことだと思います。美術運動の名前や日付を覚えることよりも、その時代に何を表現していたのかを理解することが重要です。多くの場合、アートやデザインの成果物（絵画、ポスター、彫刻、建築物など）は、作り手が人生や社会、政治をどのように見ているのかというメッセージを発信しているのです。
20世紀初頭にそれまでの様式の過剰な装飾に対抗して発展した芸術運動であるモダニズムについて聞いたことがあるかもしれません。また、大量生産の原則と個人の芸術的なビジョンを統合し、快適な美学と日常的な機能を融合させることを目指したドイツの芸術学校、バウハウスもその一つです。この時代に定義された仕事やデザインの原則の多くは、今でも私たちが目にするデジタルプロダクトに影響を与えています。過去を理解することは、次の時代を創る上で重要なことです。
ユーザーインターフェース(UI)のベストプラクティスやトレンドにすぐに飛びつくのではなく、デザインのもっと基礎的な原則を学ぶことで、長年使えるスキルを身につけることができます。以下の記事・書籍リストは出発点に過ぎませんが、興味をそそられるものを見つけたら、これらの入門的な概念をさらに探求してみてください。
記事・書籍リスト
基礎的なデザインの原則を、実際に適用された視覚的な例を使ってわかりやすく説明しています。
ウィリアム・リドウェル, クリティナ・ホールデン、ジル・バトラー著
お近くの図書館で借りるか、書店で買ってください。
2. Refactoring UI（翻訳版なし）
エンジニアの視点から具体的に解説した、美しいインターフェースの設計方法。
Adam Wathan, Steve Schoger著
書籍Refactoring UIは、著者サイトから電子版が購入できます。
3. グラフィックデザインの歴史（Graphic design history）
Encyclopædia Britannica (35分)
4. バウハウスがアートとデザインの最も影響力のある学校として生き続けている理由（Why the Bauhaus lives on as the most influential school of art and design）
Michelle Chiu (5分)
5. 視覚的な階層構造の基礎（The fundamentals behind visual hierarchy）
Pascal Potvin (9分)
6. プロダクトデザインにおけるビジュアルの力（The power of visual in product design）
Jonny Czar (10分)
7. UXの法則（Laws of UX）
Jon Yablonski (25分)
8. UXでアニメーションを適切に使う究極のガイド（The ultimate guide to proper use of animation in UX）
Taras Skytskyi (11分)
動画リスト
1. デザインはひとつ（Design is one: Lella & Massimo Vignelli）
Kathy Brew & Roberto Guerra
2. ディーター・ラムズ – 世界が誇るプロダクトデザイナー（Dieter Rams — a brave new world of product design）
Victoria and Albert Museum
3. 意味のあるアニメーションをデザインする（Designing meaningful animation）
Val Head
4. バウハウスの100年（100 years of Bauhaus ）
BBC
深く考えてみよう
あなたが最も驚いたデザイン原則は何ですか？
その原則は、あなたが毎日使用している製品ではどのように使われていますか？
事例紹介
ユーザーインターフェースのスキルを磨く秘訣は、あらゆるところから学ぶことです。テクニックやレパートリーが多ければ多いほど、自分のアイデアや解決策をインターフェイス上で伝えるのが簡単になります。他のデザイナーがキャリアをスタートさせた事例や、リデザインの手順を見たり、Slackのような企業がユーザーを巻き込んだ大規模なインターフェースプロジェクトにどのようにアプローチしているかを読んだりして、実際にそれを確認してみましょう。
ビジュアルデザインを学ぶには練習が必要です。好きなデザインツールで好きなアプリのインターフェースを再構築してみたり、この機会にツールの仕組みも学んでみましょう。デザインテンプレートやガイドはたくさんありますので、コピーして、実験して、その上で作ってみてください。
次へ
この記事はUX CollectiveのThe Guide To Designを翻訳転載したものです。配信元または著者の許可を得て配信しています。
翻訳担当：池田茉莉花 (Marika Ikeda)
監修：菊池聡 (Satoshi Kikuchi)
