マジで助かった、新卒1年目デザイナーの教科書的noteや便利なサービス8選
こんにちは！
delyでクラシルというレシピ動画サービスのデザイナーをしている@ysk_en です。
このnoteは delyのAdvent Calender 4日目の記事となります。
今年は人も増え、2つのカレンダーでお送りします。
dely Advent Calender #1
dely Advent Calender #2
昨日の記事は、GEN の Athena(Presto) × Redash で湯婆婆を実装してみる です。
巷で流行りの、何かしらのプログラミングを使って湯婆婆の契約を再現してみた✨
という内容です。僕も契約したら名前を取られました。
はじめに
「delyのデザイナーズはどんな記事を書いてるのかな」と去年のnoteをちらっと見たら、100いいね超えの超大作を執筆されていて、ビビリちらしました。
そして、一緒に働いているデザイナーの @ymdsko の先日出したnoteも200いいねを超えているんです。みんなすごい。
新卒1年目にはそんな大作をかけるほどの経験も知識もないので早々に諦めて、デザイナーになったこの1年のデザイン実務で、本当に役に立った・助かった便利なサービスや教科書的noteを実際のシーンを振り返りながらご紹介します。
1. Human Interface Guideline ,
Material Design Guideline
画像参照元：https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/
まずはこれ。ソフトウェアデザインの教科書的聖典
はじめにご紹介するのは Apple や Google が提唱するユーザーインターフェースのデザインガイドラインです。
これに従いさえすればデザインは完璧！ということは決してないですが、世の中の開発者たちは、概ねこれらのガイドラインをベースに設計しています。
まだデザインの右も左も分からなかったころ、ただサービスのデザインをトレース（劣化コピー）したり、俺的最強のデザインを作り上げていました。この状態のままでは、ユーザーが深く考えなくても使えるデザインを作ることは難しいです。
世の中のデファクトスタンダードに沿ったルールをベースにすることで、ユーザーが新しい所作を覚えなくても、自然なフローでアプリケーションを操作することができます。ある意味無思考できるようにするには、ユーザーインターフェースの基礎としてガイドラインを頭に入れておくのが良さそうです。
2. Mobbin , Consim.
Mobbin は iOS アプリケーションのスクリーンショットを導線ごとに見られるサービスです。実機で実際に触って体感するのが一番だと思いますが、さくっと確認したいときに便利です。
画像参照元：https://mobbin.design/apps/spotify
また、過去のバージョンを遡ることもできるので、機能のデザイン変更があったときに「なぜこのデザインに変えたのか」を考える思考トレーニングにも使うことができます。
Consim. は Mobbin と同じようなサービスですが、大きく違うのは以下の通りです。
・紹介しているユーザーインターフェースが日本語
・iOS / Android 両パターンあり、見比べられる
先ほどご紹介した、デザインガイドラインを見ていただけると分かるように、Apple と Google で思想が大きく異なります。
思想の基が違うので、当然ユーザーインターフェースの組み立て方も変わってくるわけです。
Conism. では、スクリーンショット内のユーザーインターフェースが日本語表記な上、両OSの違いを並べて見ることができるため、2つのプラットフォームのアプリケーションを同時にデザインしていた時にとても役立ちました。
画像参照元：https://consim.design/apps/twitter/
3. Pinterest
5年前くらいから浸透し始め、最近はIT界隈では知らない人の方が珍しくなってきました。Pinterest は画像からアイデアを探し、まとめることができるサービスです。
暇なときにぼーっと眺めてるときの方が多いですが、デザイン実務では、はじめて作るタイプのデザインをするときにインスピレーションを得ることに使っています。
delyの開発チームでは、プロジェクトの始めからクリエイティブをガッツリ作り込むことは多くないです。仮説を立て、クリエイティブを作り、検証を回し、分析して、クリエイティブをアップデートしていく。という検証のフローをスピード感を持って回しています。
その超高速な開発スピードに乗せるためには、世紀の天才的デザインを生み出す時間も、車輪の再発明をしている時間もないわけです。
先人たちが生み出してくれた、素晴らしいクリエイティブに敬意を表しながら、取り込み、自己最適化して超えていきます。
余談
「デジタルのクリエイティブで日本語のイケてるデザインを見つけるのが難しい」と思っていたのですが、中華圏の漢字デザインがかなりドンピシャで性癖に刺さることを発見しました。
Pinterest は機械学習を使った画像検索ができるので、自分が求めていたアイデアを一度見つけられると、それをベースに永遠に追うことができます。
また、以下のリンク先のようにボードとしてアイデアをまとめると、さらにレコメンドの精度があがります。沼です。
4. unDraw
商用・個人問わずに使えるイラストサービスです。
おすすめポイント
・SVG で画像を書き出せる
・アクセントカラーを一括で自由に変更できる
・フラットなデザインとの相性が良い
サムネイルをさくっと作らないといけないけど、文字だけだと味気ない！というときにアクセントとして、それっぽい雰囲気を出すことができます。LPを作るときにもおすすめです。
5. Unsplash
商用・個人問わずに使える、高解像度・高クオリティな写真のサービスです。
おすすめポイント
・キーワード検索で写真を探せる
・クオリティが高く雰囲気のある写真が多い
・Figma のプラグインが神がかっている
資料作成の時に、著作権が曖昧なインターネット上の写真を引っ張ってくるより、クオリティが高く・ライセンスがはっきりしているので、安心して使うことができます。
そして、Figma のプラグインが神がかっています。
Unsplash の Figma プラグインから、サムネイルに一括で写真を流し込むことができます。
また、human, portrait などのワードで検索すれば、人の写真が出てくるので、ちょっとしたユーザーアイコンにも使用できます。
6. SF Symbols
Apple が提供するアイコンアセットです。2400以上のアイコンが用意されています。
アプリケーションのデザインで悩みのタネなのがアイコンです。統一感がありながら、長期の利用に耐えられ、ユーザーが混乱しないアイコンを用意するにはそれなりのコストがかかります。
MVPで機能をデザインし、アイコン一つ一つを作り込むコストがかけられない場合に重宝しています。
これまでのライセンスフリーなサービスとは違い、実質的にiOS, MacOS アプリケーションでの使用に限定しているため、それ以外での商用利用はできないので注意が必要です。（使用の際は必ずご自身でライセンスポリシーをお読みください）
7. dely CXO 坪田さんのnote
2年前のnoteですが、ITベンチャーで働くデザイナーとしての根底の考え方は大きく変わっていないと思います。学生時代のインターンを始める前に読んで、それまで思い込んでいた固定概念が溶けていったのを覚えています。
情報もデザインも成功パターンも目まぐるしく変わるITベンチャーでは、常に思考をアップデートしていくことが生き抜くために必要だと感じています。半年前の当たり前が今ではありえないものだったりします。
固定概念に囚われず、柔軟な視点を持てるように意識していきたいです。
8. DeNA CEO 南場さんの言葉をまとめたnote
最後に、これはぜひ読んでほしいです。「人や自分に向かわずに、コトに向かう」がどういうことなのか。なんで大事なのか。
おわりに
明日は、@_ikki02さん の delyクラシル、最近のデータ基盤の話 です！
そして、delyではエンジニア・デザイナー共に絶賛募集中です！
クラシルやTRILL開発部の情報が以下のリンク先にまとまっています。
また、開発メンバーが組織や技術・手法などについてざっくばらんにお話しするオンラインイベントを開催しています。「雰囲気をみてみたい」「聞きたいことがある」などありましたら、ぜひご参加ください！
お会いできるのを楽しみにしています！
いただいたサポートはおいしいごはんや知識の糧となり、得た知見を元にnoteに還元させていただきます。