テックキャンプのデザインコースを解説!お役立ちの備忘録も

プログラミングスクールのテックキャンプに通っていてiPhoneアプリ開発の勉強をしています。

けど1度入会すると全てのコースの教材が閲覧できるのでせっかくなのでデザインコースの教材もちょっと学習してみました。

ここではテックキャンプのデザインコースが気になっている方のためにどんな事が学べるか、要は目次だけ書いていきます。あとは自分が学んだ事などをメモしています。

デザインのノウハウについては既知の事実や公に知られている事が多いですが、体系的に学べるものなので初心者にはちょうどよい教材だと思います。

テックキャンプのデザインコースの目次

ここでは目次とちょっとした解説だけしておきます。これらが気になる方、自分の課題が解決するかもしれないと感じた方は入会を検討してみてください。

Lesson1、2 ここではデザインの基本や色の基本を学びます。
Lesson3 ここではPhotoshopの使い方を学んでいきます。目安時間は7時間なので量は多くない気がします。画像の加工について学びます。
Lesson4 ここではillustratorの使い方を学んでいきます。WEBバナーや広告を作ったりします。
Lesson5 WEBサイトのデザインに関することを学びます。UI設計やレスポンシブデザインや配色など。
Lesson6 SketchというMacのパソコンで使えるペイントツールについての学習です。

デザインコースはこのようなラインナップとなっています。総量は多くない印象ですが、結局は理論を学んだらあとはツールを使い倒して慣れていくのが学習そのものというわけですね。

デザインセンスなんて無いんだけど‥

私はデザインのセンスが無いから無理だと思っていましたが、テックキャンプの教材に触れてからそのような気持ちをなくすことができました。というのもデザインというのは描き手の才能やセンスで作るものではなくて、ロジックの積み重ねで作っていくものと教えられたからです。

一方アートは製作者の想いを表現するものですが、デザインは誰に何を伝えどう行動してもらうか‥というのを表す手段として使われます。これが私が今まで想像していたデザインの概念との大きな違いでした。

なので今まで自分にはデザインは無理なんじゃないかと思っていましたがその考えを払拭することができました。もしかしたら私のような素人にもロジックで組み立てたデザインを表現できるかもしれない、と期待できます。

▼デザインコースもあるテックキャンプ▼

デザインのスキルを高めるためのイロハ

デザイン力をつけるために必要なことは「ツールに慣れること」が第1に挙げられています。

これちょっと辛いです。私はパソコンには慣れていますがデザイン関係のツールといえば、例えばPhotochopやillustratorや、あるいは無料ツールならGimpとか。ホームページならHPメーカーやDreamweaverのようなものが考えられると思います。今まで何度か触れたことはあるもののいちいち操作が大変でボタンも多いし挫折しやすいので「ツールに慣れて」と言われると初心者にはなかなかハードルが高い気がしちゃいました。

それから見本になるポスターやサイトを「トレースすること」も有効だそうです。WEBサイトに関しては他のかっこいい可愛いサイトのソースコードやCSSを丸パクすることができるので著作権に触れずに実現できますし、多くの人はそうやって美しいサイトの真似をしながら上達していくものと思っています。私もWEBサイトの制作は熟達していると自負しているので学ぶ>まねぶ>まねる・・・これは同感です。

ただイラストツールやペイントツールで見本を真似していく‥というのはこれは手を動かして何度もお絵かきするような事を想定していますが上手になるためには熟練度の壁があるんじゃないかと感じています。どれだけお絵かきに時間を投資できるか、ですね。

取り急ぎ私は広告やポスターやバナーを作るようなことは直近では無いのでWEB関連のデザインやUI設計が学べればいいなと思いました。

◆用語

ディレクション能力・・・何の目的でデザインをするのか企画をする能力

基本的なデザインの技術を復習

テックキャンプの教材でも序盤で取り上げられているいくつかの技術を紹介します。といっても私自身は意識せずにやっていたことなので、こんな名称が付いてるんだというのは発見でした。

  • 近接

    サイトや広告や書類上で意味のあるグループをひとかたまりとする技術。

    これは意識せずにやってきましたが言われてなるほどと思いました。簡単な話で例えばサイト上の第1章、第2章、第3章と記事や文章や画像があれば章ごとにひと塊になるように見栄え(上下左右のマージン幅)をとるようにすると関連するグループがわかりやすい、という意味です。

  • 整列

    こちらも普通の感覚があれば誰でもやってると思うし、MS wordで文書を書いたことがある人なら文章の左揃えや中央寄せで見栄えを調節したことがあるでしょう。

他にデザインのルールや文字のルールやフォントの選び方がありましたけど、実際自分がサイトを作る上で意識せずにやってたことがほとんどだったので、まぁよかったと思いました。笑

色の表現の仕方

知ってる人も多いと思いますが色を表現する際に主に次の3つのやり方があります。

・RGB
・CMYK
・色相、明度、彩度

「RGB」はR‥Red(赤) G…Green(緑) B‥Blue(青)の3色の組み合わせで色を作っていきます。パソコン上に見せるデザインで使う事が多い。

「CMYK」は印刷物のときに使うことが多くて、C‥Cyan(シアン) M‥Magenta(マゼンタ) Y‥Yellow(イエロー) K‥Key plate(キープレート)が使われています。

パソコンのディスプレイで使われるRGBとインクで使われるCMYKは表現できる色が実は違っていて、RGBで作ったものをCMYKになおす変換作業が必要になる。暗めな印象になる癖があるらしい。

「色相、明度、彩度」は色の3要素とも言われますが文字通り色と明るさと鮮やかさの表現で色を決める方式です。

デザインツールを使うとRGBか、色の3要素で色を選択してお絵かきしたりしますよね。あとWEB上の色を表現するときはRGBを使いますね。color: #FF3300 とかで指定したりします。

デザインの配色の参考になる色相環(カラーホイール)

今までサイトを作成する際のサイト内の配色はAdobe Colorを使って出てくる色の組み合わせを使うことが多かったです。これを使うとバランスの良い配色が出来るので様々なサンプルカラーを拝借していました。

配色を考える際に基本的な考え方で色相環(カラーホイール)というものがあることを知りました。

カラーホイール(色相環)

Adobe Colorのページです。
https://color.adobe.com/create/color-wheel/

今までなんとなく使って来ましたが、今日は使い方を確認したいと思います。

ここで画面左側にColorハーモニーを変更という部分があります。選択できるものの中に

・補色
・トライアド
・類似色
・コンパウンド
・シェード

なんかがあります。

補色

「補色」というのは2色を選ぶときの色の選び方です。1方をメインカラーとしもう1方をアクセントカラーにすると見栄えが良くなるという選び方です。

画面左側で補色を選択してカラーホイールで色を1つ選ぶと正反対側の色がもう1つ選択されます。この2色を配置するとコントラストの強い表現となります。

Adobe Colorではこの2色に加えてベースカラーと同じ色相の2色+アクセントカラーと同じ色相の1色が表示されます。

ちなみにカラーホイール上に表示される三角形が見えると思いますが、これがベースカラーを表しています。

トライアド


「トライアド」というのは3色を選ぶときの選び方です。どこか1個の色を選択するともう2つが自動的に決まります。等間隔で色が決まるのでこれはカラーホイール上に120度ずつ正三角形を作るようにして色が決まってると言えます。

Adobe Colorではこの3色に加えてベースカラーの彩度と明度が異なる1色と、もう1つ別の点の彩度と明度が異なる1色が表示されます。調和を維持しつつコントラストを表現できます。

類似色

「類似色」を選ぶと同じ系統の色からいくつか選んでくれます。画面上は5色選ばれていますが3色でも構いません。調和の取れた色になります。

コンパウンド

「コンパウンド」はベースカラーを選択すると類似の2色が選ばれます。この2つの色は色相は同一です。またベースカラーの補色の隣接した2色が表示されます。要は類似色3つと反対側のコントラストを表現する2色によって穏やかな雰囲気をとることができます。

シェード

「シェード」は色相と彩度は同一で、明度が異なる5色を表示します。

モノクロ

「モノクロ」は色相は全部同じだけど彩度と明度が違う5色を集めたものです。これも同じ色調でまとまったカラーですね。

探索

画面上部に「探索」というリンクが見えるでしょう。ここをクリックしてみます。

カラーパレットがたくさん出てきますね。これはAdobe Colorユーザーが自作したカラーテーマの一覧です。名前が付いてたりイイネ数が表示されてたりします。この中から気に入ったテーマを貰って自分のデザインやサイトに適用しても良いわけです。

僕はサイトを作るときはこのカラーテーマーをよく使わせて貰っていました。

けど、最近は5色も使わないことが多い気がしますねぇ。

WEBデザインではベースカラー、メインカラー、アクセントカラーで配色する

ここで言うベースカラーというのはAdobe Colorで表示されるベースカラーのことではなくてWEBデザインという枠で捉えたときの用語です。

サイト上で色を配置する際には「ベースカラー」が必要でこれは文字や見出しの背景になるような色のことです。言ってみればbodyタグのbackground-color要素ですね。

ベースカラーに使うとよいのは「白」「黒」「グレー」やか「メインカラーの明度を上げた色」を使うとよいとされていて。

画面全体としての色の割合はベースカラー70%、メインカラー25%、アクセントカラー5%とされています

メインカラーはこのサイト全体を印象づける色になります。ロゴとかヘッダーに使われやすいです。

アクセントカラーは一番目立たせたいところに使うような色です。例えば申し込みボタンやお問い合わせボタンなどが想定されます。

▼デザインコースもあるテックキャンプ▼

お役立ち?Pintarestを使って参考サイトを収集

Pinterestという海外のサービスが参考画像を探すのにも使えるということでデザイナーの間では人気のようです。

このサービスはメールアドレスで登録するか、GmailかFacebookアカウント連携で利用が出来るようになります。

誰かがピン止めをした画像を検索したり、テーマ別にフォローすることで例えば美味しそうなレシピ画像とか、家具の画像とか、広告画像とかを探すことができます。

個人的には現時点であまり活用方法が思いつきませんが、例えば「広告」で検索すると色んな広告が出てきて眺めてるだけで面白いです。どこかで参考になるかもしれない。