2016年にザッパラス社内で共有したデザイン系記事

Photo by Matthew Guay

僕は2016/8/1にザッパラスに転職してきたのですが、それから毎日欠かさず最低１つ、社内のデザイナー用Slackチャンネルに気になったデザイン系の記事などを共有してきました。

目的としては、

1. 注目されている情報の摂取の仕方
2. 解釈の仕方
3. それらを通じたデザイナーのあり方

の3つを社内に共有するためで、単にURLをコピペするだけではなく、毎回↓のように何かしらコメントをつけていて、長いものはそれ自体が記事みたいになってしまうこともあります。

ある日の共有

※「「デザインできる組織」をつくるためのデザイン情報共有の取り組み」として別記事に共有の目的や方法をまとめてあります。

ということで、2016年を振り返る意味でそのリストを公開しようと思います。
実際に紹介する際は、記事の内容と対話するようなかたちで、補足・肯定・否定など、様々な意図を込め、英語の記事は部分的に翻訳してたりもしますが、社内のみを対象にした内容も多いので、残念ながらここでは割愛させていただきます。

※このリストは共有した順番になっていますが、最新の記事だけではなく、社内の状況に合わせて共有しているので、古い記事が混じっている場合があります。

1. 「iOS 10」と「macOS Sierra」、パブリックベータ版が提供開始
2. Design Principles — Overview — iOS Human Interface Guidelines
3. What’s New in iOS 10 — Overview — iOS Human Interface Guidelines
4. モーションデザインはUIの未来
5. デザイン組織づくりでの思い込みによる2つの課題と解決への提案
6. [初心者必見]Google Analyticsのデータから、カスタマージャーニーマップを作る方法。
7. 時間軸の中で必要とされるものとは？ — コンテキストを理解する(4)
8. 衰え続けるApple製品の使いやすさ
9. プロトタイピングツール Prott に画面遷移を自動作成する機能が追加
10. 5 Actual Web Designs Trends for 2016
11. Android端末でSketchをリアルタイムプレビューするアプリ「Crystal」の紹介
12. Using the LINE Logo
13. Slackにおける組織的なUXデザインプロセス
14. 専門家任せにしてませんか？ チーム全員がUXを意識すべき理由
15. Samara
16. エンジニアのデザインが10倍よくなる！「余白恐怖症」を克服する方法とは？
17. 16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
18. WWDC16で見えてきたもの
19. エンジニアの方にも知っておいてほしい、デザイナーが考えていること（第1回）
20. UIデザイナーなら必ず押さえたい、2016年下期へ向けたモバイルデザイントレンド
21. 意味不明なことばかり言ってるUXデザイナー達の代わりに「UXデザインとは何か」を端的に説明しよう
22. Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう
23. 登録フォームのユーザビリティを向上させる５つのポイント
24. kawacolle “かわいいもの”のコレクションサイト
25. 続きを読むボタンを考えたやつは死ね
26. Principle
27. FLINTO
28. inVISION
29. Bad Design vs. Good Design: 5 Examples We can Learn From
30. KLM iFly 50
31. Bolden
32. Cultivated Wit | We Make Fun
33. たった14年で消えた伝説の芸術学校「バウハウス」の3万2000点もの作品を無料でハーバード大学美術館が公開
34. なぜ多彩なデザインツールが出てきているのか
35. 変わり始めたデザイナーの仕事内容と役職別の平均給与
36. 平均年収は日本の3倍！？シリコンバレーで働くWebエンジニアの実態
37. バイオハザードのマークはどのようにデザインされたのか？
38. ライアン・マッギンレーより、若き写真家たちへ贈る言葉。
39. Webデザインの没個性化と認知容易性
40. When to Use a Switch or Checkbox
41. ［CEDEC 2016］分かりやすいゲームのUIを作るには？ アニメーションを用いたプレイヤー誘導のテクニック
42. [CEDEC2016] エフェクト/UIモーションの役割〜背後にある意図とその実現
43. デザイナーに必要なのはスキルアップではなくスキルチェンジ
44. 究極の目標達成メソッド「ダブルループ学習」って？
45. 「シズル感」と「読みやすさ」ってどうやってデザインで解決する？お菓子専門ウェブメディアのリニューアルで使った手法
46. スイーツとお菓子のおいしい話が詰まった、CAKE.TOKYO
47. ソーシャルメディアでシェアされるコツは？できるデザインの秘訣11個まとめ
48. ケーススタディ：ヴァージンアメリカ航空を上場に導いたUXデザイン
49. AMITY
50. Amity — A completing messaging app, with a new level of interaction
51. About Face 3 インタラクションデザインの極意
52. ボタンデザインの歴史と進化から学ぶベストプラクティス
53. オンラインストア購入率をアップさせる5つのUXポイント
54. Webデザインにおける配色の重要性：色で共感を得るためには
55. 排卵期予測アプリ「Clue」がデザインにピンクを使わない理由
56. Apple — iPhone 7 and iPhone 7 Plus in 107 seconds
57. ユーザー体験 vs ビジネスゴール：デザイナーの新たな役割とは
58. MOTION PERIODIC TABLE モーション周期表
59. Easing Function 早見表
60. スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
61. デザイン原則がどの現場でも必要な理由
62. デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
63. 未来を発明するためにいまできること スタンフォード大学 集中講義II
64. 実践デザインプロセス ― 改訂版ダブルダイヤモンド
65. ノンデザイナーこそ知っておきたい！デザインでセンスより大切な心理学のルール
66. デザインとは決断である
67. 斬新なアイディアを開発する「水平思考」をマスターしよう
68. 流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
69. デザイナーとしての失敗との付き合い方
70. 【決定版】アプリ事業のKPIツリー！
71. WebサイトやアプリのUIをアニメーションで収集するギャラリーサイト・「UI Movement」
72. Craigslist on mobile
73. Collect UI
74. Checkout Pages
75. 物を売るために参考になるWEBデザイン集
76. これからのUXデザインにおけるモーションデザインの重要性
77. モバイルアプリのUI設計に大切な、7つの基本アニメーションまとめ
78. ノンデザイナーがもっと知りたい！センスより大切なデザイン心理学のルール＋3つ
79. フルスタックデザイナーは存在しない
80. アン・ハサウェイ主演映画「マイ・インターン」はPinterestを使って制作されたって知ってた？Pinterest Japanインタビュー｜石井リナ（連載15）
81. アンチパターンと言われるカルーセルを改善するポイント
82. Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
83. レスポンシブWebデザイン 制作の実践的ワークフローとテクニック
84. UIデザインの歴史に学ぶシャドウと奥行きの使い方
85. Saying farewell to Pixate (and looking to the future)
86. サービスに関わる人の学びの機会をふやす「本棚とノート」をはじめました
87. デザインを舐めていた新卒デザイナーがバナーを150本つくってわかったこと
88. UXデザイナーにもできるWeb高速化 「体感速度」改善3つのヒント
89. 任天堂のあの人気アプリはなぜストレスなのか？ 待ち時間から考えるUX
90. 俳句のようにデザインしよう — 制約から生まれる創造性
91. Wireframes and Flowcharts — 20 Helpful Resources
92. コンテンツ運用に役立つツールあれこれ
93. Airbnbを事例に学ぶ！失敗しないWebサイトの作り方
94. Palmが教えてくれたプロトタイプの真髄
95. グロースハック導入編 アクショナブルメトリクスを導入する
96. №031 評価を数字に委ねない。信じるべきは、自分のなかの「強いイメージ」──豊田泰久
97. アニメーションが心地よいマテリアルデザインのUIサンプル５選
98. Brand + UXデザインについて考える。（前編）
99. 最新のデザイントレンドがココに！Webデザイナーなら押さえたい情報サイト20選
100. 余白とはなにか。デザインが上達する６つのTips
101. 低迷するWeb担当者の胸に刻みたい 高CVRを叩き出すための最新6原則
102. デザイナーとは職種ではなくマインドセットである
103. カンタン、これは試したい！Google Fontsで9つの日本語フォントが無料ウェブフォントして利用可能に
104. 10 Flat Logos with Depth
105. ハンバーガーにフロッピー…わかりにくいアイコンはUIデザインに必要なのか？
106. うめだまりこ #イギリス自由帳
107. ジョブズさん、このロゴを気に入らないのであれば、使わなくても構いません。
108. Pinterest [Paul Rand]
109. フリルのロゴができるまで
110. Webサイトのフッターにサイトマップを設置すべき理由
111. モバイルのUI要素を視覚的に分けるための６つのガイドライン
112. Atomic Design を実案件に導入 — UI コンポーネントの粒度を明確化した結果と副産物
113. 珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで
114. Atomic Design
115. Atomic Designの考え方と利点・欠点
116. WEB制作向けブラウザ「Blisk」を使った瞬間、恋に落ちた
117. サイバーエージェント流！「簡単」がもたらすユーザーメリット〜”誰でも簡単に”を実現する、Ameba Owndのサービスデザインと挑戦〜
118. デザイン思考の基礎
119. メディアサイトの記事ページをデザインするときに、参考になる数値まとめ
120. [速報]Adobe XDの大規模機能追加を発表！
     スタイルガイドの共有やコラボ編集をはじめ、待望のレイヤー・シンボル機能を搭載
121. さよなら Pixate, よろしくProtoPie
122. デザイナーのこだわりを感じる！優れたUIを持つアプリ５選
123. UXデザインにおけるユーザーに安心感を与える５つのポイント
124. 誰のためのデザイン？ 増補・改訂版 ―認知科学者のデザイン原論
125. モバイルアプリのUXを改善する４つのディテール
126. ディフェンシブ・ウェブデザインの技術―「うまくいかないとき」に備えたデザイン、「上手に」間違えるためのデザイン (Web designing books)
127. ゲームUIブログ ゲームUI画像の収集と考察
128. デザインチームの仕事に、チームを超えたコラボレーションをうまく取り入れよう
129. 歴史から考えるフラットデザインとマテリアルデザインの違いとは？
130. MATERIAL DESIGN Gallery
131. 資生堂『花椿』がWebフォント『TypeSquare』を選んだワケ
132. 日本語Webフォントを使用している60のWebサイト
133. iOSアプリでレシピ投稿機能を統合したねらい
134. ユーザーストーリーから考えるUIデザイン
135. ユーザーストーリー駆動開発で行こう。
136. meycoのUX&UIデザイン技術メモ
137. モバイルデザインで押さえておきたい６つの基礎テクニック
138. UXを向上させる５種類のアニメーションの使い方
139. もう、レスポンシブでいいんじゃない？
140. サーバサイドエンジニアが考える、エラー発生時のより良いUX
141. Webページの表現を広げてくれる日本語のWebフォント10選
142. 2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」
143. 2017年に「これは流行る！」な6つのWebデザインスタイルを予想
144. 2017年に人気となる、知っておきたいUIデザインのトレンド8個まとめ
145. ケーススタディ：NetflixはどのようにA/Bテストを実施しているのか？
146. モバイルにおける入力フォーム最適化(EFO)の７つのルール
147. 現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは
148. Webデザインでよく使うUI要素の名称・用語一覧
149. 『響け！ユーフォニアム』の主要キャラ10人に合った書体で名前を組んでみた
150. モバイルアプリにおけるナビゲーションUIのデザインパターン
151. Google DocsみたいなUIデザインツール「Figma」Sketchから乗り換えるべき？
152. 食材宅配サービスOisixにおけるUXの取り組みとアプリの改善事例
153. ネタがない！という時に役立つサイト6選
154. 「なぜ買わないの？」たった1つのシンプルな質問がCVRを27％も向上させた話
155. 文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング
156. チームを動かすデザイナー
157. ユーザーが理解しやすいアイコンにするための６つのルール
158. 2016年版！無料で使える、商用利用可能なフリー写真素材サイト総まとめ47選
159. マイクロインタラクションとは？５つの活用事例とメリット
160. タイプデザインコンペティション 2016 結果発表
161. - i2f : Interactive & Interface Factory -
162. 2017年用、日本語のフリーフォント260種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
163. なぜウェブデザイナーは暗黒面に落ちて人をだます「ダークパターン」を使うようになるのか？
164. バラク・オバマが伊藤穰一に語った未来への希望と懸念すべきいくつかのこと WIRED.jp
165. 【2016年版】これだけ読めば大丈夫！デザインの基礎が学べる厳選15記事
166. 「Fの法則」に学ぶ！ノンデザイナーでも知っておきたい背景写真の選び方
167. 常にキャッチアップしよう！iOSヒューマンインターフェイスガイドライン
168. フリルのiOSアプリ開発におけるエンジニアとデザイナーの作業分担について
169. モバイル向けデザインのあるべき姿 ユーザーの求めるモバイルアプリを生み出す7つのTips
170. アイコンを作るときのtips
171. ボタンのラベルや配置順序のベストプラクティスとは
172. 改めてWebサイトの品質について考える
173. パンくずリストの基本と気をつけるべきポイント
174. スター不在のWebサービスデザイナー、その現状と対策
175. 15万記事を分析してわかった、クリック率を20％高める「記事タイトル」3つの法則とは？
176. PJで協働してUIデザインを作るための3つのポイント
177. UIデザイナーに必要な「基準を持つ」こと
178. 融けるデザイン ハード×ソフト×ネット時代の新たな設計論
179. iOS Human Interface Guidelines（日本語版）
180. iOS ヒューマンインターフェースの原則
181. 新しいものが大好きなGoodpatchで12月に話題になったアプリ、サービス、デザインまとめ（2016）
182. 【グロースハッカー必見】27のグロースハックテクニックと、100のUX・CROツール

弊社デザイナーの弱点がわかるラインナップですね 笑

実際にやってみてわかったことは、
1. 社内で共有するので気兼ねなく書け、ネタもあるのでストレートに本質的な内容にしやすい。
2. 意図のある共有にするための精査がフィルタになって、自分にとっても良い刺激になる。
3. 毎日良い記事があるわけじゃない。何かしら波があるらしい。
といったことでした。

あらためて見返して、ネタを提供していただいた方々、とくに長谷川恭久さんとUX MILK（Nick Babichさんの翻訳記事がおすすめ）さんへの感謝の念が湧き上がってきました。ありがとうございます！

こんな記事（いやホントはもっとややこしい記事も）共有しながら語りつつ組織を作っていきたいと思ってますので、ザッパラスで一緒にやってくれる人がいたらうれしいです。興味ある方はご連絡ください！