デザインの細かいところは、トレースして初めて見えてくる

サトゥー

こんにちは、理系東大生ブロガーのサトゥーです。

 

最近、バイトをしています。

 

予想以上につまらなくてびっくりしています。

インターンの方が自分の裁量が大きく難易度が高い分、充実した時間を過ごせて、なんというか、

サトゥー

生きてる!!!

って感じしますね。

 

なるべくバイトに時間溶かさなくて済むような人生がいいですね…

 

さて、今日はそのインターンと関係した話でもさせてください。

 

 

 

デザイナーはプレゼンが命

 

僕は4月はじめからデザイナーさんのもとで修行をさせていただき、
そして5月からはベンチャー企業でデザイナーとして働かせていただいております。

 

基本的に何も言われない状態から自分で色々と調べながらデザインを作成し、
説得力のある提案をして、厳しいフィードバックをいただいて…の繰り返しです。

 

デザイナーはプレゼンが命だなぁとよく感じます。

というのも、プレゼンに出すくらいのデザインというのは、その人が色々と試行錯誤をして到達した結果なのだから、
それを見せる時に説得力のある資料を同時に見せないと、「相手の好き嫌い」だけで判断されてしまうからです。

例えば一つのフォントでも、「実は作成中に100くらいのフォントを試して比べた結果これが一番よかった」という提案をするだけで説得力が一気に変わってきます。

量は力になりますね。雑な戦略ですが。

自分が時間と労力を割いて作ったデザインだからこそ、説得力のあるプレゼンが非常に重要になってくるという話でした。

個人的にイメージと違う意外な一面だったのでシェアしました。

 

 

 

僕が定期的にやっている「トレース」に関して

 

さて、僕が見習いデザイナーとして現在どんなことをしているのかというと、

「うまいデザインの写経」がまだまだメインです。

 

デザイン力を上げるには良いデザインを真似るのが一番というのが僕の師匠の教えです。

 

ていうかどの世界でも上手い人をパクるのが上達の近道っぽい感じがあります。

上達の一番早い方法は「上手い人を丸パクリすること」

これはライフハック本質情報です。

 

 

もちろん、

インターン先では実務ベースで要望を満たすようなデザインを考案して作成、提案するというものはやっていますが、

 

美術の成績も悪いし、絵も下手くそな自分が、
そんなに簡単にデザイナーとして生きていけるはずがありません。

 

 

今は、「ツール力」、「細部の美的感覚」を身につけるために、

上手いデザインをみて、自分なりに構造を見抜いて、写経していくという作業がメインです。

 

 

Sketchというツールを主に使用して、アプリのUIや、PCの画面を丸々トレースします。

使い方はネットにいくらでも転がっているので、とにかくその都度調べまくります。

 

トレースの方法はこれがかなり参考になりました。

http://noga0419.hatenablog.com/entry/trace-sketch

 

 

最近やったのがPCのツイッター画面ですね。

 

 

トレースするものはその日の気分で決めてます。長時間作業なので気分がのらないとつらい。
普段はPinterestで気になるwebデザインを探してきて、それをトレースしています。

 

 

 

せっかくなのでどんな感じで写経しているか、ちょーざっくり記録します。

見よう見まねでやっているので、正規の方法に合っているのかどうかは知りません

 

気になる画面をスクショして、Sketchのアートボード に貼り付けます。

ページの構造を意識しながら、図形を作って当てはめて、…を繰り返します。

 

画像が必要な場所では、Craftというプラグインを導入すればいい感じで取り込むことができます。
スクショでも構わないと思いますが。

こんな感じで使えます。便利かよ。

 

 

 

こんな感じで、背景を作って、中にまた箱を配置して…みたいな感じで作ると効率がいいです。

 

 

これが一応完成品。今見たら固定ツイートの右上の矢印つけ忘れてましたね…

作業自体は色々調べながらなので、だいたい4時間くらいかな…まだまだSketchを使いこなすには時間がかかりそうです…

 

アイコンも基本的にはIllustratorで写経しています。イラレも使いこなしたいので…

 

 

 

初回は特にひどかったんですが、(まじでSketchの使い方/トレースの仕方が分からなかった)今は色々とショートカットとか覚えたので時間は短縮されました。

ちなみに初回はこんな感じ。これに3時間近くかかったので成長したなぁという感じがします。

色々ピクセルずれてるし、なんか下の方の消えてくグラデーションの表現とかできてないし…みたいな。

 

 

Shift押しながらだと10pxずつ動かせたりとか、
そういう細かいショートカットまで身についてきたので、だいぶ楽になりましたね。

 

 

応用できそうな部分(例えばプロフィールとかツイートとか)は、応用できるSymbolという形で作成します。

この形で作っておくと、簡単に呼び出せて編集できるので後々楽になってくるんですね。

 

 

個人的に気づいた細かい部分が、ツイートアクティビティの棒グラフの部分。

真ん中のバーだけ1px太いんですよね。

めっちゃ細かいのでどうでもいい人にとってはどうでもいいのですが、おそらく見栄えが変わってくるのでしょう。

 

あと色も。
グレーも赤系のグレーは基本的に無くて、青系のグレーが基本になっているんですね。

 

 

トレースして初めて見えてくる「神が宿る細部」

 

こんな感じでトレース作業を時間が取れた時にがっつりやってます。
学校やインターンなどとの時間の兼ね合いもあるので、そこまでたくさん作業できていないのが現状ですが…

 

トレースしてみることで、
普段そのサイトを使っている時は意識しない「構造」だったり「色の構成」だったり「細かい要素の位置」だったりを気にするようになります。

 

 

 

 

 

そうすると、新しいものの見方が身につくので、普段webページを見ている時から

サトゥー

あ、このページのフォントなんか違うなぁ、なんだろう、ちょっといじってみるか

とか、

サトゥー

この色使いだとフラットデザイン再現できるのか、なるほど(メモメモ)

とか、ちょっとデザイナーっぽい細かい気づきができるようになるんです。(それっぽいでしょ)

 

美術できない僕でも。絵が下手くそな僕でも。

 

楽しいです。

電車とかでも、貼ってある広告のフォントだったり配色だったりに目がいきがちになってしまいました。

 

 

見習いデザイナーから早く脱出できるように、毎日頑張ってます。

ちょっと1年くらい休学して本格的に働くのアリだなぁとも考えています。

 

現状報告でした。それでは、図書館に延滞してた本返しに行きます。

 

明日明後日は東大は五月祭ですね。僕もがっつり働いています。
どこかでお会いするかもしれませんね。

 

それでは、今日もクリック頼んだ。


東大生ブログランキング

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)