ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから１つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 欧文のルール日本人は知らない欧文（主に英語）のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 「＆」の正体正式にはアンパサンド（ampersand）と言います。日本では「アンドマーク」と呼ばれていることが多いこの記号。正しい名前は“ampersand”（アンパサンド）です。日本でも馴染みのある記号で、企業名などでもよく目にするのではないでしょうか。 情報通信・メディア系

韓国の群衆事故を見て「日本の満員電車で事故が起きないのって凄いんだな」という意見が見られるが、実は「満員電車のプロ」であるはずの電鉄会社も甘い見立てでとんでもない失敗をした事があるんだな。 小田急にドアがデカい変な電車がいるが、あれの話である。 自分は鉄オタじゃないからそんなマニアックな話じゃないので安心してくれ。 因みに2014年に相模大野駅で脱線事故が起きて小田急全線不通になったが、その脱線した電車というのはこれだったんだな。 あの電車は混雑解消と遅延防止の為に作られたが、そのせいで小田急線は大混雑と遅延続出とケガ人の走る地獄エクスプレスと化したのだった…。 構造的欠陥と転倒事故の続出以前Wikipediaを確認したところ、これは停車駅が多い各駅停車用に作られたと書かれていたが（今は削除）、これは間違いで、混雑が酷い急行に使われていた。https://ja.wikipedia.org/

昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。

ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

こんにちは。ライターの斎藤充博です。 誰もが知っているファミリーレストランの「サイゼリヤ」。そこにはメニューと一緒に「まちがいさがし」が置かれています。 とても難しいことで有名なこのまちがいさがしですが、イラスト自体がすごく素敵です。描いてあるキャラがかわいいのはもちろんのこと、線の一本一本に表情があるように感じられます。 まちがいさがしなので、長時間このイラストを見つめることになるのですが、それでもぜんぜん飽きません。むしろ細かく見るほど楽しくなってくるイラストだと思います。 描いているのは、イラストレーターのTHE ROCKET GOLD STARこと、山崎秀昭さん（以下、山崎さん）。職業としてイラストを描いている人には複数の画風を描き分けることが多い印象がありますが、山崎さんはこの画風のイラストしか描かれていません。 QBB（六甲バター株式会社）のキャラクター「Qちゃん」 ドムドムバ

羽山 祥樹＠日本ウェブデザイン @storywriter 明日7/15（金）の夜にUXデザインの無料セミナーするんだけど、ネタスライドしかアップしてないので、中身があるか不安に思われている気がしてきたw　ちゃんと中身もあるよ！ ということでスライドチラ見せ！ セミナー申し込み（無料） → creativevillage.ne.jp/111762 pic.twitter.com/wJl3jUyz3b twitter.com/storywriter/st… 2022-07-14 18:04:25 リンク connpass 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 (2022/07/15 19:00〜) ## 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 UXデザインの根幹を理解するための無料セミナーを開催し

これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ

編集部注：2024年3月12日にリンク切れを修正しました。 エンジニアをしているとUMLといった言葉を耳（目）にする機会が多いと思います。UMLについて「なんとなく知ってるけど…」って人も多いのではないでしょうか。 ここではUMLで使用するダイアグラムについて簡単に説明します。書き方など詳細は別の記事で、代表的なダイアグラムに絞って書いていきたいと思います。 対象・目的ターゲットは新卒や、エンジニア初級者向けのコンテンツです。この記事をきっかけに若い世代にもUMLについて興味を持って頂くことを目的としています。UMLを理解することによってよりエンジニアとしての幅も広がることと思います。難しく考えずに積極的にトライしてみてください。 UMLとは？ Unified Modeling Languageの頭文字を取ったもので、「統一モデリング言語」と言われています。言語の違いを統一するものがUML

リンク 容器スタイル オードブル38-25本体 ゴールド｜食品容器・トレイの通販サイト【容器スタイル】 食品容器の通販サイト【容器スタイル】のオードブル38-25本体 ゴールドのページです！トレー、フードパック、弁当容器、総菜容器などの使い捨て、テイクアウト用商品だけでなく、店舗備品、販促用品やユニフォームも取り扱っております。小ロット出荷にも対応！お気軽にご用命ください。

VTeacher所属のSatomiです。 ※ 本家Miroさんからコメントをいただいたので掲載します！ ミロジャパン高山です。本記事ではMiroについてご紹介頂き誠にありがとうございます。大変参考になります。もし本記事の趣旨にあっていればですが、以下の２つのテンプレートを日本語対応をしましたので、よろしければ、リンクを付与頂けますと嬉しいです。 スクラムボード：https://miro.com/ja/online-scrum-agile-tool/ マインドマップ：https://miro.com/ja/mind-map/ 或る日突然、「100万円のプロモーション予算がついたから急いで作って」と頼まれました。 ※ちなみにプロモーション予算（100万円）に人件費は含まれないそうです。 そして、偉い人から下の画像が送られてきました。 （「4月1日に夢を語る」という PR TIMES の企画だそ

どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ

毎日ちょっとずつ、デザインを学ぼう毎日ちょっとずつデザインを学ぼうIT/Web業界のデザイン学習サイト

V ガン @ZRxuKd0wyaJtjgN @ouji_0811 ①ズボン下ろしながらまず、扉側に身を寄せ、外からは便器しか見えない位置に身を隠し、扉を閉めました 閉めた後、息子がまた開けようとするので一回トイレットペーパーをちぎってすぐ扉側へ身を隠し、お尻を拭きます。 2022-03-14 00:22:24 V ガン @ZRxuKd0wyaJtjgN @ouji_0811 ② その間扉はもう既に息子によって開けられてしまっているので、扉側に身を隠しながらズボンを上げて(もう便意は引っ込んでいる。Twitterどころじゃない段階)、手を洗い、抱っこ紐をつけ息子の手を洗い、妻と合流しました。💩 2022-03-14 00:23:58

1997年生まれ。大学院で教育学を勉強しつつ、チェーン店やテーマパーク、街の噂について書いてます。教育関係の記事についても書きたいと思っているが今まで書いてきた記事との接点が見つからなくて途方に暮れている。 前の記事：マクドナルドの看板には2種類ある ＞ 個人サイト Note 店内に多く貼られたPOP。独特の主張の強さがある。この感じがドンキらしいのだ。 インタビューに伺った松本和史子さん。ドンキ練馬店の専属POPライターで、練馬店の開店当初からPOPを書き続けているプロフェッショナル。 さっそく話を聞いてみよう。 メモの字がドンキの文字だった 松本　今日の質問にお答えしたものをメモにしたんですけど 谷頭・林　おお！ メモがドンキの文字だ！ 谷頭　すでにメモの字がドンキの文字ですね、すごい！ 松本　あ、それは全然意識していなかったです（笑） ドンキの文字って独特で、この文字を書くための研修

グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif

※追記しました https://anond.hatelabo.jp/20220115230648 昔からそうだけどPanasonicってデジタルモノに無茶苦茶弱いよね。 そのくせPanasonic価格でやたら高いし。 テレビとか冷蔵庫とか代替のモノがある場合は避けようがあるんだけど 純正カーナビとか住宅設備とか避けられないものにPanasonicが入ってくると途端にQoLが下がる。 カーナビこれまで遭遇したのはスバルの純正カーナビがPanasonicだった。 純正じゃないとデザインが統一されなかったり機能が制限されるから泣く泣くPanasonicに。 結果は最悪。 エンジンスタートしてカーナビ起動、地図を触れるようになるのは普通のカーナビぐらいの早さなんだけど 操作可能になってから３秒後ぐらいに 「ETCカードが挿入されています」 っていうメッセージが出てきて消えてくれない。 ３秒ほど待つ

■パワポの色はダサいどうも今回は脱パワポっぽさ！ということで、色をテーマにまとめていきたいと思います！ みなさん、パワポでスライドを作る際、色をどのように決めていますか？ 図形を挿入した時のデフォルトの色を使っていますか？ 図形の塗りつぶしから色を選んでいますか？ もちろん、もともとパワポに設定されているカラーでも問題はありませんが、どうしても普段から目にすることが多いので、パワポっぽさを感じる配色になってしまいます。 今回のテーマ「パワポっぽさを脱却する」ということですから、私がいつもやっている方法を紹介したいと思います！ ■色を決めるのはめちゃくちゃ難しいということを自覚する実際に私がおすすめする方法を紹介する前に、色を決めることの難しさについて話したいと思います。 フランスの国旗（イタリアでもルーマニアでもドイツでもチャドでもポーランドでもいいですが笑）で考えてみたいと思います。もし

少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ（表示）を