CA MOBILE TECH BLOG

株式会社シーエー・モバイルのエンジニア・デザイナーの活動を綴るブログです

株式会社シーエー・モバイルの技術広報による、
技術に特化したブログです。
エンジニアとデザイナーの活動や思想を綴ってゆきます。

Evernoteを活用してデザイナー力を300%上げる(上げたい)!

f:id:cam-engineer:20180206135904j:plain

おはこんばんちは!CAMFORTUNEのクリエイティブディレクターをしている近藤です。今回は普段の情報管理、仕事効率化に使っている Everenote のデザイナー的な使い方を紹介させていただきます。



Evernoteについて

evernote.com

まず今回のテーマの Evernoteですが、ご存じでしょうか。クラウドにメモやノート、資料、画像から音声までノートブックとノートという形式で集約出来るサービスです。クラウドにデータがあることで、異なる端末からも同じ情報にアクセスしたり、チームメンバーと共有することが可能です。ビジネス的な仕事効率化ツールの印象もあるかと思いますが、デザインの引き出し管理などにも使えますし、趣味のネタ集めなどにもかなり使えます。

私の場合は、Evernoteに登録したのが2008年8月だったので、9年半ほど使用していることになります。使い始めの頃は無意味にPCのデスクトップをログで残していたりしていました。本格的に使い出したのは、2010年に delicious(旧 del.icio.us) という当時使っていたソーシャルブックマークがサービスクローズをするという騒ぎがあった時に、そこへ貯め込んでいたブックマークの避難先としてEvernoteを選んでからです(結局その後しばらく使えていたので併用していましたが)。

f:id:cam-engineer:20180205165032p:plain
deliciousから移行したノートブック内のノート。過去のブックマーク資産も全部アクセス出来る。ブックマークしているものが懐かしい...

一時はライフログやGTDなどの使い方も試していたりしましたが、面倒になって止めてしまいました。


シーエー・モバイルではEvernoteビジネスプランを導入していますので、ビジネスアカウントとプライベートのアカウントを切り替えながら、情報収集と情報の引き出しを日常的に行っています。



デザイナーのEvernote活用

デザイナーが活用する場合、やはりデザインに関する情報や「デザイン」そのものの収集が中心になります。

デザインに関するノートブックはいくつかありますが、


* サイトのスクショ

* トレンドネタやデザイン研究などのTips

* MaterialDesignやOSのデザインガイドラインなど

* ロゴデザインだけ / パッケージデザインだけ

* CSSなどのスニペット

* よく出来たスライドやプレゼン資料など


などなど。他には外部と連携で PinterestやInstagramのピン、投稿をまとめたノートブックもあります。


f:id:cam-engineer:20180205165038p:plain
チームでガイドラインなどを共有、ストックするノートブックの例。PDFも入れておけばMacならそのままプレビューできるし、検索対象にもなるので便利。


ノートブックで分けるか、タグで分けるかは悩ましいところではありますが、情報を集める際の整理コストと引き出す際のコストで自分に合った整理方法を段々見つけていければ良いのかなと思います。Evernoteは画像からの文字のOCRも優秀なので、画像やスクショに入れたいタグ、後で検索に使いたいワードが含まれるような場合は特にタグ付け等しなくてもわりとどうにかなります。



参考になりそうなWebサイトのスクリーンショット

f:id:cam-engineer:20180205165057p:plain

こちらはブラウザの拡張でスクリーンショットを撮り、タイトル、URL、タグをつけて貯めていくノートブックです。新しいデザインを考える際やデザインの途中で詰まった際によく見るノートです。


Webサイトのデザインは頻繁に変わりますし、普通にブックマークしていては切りがないし、リンクから毎回見に行くのは面倒なのでEvernoteにスクショを集めます。


タグは以下のようなものを付けておくのがオススメです。

1. ★★★★, ★★★★★ といった星評価
私は★4と★5だけ付けています。特に好きなもの、参考になるもの、唸らされたものなどがピックアップしやすくなります。

2. recruit, portfoio, agency, buzz, campaign など特定のサイトの属性
これは利用がイメージしやすいかと思います。

3. parallax, scroll, navigation などインタラクションやUIで特に目を惹くもの
スクリーンショットだけだと動的な面白さを思い出せないこともあるので、入れておくと便利です。

4. color, black, yellow など印象的な色使いの場合は色名など
ノートブックのサムネイルでも大体わかりますが、余裕があったら付けています。

5. :-)いいね, :-<哀しい, !nice など記号も使いながら気分で
完全に気分ですが、感情を残すタグがあると後で見返す時に楽しかったりします。


タグ付けはあまりこだわりすぎるよりは、とりあえず思いついたら何でも付けるところから始めて、いつか(そのうち)整理するくらいでいいと思います。「情報収集」を面倒にしないことの方が重要です。

Webデザインは流行の移り変わりも早かったりしますが、後で見返すと当時のトレンドや、自分が関わってた案件が思い出されたりしてちょっと楽しいです。

表示はスクショとタグの一覧性の良い「サマリービュー」が圧倒的オススメです。


f:id:cam-engineer:20180205165030p:plain
「表示」メニュー > サマリービュー


参考になりそうなデザインTipsいろいろ

f:id:cam-engineer:20180205165048p:plain

こちらにはRSSで購読しているブログフィードやSNSで収集した記事などから参考になりそうなもの、いつか役に立ちそうなものを入れています。ここへ放り込む段階では内容まであまり読み込んだりはしていません。Feedlyやはてなブックマーク、SNSなどから気になったものをタブでどんどん開いてEvernoteのブラウザ拡張で登録しています。デザインや実装のTipsからフォントや素材、トレンド関連などがここに貯まっていきます。



Pinterestとの連携


f:id:cam-engineer:20180205165043p:plain


Pinterestはいつも頻繁に使っているわけではないのですが、ビジュアル中心でネタを集めるとき、参考になりそうなものを探すときにはやはり重宝します。Evernoteとの連携はIFTTTを使います。

f:id:cam-engineer:20180205165119p:plain

IFTTTのアプレットはたくさんあるのでどれでもいいんですが、

  • イメージをピンしたらEvernoteへ送る

この設定だけ出来ればOKです。同様にInstagramもイメージソースとして活用できそうです。

ifttt.com



Evernoteのノートブックをデザイナーの財産に

デザインに関する情報やTips、ネタやポートフォリオ、資料などを集めたノートブックは自分のデザイナーとしての引き出しであり、財産です。いつ使うか引き出すかはわからないものもありますが、「自分が見た、集めたものをここに集約している」、「ここを探せば出てくる」、そんな安心感があります。それを実感するとさらに情報のインプットが楽しくなってきます。


もちろん、インプットだけではもったいないし、意味が無いのでその後はアウトプットが大事になってきます。アウトプットに関してはEvernoteでは完結できませんが、

* プロジェクト、案件毎にノートブックを作成

* 1人ブレスト、アイデアのメモを箇条書きに

* 関連するノートのリンクをそこへ貼っていく

* 途中の成果物、仕様書、クライアントからの修正依頼内容

* マインドマップなどを貼っていく


などをまとめていくことで、制作に役立てていくことができます。過去のプロジェクトの進行状況、成果物などのアーカイブもまた財産です。

f:id:cam-engineer:20180205165024p:plain
マインドマップを貼ったノートの例。これは結局進展ありませんがそのうちなんかやりたい!



以上、私的なEvenote活用の簡単な紹介でした。こればかりは使って情報が集まってこないと価値が出てきませんので積極的に使い始めるきっかけにこの記事がなれれば幸いです。



〈 筆者プロフィール 〉

f:id:cam-engineer:20180205182315j:plain 近藤 圭(こんどう・けい) 万年筆でデザインするクリエイティブディレクター。主に女性向けのサービスを中心に、デザイナーの自己満足に陥らない、サービスの成長に繋がるデザインを考えています。