タグ

uiとdesignに関するherakuresのブックマーク (51)

  • 「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス

    うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル(ネットショッピング、旅行予約サービス、飲店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス)について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました(利用者数については、ニールセンとICT総研の調査を元にしています)。このうち、16のサービスの運営企業から回答がありました(回答率は53%)。 回答した企

    「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス
  • inspiration | design.shittoco

  • 取り扱い注意、気を付けたい類似すると危険なデザイン | ホームページ制作・Webマーケティング|株式会社SPC

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

    取り扱い注意、気を付けたい類似すると危険なデザイン | ホームページ制作・Webマーケティング|株式会社SPC
  • アプリデザインギャラリー

    unprinted(アンプリンテッド)は、「より良い未来」をつくるデザイナーのためのWork & Lifeマガジンです。 unprintedへのお問い合わせ、コンテンツ制作に関わってみたいという方は、コンタクトフォームよりご連絡ください。

    アプリデザインギャラリー
  • モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響

    モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、

    モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
  • 画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる

    装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」(How it works)ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ

    画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
  • ユーザインタフェースの研究

    テキストはスマートフォンで最も用いられている表現手段の一つだが、そのフォントプロパティはデザイナーの感性で決められることが少なくない。そこで私たちは大規模実験を行い読みやすい文字と行間の大きさを科学的に明らかにした。サービスでの実証実験を通じ、科学的因果関係を把握しながらデザインとKPIを改善するアプローチを実現した。

    ユーザインタフェースの研究
  • https://developer.apple.com/jp/design/human-interface-guidelines/

  • 本当は教えたくないWebデザイン参考ギャラリーサイト37選

    ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA

    本当は教えたくないWebデザイン参考ギャラリーサイト37選
  • エモーショナルUIデザイン|kana

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

    エモーショナルUIデザイン|kana
  • 業務系システムは『イケてるフラットデザイン』だと使いにくい?現場が本当に必要だった物との比較

    でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu… Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu…

    業務系システムは『イケてるフラットデザイン』だと使いにくい?現場が本当に必要だった物との比較
  • SMBCホームページ、デザインリニューアルの裏側。|SMBC DESIGN

    こんにちは。デザインチームの八嶋です。2021年3月22日、SMBCのホームページが大幅にリニューアルされました。このホームページリニューアルは、約5年ぶりの大幅リニューアルでページ数は約1500ページにも及ぶ大プロジェクトでした。このプロジェクトはインハウスデザイナーによるホームページのデザインディレクションとデザインチームが作ったデザインシステムによる連携で作られています。ホームページの役割からUIの設計までコアとなる部分をインハウスデザイナーが設計し、多数のパートナー様にもご協力いただき完成させています。(特にトランスコスモス様、ありがとうございます。) 今回のnoteは、ホームページリニューアルチームの一員でもある八嶋が、デザイナーの大塚とプロジェクトマネージャーの髙橋、そして、デザインシステムを担当したデザイナーの金澤にインタビューをしました! ホームページリニューアルを通して、

    SMBCホームページ、デザインリニューアルの裏側。|SMBC DESIGN
  • Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—|Goodpatch Blog グッドパッチブログ

    Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採

    Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—|Goodpatch Blog グッドパッチブログ
  • 【トレンド分析】最近のアイコンのデザインが似通ってきている問題 デザイン会社 ビートラックス: ブログ

    最近のスタートアップにおけるロゴトレンドでは、そのスタイルに多くの類似性があることがわかった。その中でも、特にスマホ向けのアプリの影響でアイコンの存在がそのブランドを強く印象づける役割を果たしている。 【トレンド分析】最近のロゴデザインが似通ってきている問題 – 第2弾 多くのアイコンがどんどんカラフルに限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。 カラフルアイコンの代表的なのがインスタグラム。インスタは2016年にそれまでのカメラ風のアイコンから、思い切ってカラフルなグラデーションを取り入れたアイコンにリデザインを行った。 Googleサービスの見分けをつけるのが難易度高めカラフルなカラースキームの代表といえばGo

    【トレンド分析】最近のアイコンのデザインが似通ってきている問題 デザイン会社 ビートラックス: ブログ
  • 画面をデザインするということ - Qiita

    この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている1エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 (実際にUX5段階モデルを意識して仕事してるわけではありませんが、何かしら

    画面をデザインするということ - Qiita
  • 5種類57デバイス対応UIデザインの裏側——U-NEXTブランドリニューアル|U-NEXT コーポレート

    U-NEXTは、2020年4月にブランドリニューアルを行いました。新ブランドは、ブランドデザインを担当するNicolas Goninを中心に構築していきましたが、そのブランドをあらゆるタッチポイントに反映するに当たっては、さまざまなメンバーが活躍しました。 今回は、ユーザーのU-NEXT体験に最も影響を与えるアプリ等のUIデザインを担当した源田みどり、Livioに話を聞きました。 源田 翠 UIデザイナー / Web制作会社を経てアプリのデザインに関心を持ち、ゲーム会社へ転職。家庭用ゲームやオンラインゲームUIデザイン、新規タイトルの立ち上げなどを経験した後、よりUIを突き詰めようと考え2017年2月U-NEXTに入社。Product Design Team所属。担当タイトルに、モンスターハンターストーリーズ、ブラウザ三国志など。 Livio UIデザイナー / 3年間グラフィックデザイ

    5種類57デバイス対応UIデザインの裏側——U-NEXTブランドリニューアル|U-NEXT コーポレート
  • consim. β

    Made by @chiharukodama If you have any feedbacks or ideas, please contact me at Twitter. Also, donation is very appreciated!

    consim. β
  • 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新|ryota_funakoshi

    【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です!久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの?🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました!デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです!たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ!」というのがあればぜひコメントで教えてください! 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

    【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新|ryota_funakoshi
  • ワイ「何でそんな小っさいコンポーネント作ってるん?w」 - Qiita

    とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ?」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ?」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか?」 ワイ「ヒグマ?」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか!」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル

    ワイ「何でそんな小っさいコンポーネント作ってるん?w」 - Qiita
  • Parts. - パーツ別Webデザイン集

    メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。

    Parts. - パーツ別Webデザイン集