00:07
こんにちは、シロクロの伊藤です。
ポッドキャスト40回目、今回はデザイン基礎について話したいと思います。
今日は、2023年1月16日、月曜日です。
よろしくお願いします。
デザイン基礎ということで、
Webとかグラフィックデザインとかの基礎となる部分の話になります。
近年、私が専門学校とか企業研修だったりで、
若い人に対してデザインを教えることがありまして、
それで毎年やっているんですけど、
できるだけわかりやすく、できるだけコンパクトに伝えて、
あとは実践して、フィードバックしてっていうのが、
一番上達しやすい環境かなと思うので、
可能な限りコンパクトにしたいと思っていて、
それで毎年フラッシュアップしたりしているんですけど、
今回の収録で、もう一回自分で喋りながら考えながらして、
フラッシュアップしていければいいなと思って、
この回を撮ろうと思っています。
個人的にはデザインは、
色とレイアウトとタイプグラフィーで構成されていると考えていて、
個人的ではなくて一般的にですけど、
その3つの要素でデザインの良し悪しだったり、
情報伝達だったりもろもろが決まってくると。
そもそもデザインの評価軸っていうのがありまして、
単純に見た目の美しさ、
わかりやすく言うとすごく綺麗なウェブサイトだなとか、
主に同業が見たときに評価するような基準、
そのような美しさという点と、
読みやすさとか扱いやすさとか、
いわゆるユーザビリティ的なところ。
この雑誌はデザイン的にめっちゃオシャレではないけど、
普通に読みやすいねとか、
逆にすごくオシャレだけどめちゃくちゃ読みにくい。
ファッション紙とか大体読みにくいじゃないですか。
写真とか綺麗だけど、
そこに書いてある文字とかめっちゃちっちゃくて読みづらい。
でもそれでも成立しているからそれでいいんですけど。
03:03
見た目の美しさとは別に読みやすさ、
使いやすさというチェックがあります。
もう一つが、いわゆるコンバージョンへの影響という言い方をしているんですけど、
ウェブサイトであれば、
イーシーサイト、イーシーモールとかで、
見た目もあまりかっこいいとは言い難いし、
情報がたくさんあって扱いやすいとは言えないけど、
売れる。とにかく売れるという評価軸。
お便りがすごくくるとか、
結果につながるというところですね。
そのデザインの目的である最終的にゴールにつながるかどうか。
そこの動線に関しては、
また見た目がかっこよくても売れないとか、
見た目が紫くても売れるとかが存在するので、
それぞれの因果関係ってあったりなかったりすると考えています。
デザイン基礎、色とレイヤーとタイプグラフィーを使ってという意味でいくと、
見た目の美しさとか読みやすさ、
もちろんコンバージョン、
ECサイトであれば売り上げにつながるようなデザインという意味では、
全てに関わってくるのではないかと思います。
色とレイヤーとタイプグラフィー。
タイプグラフィーは文字周りのことですね。
3つの要素があると。
ここに写真とか図版という話を入れようかなと思ったんですけど、
写真がなくても成立するデザインというのはたくさんあるから、
必要最小限という意味でいくと、
含まれなくていいのかなということで外しています。
ではちょっと一個一個簡単に説明していきたいと思います。
まず色ですね。
色とレイヤーとのタイプグラフィーの3つで分かれたときに、
デザインのパッと見の印象ってやっぱり色だと思うんですよね。
こういった本とか雑誌の表紙とかもそうだし、
ウェブサイトとかでもそうだけど、
パッと見たときにいきなり文字とかが目に入ってくるかというよりかは、
色の情報が入ってくる。真っ赤だなとか黄色いなとか。
最初の印象となる要素としてまず色が存在しているという点と、
あとその雰囲気というか、色が持つ雰囲気というのが存在していて、
06:03
例えば赤とかだと元気がいいとか明るい感じとか勢いがあるとか、
それが青であれば清潔感があるとか信頼感があるとか整っているとか、
そういう色が持つイメージ。
受け取り側によるので国によったり地域によったり時代によったりして変わっていくと思うんですけど、
国内で日本人向けにデザインするときの色の印象っていうのは、
ごくごく一般的に言われている感覚が成立するし、
というか成立するしというか、デザイナーも日本人であるなら、
だいたいその色から受け取る印象が多分そのまま正解なので、
そういうのをわざわざ覚える必要性もなくて、
自分がこの場所にオレンジを置いたらどうなるか紫を置いたらどうなるかっていうのを、
自分が見たときに感じる感覚っていうのがあるので、
それを信じれば十分な気はしています。
色の使い方、僕はデザイン学校全然行ってないので、
全部が全部独学なんですけど、
唯一僕がデザイナー社員として存在した3年間のデザイナーであった当時の社長っていうのは、
まだ昔の人だったので、
私多分当時まだそういう時代だったんですよ、20年くらい前って。
見て学べみたいな、具体的に細かいフィードバックをくれるんじゃなくて、
僕が作ったデザインを社長が修正してお客さんに提出する、
フィードバックなしみたいなスタイルだったので、
それだとやっぱり具体的に、
違いはもちろん分かるんですよ、見て。
全数がすごく良くなってるっていうのは分かるんですけど、
具体的に何をどうやって修正すればそういう風になるのかっていう理屈は一切分からなかったので、
見て学べっていうのもなかなか限界があるっていうか、
僕も才能肌タイプだったらそこで見てできたのかもしれないですけど、
全然できなかったですね。
3年間ほとんどデザインに関しては上達しなかった記憶が、
最後の最後でちょこっとできるようになったけど、
まあまあまあ。
っていうところで何が言いたいかというと、
色の勉強って特にしてきてないんですよね。
レイアウトとタイプグラフィーは、
ちゃんと自分なりにたくさんの本読んだり、
色々人の話を聞いたりしてきたんですけど、
色はそんなに、
多分レイアウトとタイプグラフィーと違って、
唯一感覚でデザインしやすい部分、
09:04
これでもそんなこと言うと色の専門家からめちゃくちゃ怒られるかもですけど、
やりやすい、その基礎原則知らなくても、
なんとなく自分の心地いい色棚が成立しやすい。
レイアウトとタイプグラフィーだとなかなかそうはいかないくても、
いや、それ言うと語弊があるな。
比較的しやすいっていう言い回しでいきましょう。
センスっていうもの、
今までのインプット、アウトプットはなくてもインプットで培った、
培ったその美的感覚って多分色だと思うので、
そこでなんとかなるから、
習ってなくてもそれなりに成立する。
習ってなくてもその少ない話、
例えばできるだけ色は使わないようにしましょうとか、
五色よりも類似色でまとめるとデザインしやすいですよ、
ぐらいの原則でわかっていればそんなに間違わない。
カテゴリー分けするわけでもないのに、
5色も6色も使う必要ってないので、
そんなことしない限りは色がおかしいということにはならない。
めちゃくちゃ元気なポップを作るのに、
淡い水色とか使うとはならないじゃないですか。
なので間違えづらいのでは、
給材点取りやすいところが気はします。
そういう印象を司る色のところで、
今ちょっとポロポロって言ったんですけど、
できる限り少ない色を使う方がまとまりやすいっていう点と、
補色、いわゆる反対色はなかなか使いづらいので、
赤であればオレンジとか、
いろいろな色でまとめると非常にデザインしやすいっていうところ。
あとは理屈として知っておくべきっていうことは、
色に関しては色相と彩度と明度っていうのが存在するっていう。
色相ってのが赤青緑とかの横軸の話ですね。
明度がその鮮やかさ。
赤は赤でも鮮やかな赤なのか沈んだ赤なのか。
プラス明度。
その上で明るいくらいっていう軸が存在すると。
鮮やかさと明度を掛け合わせたものがトーンと呼ばれたりしていて、
例えば赤と青を使ってデザインしなきゃいけないときは、
12:03
トーンを揃えましょうと。
鮮やかさと明度はだいたい同じぐらいにして、
そうすれば赤と青で違う色だけれどもトーンが揃っていると。
これが要はすごく鮮やかな赤とくすんで薄い青とか使うと非常に難しい。
トーンが揃っていない別の色っていうのは非常にデザインしにくいとか。
もしくは赤1色でトーンをばらける。
結果的に類似色になるんですけど。
それはそれでデザインしやすいとか。
そのあたりが抑えられていれば十分間違ったデザインにならない。
細かく言えばいろんな考え方とか色のルールとかいろいろあるんですけど。
入りとしてはそのぐらいで十分ではないのかなと。
WebだといわゆるUIとかデザインのトンマのルールを決めて、
プライマリカラー、セカンダリカラーとかそういう指定をしたりして。
グラフィックにしろWebにしろ、まず基本となる背景色と文字の色。
背景が仮に白で文字の色が黒。
必ずこの2色が存在していて。
そこにプライマリカラー、セカンダリカラーを入れたりすると。
Webでいくとさらにリンクカラーっていうのが存在するので、
最低4,5色がどうしてもなってしまうのかなと。
Webのリンクカラーとプライマリカラー揃えるので、
個人的に僕はあまり好きではないですけど、
そうやってるところも少なくはなかったりするし、
それはまた別の機会があるかどうかは別ですけど。
っていうところですね。
色、そんな感じでいいのかな。まあいいや。
次がレイアウト。
レイアウトの一番の目的っていうのは情報整理。
重要度の整理をしたりするっていうところ。
チラシA4の一枚チラシであれば、
どこに一番重要となる情報を配置するべきか。
チラシで言えば上の方に重要な情報を置いて、
視線が上から下に基本的に流れていくので、
最終的に下の方にお問い合わせの動線があると。
あとより重要な情報の方が、
Webで言えば上の方にどんどんグラフィックも植えてたけど、
15:04
に置いて、
視線がWebの場合もグラフィックの場合も左上から右下に行く。
日本語は左から右に流れる以上視線もそういう風になるので、
左上に重要なもの、その下に流れていって右下に重要なもの。
右上とか左、多分左下とかWebの方で言うと、
あんまり重要な情報を置くっていうことはほとんどないので、
そういう風にレイアウトを意識して、
何のためにレイアウトしないといけないのかっていうところですね。
その手法としては、
グリッドレイアウトとか、
そういったものが存在すると。
レイアウトのパターンとかって他に存在するんだっけ。
2コラムとか3コラムとか、
それもグリッドと言えばグリッドはしない。
あるか、ないか。
あとその比率の話。
有名なやつだとオーボン比とか、
白銀比とかグランチ数列とか。
最初にデザイナーなりたてでこの辺勉強してて、
オーボン比っていう存在したときにめっちゃ上がって、
すげーと思って、
じゃあ次の案件オーボン比でデザインするんだって絶対うまくいかないっていう。
非常にデザインしにくい比率だと個人的には思っていて、
まだ白銀比とかオーボン比数列の比率の方がデザインしやすい比率な気がします。
ただグリッドにしても非常にやりやすい。
特にWebだとグリッドを引いてデザインレイアウトするっていうケースが多いと思うんですけど、
あんまりでもそれに頼りすぎると、
何かも難しいと思う人たちがいるかもしれないので、
ですから、
例えば、
例えば、
視聴者の方から見ると、
視聴者の方から見ると、
お話しさせると、
実際に話しているときに一番伝わるのは、
視聴者の方から見て、
実際に話しているときに伝わると、
観客が伝わるときに、
その観客に伝わると、
同じようなデザインを量産することになって
でも最近のそのマーケティング主体とした
ウェブ製作会社とか
クオリティは高いけれども
めっちゃ綺麗なデザインだけれども
ハンで押したようなデザインが多く見受けられていて
僕個人はもうそれ
18:00
全然悪い話ではなくて
一つの正解だと思っているので
量産の何が悪いのと思っているのでいいんですけど
ただデザイナーとして
それ結構退屈になるのではないか
同じようなスタイルの仕事が続くと
退屈にならないかなという気はちょっとしている
という点ですね
ちょっと話が逸れたけれども
そういったレイアウトのパターンが存在すると
最後にタイプグラフィー
タイプグラフィーの役割というのは
基本的には
一番大事なのが情報の伝達手段であるというところ
それに加えて読みやすく扱えるという点
タイプグラフィーに関しては
素体 フォントの種類
あとそのウェイト 太さとか細さですね
で 文字サイズ
で 行間 行長 コントラストぐらいですかね
が存在して
それらを掛け合わせてタイプグラフィーと読んで
そのタイプグラフィーのよしよしで読みやすさ
読むリズムとかを調整することができると
前回でウェブフォントの回だったから
そこでも触れてるんですけど
基本的に読みやすい書体っていうのは
本文書体である以上そんなに差はないと思っていて
これ書体デザイナーの方が言ったら
そうじゃないよって言われるかもだけど
一般的な受け取り側としたら
そんなに差はないと思うんですよね
ただ文字サイズとか行間とか
その辺含めると読みにくいな
読みやすいなっていうのは存在すると
だから特に書体を選ぶこと以上に
行間行長文字サイズその辺りを
意識して作らないといけない
これはもうグラフィックよりも
ウェブのほうが割と正解に近い
スタイルっていうのが存在するので
そこを抑えておけばベースとなるところは
十分成立するんじゃないかなと思っています
というのが色とレイアウトとタイプグラフィー
なんかなんだろうな
超ざっくり言うとそのぐらいで済んでしまう
超ざっくり言うとね
あとはもうどれだけ実践して
21:02
どれだけフィードバックを得られるかという話
今例えばタイプグラフィーに関してもめっちゃ
触りだけふわって話したけど
そこからどんどん勉強していけば
色んな要素や色んな視点に触れられるんですけど
その辺りって結局
最初の入り口の時点で話すべきことではないというか
そこまでやると多分頭がパンクするし
追いついてこないし入ってこないし
多分耳で入って頭で理解できるけど
腹に落ちないというか
だからある程度自分で手を動かして
作って作ってフィードバックもらってから
情報を増やさないと
もちろんどの道手を動かすのであれば逆でもいいんですけど
非常にちんぷんかんぷんの状態でやるなら
そこの時間が無駄とは言わないけど
そしたら先に手を動かした方がいい
個人的には5冊10冊グラフィックデザイン
ウェブデザイン本に読むよりかは
1冊読んで先に手を動かした方が効率いいと思っているので
最初に1冊は読んだ方がいいですね
こういう風にすれば非常に効率的に学べるのではないかなと思います
あとは何だろうかな
あと多分デザイン学校にしろ
一つの本にしろ
それなりに抜けがあって
ここに関して触れられてないっていう点があったりしているので
やっぱり一つの情報ソースだけだと漏れがあるから
本で言えば何冊か
1冊読んで一気に実践して
その後ちょこちょこ何冊か付け足していけば
また多分グラフィックデザイン
ウェブデザインで自分が抜けているっていうところは
無くなるんじゃないかなと思います
なんか例えば雑誌とか最近また見るけど
何だろう
いわゆるリッチブラックになってないやつとか
結構多いですよ
未だに
というかあれって
印刷会社の方でどうにかできないの
いや分かるよ理屈は分かるけど
ちょっと置き換えてあげたらいいじゃんっていう気はするんですけど
どうなんですかね
基本はリッチブラックって言って
印刷だと
24:01
例えば写真の上に
K100%を置いたところで
印刷すると
黒が黒100%じゃなくてちょっと透けて見えると
後ろの要素が見える状態になると
で
その
を避けるためにCとMとYを少しずつ数値設定することで
黒じゃないリッチな黒にすることで
透けを防ぐっていう
手法があるんですけど
未だに
それが
何だろう
たくさん見受けられるっていうのは
それに気づいても気づかないわけがないもんね
出力したものだと
一回一回というか
刻機のデザインで
黒が透けてて後ろの
突き抜けた要素が見えて
さすがにこれは
だいぶまずいんじゃないかと思ったけど
というようなこともあるので
そういうね
ある程度黒として
デザイナーとしてやっていくのであれば
教法書を書くとか
学校だったりしても
学校だけの勉強だと
同じ話で絶対漏れがあるので
同時並行でいろんな本読んだりしないと
社会に現場に立ったときに
あれこれ全然
触れてこなかった世界だっていうのが出てくるので
まあそこで学べればいいんですけどね
はい
という話でした
色と音とタイプグラフィー
まあでもそんなに
なんかこうやって話すと
めっちゃ簡単な気がするけど
いざやると
懐かしい
案件によって
全部条件も違うし
お客さんも違うし
何を目的にするかによるので
毎回毎回
考えないといけないっていう
もちろん基礎っていうのが
あってこそですけど
そういえば仕事としての面白み
なのかもしれないですけどね
はい
でここまで言って宣伝ですけど
ここら辺の話は
僕も業長で関わった
えー
なんだっけ
一番よくわかる
ウェブデザインの基本をきちんと入門
っていうめっちゃ長いタイトルの書籍が
ありますので
もしよかったら
ぜひ見てもらえると
いいですね
もう一冊の方
27:01
オンスクリーンタイプグラフィっていうのは
タイプグラフィに特化したもので
こっちの方がより専門的な話なので
なんかタイプグラフィだけ
オンスクリーンのウェブ系の
タイプグラフィに特化したものっていうのは
あんま少ないので
なかなか僕以外の人は
非常にユニークな視点なので
面白いと思いますよ
はい
なんかもうちょっと
色レイアウトタイプグラフィ
これもうちょっと
なんか最初に言ったよりには
ブラッシュアップできてないな
自分の中で
なんかもうちょっと
急ぎ落としたり
レイアウトのところとか
もう少し分かりやすく伝えたい
基礎
まあとりあえずこうすればいいよ
色に関しては
まあそれ話したけど
レイアウトの基礎みたいな
レイアウトの基礎ってなんだ
でも媒体によるよね
ウェブ
そうか
ウェブなる
ウェブのレイアウトの
パターンっていうのが存在して
まあよく分からないうちは
それにマップってやると
いいよなっていう
まあ基本的なところで
手張りで行く一種のところ
そこができてきて
あとはまあ
独自性を出していくっていうやり方
だからデザイン純正
その辺こう
きちんと教えてくれる人
だったり
フィードバックが的確な人だったり
デザイン教育がきちんと設計されてる事務所
に入ると非常にいいですけど
そんなの外から分かんないしね
外から分かんないからこそ
そういうのきちんと出していくと
いいのかな
就職
人を雇用したい側とすればね
なんか最近ちょっと
学校に興味があるけど
まあでも難しいな
なんかこう
専門学校で関わっていくと
若干こう
俺だったらこうすりたいのに
みたいなのがあっても
うち非常勤講師だと
そこまでコミットしづらいできないので
って考えると
自分でやれる環境があればいいけど
まあたくさんあるしね
たくさんあるし
フィールドさんもあれいいですよね
ちょっと聞いてみよう
はいということで
毎回なんか最近30分
ギリギリになるようになってきた
なのでめちゃくちゃ久しぶりに
デザインの話でしたね
はいではそんなところで終わります
はいありがとうございました
30:01
さようなら
