「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
認知科学ーUIUXデザインのための基礎理論［2020前期］｜note
専門講義科目「認知科学」講義ノート（2020年度前期 オンライン開講, 選択必修）, 担当：吉橋昭夫（多摩美術大学情報デザイン学科）（注：美術大学の学部2,3年生を対象に、認知科学とそのデザインへの応用について学びます。認知科学の精密な理論を修得することは目的としていません。）
XX 博報堂と著作権侵害｜雑誌『広告』
こちらでもふれているように、本記事はもともと『広告』著作特集号（2020年3月26日発行／発行元：博報堂）に掲載予定であった。しかし、博報堂社内の関係各所への確認や調整に想定以上の時間がかかり誌面への掲載を断念。雑誌の校了後も調整を継続し、幾度もの確認・修正の往復を重ねた。そして初稿の完成から約7カ月、ようやく社内調整が完了し、noteにて公開を行なう運びとなった。本記事は全文無料、クリエイティブ・コモンズ・ライセンス「CC BY 4.0（表示4.0国際）」で公開する。『広告』リニューアル第2号の特集は「著作」。オリジナリティや著作権にまつわる記事を多く掲載している。しかし、そもそも発行元であるわれわれ博報堂は、このテーマを扱うにあたってどのような立場にいるのだろう。 多くのクライアントとともに、CMやポスターなど日々膨大な広告制作物を世に送り出している身として、オリジナリティや著作権に対
毎日見にいきたくなるレポート画面のデザイン｜taiga / 佐野大河
こんにちは、デザイナーの佐野大河@sn_taigaです。先日、クックパッドのiOSアプリで「キッチンレポート」という自分のレシピ投稿の活動の成果がわかる機能をリニューアルしました。今日はそのデザインプロセスについてお話します。 キッチンレポートとはキッチンレポートでは、自分の投稿したレシピやマイページへのアクセス数が見られる他、個々のレシピのアクセスランキングやつくれぽ（レシピを見て料理した人から届くメッセージ）などが見られます。レシピが保存された数や印刷された数もわかり 「自分のレシピが誰かの役に立っている！」という実感を持つことができます。 他にも「公開レシピが30品になりました！」や「あなたのレシピが人気順検索でトップ10入りしました！」など、自分が投稿したレシピに関する嬉しい出来事を残してくれる機能もあり、ユーザーの継続的なレシピ投稿や日々の料理のモチベーションにも繋がっています。
日本の人たちがロシアの『猫デザインの乳製品』に大興奮していることが地元の人々に伝わる「酪農王国だよね」
SatokoTakayanagi @SatokoTakayanag 日本の人たちがブリャンスク工場の牛乳に大興奮。でも美味しいからじゃなくて、猫のパッケージデザインにだよ！いつか日本に行くときがきたら、おみやげにするといいかも。（とロシアでいわれております） twitter.com/lentaruofficia… 2020-08-29 19:09:07 Лента.ру @lentaruofficial Японцы в полном восторге от молочки брянского комбината. Но не из-за вкуса, а дизайна упаковок с котами! Еще одна идея для гостинцев, если когда-нибудь поедете в гости pic.twitter.com/pAJpNqrrlW 2
iOSアプリのデザインをリニューアルし、興味がある話題に手が届きやすくなりました - はてなブックマーク開発ブログ
本日、iOSアプリ「はてなブックマーク」のバージョン5.0をリリースしました。 はてなブックマークアプリで提供する各機能を、「ホーム」「特集」「興味」「ブックマーク」の4つに分け、画面下部にタブとして表示しました。みんなの注目からあなたの興味まで、より多様で幅広いエントリーに手が届きやすくなりました。 ぜひ最新バージョンにアップデートしてご利用ください。 ▽ iOSアプリ「はてなブックマーク」を今すぐインストール 4つのタブの特徴 1. ホーム：注目ニュースが集まる場所 今注目が集まっている最新ニュースと意見を、カテゴリー別に見ることができます 画面右上の↑↓ボタンをタップすることで、表示エントリーを「人気エントリー」と「新着エントリー」で切り替えられます 2. 特集：みんなの注目をまとめました みんなが注目する話題を「特集」としてまとめました 「おすすめ」タブでは、はてな編集部が選んだ、
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新｜ryota_funakoshi
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し
【2023】おしゃれな配色パターンが見つかる！カラーパレット人気ツール28個まとめ | Web Design Trends
配色はデザインにおいて重要な要素の1つですが、慣れている人でないとバランスの取れた配色を決めていくのは簡単ではありません。 そこで、今回は初心者の方でもおしゃれな配色ができるカラーパレットツール・配色パターン見本サービスをまとめました。下記のように、おすすめのツールや使用する色数ごとに分類しています。 おすすめカラーパレットツール・サービス AIを使ったカラーパレットツール 2色の配色パターン見本 3色の配色パターン見本 4色の配色パターン見本 5色の配色パターン見本 その他のカラーパレットツール・サービス グラデーションの配色パターン見本 2022年に流行するWebデザインの最新トレンド10個まとめ 2021年のミニマリズムを中心としたトレンドが注目されていましたが、2022年は鮮やかで、奇抜で、記憶に強く残るようなデザインを中心としたトレンドが注目されています。 今回は、2022年に流
商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
シャニマスのチェックボックスから見る色弱者の世界｜謝罪Ｐ
先日のアップデートでシャニマスのUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた（ひよこ鑑定士か？）この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何？光（色）を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、本記事では『色弱者』という呼称で表記する。 日本人男性の5％、女性の0.2％がこの色
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
UXデザイナーが創り出して活用する10の成果物
Miklosは、18年以上のキャリアをもつUXデザイナーのリーダーであり、プロダクトデザインのストラテジストでもあります。フルスペクトルのプロダクトデザイナーとして、ユーザーのニーズ、ビジネス目標、テクニカル面での実現可能性などを考慮しながら、ユーザーの要求を満たし、利益をもたらすプロダクトデザインを目指しています。 UXデザイナーはさまざまなシーンでその活躍が期待されています。たとえば最小限のドキュメントを用いて作業を進めるチーム、リーンスタートアップやアジャイル開発を求められる環境、外部企業とコンサルティング契約を結ぶ場合、または厳しいドキュメント要件を持つ大企業や政府機関のコンサルティング業務など、さまざまな環境が挙げられます。 関わり方や環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXの専門家はデザインに関するアイデア、研究結果、プロジェクトのコンテキストを効果的にさ
UIの細かい動きについて
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
【前編】メルカリオリジナルフォント「Mercari Sans」の制作舞台裏、全部伝えます。｜Mercari Design Blog
こんにちは、メルカリCreative Leadチームの相樂です。 今回のnoteでは、2019年11月5日にメルカリが発表したオリジナルフォント「Mercari Sans」について、お披露目イベントではお伝えしきれなかった制作舞台裏をお届けします。 公開中のポッドキャスト「Takram Cast」（前編・後編）でも、今回プロジェクトを一緒に進めたTakramのリードデザイナー弓場さんと同じテーマについてお話しています。この記事内の画像と照らし合わせてお楽しみください。 なぜメルカリがフォントを作ったのか1. ブランドイメージの統一を図る 2. 一貫した「メルカリ」らしさの醸成 3. 上記を実現するためのデザインへの投資メルカリは2018年の10月にリブランディングを行いました。「メルペイ」という新サービスのリリースに合わせ、フリマアプリ「メルカリ」の枠を超えて、日常のあらゆるシーンでよりな
Twitterのトレースをするにあたって意識したこと、参考になったnote｜imajo
2週間前にデザインを初めて、各方面でトレースをするのがいいよと言っているのでとりあえずやってみました。 色々な方法でトレースを試してみて、意識したことを言葉にする習慣にするためにnoteにします。 そして、意識するにあたって参考にしたnoteも紹介させていただきます。 できたもの結果として５枚のページ？を作ることになりました。 左から順に 1枚目: 完全なるスクショ 2枚目: ただ真似るだけのトレース 3枚目: 「箱」を意識したトレース 4枚目: 余白を可視化したトレース 5枚目: トレースをして気づいたことをまとめる それぞれのトレースでの学んだ点を参考にしたnoteと共に紹介します。（1枚目はスクショなので飛ばします） ・2枚目: ただ真似るだけのトレースただただ同じものを真似るだけのトレースです。 トレースをしようと思ったキッカケのnoteと、何を意識してトレースをするかを参考にした
未経験でも1カ月で即戦力クラスの知識が身に付く『webデザインドリル』公開 | knowledge / baigie
「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を
ユーザーインターフェイスにおける5つのステート - Runner in the High
元ネタはこれ scotthurff.com Webアプリケーションを作ったことがある人ならわかる話だが、アプリケーションは確実に予想外の状況に晒される。サーバーはレスポンスを返すのに時間がかかるし、ユーザーの環境がメモリ1G以下のこともあれば、完全に想定外の使いかたをするユーザーもいる。デザイナはそれらの現実に起こりうる可能性を全て考慮に入れてデザインをする必要がある。 2004年にBasecamp（当時は37signals）はThe Three State Solutionという提案をしていて、その内容は「全ての画面設計は3つのステート（Regular, Blank, Error）を考慮するべきだ」というものだった。その当時はまだAjax黎明期だったし、もちろんスマートフォンも存在していなかった。けれども、新しいテクノロジーが生まれるにつれて、インターネットを利用する環境は恐ろしく多様に
UIデザイン力を鍛えるリデザインの勧めとコツ｜坪田 朋
Twitterでクラシルのリデザインの題材として使って良いとつぶやいたら数名からリデザイン案をもらえました。ありがとうございます！ リデザインは、デザインの基礎スキルを身につけられると思うので、どんどんやったら良い派ですが、リデザインする際は何かにフォーカスすると振り返りしやすく技術を積み上げやすいです。 今回は、僕もクラシルのリデザイン案を作りつつそのコツを書いてみたので参考になればと思います。 デザイン力を鍛えるリデザインのコツ インターン採用でリデザイン課題を出すとだいたいの場合、グラフィック、UI設計、カラー変更など全部盛りの案を持ってきてくれる事が多いのですが、変更箇所が多すぎると狙いが分散した結果、フィードバックしにくい事がよくあります。 ポイントを絞り、リデザインの意図を伝えて、その案を叩きに対話できるとディスカッションのスキルもアップする上に『おおちゃんと深く考えてるじゃん
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
