ノンデザイナーズのためのデザイン勉強会の盛り上がりが凄かった

こんにちは、mofmof inc. 田中です。

先日、エンジニア企画の勉強会が発足しました。その名も「ノンデザイナーズのためのデザイン勉強会」 我が社のおしゃれ担当山形が先生役です。 mofmofはデザインまで請け負っていませんが、「やっぱりカッコイイもの知りたいよね!自分で作る時にカッコよくしたいよね!」ということで、デザインの知識がある山形が中心となり、「基礎的なことを学ぼう!」ということになりました。

18年ずっと売れ続けているロングセラーが教科書

仕事後の自主参加制にもかかわらず、参加者はほぼ全員。リモートでの参加者もいたりと、皆のデザインに対する興味、関心の高さが現れました。
今回の教科書として使ったのはノンデザイナーズ・デザインブック

教科書

これを読みながら、デザインの4つの基本原則を学びました。

  1. 対比 Contrast
  2. 反復 Repetition
  3. 整列 Alignment
  4. 近接 Proximity 教科書に書いてある順番はこうなのですが、説明は近接からということに不思議さを感じます。

Proximity

まずは近接 Proximityです。

近接

他にも、

Alignment

次は整列 Alignment。
ここでは山形の整列への想いが溢れていました。

整列

整列では空白、余白を恐れないことも大切だそうです。
例えば、フランス料理。 大きなお皿にちょこっと料理が載っているのっておしゃれですし、カッコイイですよね。 あれは整列のお力なんですって。

フランス料理

一つ気をつけなくてはいけないのは中央揃えです。
初心者が中央揃えにしたがるのですが、これでプロっぽく見せるにはかなりテクニックがいるとのこと。
私も、なんとなく中央揃えにしがちですが、重々気を付けたいと思います。

こちらは、教科書についてあれこれ意見を言い合うmofmofメンバーの様子です。 山形の整列愛が伝染したのか、白熱しています。

白熱するメンバー

Repetition

さて、教科書も半分が過ぎました。反復 Repetitionです。

結晶

そしてここでも画像のはみ出しが出てきました。
これは結構キモなんですね。

Contrast

最後はコントラスト Contrast
コントラストはやりすぎ危険な感じを受けました。
ポイントはこちら。

コントラスト

本気さが伝わるって・・言い得て妙ですね。
コントラストが強すぎると見にくくもなるのでちょうどよい量で使いたいと思います。
余談ですが山形は、年賀状の季節になると延々をフォントを眺めているそうです。
今年はどのフォントがいいかな。カッコイイのないかな。と思って探しているとか。
さすがおしゃれ。。

学んだことの実践

さてさて、教科書はまだまだ続きますが、今日はここまで。
これからは今日勉強したことを活かした演習タイム。
実際にネットで公開されている開催情報を題材にして、どうしたらもっと良くなるか、かっこよくなるか、4つの基本原則のみで改良にチャレンジです。 題材はこちら。

LayoutA

「近接だ!」「フォントサイズを変えよう!」「ここを整列させたい」「余白を恐れるな!」
などなど好きなことを言いながら改良を重ねました。

改良中

私達が最終的に出した改良案がこちら

LayoutB

どうですか?結構よくなってません??
先生役の山形も納得の出来になりました。
和気あいあいと演習を終えたメンバーは、
「もうこれで俺もデザイナーデビューだな」とすっかりデザインにハマっていました。
それぞれ自信もついて、いい勉強会になりました。
勉強会後も学び足りない様子。

勉強会後

mofmof.incでは他にも「ブロックチェーン勉強会」等興味があるものを皆で学ぼうという雰囲気があります。新しいことが大好きな人たちが集まっているということもありますが、これからも活発に活動していきたいと思います。