この記事は2022年12月10日開催のSpectrum Tokyo Design Fest 2022で話したセッションの内容を文字起こししたものです。 僕は15年ほどWebに関する業界で働いています。はじめは小さなベンチャーでWebデザイナーとして仕事をはじめ、自分でデザインして自分でコーディングするというキャリアからはじまりました。それからフロントエンドデベロッパー、UXエンジニア、デザインエンジニアと肩書を変えてきています。 その中で、CSS設計の書籍の執筆や、Figmaのプラグイン開発、デザインシステムのリードなどの活動をしてるんですが、基本的にはコードを書くことをメインにしつつも、デザインに近い領域で仕事をしてきています。 Code is a Material僕がデザインとコードの両方についての考えを巡らせるきっかけになったのは、2019年に観たデザインシステムのカンファレンスのい
こんにちは〜 デザイナーの富田と申します！ 今回は今年の4月に行われたラクマのリブランディングと、それに伴うデザインシステムのリニューアルについて紹介していきます。 目次 ・リブランディングについて ・新デザインアセット ・UIカラー設計 ・今後のアップデート ・おわりにリブランディングについてラクマは2022年4月5日にリブランディングしました！ 「ラクマ公式ショップ」では、実店舗の運営などで実績のある大手のリユース事業者や並行輸入事業者が出店し、プロにより検品されたリユース（中古）のブランド品やスマートフォン端末、並行輸入品などを数多く取り扱っています。また「産直・こだわり食品」では、食品ジャンルにおける生産者や加工業者、卸業者の事業者が出店することで、農産物や水産物などに特化した商品を販売しています。さらに、年内半ば（予定）には、...
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 [email protected]
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
AbemaTVの松本俊介氏が登場。多くのアプリ開発者が一度は直面したことがあるだろう「アプリの文言がなかなか決まらない」問題。AbemaTV開発チームでも同様の問題を抱えていたという。その原因はなんだったのか。どうすれば文言は決められるの？ アプリの文言が決まらない問題｜AbemaTV ※2017年6月に開催された「UX Failcon 〜先人たちの偉大な失敗と成功〜」よりレポート記事をお届けします。 インターネットテレビ局「AbemaTV」。2016年4月の本開局から約1年4ヶ月で2000万ダウンロードに到達しようとしている。 まさに飛ぶ鳥を落とす勢いで成長を続けているAbemaTVだが、同アプリのUI/UXデザイナーを務める松本俊介氏、とある問題を抱えているという。 「アプリ内の文言が全然決まらないんです……。UI/UXの観点で見れば、すごく瑣末なことに思えるかもしれませんが、個人的に
デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると
この記事はトレタ Advent Calendar 2019 21日目の記事です。 こんにちは。QAエンジニアの坂田です。 トレタに入社して1年が経ち、既存サービスのエンハンス開発やいくつかのリニューアルプロジェクトに携わってきました。プロダクト品質向上やメンバーへの貢献を模索するなかでQAエンジニアが仕様を書くという試みをテーマの1つとして行ってきましたので、今回はその話をしたいと思います。 なお、本記事では「プロダクトの外部的な振る舞いを定義したもの（UI仕様）」のことを「仕様」と呼びます。テストの仕様ではありませんのでご注意ください！ そもそもなぜ仕様を書くのか 仕様を書く目的を私なりにざっくり表現すると、以下のような感じになります。 リリース前：プロダクト設計の不明瞭さや矛盾を早期検知・解決するため リリース後：プロダクトの振る舞いが本来どうなっている（べき）か確認するため リリース
マテリアルデザインの色を選んでアプリのテーマカラーを選択できるサイト( https://material.io/color/ )を見ていてここの色一覧が欲しいと思って調べたらすでに作ってくれている人がいました。 そこでマテリアルデザインカラーのXMLをカラーパレットとしてvaluesに定義しておくと便利だったので紹介します。 メリット これをカラーパレットとして使うことでアプリで利用する色を統一できる。 特定の色のカラーコードをわざわざ調べなくてもよくなる デメリット 未使用のcolor定義が増える。 使用例 後述のXMLをcolor_palettes.xmlとして用意して、colors.xmlからcolor_palettes.xmlに定義した色を参照する。 <color name="colorPrimary">@color/md_red_400</color> <color name="
Send feedback API design guide Stay organized with collections Save and categorize content based on your preferences. Changelog Introduction This is a general design guide for networked APIs. It has been used inside Google since 2014 and is the guide that Google follows when designing Cloud APIs and other Google APIs. This design guide is shared here to inform outside developers and to make it eas
フラットデザインに最適なフラットアイコン素材がフリー（無料）でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー（とんかち）のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
商用利用可能なモノトーンのアイコン素材をフリー(無料)でダウンロードできる素材配布サイトです。 『ICOOON MONO』は、WEBデザインやDTPのほか、ビジネスシーンで活用できるアイコン素材をストックしています。 TopeconHeroesが作成したこのサイトに掲載しているアイコン素材は、どなたでも使用条件に違反しない限り、 クレジット表記や許可なしで、自由にご利用いただけます。 スマートフォンやタブレットを初め、さまざまなデバイスが普及し、 再び UI（ユーザインタフェース）やUX（ユーザエクスペリエンス）が注目されています。 情報過多の時代にもっとも求められていることは、いいものを正確に伝える「わかりやすさ」ではないかと思います。 デザインの世界でもビジネスシーンでも、「わかりやすさ」「正確さ」「シンプルさ」は 気持ちいい コミュニケーションの前提としてあり、更なる居心地のよさを生
従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。 ストーリーテリング手法やなめらかなアニメーション、美しい配色やセリフ書体を中心としたフォント選びなど、2019年に注目されているデザイントレンドを盛り込んだサイトを中心に揃えています。 サムネイルをクリックすることで参照元で移動できるので、ぜひ一度ウェブサイトを開いて、クリエティブな面白最新ウェブデザインを体験してみましょう。 Webの進化が止まらない！参考にしたい最新ウェブデザインまとめ Rally 制作実績を一覧にしたポートフォリオサイトで、アクセントになっている立体的なリボンエフェクトが展開しながら、視線をうまく誘導しながら次のコンテンツへ進みます。 Oranje Bitter Festival 2019 オランダで今月開催されるフェスのランディングペ
売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限
あんど( @ampersand_xyz )と申します。 クイズメーカーなど、色々なサービスを個人でリリースしているフリーのエンジニアです。 個人開発を支える技術のアドベントカレンダーではサービスを構築するArchitectureに関する技術の話題が多いなか、周りの方やマシュマロからの匿名メッセージ質問でUIのことに関する質問などが多かったので、本投稿ではUIやデザイン周りに関するTechnic…と言えるほど上等なものではないのですが、そのあたりの技術をお話したいと思います。 なお、自分は正直かなり我流で適当にやっているので、もっといい方法のツッコミなど歓迎しております。 1.画面サイズの最大・最小幅を最初に決めておく まずはじめにここを決めます。 いかにリキッドデザインやレスポンシブで画面を作成するといえども、極端に幅が小さい、または大きいデバイスを相手にする場合、どうしてもサイズ整合性を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Help content — Shopify Polaris
