【岡山WEBクリエイターズレポート】素人っぽいデザインから脱するテクニック。

2018年5月28日

スポンサーリンク

休日にWEBサイトを作って副業しているはるまきです。

先週末、岡山WEBクリエイターズというWEB制作者向けの勉強会(セミナー)に行ってきました。

ちなみに岡山でWEB系の勉強会でここはオススメです。
隔月くらいの頻度で開かれていて、取り扱うトピックも面白いです。
参加費は1ヶ月前までに申し込めば3000円です。

で、先週、開催されたのはWEBデザインシンキングセミナーで、WEBデザインの基本について話を聞けました。

僕は、コーディング(html、css、js、少しphp)が中心で、デザインはあまり触れていません。
休日のWEB制作の時も、デザインをする人が別にいます。
なので、こういったWEBデザインについて学べる機会は貴重です。

 

テーマは、『「素人っぽい」を脱するデザインテクニック』!

セッションテーマがいきなり興味をそそりますよね。

で、登壇されたのは、WEB制作者(特にフロントエンド)は見ている人がきっと多いWEBクリエイーズボックスというブログを運営するManaさん!
(僕も情報収集でこのブログをよく見てます。)

※ ちなみに、このセミナーではYatさんというフリーのWEBデザイナーの方も別セッションに登壇されたのですが、「Webサイトをデザインする前に考える事」というテーマだったので、ここでは割愛してます。
(WEB制作をする時に必要なことを、フレームワーク的に紹介されていてこちらもとても参考になりました)

ってことで、セミナーで紹介していた内容(エッセンス)を紹介します。

 

良いデザインとは?

まず、良いデザインの定義について。

・メッセージを伝える
・ユーザーを動かす
・誰にでも使いやすい

Manaさん曰く、この3つだそうです。
独りよがりななんとなくカッコイイだけのデザインは良くないってことですね。

一方で、良いデザインを作るにはセンスがいると思われがちですよね。
これに対して、Manaさんは「センスは知識によって身につく!」と言っていました。

確かに、これは「くまもん」の生みの親であるデザイナー水野学氏もこの本でも書いていました。

で、センスに必要な知識とは?

「知識が必要ということはわかったけど、具体的なテクニックは…?」という方。
安心してください。
このセミナーではセンスに必要な基本的なデザイン知識も紹介されていました。

レイアウトの基本ルール

① 優先順位
② グループ化
③ 整列

とのことです!
噛み砕いて言うと、「各要素の中で一番に伝えたいことを決め(優先順位)、要素ごとにまとめた上できれいに配置する(グループ化と整列)」ってことです。

…と言っても、これは言葉で言っても伝わらないので、この本が参考になります。
(「レイアウトの基本ルール」もこの本に書かれています。)

 

配色のルール

① 使う色は3〜5色
② ベースカラー : メインカラー : アクセントカラー = 70 : 25 : 5の比率

だそうです!
この比率にすると、それぞれの色が邪魔しないようです。うん、確かに。

また、アクセントカラーは、12色相環(色の円グラフみたいなやつ)をもとに、メインカラーから2つ隣までとすると良いそうです。
ベースカラーについては、白色、メインカラーの薄い色、万能色グレーのどれかがオススメらしいです。

配色って悩むこと多いので、これは使えそうです!

 

文字のルール

① 使用するフォントは1〜3種類まで
② 長い文章には細い明朝体
③ 短い文章にはゴシック体

確かに、本を見てみるとフォントが明朝体ですね。
文字も配色同様に、サイトのイメージを大きく左右するので、大事ですよね。
なるほどなるほど。

 

余白のルール

① 行間は文字サイズに対して1.5〜2倍。
② 枠と文字の間は文字サイズの1〜1.5倍。

余白も感覚でやることが多かったので、これも使えそうです!
セミナー中にサンプルを見ましたが、余白の取り方だけで印象が全然違いました。
勉強になりますね。

 

センス = 知識 になるために、まずは作ってみる

以上がセミナーで学んだことです!
考え方からテクニックまで学べてとても勉強になりました。

ただ、これを身につけるにはやっぱり実践あるのみですね。
理解はできてもやってみないとピンとこないことがたくさんありますからね。

ってことで、GWは今回学んだことを早速WEBページの制作でやってみます〜☆

スポンサーリンク