PHPerKaigi 2024に「ゴールド」「T-SHIRT」スポンサーとして協賛！ PHPでQuineに挑戦してみた in PHPerチャレンジ企画

A graphic and motion design tool powered with automation features and an extensive content library.

Browse and download high-resolution, public domain paintings, posters and illustrations

この記事の概要 昨年、デザインに関する社内研修を実施し、その内容をQiitaでも共有してみたところ多くの反響をいただきました。 最近内容をアップデートして研修を実施する機会があったので、こちらも投稿してみます。 具体的な制作テクニックよりは抽象的な考え方がメインですが、デザイナーと一緒に働いている方や、デザインにも興味がある方のお役に立てるのではないか、と思っています。 自己紹介 私はQiitaでデザイナーをしている綿貫佳祐といいます。 2017年に新卒でエイチームに入社して、今年で6年目です。 普段の業務では、企画を考えたりUIを作ったりコードを書いたり。 割と幅広めにデザインに携わっています。 普段の業務以外だと、会社としての発信のデザイン監修する機会が多いです。 例えば、ロゴとかコーポレートカラーのような、会社として大事なグラフィック要素1。 これらが広報物内でどう使われているかのチ

【Photoshop基本操作】CMYK 変換で失われた鮮やかな色は、RGB 変換するだけでは取り戻せません。彩度を上げるとトーンが弱くなってしまうし、元の状態に近付けるには大変苦戦します。そんなときは、Lab カラーモードを試してみましょう。今までの悩みが一気に解消できるかも？ 彩度を上げることで、鮮やかな色は再現できますが、過度な調整では、トーンジャンプ (階調トビ) を引き起こします。色情報を数値化した要素である「色相」、「彩度」、「明度」のうち、階調に大きな影響を与えるのは、明度 (コントラスト) です。階調を維持させながら、個別に彩度を上げる方法が [ Lab カラーモード ] なのです。

🧠 The Psychology of Design106 Cognitive Biases & Principles That Affect Your UX Every time users interact with your product, they: 🙈 Filter the information🔮 Seek the meaning of it⏰ Act within a given time💾 Store bits of the interaction in their memoriesSo to improve your user experience, you need to understand the biases & heuristics affecting those four decision-cycle steps. Below is a list o

International Space Station welcomes biological and physical science experiments

デザインチームのヘッドとしてマネジメントをしつつ、プレイヤーとしてもプロダクトデザイナーをしています。割合は50%ずつといったところでしょうか。詳しいプロフィールはこちらのインタビュー記事を読んでもらえたら嬉しいです。 今回はデザイナーがマネジメントについて学ぶ時に読んでおきたかった20冊ということで、「マネジメント×デザイン」に関する書籍を紹介したいと思います。 「デザインチームをつくるときに何をすればいいのか？」 「どうやってデザイナーを育てればいいの？」 以前はこんな悩みに対して手探りでしたが、グローバルで活躍するデザイナーにとってはプレイヤーからマネージャーへの進化は当然で、そこに語り継がれるマネジメントの原理原則が存在していました。 そこでこの20冊を通して「リーダーシップとは何ぞや」「チームへの向き合い方」、「どんなコーチであるべきか」「どんなメソドロジーを押さえておくべきか」

インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに

だれでも・効率よく・迷わずに。SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。 デザインシステムとは？

この記事の趣旨 筆者（@yuzutas0）がプレゼンテーション資料作成をアシスタントに代行してもらうにあたって「こういう点に注意してほしい」という項目を列挙した。 自分のために書いた記事ではあるが、筆者と関わりがない方も、ぜひスライド作成の参考にしていただけると幸いだ。 もくじ この記事の趣旨 もくじ 背景 免責・参考資料 必読書 Tips 01: キーメッセージ Tips 02: コンセプト Tips 03: アウトライン Tips 04: PREP法 Tips 05: 免責事項 Tips 06: 自己紹介 Tips 07: 1スライド・1メッセージ Tips 08: 余白とグルーピング Tips 09: 余計な要素を削ぎ落とす Tips 09: 箇条書きではなく図や表にする Tips 10: x軸とy軸の慣習に従う Tips 10: カラーの慣習に従う Tips 11: カラーは6色ま

おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..

日本語でいい感じに見えるFigmaスライドテンプレ集を自分用に作成したので、「わぶんスライド」という名前でFigma Communityに公開しました。 きっかけは、講師を担当していたDesignship Doの講義資料作成にFigma Communityのスライドテンプレを使おうとしたところ、欧文前提で作成されたスライドテンプレしかなく和文を入力するとどうも間延びした印象になってしまう…と悩まされていたのがきっかけです。 Figma Communityで日本語でいい感じのプレゼンテーションテンプレートが見当たらず、結局いちから作ってる…いいから中身をはよ… — Miwa Kuramitsu (@transitkix) June 1, 2021 「わぶんスライド」の特徴 きほんのレイアウト 1920x1080px、16:9、6カラムで基本レイアウト6パターンを用意しました。画像の有り無しを

UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率

サムネ動画めっちゃ見づらいのでフルセット完成のときにはどうにかします ------------------- ・アイコンアニメ素材製作中！ ・png連番素材です ・全部完成したらフルセット版を公開します(無料) ・商用や収益関係の制限または権利表記などは設けていません 超フリー！！！！ もともとはVOICEROID動画向けに作ったものですが どんな動画に使ってもOKです

Stay organized with collections Save and categorize content based on your preferences. A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone. Go back

Dylan and Vietanh will show a suite of Figma-powered design tools that let their team build out core and global Uber experiences. Without this infrastructure, it would have been impossible to build coherent design flows which let Uber user buy transit tickets in Denver, order a rickshaw in Bangalore, have local favorite Churrascaria delivered to your doorstep in São Paulo, and ship important consu

<!-- Styles. Can be included in an external stylesheet --> <style> /* CSS variables. Not needed for the effect to work. */ :root { --base: #f7392b; --bg-blend: multiply; --blur: 0px; --fg-blend: lighten; --foreground: #16006f; --opacity: 1; --spacing: 1%; } .img-wrapper { background-color: var(--base); display: flex; flex: 1 1 100%; height: 100%; overflow: hidden; padding: var(--spacing); position