初心者向けの会社で教わったデザイン

はじめに

私の場合、専門学校の2年間という短期間では、
ツールを覚えることが一番比重としては大きかったので、
細かい指導は会社に入って学びました。
(大学だと教えてもらえるんでしょうか?)

本で読んでも、細かすぎて書いてない・わかりにくいところがあって、
会社で懇切丁寧な先輩が教えてくれて、ようやく理解しました。

なので、こういうところ意識するとちょっとよくなる
をまとめようかなと思いました。


Q:「ピクセルずれ」をしている画像はどっち?

会社に入って「ピクセルずれしてるよ」と言われたのですが、
これ最初はよくわからなかったです。
上の画像は、片方がピクセルずれをしている正方形です。
よく見ないとわからないところなのですが、
結構このピクセルずれによる見え方の違いが重要です。

なぜかというと、せっかく解像度(画像の品質のこと)を
合わせた画像でも、ぼやけて見えてしまうからです。


A:左がピクセルずれをしている画像

よく見ないとわかりにくいところですが、
Photoshopの情報で開いたりするとずれていることがわかります。
この場合、W(横幅)が400.5pxで、Y(縦軸)も176.99pxなので、
サイズも軸からもずれた画像です。

ただの正方形だとあまりわからないと思いますが、
ICONなんかだと特にわかりやすいことも。

直し方は、四捨五入をします。
W(横幅)が400.5pxなら0.5を消すために、400pxにするか401pxにする。
この場合、1pxはキリが良くないし、
スマホの時に偶数の方が綺麗に見えるなどなどがあり、
400pxの方がいいです。

Y(縦軸)も176.99pxの0.99pxを消すために177pxとかにします。
ここは他の要素とのマージン(余白)の取り方次第にもなります。


Q:なにを読ませたいでしょう?

どれが見やすいですか?
左上:要素がバラバラでどれが見せたいのかわからない
右上:「食べ歩きが趣味」ということがわかる
左下:「たなかさん」だということがわかる
右下:円が目立つ

この場合、見やすいところ=情報として目立たせたいということです。
左上:× これはどこを読ませたいのか、わからない
右上:「食べ歩きが趣味」を目立たせたい
左下:「たなかさん」を目立たせたい
右下:円を目立たせたい

ということは、そもそもの前提として何をしたいの??
がないと順位をつけて見せられません。
会社に入ったとき、これ作っておいてと簡単に依頼されることがありますが、
そういうときに、目的は何か?を明確に聞くことが重要です。
すでに仕様書にあるのであれば、目的に沿っているか検討して制作すると、
理論的なデザインに繋げられます。(理論的だと説得力に繋がる!)


グルーピングする

下にさとうさんが増えました。
このときに、たなかさんとさとうさんは共通項目があるので、
右のように一緒にしてしまってもいいわけです。

文字情報が多いと、読み手は情報の整理を必要としてしまうので、
食べ歩きでまとめてしまえば二人とも食べ歩きが趣味!と明確になります。

デザイン書でもグルーピングはあるものの、
円と円と三角と四角と…みたいな図形のみだったりしますが
よくある要素で考えるとこんな風になります。


基礎+いろんなインプット

まだまだ勉強中ですが、
基礎+流行りのデザインとかインプットをしていくと
ちょっとでもいいアウトプットに繋がると思いました。

今まで、転々としている中で、会社によっては、
感覚的に違うからやり直し(NGの理由が不明確)とか、
逆に、なんでも作ればOK(基礎の理解ができていない可能性)に
なったりしていて結局身につくことが少なかったです。

会社でこういう教わる機会がないと、
実践的に理解する機会損失になるんでしょうね。
(もとから自分でできちゃう素晴らしい人もいるかもですが)

きちんと理論的に教わる方がデザイナーとして早い成長に繋がると思うので
こういう細かい基礎も重要だと思います。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

20

Ai Ogura

デザインとビジネス

ビジュアルデザインだけじゃない視点でつくっていきたい。
2つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。