ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
「わかりやすさ」を デザインする情報アーキテクチャ必修入門 / Introduction to IA for "Design for Understanding"
MdN Bau-ya “「わかりやすさ」をデザインする 情報アーキテクチャ（IA）必修入門” (2023/1/18開催) https://www.street-academy.com/myclass/149720 上記イベントで使用したスライドを公開用に編集したものです。 作者：森田 雄 / …
ウェブサイトを閲覧していると、過剰に広告が表示されてウェブサイトが見にくくなってしまうことが多々あります。広告をブロックできるアプリを使用しても、ウェブサイトに「広告ブロッカーをオフにしてください」という表示が出てしまい、さらにウェブサイトが見づらくなるということも。そんな中、広告ブロッカーを使用するのではなく「ウェブサイトのURLに『.』を加えるだけで広告がオフになる」という報告がRedditに投稿されました。 fyi: You can bypass youtube ads by adding a dot after the domain : webdev https://www.reddit.com/r/webdev/comments/gzr3cq/fyi_you_can_bypass_youtube_ads_by_adding_a_dot/ 例えば、 https://www.yout
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
group_inou / HAPPENING
Interactive GIF Music Video by AC-bu
ダメなUIを作るコツ｜yumemi
先日、「イカれたUIを作ろうの会」というオンラインイベントを開催しました。多くの皆さまにご参加いただき、誠にありがとうございました。 また、当イベントでは期待以上に自由で多様なUIがお披露目され、おおいに血湧き肉躍りました。主催者としてうれしい限りです。 ちなみに社内でも「ダメなUIを作ろうの会」と銘打って勉強会を実施しました。こちらもクローズドな空間ならではの盛り上がりを見せました。 社内での勉強会のお知らせ背景そもそもこのような会を実施した背景には、つぎのように思ったことがきっかけでした。 エンジニアとかUXとかDXとかHCDとかと比べてUIのイベントが少ない気がする。酔いどれUIデザイン選手権をやりたい。一番イカれたUIをデザインしたやつが勝ち。 — yumemi (@n__yumemi) January 24, 2023 たとえば、connpassで検索したときの結果は「UIデザイ
なぜキーボードはQWERTY配列が一般的になったのか 我々が使うパソコンのキーボードの配列は、よほどこだわってない限りQWERTY（クワーティ）配列になっていると思います。 別に何かルールで決まっているわけではなく、単に世界中に広く普及しているだけで、色々な配列が世には存在し、こだわりを持つ人も多くいます。ですが、会社や学校で支給されるパソコンはQWERTY配列なので、いくらこだわりがあっても逃げられない感があります。 QWERTY配列が生まれたきっかけは、タイプライターの性能がよくなく、頻出するキーが近い位置にあると機械が故障するため、わざと頻出キーを遠くに配置しているという説が根強くありますが、この説は現在は疑問が呈されています。 １. QWERTY配列＝タイプライターの故障を防ぐため説 QWERTY配列は文章を打つ際の配列としては効率が悪く、一般的にタイピングの速度が遅くなると言わ
こんにちは。スクラムマスターの@sakebookです。 今回は「象・死んだ魚・嘔吐」をチームでやってみたのでその振り返りをします。 「象・死んだ魚・嘔吐」とは 振り返り手法の一つです。Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法（原題: The Airbnb Story）の中で紹介されていたようです。 翻訳されてなかなかキャッチーなネーミングになっています。 それぞれ次のようなことを意味します。 象 凄く大きい、見えているけど、みんな見ないふりをしている課題・問題。表層化しているけど大きすぎてみようとしていない。これが何かをみんなで話していく。 死んだ魚 放っておくと腐っていく。そういう問題。放置しておくとまずいことになる問題ってなんだろう？ということを話し合う。 嘔吐 自分の胸の中に隠していて、吐き出せなかったこと。これをこの場で嘔吐する。
こんにちは、NE会社で働いておりますきんじょう(@o0h_)がお送りします。 弊社ではPHPを用いてアプリケーション開発を行っています(Ruby, Go, Javaも領域によっては利用しております) さて、つい先日のことですが、社内にいるメンバーから「デザインパターンについて、勉強してみてるんだけど・・・」「ちょっとついていくのが難しくて」「どうしたらいいですかね？それとも、先にやっておくべきことが他にありますか？」なんて雑談をしました。 なるほど、コレは頻出質問になりそうだな・・・という気持ちにもなったので、今回はこの場を借りて「デザインパターン[1]、その前に〜個人的に思ったことをツラツラと〜」でお届けしていきたいと思います。 「デザインパターンを(から)勉強してみる」ことの、オススメ/オススメナイ いちおう、今回は「リーダブルコードくらいは読んでいる」「デザインパターンの勉強をしてい
「UIの良さ」ってのはユーザビリティだけじゃないんだよ〜UNDERTALEのUI｜Yamashita Angelica
この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。2015年にPC向けに開発され、現在はSteam、XBOX、PSVITA、PS4、Nintendo Switch…と、多くのプラットフォームで遊ぶことができます。 ほぼToby Fox氏個人で開発した作品でありながら、各メディアのGOTY（ゲーム・オブ・ザ・イヤー）に多数ノミネートされており、「メタルギアやマリオが出てくる受賞ランキングに個人開発ゲームが入ってるってどういうことだよ！！！！！？？？？！！！！！」と当時せっせとゲームスタジオで働いていた私は卒倒しそうになりました。 こ
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
「ウミガメのスープ」が今、楽しい。 面白みのないストーリーで、どこにでもいるような魅力の薄い登場人物が、普段誰もが過ごしているような日常を送るだけの、無名の小説家による小説。 そんな何の変哲もない小説が、何の変哲もないために売れまくっているという。 どういうことだろう？*1 こういった一見説明のつかない状況に対して、プレイヤーははい/いいえで答えられる質問を投げかけ、出題者がそれに答える。この質疑応答を繰り返して、真相に近づいていくゲームだ。 たとえばこの問題なら、 Q.日記や自伝小説のようなジャンルですか？ →いいえ！ Q.現代日本の話ですか？ →はい！ Q.買っている人達は、読む用途が目的で買っているのですか？ →はい！ Q.結果、無名な小説家は儲かりましたか？ →いいえ！ Q.その小説家は、死後に評価されましたか？ →はい！ Q.小説を買っている人々にとって、小説の内容はなんの変哲も
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
アンドリュー・シュビルスキーがWHOにゲーム障害の根拠を問い合わせたところ、根拠を示すことができなかった上に、ゲーム障害の解説ページを削除する事態に陥る - 井出草平の研究ノート
ゲームメディアNMEの記事。 www.nme.com ゲーム障害の導入に慎重な立場のアンドリュー・シュビルスキーが、ゲーム障害がICD-11に採用されたのはなぜか？ それほどエビデンスが積み重なっていたわけではないのに、どういう過程で採用されたのか？ 自分が知らないだけで実はエビデンスがあるのか？ とTwitter上で、先月くらいに、情報提供を呼びかけていたことから始まる。 シュビルスキーはTwitter上で満足な情報が集まらなかったこともあり、WHOに直接問い合わせることにした。 WHOに返事は「根拠を示すことができない」というものだった。 その上、そのやり取りの後、WHOはWHOのウェブサイト上にあったゲーム障害の解説ページを削除した。 ページは現在も削除されているが、アーカイブ・サービスで、以前掲載されていたものを確認できる。 https://web.archive.org/web/
第1回はこちら マンガをデジタル配信する強みは「試行回数を増やせる」こと 前回に引き続き、「少年ジャンプ＋」編集長・細野修平氏による特別講義をお届けする。今回は、大ヒットを目指すなら紙よりもデジタルのほうが有利だと言える理由、媒体として大きく成長するためのループが回り始めている現状などを語っていただきました。 ◆ 細野 おかげさまで、「少年ジャンプ＋」はその後しっかり成長していきました。次は成長のポイントを見ていきたいと思います。 「少年ジャンプ＋」は初期から『課金よりもヒットを目指そう』と考えていました。デジタル――今はDXとか言われていますが――の良いところは、見える化しやすいことです。逆に言うと、見える指標を追いかけることになるので、安易にお金儲けに走りがちなのです。 私たちも初期にはLTV（＝Life Time Value）、つまりユーザーが入会中にできるだけお金を落としてくれるよ
My iPhone 11 is perfectly fine, but the new buttons on the iPhone 16 are compelling
こんにちは！株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「生成AI」はほぼ初めて！というWEBデザイナーの方が、業務で使える活用術をご紹介します。 まずは基本的な使い方の習得を目指しましょう！ 今回は主にChatGPTを使った業務の効率化方法をお伝えします。 私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね！ 1. 生成AIを使うリスクとは？はじめに、生成AIを使う上での注意点をお伝えします。 漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。 主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。 1. データの
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
たまに忘れてコケたり，周りでも困っている人がいるようだったのでメモ． 追記(2020-09-06T11:25+09:00) この記事では仕組みのほうについて記述しており，由来については書いてなかったのですが，ブコメでホームディレクトリがチルダで表記されるようになった由来について幾人かの識者にご指摘いただきました． unix.stackexchange.com ちょうどHOMEキーと同じ場所にチルダキーがあったんですね．ありがとうございました． tl;dr ~/は$HOME/と同義である ~/が$HOME/に，ひいては実際の$HOME/の中身に展開されるのはシェル(e.g. bash, zsh, etc...)の拡張機能 シェルを使わなければその機能は使えないので，手で展開する必要がある シェルを使わない状況: プログラム中からパスをいじるような場合，DockerfileのCMDなど ~--
スマホが使えなくなった……「世界一受けたい授業」が紹介した「SIMカードロック」でトラブル相次ぐ 専門家は「危険性の高い機能」と指摘【日テレのコメントを追記】
「テレビを見てSIMカードにロックをかけようとしたら、スマホが使えなくなった」──6月27日、ネット上でこんなトラブルの報告が相次いだ。同日に放送された日本テレビの番組「世界一受けたい授業」の内容が原因だという。 同日の番組内容は、「あなたのスマホがとにかく危ない！個人情報の特定屋とは!?」というもの。元埼玉県警捜査一課警部補で現在「刑事コメンテーター」として活動している佐々木成三さんが、デジタル犯罪から身を守るためのスマートフォンの設定を指南した。
人気のカフェや評判のよいレストラン、美容室など、SNSネイティブであるZ世代は「InstagramやTikTokを使って探すことが多い」と言われていますよね。 実際SNSでも「#カフェ」などのハッシュタグの投稿数はとても多く、ミレニアル世代やもっと上の世代からは「Z世代はググらないのでは？」とさえ言われています。 では実際のところどうなのでしょうか。 今回は、AI店舗支援SaaS「口コミコム」を運営する株式会社movが行った「お店検索・口コミに関する」アンケート調査結果をご紹介。調査を通して、Z世代の「お店探し」の実態が見えてきました。
ち @chie8842 うちのおじいちゃん（97歳）、ボケ防止で数学解いたり法律の勉強したりしてて、たまに質問してくるのだけど、いろんな意味で難しいんだよね。。 pic.twitter.com/QSwqBytinM 2021-01-24 10:42:48
「要件定義のスキルを上げたいけどどうしたら良いかわからない」 こんなふうに悩んだことはないだろうか。 要件定義ではかなり幅広いスキルが求められる。さらに要件定義の対象は毎回異なるため、具体的なレベルでスキルを言語化するのがかなり難しく、どうしてもスキル定義が「コミュニケーションスキル」や「ビジネス理解スキル」といった抽象的な言葉になりがちだ。 そこでこの記事では、要件定義を第一線で実行してきた私が、要件定義を構成するスキルを以下の５つに分解し、それぞれの向上のための方策も可能な限り具体化した。 ・論理的に物事を整理するスキル ・ビジネスの数字を理解するスキル ・業務のフローを理解するスキル ・要求を具現化するスキル ・要求を達成するために必要な機能を洗い出すスキル それでは一つずつ見ていこう。 １ 要件定義をするために必要な5つのスキル この章では、要件定義に必須なスキルとそれがなぜ必要な
生成AI時代におけるUXデザイン | 生成AIをフル活用したUX設計手法＆生成AI時代のユーザー体験の変化について
ChatGPTやStable Diffusionなどの生成AIが急速に発展し、社会全体が大きく変化しようとしている。 UXデザインのプロセスや、UX自体のあり方も当然革新されていく。 今回はそうした生成AIによってUXがどう変化していくかを、具体的なメソッドや未来洞察といった具体・抽象を行き来しなが…
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
昨今では、顧客理解 / ユーザ理解に取り組む必要性が様々な所で主張されており、一般常識になりつつある。そして「顧客のことを深く理解すれば、良質な仮説を立案できる」という言説が広く信じられており、マーケティング戦略を検討したり顧客体験をデザインするうえでの前提条件となっている。しかし、このような言説は本当に正しいのだろうか。 結論からいえば「顧客を深く理解すれば、良質な仮説を立案できる、という言説は間違っている」というのが本記事の主張である。この間違った言説が広く信じられてしまっていることが、ミクロな視点では「成果に繋がる施策仮説を立案できない」というビジネスパーソンの悩みの解消を阻んでおり、マクロな視点では企業の成長や競争力向上を阻む要因となっているのだ。 そこで本記事では、顧客理解の必要性・重要性を真っ向から否定することを試みる。「顧客を理解すれば、良質な仮説を立案できる」という言説が間
strong, b, em, i, u, …、違いがわからんHTML要素の仕様を調べて「新しい見た目」を考えてみたら理解が深まった
「strongもbも太字になるのにどう違うんだ…？」 「emもiもイタリック体になるけど、そもそもイタリック体ってなんなんだよ…？」 「strongの重要と、emの強調って何が違うんだ…？」 などなど、使い方がよくわからなくなりがちな HTML 要素（主にテキストレベルセマンティックスに分類される要素）の違いを調べてみました。 長めの記事になっていますので、気になる要素だけつまみ食いしてもらうのもよいかと思います。 今回の調査対象はこちら span strong b em i dfn cite var mark u ins del s strike big small ブラウザのデフォルトの見た目確認用 CodePen 調査する内容 HTML Standard の仕様に書かれている説明 一部、HTML 4.01 から HTML 5 での変更が理解の助けになるものもあり、HTML 4.01
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
なぜいらないダッシュボードを作らないようにしなければならないのかいらないダッシュボードとは、作っても見返りがないか、見返りがあっても非常に少ないダッシュボードのことである。作っても最初から誰も見ていないのは論外であるが、そうでなくてもいらないダッシュボードがたくさんある。 作ったが最初だけで今は誰も見ていない 意思決定の役に立たない 作るのにとても手間がかかる 維持管理にコストがかかりすぎる いらないダッシュボードは作るのにリソースが必要になる。放っておけば邪魔になるので維持管理も必要だし、いらなくなったら後で削除すればいいと思ってもコミュニケーションの手間がかかる。 そしてこのいらないダッシュボードに費やした時間は何の価値も生まず、他にやるべきことに使えた時間を奪う。従って「いらないダッシュボードは作らない」に勝ることは無い。 ではどうしたらいらないダッシュボードを作らないようにできるの
【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ
こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。 イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハートを揺さぶられるポイントについて語り合ったりしています。 知れば知るほど面白くなっていくUIの世界を皆さんにもチラ見せしたい……ということで、イカ会の様子を連載することにしました。第1弾となる今回は、「こんなの見たことない！」と私たちが感動したアプリをご紹介します。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Clear Lists 最初にご紹介するのは、ご存知の方も多いタスク管理アプリ「Clear Lists」。 Clear Listsの特徴はナビゲー
こいつ、動くぞ！ UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons
アイコンをクリックして、コードをコピペ アイコンのライセンスはCC 4.0のオープンソース、商用プロジェクトでも無料で利用でき、改変、再配布もOKです。 以下にアニメーションで動くSVGアイコンをいくつか、コピペしてみました。 SVGなので、サイズは簡単に変更できます。 「Send」アイコン <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <style> .send { animation: send 2s cubic-bezier(1, -0.47, 0.01, 1.37) infinite both; } @keyframes send { 0% { transform: translateY(0) translateX(0); } 100%
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも違和感のないデザインになっています。 また、総務省の「通信利用動向調査」を見ると、スマートフォンでもパソコンでもインターネットが利用されている事がわかります。 利用状況 2022年のインターネット利用率（個人）は84.9％となっており（図表4-11-1-2）、端末別のインターネット利用率（個人）は、「スマートフォン」（71.2％）が「パソコン」（48.5％）を22.6ポイント上回っている。 （出典）総務省「通信利用動向調査」 このようにスマホ、PCどのデバイスでも見ることが
ゲーム企画書の作り方。製作の参考例。考え方｜うきょう|フリーゲームプロデューサー兼マーケッター（株スタジオデルタ代表）
サバイバルホラーアクション『あけておねがい』を製作した際の企画設計の 流れをご紹介します。 ゲームの企画書を製作する方の参考になれば幸いです。 まずは企画書 続いて企画書を設計する際の流れ、考え方をご紹介 １｜企画書の紹介（完成形） 2｜企画書設計時の流れ、考え方ゲーム制作、企画設計、マーケティングの会社をしています。 お仕事のご相談は info@studiodelta.co.jp または X までご連絡ください。 https://twitter.com/home
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URLに「.」を追加するだけでウェブサイトの広告を回避できる可能性があるという指摘
明日からできる、爆速Figma活用術 - エムスリーテックブログ
キーボードの歴史 - なぜQWERTY配列が定着したのか - 歴ログ -世界史専門ブログ-
「象・死んだ魚・嘔吐」をやってみた振り返り - JX通信社エンジニアブログ
デザインパターン〜とかアーキテクチャ〜〜とか・・・に行く途中の話
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ウミガメのスープはランダム生成してもそれなりに遊べることがわかりました - 開け閉め
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
デジタル庁が公開している『ウェブアクセシビリティ導入ガイドブック』がお勧めらしい／「電車内で動画を見たいのにイヤホンを忘れた」ときにも役立つみんなのためのデザイン
少年ジャンプ＋が大ヒットの確率を上げるために実行中の成長戦略とは？ (1/3)
Engadget | Technology News & Reviews
WEBデザイナー向け！はじめての「ChatGPT」で業務効率化をするヒント｜toto｜Rabee.inc
UIは閲覧画面からつくろう。｜Shino | Software Designer
チルダ(~)はどうしてホームディレクトリになるのか - Lambdaカクテル
「Z世代はググらない」は本当？「お店検索・口コミに関するアンケート調査」の結果を大公開！｜MERY
祖父（97歳）がボケ防止で解いている数学の問題がいろんな意味で難しくて問題文を読むことすら出来ない
５年やって分かった要件定義に必須な５つのスキルとその上達方法 - みんなのシステム企画
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
#3-2 顧客理解・ユーザ理解にサヨナラを（UX戦略の教科書）｜小城 崇
いらないダッシュボードを作らないようにしよう｜データ分析とインテリジェンス
“江頭2:50”を「Google Chrome」のアドレスバーからググると……？／あまり知られていないURLの形式が罠に【やじうまの杜】
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
yosyan.hatenablog.com
mag.nhk-book.co.jp
transformer.co.jp
yosyan.hatenablog.com
x.com
www.webcartop.jp