ProductZine Day＆オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine（プロダクトジン）」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。

2022年8月9日 ある企業さまでの研修「45分間で『ユーザー中心のものづくり』ができるまで詰め込む」のスライドです。登壇枠が45分という限られた時間のなかで、UXデザイン・UXリサーチのもっとも大切なエッセンスを凝縮してお伝えするようにしました。Read less

プロダクトマネジメントを学びたい人、プロダクトマネージャーにおすすめの書籍です。 以下、記載した書籍のリストです ## Product Management ### プロダクトマネジメントを広く理解する 「プロダクトマネジメント ―ビルドトラップを避け顧客に価値を届ける」オライリージャパン (2020/10/26) https://www.amazon.co.jp/dp/4873119251/ 「プロダクトマネジメントのすべて 事業戦略・IT開発・UXデザイン・マーケティングからチーム・組織運営まで」翔泳社 (2021/3/3) https://www.amazon.co.jp/dp/4798166391/ 「INSPIRED 熱狂させる製品を生み出すプロダクトマネジメント」日本能率協会マネジメントセンター (2019/11/1) https://www.amazon.co.jp/dp/4

久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱

この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ

どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

At 332 meters, this is the deepest any human has ever scuba dived. Set by Ahmed Gabr in 2014.

人工知能や深層学習が、デザインにも使用できるものが増えてきましたね。 落書きのように簡単に描いたスケッチから、写真のようにリアルな画像を自動生成する「GauGAN」を紹介します。 GauGAN Turns Doodles into Stunning, Photorealistic Landscapes GauGANは、印象派の画家ポール・ゴーギャンにちなんで名付けられたNVIDIA AI Researchプロジェクトの一つです。 ブラシツールや塗りつぶしツールで描いたスケッチを元に、雲や山や木や水や草や岩などのラベルを付けると、写実的な画像を自動生成します。他の画像をつなぎ合わせたり、テクスチャをカットアンドペーストするだけではなく、アーティストが何かを描くのと同じように、新しい画像を生成します。 SPADEが使用されており、既存の方法よりもリアルな画像を生成します。

SNSであれニュースサイトであれ、タイムラインは自然状態で放置をすると、どんどんネガティヴに闇堕ちしていく。 これはnoteにおいても、つねに注意を払っている課題だ。なぜ多くのサービスでタイムラインが闇落ちするのか、チームと共有するためのメモ。 人間の脳は、ネガティヴな情報に積極的に注目する人間の脳は、原始時代に基礎設計されてから、ほとんど進歩していない。このため現代の人間の意思決定は、しばしば原始時代の生存戦略に引っ張られて判断を誤る。 判断ミスが死を意味するような環境で、長く生き抜いてきた私たち人類は、基本的に保守的だ。生存を優先し、損失の回避を優先するようにできている。5年後の穀物よりも、この瞬間に猛獣に襲われて死なないことを優先する。そういうコンセプトで進化をしてきた。 目前の危機回避を優先するなら、重要なのは危険の兆候を捉え、即座に解消することだ。かくして、ネコジャラシに弄ばれる

ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作

こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割

「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー

当サイトでは、定期的に魅力的な最新ウェブサイトのデザインをまとめて紹介していますが、2018年は革新的なエフェクトやインタラクティブな仕掛けをつかったサイトが、たくさん登場しました。 サイトに動きを加えるマイクロインタラクションやホバーエフェクト、一般的なグリッドレイアウトを無視したり、マウスカーソルのカスタマイズ、画面が乱れた歪み（英: Distortion）エフェクトなど数多くのテクニックが公開された年でもありました。 今回は、2018年に集めた世界中のウェブサイトデザインの中から、特に印象的だった51個をまとめてご紹介します。いくつかのサイトは、これまでのまとめで見たことがあるかもしれません。 【総まとめ】2018年特に印象的だった世界のベストWebデザイン厳選51個 Narcos Mexico 番組のストーリーでもある、コカインの密輸ルートを作成、共有できる体験サイト。 Timel

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。

アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

2018年9月26日、クックパッド株式会社が主催するイベント「Cookpad Tech Kitchen」が開催されました。第18回となる今回のテーマは「生鮮食品EC クックパッドマートの開発秘話」。7月に発表したクックパッドの新規事業、生鮮食品ネットスーパー「クックパッドマート」の開発の裏側について、事業責任者、エンジニア、デザイナーたちが語り尽くします。「クックパッドマートでアプリのデザインをした話 」に登場したのは、米田哲丈氏。クックパッドマートのデザインが今日の形に至るまでにやったことを語ります。講演資料はこちら ラフデザインを思う存分楽しみながらつくる 米田哲丈氏（以下、米田）：僭越ながら自己紹介をさせていただきますと、私は米田と申します。5月1日に入社したところなので、4、5ヶ月ぐらいやっているという感じです。 デザイナー？（笑）。我々のチームは職にあてられない仕事が多くて、エン

このエントリは全9回を予定する18卒新人ブログリレーの第4回です！ 今回は、SUUMOのモバイルアプリ開発の現場から、企画と開発が一体となったチームでの開発プロセスについてご紹介します！ はじめに はじめまして。リクルートテクノロジーズ新人の三田涼介です。現在は不動産検索サービスSUUMOのAndroidエンジニアとして働いています。 今回はSUUMOアプリチームの開発プロセスについて紹介します。 SUUMOは巨大なサービスでありながら日々高速に改善を行っており、週1回以上の頻度でiOS、Androidの各OSでリリースを行っています。このスピード感を実現するために、開発プロセス自体も日々磨き込みが行われており、私が配属された3ヶ月前にも開発プロセスに大きな変化がありました。 この記事では、私が新人としてキャッチアップしていく中で学んだ、 なぜ開発プロセスを選ぶことが必要なのか どうやって

デザイナーはこれから何を学び、どのような仕事を担っていくのでしょうか？時代の流れを引用しながら、私自身の考えを述べさせていただこうと思います。 ビジネス×テクノロジー×クリエイティブ(BTCモデル)デザインは今まさに、ビジネスとテクノロジーに接近しはじめています。 デザインという仕事は「クリエイティブな表現」を行うだけではなく ・「経営の視点からから顧客やマーケットに与える影響をデザインする」 ・「技術の視点から新しいインタラクションや、体験をデザインする」 といった広義のデザインを行う必要に迫られています。 これは、デザインの本質というものが成果物(output)ではく、成果(outcome)そのものになり始めているということです。 「ユーザーに対しての価値」という成果(outcome)を提供するためならば、クリエイティブ以外の様々な視点からもアウトプットを選択し実行する必要があります。