この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。 これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。 ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめた

こんにちは、hikaruです。 (誰？と思った方はこちらの自己紹介を見てくだると嬉しいです） 最近、デザインにとっても興味があります。 そんなこんなで先月くらいから、Cocoda!というUIデザインの学習サイトでゆるっと勉強を始めたところ、 Cocoda!の初心者コースを見ながら人生で初のUIデザインを作ってみてるが、丁寧でキットが充実しているおかげで僕のようなド素人でも意外にサクサク作れて楽しい。 しかしデザインツール便利だ。これはデザイナに限らずみんな使えるようになったほうが良さげ pic.twitter.com/1NEjvkNfqY — 樫田光 | Hikaru Kashida (@hik0107) July 17, 2020

2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co

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

デザインと1pxのずれもなく、HTMLとCSSで実装することを「ピクセル パーフェクト」と言います。このピクセル パーフェクトは必要なのか、現在の制作で求められているのは何か、ルックアンドフィールに合わせた実装を紹介します。 The State Of Pixel Perfection by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ピクセル パーフェクトとは 2010年頃のWeb制作 ルックアンドフィール コード化された結果がパーフェクトかどうかの判断 バリエーションとコンテキスト 現在の状況 モダンCSS CSSフレームワークの影響 好き嫌いではなく、期待通りに デザイナーに役立つアドバイス デベロッパーに役立つアドバイス 終わりに はじめに 「ピクセル パーフェクト」という言葉を最

はじめまして、初投稿。 ENU（ところによってnao*）と申します。 このたび、NPO法人のNEMTUS様より企業ロゴデザイン提案の機会を頂きまして、そのデザイン製作過程をnoteで記事公開してもよい許可を頂いたので、話題も気持ちも温まっているうちに発信してみたいと思った次第です。 非デザイナー目線での企業ロゴデザインの製作背景をなるべく細かく（13000文字…）説明しているつもりです。 是非これからロゴデザインをしてみようと思ってる方や、デザインに興味のある方に何かしらのきっかけにでもなれれば幸いです。 自己紹介とやる気問題はじめに軽く自己紹介をさせてください。 タイトルにもある通り、僕は非デザイナーです。ロゴデザインの記事なんて投稿しちゃってますが、普段の仕事はデザインとはまったく関係ない婚礼関係の営業マンしてます。 職業上、カメラや撮影機材などを扱うことは多いので、撮影（特にポートレ

Neil Turnerはイギリスを拠点とするユーザー中心のデザイナー兼研究者です。UX、プロダクトデザイン、プロダクト管理についてまとめた記事とプレゼンテーションを多数紹介しています。 あなたが1980年代に生まれ育った世代なら、「choose your own adventure（きみならどうする？）」というゲームブックシリーズをご存知かもしれません。 『The cave of time（タイムトンネルの冒険）』や『The throne of Zeus』、幻想的で誰もが夢中になった『You are a shark』など、これらはまさに自分自身の冒険を選択するためのシリーズでした。 従来の子ども向けの本とは異なり、ストーリーが展開するにつれて選択を迫られます。それぞれの選択により、本の異なるページに移動し、多くの異なるストーリーとエンディングが待っています。いつも間違った選択をして、がっか

今回より、Webサイトの制作方法を実際の案件を通してお伝えする「Webサイトのつくりかた」シリーズをスタートします！ Webサイトは目的や狙いによって制作方法はさまざま。いざつくろうとすると... ・制作の進め方がわからない ・企画のアイデアがまとまらない ・どんなデザインが良いか判断できない ・アニメーションが考えられないなど、わからないこともたくさん出てきますよね。 このシリーズでは、そんな「実際どのように制作しているのか」という疑問を、制作を依頼される方・制作を担当される方の参考となるように、弊社の制作実績を通してお伝えしていきたいと思います。 第一回目は、魔法の世界観が魅力的なファッション・雑貨ブランド「魔法部」ブランドサイトのつくりかたをご紹介いたします。 01. 魔法部とは 魔法部 https://www.felissimo.co.jp/mahoubu/ 「魔法部」とは、通販会

デザインする際に意識している8の倍数ルールについての記事です。Webサイトやアプリなどスクリーン用のデザインの際には、基本的に要素の大きさを8の倍数ピクセルで設計しています。 ここでいう要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど、サイズ指定が必要なほぼ全て要素を指しています。 8の倍数によるデザインルールはこれまでに16以上のプロジェクトで活用してきました。ルールを用いることのメリット・デメリットや、そのルールを使い続けている理由を当Webサイトの事例と共にまとめています。 ※フォントサイズは8の倍数ではなく、18pxを基準とした倍率計算によって算出する方法を試しています。詳しくは以下の記事にまとめています。 Webサイトで明快なデザインと運用しやすいコーディングを両立する文字サイズ強弱の仮説・検証 8の倍数で設計する理由とメリット

Subscribe to our mailing list and stay up to date on our latest thought leadership and learning opportunities. This post — “Designer’s toolkit: road testing prototyping tools” — was originally published on July 29, 2013. We’ve all been there: you’ve got a few days to throw together a prototype. For expedience’s sake, you go to one of your large, well-known prototyping tools to get the job done. Th

はてなのプロダクト開発の裏側をお伝えするリレー連載の第3回では、デザイナーの村田智さんに、ユーザーに喜んでもらう価値を提供するため、デザイナーとして何を考え、どうデザインしているかについて紹介いただきます。また、職種をこえたコミュニケーションのヒントも併せてお伝えします。（編集部） デザインの重要性はますます増している Webプロダクトは世の中にあふれ、機能や品質が十分なプロダクトは、望めばすぐ手に入るような時代です。その中で人々に自分たちのプロダクトを選んでもらうためには、機能や品質を超えたなんらかの価値や意味が必要になってくるのではないでしょうか。これはわたしが所属する株式会社はてなで開発をしているプロダクトにとっても例外ではありません。 わたしははてなの仕事の中で、このようなプロダクトの価値づくりにデザインが貢献できることをなんども経験してきています。「デザイン」という言葉にはさまざ

デザインで迷ったときに知っておきたい「良いデザイン」と「悪いデザイン」の見分け方：非デザイナーも知っておきたいデザインの話（2）（1/2 ページ） 今日から使えるデザインに関する知識をあれこれ紹介する本連載。第2回は、ロゴデザインの目的、レイアウトの基本原則、効果的な配色、書体選びの判断基準について。 「良いデザイン」と「悪いデザイン」を意識したことはありますか？　依頼したときや、自分で作成したとき「何かが違うのだけど何が違うのか分からない」という状況に陥るのは正直な話、よくあります。それは大抵、そのデザインの目的が何なのかをはっきりさせていないからです。 単にかっこよくしたい、きれいにしたい、そういったものは目的ではありません。こういうと、依頼する側が悪く、依頼を受けたデザイナーの責任ではないような感じがしますが、そもそもデザインのことを知らないからデザイナーに依頼するのであって、依頼者

スマートキャンプデザインブログ、Designer / Engineer のhaguriです。 スマートキャンプでよく使用するデザインツールにFigma（フィグマ）というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。 Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。 今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキャンプの事例を紹介します。 Figma（フィグマ）とはブラウザ、もしくはアプリ上で共同でデザインワークができるツールです。 リアルタイムで共同編集できるのが特長で、SketchやAdobe XDなどのようなプロトタイピングツールの位置づけとなります。 なぜFigmaを導入したのかスマートキャンプではUIデザインをする際、2018年まではSketch、XD、Illustratorなど複数のツールを使って

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

しばらく前に、UX Boothのエディターの１人であるAmy Grace Wells氏が、次のような記事のアイデアを持ち込んできました。 「学習しやすさ」、「探しやすさ」、「発見しやすさ」、そして「見つけやすさ」について説明、比較、対比して、それぞれがUXにどのような影響を与えるかについての記事を書いたらどうでしょう？ 私は考え込んでしまいました。というのも、これらすべての要素が相まって良質なユーザー体験ができあがるということを、たった１本の記事でどう説明できるでしょうか。これはひとつひとつが、現代のUXデザインの生業と捉えてもよく、大抵の人は、この中の１つに自分のキャリアをすべて費やすようなものなのです。それなのに私は、信用あるメディアであるUX Boothで、これらすべてについてのHow to記事を書くように依頼されたのです。 私は数ヶ月の間考え続けて、いくつかメモを書きつけ、あとはイ

いこーよの iOS アプリを担当している namikata です。友人から Flutter がすごいよ、という事を教えてもらい、一つアプリを Flutter で作ってみました。すごいです。 Flutter 。君はすごい。もうあなたなしじゃ生きられないよっていうぐらいすごいです。いつか、いこーよアプリを Flutter でリプレイスする野望を胸に、今 Flutter を猛勉強中です。 Flutter で作成したアプリは、個人で作成したものなのでこちらで紹介しています。興味があればちょっと覗いてみてください。 note.com Flutter に慣れるには、まずは修行あるのみ。作品を作りつづけるのが一番の近道だと思って気付いたら Figma を Mac にインストールしてました（Flutter はどうした。お前はどこに向かってるんだ。） Tech ブログではありますが、今日の記事では、デザイン

前回の記事でアイデア出しの基本姿勢を書きます〜と予告をしておきながら、先に書きたいことできたのでテーマを変えまして…今日はタイトルにもなっている、デザイン思考とサービスデザインとUXデザインとUIデザインの違いについて書きます。 というのも今朝、同僚とのSlackで話題になったものでして。もう広まって何周かしているこれらの言葉ですが、知れ渡ってる割にどれも結構抽象度の高い言葉なので意外と区分けができてない人多いのかな？という印象があったのと、あんまり自分でも言語化したことないなと思ったのでこれを機会に一旦整理にトライしてみようと思い書きました。 （それなりに勉強はしてきてますが、実践の場で積んできた経験も踏まえてのことで、全てが学術に基づいているかどうかは保障できませんのでそこはご了承ください。というかそこ違う〜っていうのあったらご指摘ください。） それぞれの違い簡単にいうと目的が全く違い

私がサービス開発を続ける楽しさの一つに、エンジニアとの協業があります。デザイナーがどんなに良いデザインを作ったとしても、最終的にそれをユーザーに届けるのはエンジニアです。動く形のアプリケーションをユーザーに届けられるエンジニアという職業にリスペクトやあこがれがあります。 しかし、デザイナー同様、エンジニアもさまざまです。必ずしもUIデザインへの感度が高い人ばかりではありません。そのためUIの実装には、デザイナー／エンジニアそれぞれお互いの歩み寄りが必要です。そこで今回は、UIの実装において起こったエンジニアとのコミュニケーションの齟齬（そご）や最近私が感じた課題をもとに、デザイナーである私の視点からエンジニアに意識してほしいと思ったことを書いてみます。 実装の認識合わせ デザイナーが考える理想のデザインを作っても、実装の都合でデザインを作りなおすことも当然あります。理想を作ったうえで、優先

ヒトに伝わらないデザインは、いとも簡単に死んでしまう。 オシャレでカッコよく、綺麗で鮮やかなデザインを作り、自分もクライアントも満足したとしても、機能性が無いデザインは簡単に死ぬのだ。 今回はそんな「デザインの敗北」事例を10個程度ご紹介しよう。 ※反対の「デザインの勝利事例集」記事はこちら 東京ミッドタウン日比谷の「極力シンプルで美しいデザインにしよう」というデザイナーの欲求がトイレのアイコンを小さくしすぎて「トイレはどこ？」という質問が多発して看板が設置されるの、まさに『デザインの敗北』というほかなくてとてもすき pic.twitter.com/kpI8LnWkq7 — Simon_Sin (@Simon_Sin) April 2, 2018 わかりやすいデザインの敗北事例である。 どう見てもトイレを示すアイコンが小さすぎる。 デザインは「問題解決」のためにあるので、機能性を大いに失っ

こんにちは。タンサン（https://www.tansan.co/）というゲームの製作会社の代表で、ゲームを作っているタンサン朝戸です。 2009年から10年ほどボードゲームを作ってきて、これまで200個以上のゲーム作りに関わらせていただいています。その中で、特にボードゲームのアートワークを手がけることが多く、ある程度ボードゲームのUIに関する自分なりの考えがたまってきたので、皆様にお伝えしたいと思い少しずつnoteにしたためることにしました。 今回は、数字の表示方法の違いからわかる機能について紹介します。 みていくのは『ドミニオン』。 ドミニオンは、2008年にアメリカでリリースされた「デッキ構築ゲーム」です。ドイツのゲーム賞で初の三冠を獲得したゲームで、たくさんの方に遊ばれています。 そんなドミニオンにも、UIの工夫でプレイ感を演出しているところがあります。あくまで僕の解釈にはなります