【センスを磨く】参考デザインをかんたんに整理して「自分だけの引き出し」をつくれる神アプリ

ここの比率は、Lumaというサービスのページをなんとなく参考にしています。

もう1つは、トレーニングの中身を並べたカリキュラムの部分です。中身を開いたり閉じたりできて、閉じると何ができるかを一覧で見られるデザインにしています。

これは、Awwwardsの教育系の事業のページから仕組みを拝借しています。

見た目は全然違うと思います。でも仕組みはここから着想を得て、デザインもかなり参考にして、今の形に落ち着いています。

悪く言うと盗んでいるわけなんですけど、そのまま盗むことはしません。いいところを拝借して、自分のものにする。デザインが上達するうえで、これがめちゃくちゃ大事だと思っています。

日頃から引き出しを持っておくと、「あれのあれ、使えるかもな」と思いつくことがよくあります。

僕のEagleの使い方は、保存して貼るだけ

Eagleには、AIで検索できたり、色やタグで素材を整理できたりと、便利な機能がいっぱいあります。でも、ぶっちゃけ僕は全然使いこなしていません。

僕の使い方はシンプルです。

ブラウザの拡張機能で、範囲を選んで保存する

Eagleには、ブラウザの拡張機能があります。その中の「キャプチャーエリア」を使うと、画面の好きな範囲を選んで保存できます。

保存すると、選んだ範囲がそのままEagleに入ります。

右クリックでコピーして、Figmaに貼る

Eagleはクラウドのサービスではなく、自分のパソコンにデータを保存するアプリです。

保存した画像は、右クリックでコピーして、Figmaにそのまま貼れます。

保存してから貼るまでの流れは、文章だと伝わりにくいところです。動画の3分20秒ごろから見てもらうと分かりやすいと思います。

気になったら、その場でとりあえず保存する

保存するタイミングは、2つあります。

1つは、普段インターネットを使っているときです。たとえばX（旧Twitter）を見ていて、気になるものがあったら、その場で保存しておきます。

このバナーは、今自分が目指したいテイストに近いかもな、と思って保存しました。画像なら、右クリックの「Save to Eagle」で保存できます。

もう1つは、何かを作っていて、自分からリサーチするときです。

たとえばこの採用ページなら、「この辺のレイアウトが参考になりそうだな」「今作っている構造に近いな」と思ったら、ガンガン保存していきます。

整理は、たまにフォルダ分けするくらいで、あまりしていません。

作るときは、Figmaの横に参考を並べる

作るときは、Figmaの中に参考のエリアを作ります。そこにEagleから参考になるものを、ペッペッペッと置いていきます。

あとはそこから引っ張ってきて、横で実際にデザインを作っていきます。

自分の好きなもの置き場がある、という感じです。

スクショを撮っても、どこに行ったか分からなくなることってあると思います。そういうものを、手軽にひとつの場所で管理できるのが、Eagleのいいところかなと思います。

ただ、別にEagleじゃなくても全然いいと思っています。Notionでも、Finderでも大丈夫です。

参考を集めると、何がいいのか

なんで日頃から参考を集めたほうがいいのか。いいことは3つあります。

自分の好きなテイストが分かる

まず、自分の好きなテイストや表現が分かるようになります。

かわいいな、かっこいいな、なんかいいな、と思ったものを保存していきます。UIやWebサイトのデザインじゃなくて、写真でも何でもいいです。

集まったものを見返すと、自分が考えているビジュアルの傾向がなんとなく分かってきます。

僕の場合は、シンプルめなんだけど、ちょっとポップなものが多分好きなんですよね。

ゼロから始めなくてよくなる

デザインするときに、1から探すのももちろんやります。でも、保存した中から自分の琴線に引っかかったものを引っ張ってこられます。

まるっきりゼロじゃないところから始められます。

自分から引き出しを増やせる

ただ見るだけよりも、「自分はどこが気になるんだろう」と考えながら見るようになります。

見出しなのか、文字の行間（line-height）なのか、ボタンの色なのか。どこかにピンとくるポイントがあると思います。

たとえば「今は文字の扱いが足りないから、いろいろ見なきゃな」と思ったとします。そういうときに、気になったページの文章を保存しておいて、あとでほかのページと比べてみる。

とりあえず取っておくだけでも、自分から引き出しを増やそうとするきっかけになると思います。

知識で言われても分からないけど、見たら分かる

僕たちは、インターネットの上で人が歩くものを作っています。だから、自分が実際に歩いてみて感じたことは、どんどんストックしていったほうがいいと思います。

表現をするには、その表現を自分で体験してみることがめちゃくちゃ大事です。色の使い方を知識で言われても分からないけど、見たら分かるじゃないですか。

なんとなく見るのではなく、集めようと思って見ると、目が動きます。それを習慣にするために、Eagleでも、Finderでも、Notionでも、保存していく癖をつけておくといいかなと思います。

まずは今日、気になったものを1つ、どこかに保存してみてください。

この記事の内容は、動画でも話しています。

BONOでは、いいデザインから学ぶ方法を「センスを盗む技術」というトレーニングで扱っています。

見つけたUIを実際に手でなぞってみたい方は、こちらもどうぞ。