もっとできるデザイナーの見えかた

0927-title

もっとできるデザイナーの見えかた【Appleの凄さがわかります】

以前デザイナーの見えかたという記事で『角丸正方形』のきれいな見えかたについて記事を書きました。

デザイナーの見えかた

zenkai-kanseikei

この内容を元々共感した方に返信ツイートしたところ「この記事も参考になるよ」とURLを教えていただきました。

(リンク切れ)参考:完璧なiPhoneの不完全な形状

https://sarangsheth.net/2018/06/22/the-perfect-iphones-imperfect-geometry/amp/?__twitter_impression=true

え、英語…!

Google翻訳を全力で使って訳を読むと多分こんな感じです。

Appleの製品、iPhoneやアイコンについて

・Appleの製品の角丸部分の曲率はほとんど調整しています。

・角丸部分(Squircle【スクワクル】という)は実際には3.3°傾いています。

・Appleの製品を使うUXデザイナーはこの見え方に沿って作業、使用してください。

・こういうこだわりがApple製品の視覚的心地よさ、美しさに繋がっています。

※UXデザイナー…Webサイトを訪れた人をストレス無く、導いてあげるデザイン、構成等を作る人です。

…恐るべしAppleです。以前は雰囲気で角丸部分を増やしましたが明確に「3.3°」と書いています。

実際にやってみます

赤い線と黒い線が垂直になっていて、青の線は赤い線から3.3°傾いています。(画像のアイコンはソフトの機能で作った角丸正方形。)

0927-imakarakatamukeru

とても良い記事を教えていただいたので、早速やってみましょう。

aoga-kijyunsen

青い線が3.3°傾けた基準の線です。(フォトショップでは曲線を精密に変更できないため、実際にはイラストレーターで作っています。イラストレーター苦手です。)

フォトショップとイラストレーターの違い

フォトショップ…データを拡大すると『点』の集合体で作られている。

イラストレーターデータを拡大すると『線』の集合体で作られている。

つまり、超拡大するとフォトショップは画像がでこぼこしている。

これは、かなり難しすぎる。。。。

完成しました

完成したのがこちらです。

kansei-naraveru

真ん中が元のソフト機能で作った角丸正方形です。左が前回の完成形です(上下左右に丸みをつけたものです)。そして右が元の形から、それぞれの頂点を3.3°傾けた角丸正方形です。先ほどの参考記事の完成形と少し違いますが、きれいになりました。前回のものは少し丸みが強いですね。『かわいいアイコン』を作るときはこちらの角丸正方形でもいいと思います。

konkai-kanseikei

まとめ

Appleの製品、デザインにはとてつもないこだわりがあります。デザイナーは、このこだわりを形にするには普段からあらゆるものに『違和感』を感じなければなりません。初心者のうちはいろんなものを見て『あ、ここ曲がってる』『なんか中央がズレてる』と、いちいち気にしてデザイナーとしての目を鍛えていきましょう。

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です