ダークパターンとは一言で言うとタイトルのままで、人を欺くデザインのこと。例えば、空港の通り道を強制した店舗レイアウトがある。 各航空会社は「空港に2時間前には着いてチェックインと保安検査のための時間を確保しろ」と乗客に注意喚起を促す。しかし旅慣れた人からするとそんな時間いらないの知ってる。にもかかわらずかなり余裕を持った時間設定を喚起するのはなぜか？ それは保安検査場からラウンジまでの間のショッピングエリアに起因している。羽田や伊丹空港を利用したことがある人は身に覚えがあるはず。保安検査を通る前後には飲食店や土産屋、国際空港であれば高級ブティックなど多くのテナントが入っている。時間に余裕があれば足が店舗へ向かう可能性は高くなる。空港は店舗に対してテナント料を売上に対する歩合とすることで、必然的に儲かるという仕組みだ。 ダークパターンの類型本書では以下のように分類例を挙げている。かつ、各分類

小さくても超見やすい！イギリスの名門紙The Timesのために作られたフォント 1932年、イギリスの格式高い新聞社「The Times」のために特別に作られたフォントです。「読みやすさ」「インクの節約」「限られた紙面での効率的な文字配置」という3つの課題を解決するために生まれました。当時の新聞フォントと比べて、文字の高さを高めに設定し、セリフ（文字の端にある装飾）を適度な大きさに抑えることで、小さな文字でも読みやすい新聞印刷に最適化された実用的なデザインとして設計されています。 「上質」「信頼性」「知的」「正統性」「説得力」という印象を与えられます！ 高級ホテルやブランド、名門大学など、世界中の一流の組織で使われ続けてきたことから、「上質」「信頼性」「知的」「正統性」という印象を与えられるフォントになりました。イギリスの名門紙The Timesのために開発された背景から、文字の端にある

MTDDC Meetup TOKYO 2024 2024/11/23 株式会社サイバーエージェント 原 一成 (@herablog)

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。 The stretch keyword: a better alternative to width: 100% in CSS? by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに width: 100%;が便利な例 width: stretch;の使い方 stretchのサポートブラウザ

ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり

いやはや、ワールドカップ楽しかったですね。 無類のサッカー好き、SPCデザイナーAです。 少し前ですが、サッカーの応援で使用されたフラッグのデザインが政治的な意味合いや差別を助長する意味として問題になったことがありました。 フラッグを制作した当事者は、元となったデザインの意味も特に理解せずに、なんとなく格好良かったからそのデザインを模写して制作したそうですが、結果的には無知なことと軽率な行動から大きな問題になり、該当チームが応援の規制をするなどの措置も取られました。 サッカーの応援に限らずですが、デザインによって実は危険だったり人を不快にさせる意味合いと取られるケースがあります。 今回はそんな表現の一例を紹介していきますので、ウェブサイトやロゴ、公共の目に触れるものを制作するデザイナーは特に知っておきたい事柄になります。 私もデザインするときに背景に使うこともありますが、放射・集中線を使っ

前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 なお、こちらの記事の内容は順次YouTube

読了後の狙い ・デザインリサーチの基本的な要素を学べる。 ・デザインリサーチの実施シーンがイメージができる。 ・普遍的な営みとして デザインリサーチに親近感が持てる。 はじめに パーソルキャリア株式会社 UXリサーチャーの @ono_yah と申します。 今回は現場UXリサーチャーの立場から ・UXリサーチという単語を知っている ・デザインリサーチをまったく知らない ・近いことはやっているので、自分の業務をより深く理解したい 上記のような 業務において専門的に実践していなくとも新しい学びがある、今後デザインリサーチと心理的な距離が縮まるような内容になればと思います。 そのようなコンテンツを執筆したいと思った動機は、2年前にUXリサーチャーとしてパーソルキャリアに入社してから1年半程「UXリサーチャー」という職能の掴みどころのなさに戸惑う日々を送っていた経験からです。 参加プロジェクトにおけ

『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ

※本ページは、アフィリエイト広告を利用しています。 Webサイトやスマホアプリをはじめ、バナー、カード、雑誌やカタログなどで、情報を分かりやすく整理し、的確に伝えるためにもっとも重要なことはレイアウトを工夫することです。 テキストや画像、図版などのさまざまな情報の要素をどのようにデザインして配置するか、レイアウトデザインのルールとテクニックを学べ、そしてアイデアも満載の解説書を紹介します。 本書は「Second Edition」とある通り、2017年に刊行された「知りたいレイアウトデザイン」の第2版になります。前書では紙媒体のレイアウトが中心でしたが、第2版では紙媒体だけでなく、Webサイトやスマホアプリやバナーなどデジタル媒体のレイアウトが数多く解説されています。実例の数はおよそ3倍と大幅増量（担当者様より）です。 本書は今週、発売されたばかり！

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースでデザインを担当している萩野と小股です。 Yahoo!ニュースは、Yahoo! JAPANが運営する国内や海外のニュースを閲覧できるサービスです。1996年にサービスを開始し、2021年には25周年を迎えました。 そんなYahoo!ニュースでは、2020年より「Figma」を用いてデザイン業務を行っています。この記事では、Figmaの利用に至った背景や、運用し続けられるものにする工夫、デザインシステムによってデザイン業務がどのように効率化されたか、お伝えします。 Yahoo!ニュースが抱えていたデザインにおける課題と解決方法 この章では、Yahoo!ニュースが当時抱えていた複数のデザイナーがデザイン

sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人

こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。 アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。 CTAはメインカラーと異なるものを利用する 色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。 それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。 メインカラーとボタンを同じにしてしまうと画面に馴染みすぎてユーザーの

こんにちは。デザイナーの白木です。 前回はクラシコムのUXリサーチについてお話しましたが、今回は「北欧、暮らしの道具店」のメルマガをABテストの手法を使って改善した話をしたいと思います。 「北欧、暮らしの道具店」通常のメルマガは商品紹介がメインですが、それとは別に当店のアプリを紹介するメルマガも配信しています。 これまではメルマガ登録者全員に配信していたのですが、その中にはアプリをすでにご利用いただいている方も多くいらっしゃるため、アプリのダウンロードには繋がりにくいという課題がありました。 そこでアプリ紹介メルマガを配信する対象をメルマガの新規登録者に絞ることにしました。新規登録者は当店を知って間もない方が多いと思われるため、アプリについて知ってもらえる良い機会になると考えたからです。 内容も見直し、いくつかのパターンを配信して効果を検証してみました。 ※本来同じ期間に複数のパターンをテ

商用でも無料、かわいくておしゃれなイラスト素材をまとめました。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、さまざまなメディアで無料で利用できます。 ほぼすべてがクレジット表記は必要無しなので、使いやすいと思います。 イラストセンター 個人・商用プロジェクトで無料で利用できます。 現在10,000点以上、分かりやすくて使いやすいイラストが揃っています。カテゴリも豊富で、だいたいのものが揃っています。野菜や果物など、同じテイストでたくさんあるのもいいですね。料理もたくさんの種類があります。一度に利用できるイラストの数は20点までとなっており、詳しくは利用規約をご覧ください。

CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSでpxとemとemの各単位がどのように機能するか アクセシビリティに関する考慮事項 どの単位をどこで使用すればよいのか どの単位がベストなのかが明らかでない場合 簡単にできる小技とメンタルモデル ボーナス: remを使用すると便利なテクニック はじめに C

いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS

はじめに2013年にスタートアップに参加したことをきっかけに、今までいくつかのデジタルプロダクトのUIデザインに携わってきました。2020年にTakramに参加してからは、さらに多様な事業のプロダクトに関わらせていただいています。この約10年間のあいだに世の中のUIデザインのノウハウは確立されてきており、既存のコンポーネントなどを組み合わせれば、きれいなUIが誰でも簡単に作れる時代になりました。そんな中で個人的に大切にしてきた価値観として、「ユーザーの気持ちを考えて、その気持ちに寄り添った情緒的なUIをデザインする」ということがあります。今回、この記事を書いているのは、その意味や意図を言語化して再利用可能なものにしたいと思ったことがきっかけです。考えながら書いているため、何度かのシリーズになるかもしれません。また、このテーマについて様々な方と対話ができたらいいなとも思っていますので、興味を

WebサイトやスマホアプリのUIデザインについて、実務に必要な役立つ知識と情報をさまざまな角度から学べる解説書を紹介します。 「わかりやすいUI」「使いやすいUI」ぼんやりと分かっているけど、うまく言葉にできない、明確に整理できていない、UIデザインの考え方を学びたい人にお勧めです。国内外の実例も多数掲載されており、非常に分かりやすい解説書です。 本書は「UIデザインの教科書（紹介記事）」を大幅にリニューアルしたもので、2022年最新の環境にあわせて、構成および内容は全面的に刷新されています。デザイナーやディレクターをはじめ、デベロッパーやコーダーなどUIに携わるすべての人にお勧めします。

Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット