はじめに

私の場合、専門学校の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（基礎の理解ができていない可能性）に
なったりしていて結局身につくことが少なかったです。

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

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