ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド

    
2013/05/15
    

topnon3

まだまだメンバーの数が少なく、職種ごとの距離が近いスタートアップ。デザイナーの仕事をディレクターやエンジニアが理解することが、プロジェクトを円滑に進める秘訣です。

デザイナーではない方々にとって、デザイナーが普段何を悩み、どのようにWebデザインしているのか知るのは、非常に重要と言えるでしょう。そこで今回は厳選した7つのスライドをご紹介しながら、「配色」「レイアウト」といったデザインのエッセンスを学びます。

もちろん、本職であるデザイナーの方にも役立つスライド7連発です!

1.色彩センスのいらない配色講座


7,000いいね! されたスライド

「時間がない! 今すぐ作り始めないと納期に間に合わない! でもどんな色を使ったらいいか分からない!」そんな人におすすめなのがコレ。Facebookで7,000以上のいいね!がついた、@marippe_さんのモンスタースライドです。

配色や明度・彩度の基礎をおさえ、必要十分かつ実践的な内容となっています。美術の時間に習った色相・明度・彩度の解説に始まり、配色を決めるための解説をしています。

3色をベースにするのが基本

スライドによると、「使う色は3色をベースにする」のが基本とのこと。また、色はベースカラー70%、メインカラー25%、アクセントカラー5%くらいの比率にするのがいいそうです。

marippe2
SlideShareではこの方法で配色が決められた企業サイト・プロダクトデザインの実例も取り上げられ、わかりやすく説明されています。「色は論理的に説明できる」を身をもって体験できる必読スライドです。

SlideShareでしっかり学ぶ
色彩センスのいらない配色講座

2.ノンデザイナーのための配色理論


こちらも配色理論を取り扱ったおばらつかささんのスライド。

機械と人間、色の選び方に違いが!

スライド自体の美しさも目を惹きますが、感覚的にとてもわかりやすい内容です。

色選びに失敗してしまう原因を、機械と人間の色の「選び方の違い」と説明。先人の作り上げた配色理論を駆使して、ノンデザイナーでも配色ができるように工夫されています。

自分で作っちゃったHUE360で美しい配色選び

また、このスライドではHUE360というWebアプリを題材に説明しているのですが、なんと、おばらさんご自身がこのアプリを作ってしまっているところに驚きです。ありがたく使わせて頂きましょう!

HUE360

SlideShareでしっかり学ぶ
ノンデザイナーのための配色理論

3.とある色の決め方



@uniqさんのスライド。3色をベースにした色の配置は同じですが、こちらのスライドでは、Adobe Kulerを使った色の決め方についてレクチャーしています。

無料で使えるAdobe Kulerを紹介

Adobe Kulerはクラウドベースの色見本作成ソフトで、無料で使えPhotoshopなどのソフトに取り込むこともできるすぐれもの。クラウド版のほか、CS4以降のPhotoshopであれば、エクステンションとして参照できます。スライドを見ながら使ってみましょう。

kuler

SlideShareでしっかり学ぶ
とある色の決め方

4.これくらいはやってほしいWebデザイン



グリッドを使ってすっきりとレイアウト

グリッド、というデザインの基本的な考え方をご存じでしょうか? グリッドデザインとは、デザインしたい大きさに合わせて格子を作り、その上にレイアウトする手法のことです。グリッドに沿ってレイアウトすることで、整然とした印象を与えることができます。

グリッドとホワイトスペースの重要性

@takahashiyuyaさんのスライドでは、グリッドを使ったデザインや、ホワイトスペース(間)を空けることの重要さに触れられています。すっきりした感じがしますね!

SlideShareでしっかり学ぶ
これくらいはやってほしいWebデザイン

5.サルでもできるWebデザイン



こちらも主にレイアウトについて触れられた、菊池 崇さんのスライド。こちらでは、色を見るツールとして「Colour Contrast Check」というツールを取り上げています。

3段階に分解されたわかりやすい解説

きれいなレイアウトを直感ではなくロジカルに作るため、「ページサイズを割り出す」「コラムに割る」「デザインする」という3段階に分解し説明されています。とてもわかりやすい内容でした。見出しの適切な大きさにも触れられています。詳しくはスライドをご覧ください。

SlideShareでしっかり学ぶ
サルでもできるWebデザイン

6.Grids are Good (right?)


こちらは英語のスライドです。

レイアウトの基本は大きいものから配置

Yahoo! のような、すっきりとしたサイトを作れるようになるまでのレイアウトを、しっかりと順を追って説明してくれています。ポイントは、一番大きい広告(The Big Ad)を配置する場所を先に決めちゃうことだそうです。レイアウトの順番ひとつを取り上げてみても、Webデザインは本当に奥が深いです。

スライドは152ページありますが簡単な英語が使われていますので、がんばって読んでみましょう。

SlideShareでしっかり学ぶ
Grids are Good (right?)


7.Webデザインのセオリーを学ぼう



時間のある方は「Webデザインのセオリーを学ぼう」もぜひとも読んでみましょう。

Webデザインがトコトン凝縮

「デザインとは」に始まり「レイアウト」「整列」「反復」(たとえば見出しを揃える etc.)「コントラスト」(強調したいところは太字に etc.)「フォント」さらには「視線移動」に至るまで、Webデザインがトコトン凝縮されたスライドです。

SlideShareでしっかり学ぶ
Webデザインのセオリーを学ぼう

まとめ

今回のエントリーはいかがでしたでしょうか? 普段何気なく目にするWebデザインも、これからは少し違った目線で見られるようになるかもしれませんね! 本エントリーがきっかけとなり、デザインの奥深さ、デザイナーの仕事(の一部)に少しでも触れて頂けたなら幸いです。

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.