エンジニアにとってのウェブデザイン
私がLe Wagonでデザインのカリキュラムを組むまでの発見とは。
By Boris Paillard, Le Wagon 代表取締役社長
Web Designを教えるにあたって、私にとって不利な点が2つあった:
・まず、私はフランス人である。私の母国で「デザイン」は、文字通り「グラフィックデザイン」を意味する。
・次に、私はエンジニアである。フランスのエンジニアリング・スクールは素晴らしいが、Design & Web-developmentに纏わるトピックを毛嫌いしている。
起業家向けのプログラミング・スクールであるLe Wagonを設立する上で、自分の特徴的な背景を十分に活かしつつ、Web-designを適切に教える方法を見出す必要があった。そして、私はこんな発見をした。
Web-designはアートより、エンジニアリングに近い
Web-designはプログラミングの様に、型や規則に気を遣わなければならない。これはデザイナーにとって、常識だろう。しかし、私にとっては大きな発見だったのだ。私が2年間で収集した発見をこれから紹介しようと思う。
コンポーネントから考える
ウェブサイトを構築する際、初心者はアプリの各ページを一からデザインする傾向にある。この様な感じに。
1. よし、まずはホームページをデザインしよう。
2. 次は、ログインページ。
3. そして、ユーザープロファイル。
4. そのあとに、メインのダッシュボード。
5. その他諸々…
この様な作業の進め方は大変非効率的である。毎回、自分の作業が重複してしまう。プログラマーとしての大事な心得はDRY(Don’t Repeat Yourself=自分を繰り返さない)ことにある。ウェブサイトを一ページずつデザインしていく姿勢は、DRYが唱える心得に反しているのだ。また、新しいプロジェクトが始動した際も、ページに特化したデザインを再利用することができずに悪循環に陥ってしまう。
では、効率的、且つ、優れた方法は何なのか?腕のあるデベロッパーは、ページを構築する上でのちのち合併するグラフィック・コンポーネント、また、基本的なブロックから考える。例えば、「ボタン、フォーム、ネーバー、タブ、アバター、ドロップダウン」などなど。これらのコンポーネントの名前は聞いた覚えがあるだろう。毎日目にするコンポーネントだ。自分のアプリをコンポーネントごとにデザインしていくことは、驚くほど効率的なのだ。自分で自由に改良できる図書館やケーキの上に乗せるイチゴを想像してほしい。これらは、必要なコンポーネントだけを使う感覚と同じである。新しいプロジェクトを始動する時も同様である。これらがウェブデザイナーが口にする秘訣なのだ。また、ウェブ・コンポーネンツの素材を提供するCallToIdeaもオススメである。
「コンポーネント指向から考える設計」が重要なのだ。同じ様に、それぞれのコンポーネントに適切な名称をつけることも大事なのだ。
デザインに名前をつける際の約束事
私がCSS(ウェブページをデザインする際に利用される言語)を教える際に、生徒たちと頻繁に交わす会話をここに書いてみた。
私:どっちの名前がいいと思う?「赤いボタン」か「登録ボタン」。
生徒:んー、「登録ボタン」かな。そっちの方がボタンの機能が分かりやすい。
私:そっか、じゃあ私が「登録ボタン」のコンポーネントを渡した時に、このボタンが緑なのか、青なのか、大きいのか、小さいのか、丸いのか、ボーダー柄なのか、判別できる？
生徒:えっと、、、判別できない。
私:じゃあ、もし「赤いボタン」という名前のコンポーネントを見せたら？
生徒:もちろん、赤色って分かるよ。
デベロッパーは名前をつける時に、とても気を遣う。デザイナーも同じ様にするべきだと思う。どんなコンポーネントでも、図表が想像できる名前であるべきなのだ。的確な名前をつけてあげる事は、「デザイン」の一つなのだ。正しい名称をコンポーネントに与えることで、他のデベロッパーにとってもコンポーネントが使い易くなるのだ。
素敵なデザインが施されているコンポーネントには、同じくらい素敵な名前をつけてあげよう。
デザインとは「構造」である
腕のあるフロントエンド・デベロッパーも同じことを口にするだろう。ページの構造が弱かったら(ここではHTMLを指す)、正当な方法でデザインをすることは難しい。
画家も適切な足場がなければ、建物に絵を描くことは出来ないだろう。
アートではない— ただ、幾つかのルールだけ。
「ウェブデザインは得意じゃないんですよねー」なぜなら「僕たちはアーティストじゃないので。」と、エンジニアがよく口にしているのを耳にする。もちろん奇抜なウェブサイトを作っているエージェンシーに働くためには、アーティスティックなセンスが必要になってくる。しかし、Airbnb、Facebook、Product Hunt、Instacartなどの実用的なウェブアプリはアートとは一切関係がない。もっと言うと、型や単調な図形のルール、そして他の人の作品を引用してくることがミソなのだ。
「良いアーティストは真似するだけだが、偉大なアーティストは盗む」— ピカソ
ここから独自の発見によって、見出したルールを紹介したいと思う。
派手な色では遊ばない
生まれつき才能を持ったデザイナーでない限り、濃淡値を活用しながら、僅かに色で遊ぶほうが良いだろう。Mediumも全く同じことを実現している。
「空間」は「物体」と同じくらい意味がある
物体(文字、画像等)を囲む「空間」も同様に大事なのだ。境を作ることで、画面の中で違う範囲を識別できる様にしてくれるのだ。
デザインを始める際に、初心者の多くは画面の半分以上の空間をめいいっぱい使って大きいヘッダーを使う傾向にある。アプリは最初にくるコンテンツが少ないので、空間を出来る限り無くすために大きいヘッダーを使おうとするのだ。よく考えてみると、Facebookのフィードに大きく「最近の投稿」というタイトルがあるのを想像してみたら、かなりおかしいよね。
目にはコントラストが必要
私たちはコントラストなしではコンテンツを差別化できない。もし全てが同じに見えたら、どこに焦点を置いて見ればいいのかが分からなくなる。図形による誘導が必要なのだ。以下のメインタイトルとセカンドタイトルの対比を見てみよう。
「同じ大きさ」と「同じ割合」はイコールではない。
同じ幅や高さのピクセルがあるから、丁度いい画像の割合になっている訳では無い。
背景もフィルターが必要
画像のコントラストが大きすぎると、テキストを読み易くするために背景のフィルターが必要になる。当たり前だが、教育学としては単純なことを繰り返すことに尽きると思うのだ。
より少ないことは、より豊かである。
綺麗なデザインは、初見で気づかないことが多い。
Separation of concernsとは
Separation of concerns(SoC)：ソフトウェア工学においては、プログラムを関心（何をしたいのか）毎に分離された構成要素で構築することである— Wikipedia
SoCはデザインにもよく対応します。赤ボーダー柄の丸い画像を作成する「デザインのタスク」がある状況を想像してみましょう。
・丸い、赤ボーター：ボーダーの色は赤+画像の角が丸みを帯びている
しかし、上記の「デザインのタスク」を2つのタスクに名前付けすることが出来る。
・丸い：画像の角が丸みを帯びている
・赤ボーダー：ボーダーの色は赤
この様に基本的なデザインに分離することで、デザインのタスクが見えてきます。挙げたタスクを別々に取り掛かるのか、合併して取り掛かるのかは自由です。Separation of concernsの教えはソフトウェアやバックエンドだけに限りません。デザインにも上手く活用できます。
最後に、一言。
「自分はデザイナー向きではない」と思っているエンジニアや、「構造をデザインすることに興味がある」人々にとって、実用的な発見を与えられたら嬉しいです。もっと言うと、デザインとエンジニアに関して、意見交換ができたら嬉しいです。
プログラミング、テクノロジー、起業家精神についてよく記事を書いているので、また遊びに来てください。また、日本にあるLe Wagon Tokyoでは第5期のプログラミング・ブートキャンプが始まりました。FacebookとTwitterを随時更新しているので、是非チェックして見てください！