hugo sasaki's Portfolio

都内某所でウェブに関わるお仕事をしながら、ウェブ制作者レベル3を目指している管理人の学習記録用のブログです。

Photoshopでトレース 第3話

未分類

今度こそ楽にトレースしたいと意気込んでネタ探ししたところ、やっと楽そうなバナーを見つけました。

これで何も考えずに1日1バナーができる!万歳

 

そう思いましたが、3日目に楽をしようと思っても時すでに遅し。なんだかんだで楽そうに見えても細かいところが気になってしまうのでした。

今回トレースしたのはこちら。

単色でフォントも見るからに2~3種類しかなさそうなシンプルなものバナーです。

ロゴは会社の顔なので、フォントとかではなくきちんとデザインされたものなので、ロゴ以外をトレースしました。

 

シンプルさ故に、前回までとは違った場所がとても気になりだしたので、今回気になった点を3つまとめました。

1.ベースカラー(#42ce9f)と白しか使われていないシンプルな配色。

「色の連想」から考えると、緑は「若々しい・さわやか・安全・平和」というイメージを持っている。プロジェクト管理ツールなので、時間管理の厳しいプロジェクトに対して「安全」というイメージを持たせる狙いを感じました。

2.「最も使いやすい」の部分をボックスで囲み、色を反転させることで目立たせている。一番伝わってほしい情報・伝えたいことを、2色の色使いで表現している。

たった2色しか使われていないバナーですが、一番強調したい部分を反転させることで視線が向かうようにしているのは「すごいな…」という小学生のような感想を持たざるを得ませんでした。

3.ジャンプ率は2.8(“80.8”):1.3(“プロジェクト管理ツール,最も使いやすい”):1(左記以外のテキスト)「数字→最も使いやすい,プロジェクト管理ツール→バックログのロゴ」という視線の流れになっていると考えられる。

2に関わっているところですが、ただ反転させただけではここまで気が付かなかったのではないかと思います。「数字を見て、その数字が何の数字なのか」という流れを、ジャンプ率の違いで言葉にしなくでも伝わるようにデザインしたと感じました。

「80.8?なんのこと?…あぁ、使いやすいのか。backlogっていうんだ。へえぇ…今度使ってみようか」という流れを作りたいのだと思います。

蛇足ですが、使いやすいかどうかは判断するほど使っていないのですが、たまに使っているツールなので。ちょっと親近感もあって今回のトレース題材に選びました。

 

3日坊主の最終日。明日が来ますように。

今日のところはこの辺で!

レイアウトコンセプト
使用ツール
制作時間