リンクとボタンを｢押せる｣だけでデザインしない
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
『Fortnite』開発者が語るゲームのUXデザイン 人間の脳の“制約”を見抜く
2020年3月28日、NPO法人国際ゲーム開発者協会日本（IGDA日本）主催の特別ウェビナー「『Fortnite』のユーザーエクスペリエンス」が開かれました。講演者は、世界的ヒットゲーム『Fortnite』のUXディレクターで、書籍『ゲーマーズブレイン UXと神経科学におけるゲームデザインの原則』の著者としても知られるセリア・ホデント氏。自身が携わった『Fortnite』開発時の事例を中心に、ゲームのUXデザインや人間の脳のしくみについて解説しました。 ※この記事はIGDA日本に許可をいただき、ログミーTechが独自に編集したものです。内容についての責任は弊メディアにあります。 『Fortnite』におけるUX設計を語る セリア・ホデント氏：本日はみなさんとこういうかたちでお話しすることができて、大変うれしく思います。ただ、本当であれば東京でみなさんと直接お会いしながらできるはずだったのが
認知バイアスを回避するためのアイデア検証プロセス / Validate Ideas
データで失敗するパターン 1. データを見なさすぎる 2. データを間違って解釈する 3. データの精度を不必要に高めすぎる ①改善プロセスを整理する ・課題事実 ・原因仮説 ・解決策 ②アイデアを検証する ・ユーザーテスト
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較
ガイナ、「トップをねらえ3」「蒼きウル」など新作アニメ4本制作開始！ ネットに衝撃走る
アニメ制作会社・旧ガイナックスの流れをくむ、木下グループ傘下のスタジオガイナが、「トップをねらえ3」（仮題）など4本の新作アニメを制作すると発表しました。アドバイザーとして、貞本義行さんと山賀博之さんが参画しています。 新生「スタジオガイナ」のロゴ 制作するのは、劇場アニメ「蒼きウル」、オリジナルアニメ「トップをねらえ3」（仮題）、「あくびをするにはワケがある」、子ども向けアニメ番組「レスキューアカデミア」の計4本。木下グループの全面サポートを受け、今秋から制作を開始するとしています。 「蒼きウル」のイメージボード（京都・大徳寺真珠庵襖絵） 「蒼きウル」は、ガイナックス時代から企画を進めてきた作品。監督を山賀さんが、キャラクターデザインを貞本さんが担当し、2022年までに全世界上映を目指すとのこと。「トップをねらえ3」「あくびをするにはワケがある」は、「蒼きウル」と同じくガイナが主体となっ
雷ゴロゴロしたら「PCを切り、プラグを抜く」 メーカーが注意喚起
8月13日、関東地方の各地で雷雲が発生している。Twitterのトレンドには「雷ゴロゴロ」「カミナリ」「ゲリラ豪雨」といったワードが入った。こうした中、PCメーカーなどは、PCの電源を切り、プラグをコンセントから抜くよう注意を呼び掛けている。 雷が落ちると、電線など高所にあるものに雷サージ（異常電圧）が生じる場合がある。この電流が、電源線や電話線、アンテナ線を通じて建物の中に侵入すると、PCや家電製品が故障する原因になる。 ゲーミングPCなどを手掛けるASUSのブランド「Republic of Gamers」（ROG）は、Twitter上で「雷サージ対応の電源タップや無停電電源装置（UPS）を使用していない場合は、早めにPCの電源を切り、電源ケーブル（プラグ）をコンセントから抜いてください」と呼び掛けた。 関連記事 室外機に濡れタオル、効果ある？ エアコンメーカーに聞く 室外機の天板に濡れ
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。｜榊原昌彦
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。 このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。 どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。 使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」
FOLIOリブランディングの裏側 ──構想からリリースまでの8ヶ月の軌跡──｜広野 萌
株式会社FOLIO CDO（Chief Design Officer）の広野です。 この度、オンライン証券サービス「フォリオ」の正式リリースに伴いまして、思い切ったリブランディングをおこないました。 ビフォーアフターはこちらです。 ご覧の通り、今回のリブランディングプロジェクトはいわゆる「ロゴリニューアル」に留まらず、サービスを提供する上でのスタンスを改めて定義し直した、新たなブランドとしてのフォリオを再誕させることになりました。 パット見のビジュアルでいうと、安心を感じさせる「青」から、躍動感のある「赤」に変わるのですから、FinTech系スタートアップとしてはかなり挑戦的なリブランディングのようにも思われるかもしれません。 ここまで辿りつくのに紆余曲折ありましたが、包み隠さずリアルな8ヶ月の軌跡をここに記したいと思います。 【目次】 1. 危機感 2. 幕開け 3. 壁 4. 光 5.
フォリオのアプリでこだわったのは、「OS最適化」と「秩序のある設計」｜コウノ アスヤ
株式会社FOLIOで、モバイルアプリのUIデザインを担当している コウノ アスヤ ( @asuyakono )と申します。 やっとのこと、7月23日（月）にアプリをリリースすることができました。このアプリの開発にはチームのキックオフから計算すると実に1年と3ヶ月を要しており、並々ならぬ感慨を感じています。せっかくなので今回は、本アプリを設計・デザインしていくうえで大切にしたことと、主要な画面のデザインを少しだけ紹介させてください。 ※画像内の金融商品・データは、デザイン紹介のためのサンプルです。コンセプトは「OS最適化」と「秩序のある設計」 フォリオのアプリは、”最適なユーザー・インターフェースはOS毎に異なる”という「OS最適化」の思想に基づいてデザインしました。したがって、機能は同じでもiOSとAndroidでデザインが異なります。「この画面で何ができるのか」というベースの体験だけしっ
楽天、2年連続ロゴ刷新 「一」をモチーフに
楽天は6月26日、7月2日からグローバルの統一ロゴを一新すると発表した。同社は昨年、ロゴの表記の大半を「楽天」から「Rakuten」に改め、丸付き「R」の文字を冒頭に付けるリニューアルを実施したが、今回、ほとんどのロゴで「Rakuten」表記を採用し、漢字の「一」をモチーフにしたデザインに変える。丸付き「R」のデザインは、一部を除いて廃止する。 モチーフにした「一」には、「はじまり」「ひとつになる」「一番・最高」「唯一」という4つの意味を込めた。「新しいグローバル統一ロゴのもと、人々の暮らしをより豊かで便利なものへと変える挑戦を続けていく」としている。 Webサイトやアプリのロゴは順次リニューアルする。新ロゴは既に、楽天がパートナーシップを結んでいるサッカー名門クラブ「FCバルセロナ」や、楽天がスポンサーを務めるJリーグJ1クラブ「ヴィッセル神戸」、プロ野球チーム「東北楽天ゴールデンイーグ
今さら聞けないUI（ユーザーインターフェース) の基本 デザイン会社 ビートラックス: ブログ
ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
Backdrop | UXの語感
UXという言葉は2005年ぐらいにはすでにバズワードだったが、その後もますますバズっぷりを増している。 UXという言葉は人によっていろいろな意味で使われるとよく言われる。実際、私も仕事でいろいろな人がいろいろな意味で（そして真面目に）UXという言葉を使っているのに遭遇する。 デザインコンサルタントとしては、UXを何かひとつ定義づけることよりも、世間でこの言葉がどのような使われ方をしているのかを知ることの方が重要だ。 ちなみに、私の定義はとても簡単だ。誰かが私に「UXとは何ですか？」とたずねれば、私はこう答える。 「利用者体験のことです」 それ以上でも以下でもない。英単語の直訳で十分意味のある言葉だと思う。 例えば「デザインって何ですか」とか「UIって何ですか」といった質問に答えることの方がずっとコンセプチュアルで難しい。UXは簡単だ。 ただ世間でいろいろなニュアンスが盛られて使われているよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dely.design