注目を集めるデザインスプリント（Design Sprint）の実践者から学ぶ、Design Sprint Night!がDeNA社で開催された。Microsoft Venturesの馬田氏、THE GUILDの深津氏の講演を中心にレポートをお伝えします。 デザインスプリントとは？ 昨年からにわかに注目を集めているデザインスプリント。その方法論と、実践者から実施におけるポイントを共有する場として『Design Sprint Night』が開催された。 デザインスプリントとは、デザイン上の問題を解決するために、5日間という短い期間で高速にプロトタイピングと検証を行う方法論（フレームワーク）のこと。Google Venturesが、投資先で実践しているこのフレームワークを1月末に公開したことは、国内のスタートアップ、デザイナー界隈でも話題になった。 200名近い参加者が集まった本イベント。まずM

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni

こんにちは、今年3月に入社したLUCRA事業部のはよんです。 こちらは Gunosy Advent Calendar 2018、13日目の記事です。 なお、昨日の記事は @大曽根さんの 社内技術ブログのはじめかたでした。 LUCRAという女性向けアプリのデザインを担当しています。 社会人1年目の時から、UI/UXデザイナーとして、ずっとアプリとウェブのデザインをしています。 今回はUIデザインにおけるKPI設定の重要性というタイトルにしていますが、Gunosyの分析に強い特徴がデザインにはどういうふうに影響されているのか、デザインだけでなくUI設計の全体的な流れについて書いていきたいと思います。入社してから自分のデザインに対する価値観も大きく変化しているので、少し個人的な話も混ぜていきますね。 入社前 1~2年目の頃はデザインの価値を信じており、こだわっていました。0.5pxのズレも見逃せ

時々、これらのマークをロゴや商品名・企業名、製作者や著者等の横に見かけることはないでしょうか？これらは知的財産権に関わる表記であり、知的財産権については色々な区分けが存在します。プロジェクト進行中に自分がどのような権利を持っていて、どのような権利を侵害しているかもしれないかを把握するのは重要なことです。そこで、知っておいて損のない知的財産権についてご紹介致します。 ロゴデザインの依頼はこちら 商標(TM) -Trademark- 商標は文字、キャッチフレーズ、音、スローガン、ロゴ、画像等やこれらの組み合わせに対して適用されます。商標は製品とサービスを他のものと区別するために使われます。TMは単に商標を示しているだけですので、商標登録しなくても使用することができます。注意喚起にはなりますが、TMマーク自体には何の法的な力もありません。つまりTMマークを記載していたとしても、同様の商標が登録さ

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

こんにちは。グラフィックデザイナーの安村シンです。 デザインを始めたばかりのころや、 ある程度ソフトの操作に慣れてくると 「フォント」の壁というものにぶつかったりします。 いいデザインには「いい書体」を使うことが重要なのですが、 そうは言っても、はじめは「いい書体」ってなんやねん・・・なんやねん・・・と 悩むのでは無いでしょうか。 良さが分かるきっかけが無さすぎて、迷宮入りしてしまったり… 以前は「よい書体」を使うのはハードルが高かったのですが、 現代はデザインソフトの主流「Photoshop」や「Illustrator」を始めた人には、セットでAdobeの「Adobe Fonts」という、膨大な書体ライブラリーがついてきて、そこから自由にフォントを手に入れることができます。 ですが、膨大すぎて、何を入れてどう使ったらいいかわからない・・・という方に向けて、 今回は"グラフィックデザイナー

こちらは「Service Designer's Advent Calendar 2018」の、13日目の記事です。 みなさんこんにちは。クラウドワークスのUXデザイン部 部長のアタラシです。自社のプロダクトデザイン組織をマネジメントする「デザインマネージャー」という役割を担っています。 今回は、ぼくの超個人的なデザインマネージャーとしてのマネジメント流儀を、いくつか羅列しながらご紹介したいと思います。 正解・不正解のない個人的なスタンスだということと、あくまで今現在のものであり、今後はぜんぜん変わるかもしれないという前提で、読んでいただければと思います。（いわゆる組織論のようなことは書かれていません） 【前提】クラウドワークスのデザイン組織構造 1. 主役はデザイナーでしょ。 2. デザイナーの「個」を立てる。 3. 組織として発信を重視する。 4. 採用面接で、めっちゃ会話する。 5.

平日の夜と土日を使って2週間で開発された、デザインに関する記事をシェアするサービス「siori.design」。最速でプロダクトをつくる上でデザイナーは技術を、PM・エンジニアはデザインを、フルスタックで理解する重要性が垣間見えた。 プロダクト概要 「siori.design」…デザイン関連のWebサイト・記事にコメントを添えて投稿・共有できるサービス。2018年2月26日にリリース。 プロジェクト概要 夜の時間と週末の時間、わずか2週間で開発。Slack、GitHub、Sketchを駆使しながら全員がリモートで連携をとった。最初は小島氏がWordPressを使ってプロトタイプを作成。そこに吉竹氏が参加しデザインを、さらに熊田氏が加わってRuby on railsを使って本番のアプリを開発した。 デザイン特化型の記事共有コミュニティ「siori.design」 ー　そもそも、なぜデザインに

[追記：9/3：ページ内部の記載を書き換えました。ページ下部に記事紹介を追加しました。　　　　　　　　　　　　　　　　　　　　　　　　　　　記事①：https://muro-3.hatenablog.com/entry/2018/09/03/004616　　　記事②：https://note.mu/taketetsu1982/n/n66d1abd5086b おはようございます、9月になりました。　　　　　　　　　　　　　　　Cocoda!を運営しているココディーと申します。 この度、5月末よりβ版として運用してきた「デザイナーになれるオンライン学習サービスCocoda!」がβ版から大きくリニューアルした上で 遂に正式にオープンしました！！！！！！！！！！！！🎉🎉🎉 β版は限定公開でしたが、これからはCocoda!を使いたい全ての方にお使い頂ける状態となります。 (*認証も自動で行われ

昨年の9月にUNIBA INC.というプログラミングが強い会社から、日本デザインセンターというデザインの領域を主とする会社に転職しました。 過去に作ったもののポートフォリオ 前職においては、そこまでコードを書かずに（html cssの基本的な知識、調整程度だったり、gitの 使い方程度は覚えている）sketchでデザインを作って、エンジニアに渡すまでが主な仕事の領域でした。 つまりは、プログラミングにおいては初心者レベルのポンコツです。ただ、意欲はありOpen Frameworksの本などを写経したりなどはしていました。 前職が9割エンジニアの会社から、こちらではエンジニアはいないという環境になったこともあり自分でやらなくてはという気持ちや、なんとなく技術力のある会社にいたということでキャプテンにおける元青葉の谷口くんよろしくそのイメージに影の努力で合わせるなんてイメージもありました。結果

TOPデザインナレッジ【Adobe Illustrator】まわりの学生と差がつく！作業スピードが格段に上がる『ショートカットキー』10選 デザイン制作をする上での必須ツール【Adobe Illustrator】。使い始めたばかりの人も、かなり使いこなせてきた人も、もっと作業スピードが上がる方法を知りたくはないですか？それは、『ショートカットキー』を駆使すること！知らないと絶対に損をする【Adobe Illustrator】のショートカットキーをご紹介します。 編集・執筆 ／ Ayako Yamada, AYUPY GOTO 1. ショートカットキー使っていますか？ 【Adobe Illustrator】の操作はだいたい覚えてきたけれど、ひとつひとつの操作に時間がかかってしまって、毎回課題提出がギリギリギリになってしまう……。もっと早く操作できれば、課題の完成度をあげることも出来て、自主制

noteはクリエイターが情報発信を行うためのサービスです。多くのデザイナーやクリエイターの方で優れた記事を公開しています。 ブログとして定期的に記事を公開している方も、何かあった時に情報発信の場として利用している方も、一度切りの情報発信に使っている方も様々です。 最近では、オンラインで学習できるサービスや、デザイン学習のための環境も整ってきており、デザインスキルを身に付ける環境は整ってきました。 Webデザインの勉強におすすめのオンラインスクール・学習サービスまとめ Webデザインを独学で勉強しているけど、なかなか成果が感じられないという方も多いのではないでしょうか。 少しでもプログラミングをかじったことのある人であれば、HTMLやCSSは比較的スムーズに習得でき... Web Design Trends 初心者が独学でWebデザインを勉強するための学習ガイド Webデザイナーは、様々な表

この記事は株式会社ソニックムーブ Advent Calendar 2017 の18日目の記事です！ 最近 Atomic Design というワードをよく見かけるけれども… 実際どういうものなの？ なにそれおいしいの？ 状態だったので、思い切ってかじってみることにしました。 Atomic Design って何さ？ Atomic Design とは、デザインシステムを作るための方法論です。 ページ内にある要素を最小単位である「Atoms（原子）」にコンポーネントとして分解します。 分解したコンポーネント同士を組み合わせてデザインしていく考え方が Atomic Design です。 この考え方自体は新しいものではなく、2013 年頃にはすでに登場していたようです。 Atomic Design デザインシステムって？？ デザインシステムとは、デザインの仕組みとその考え方をドキュメント化したものです

「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。

このページでは、UI/UXを学ぶための教材を紹介していきます。ノンデザイナーの方にとっても役立つ教材も多数取り上げているので、是非目を通してみてください。 この本について どんな本？ 20年以上前に書かれたにも関わらず、いまだに読み続けられている名著です。今どきのアプリのようなUIについては触れられていませんが、UI/UXの本質を学ぶのには最高の1冊です。 学べることは？ 「ユーザがエラーを起こすのはデザインのせいである」というようなデザイナーとしての姿勢から、具体的にどうやってそのエラーを防ぐかというところまで徹底的に解説されいます。この1冊でUI/UXの考え方の基本を押さえることができます。 難易度は？ 誰にとっても身近なものが具体例として取り上げられており、興味を持ってサクサクと読み進めることができます。最近になって改訂版が出版され、もう少し読みやすくなったようです。 おすすめ度 （

前回記事で本質的なUX改善によってプロダクトを伸ばしていくサイクルについて書きましたが、今回はその中でも特に重要なユーザーテストについて書こうと思います。 UX改善による本質的グロースハックのプロセス グロースハックは10回の施策で1回でも当たれば良い、とよく言われますが、自分はグロースハックのサイクルの中でユーザーテストを実施するようにしてから10回に8回は狙ったとおりに数値を改善することができるようになりました。 本記事ではグロースハックにおいて何故そこまでユーザーテストが強力なのかの理由と、ユーザーテストの実践方法の全体像について書いていきます。 ※ 今回は先の記事で書いた以下グロースサイクルのKPI設定が終わっている前提で進めます。 データ分析とユーザーテストの役割の違いまず、データ分析が「サービスの問題が"どこに"あるか」を特定するものであるのに対して、ユーザーテストは「サービス