文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
デザインシステムの定義と作成方法、導入事例
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、コードを提供しているからです。 デザインシステムは一過性のトレンドを超えて、2018年以降も続くベストプラクティスになりつつあり、将来的にはWeb全体でデザインの一貫性が向上すると期待できるでしょう。 これが何を意味をするかと言うと、すべてのWebサイトが同じ見た目になるということではなく、それぞれのWebサイトにおいて一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるようになる
アプリの導入画面「ウォークスルー」のデザインで気をつけたい５つのこと
UX Movementの著者であり、編集長です。明確で効率的なデザインに美しさを見出し、ユーザーのために闘うことが好きです。 新作アプリにとって、ウォークスルーはいわば「取扱説明書」のようなものです。 ウォークスルーは、新しいユーザーがアプリを起動したときにまず表示される、アプリの機能についての簡単なガイダンスのようなものです。新しいユーザーが戸惑うことなくアプリを使うために活用されます。 アプリからウォークスルーを無くしてしまうと、ユーザーを混乱させてしまう可能性があります。逆にあったとしても、読みにくくわかりづらいものであれば結果は同じです。ユーザーはウォークスルーを面倒に感じ、読み飛ばしてしまうでしょう。 ウォークスルーは、ユーザーにアプリの使用方法を理解してもらうため、読んでもらえるようなものであるべきです。そのためには、明確なナビゲーションにし、読みやすいテキストにしましょう。ま
ユーザーファーストの功罪｜Masafumi Kawachi
UXデザイン・ユーザーファースト・ユーザー中心・人間中心設計、などあらゆる言葉が今の業界には入り乱れています。それぞれ微妙に概念としては異なるのかもしれませんが、詳しいことは置いておき、昨今の業界でやりとりされるコアメッセージは「ユーザーを一番に見ようよ！！」ってことです。それ自体はとても大事なのですがなんかこう、それが全てだよね、と語られたりそれがあれば正義、という風潮を否めません。その姿勢が本当に「善さ」につながっているのか疑問に思います。 「ユーザーがこう言ってるんだから！」の間違い業界のデザイナーと話したりweb上でたまに見かけるのは、「ユーザーの声を聞こうよ」、「事業者視点じゃなくてユーザーファーストを貫くのが大事でしょ！」といった言説です。「ユーザー」を中心に据えて、彼らの発言や意見を"鵜呑み"にする、要はユーザーという存在を神格化してしまう風潮を感じます。ときには、「ユーザー
ランキング設計はどうあるべきか？ その2｜深津 貴之 (fladdict)｜note
前エントリで論じられた、正しいランキング設計の考察の続き。第2回は、ランキングの収奪性、格差の固定性を軽減する手段を、具体的に論じてみる。 前回の記事へのTwitter上のフィードバックは、Togetterにまとめてある。こちらもご興味があれば、一読の価値がある。いくつか被ってしまったものもあるけれど、諸々の後半記事。 「ランキング」以外の名称を用いるこれはほぼ確定。ランキングという名前は、「noteとして競争原理を推奨する」という強いメッセージを発する。noteの全てのユーザーが、競争原理で動いているわけではないので、これは望ましくない。 おそらく最終的には「注目」「人気」などの名称を使うことになるかと思われる（「オススメ」はパーソナライズ用にとっておく）。また、「ランキング」という名称やスタンスをやめることで、後述するようないくつかの公平性のための施策を行う余地が生まれる。 時間による
有名サイトの事例から学ぶ12のWebデザイン・レイアウト
ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード
ペルソナとは？マーケティングの一番わかりやすい入門編
買い手の行動でセグメンテーションをする最近のマーケティングでは、ペルソナは以前よりも重要になりました。みなさまも、マーケティングでペルソナをつくる機会があるでしょう。 ペルソナとは、あなたの商材を買っていただきたい、ターゲットとなる理想の顧客像です。 今回はペルソナの概要、ペルソナの作り方をわかりやすく説明してまいります。 ペルソナとは、マーケティング用語であり、あなたの製品やサービスのターゲットとなる理想の顧客の人物像です。 買い手の購買行動を重視する最近のマーケティングでは、ペルソナは年々重要になってきました。 メルマガ、ホームページ、リードナーチャリング、セミナーなど、あらゆるマーケティング施策では、お客さまに情報提供するだけでなく、お客さまの購買行動を促すことが欠かせません。各マーケティング施策のターゲットとなるお客さまに取っていただきたい行動に重点をおく最近のマーケティングでは、
フラットデザイン： 起源、問題、フラット2.0のほうが望ましい理由
フラットデザインとは2012年ごろに広まったWebデザインのスタイルである。それは広く今も利用されているが、過度な利用は深刻なユーザビリティ上の問題を引き起こしかねない。フラットデザインによって発生するユーザビリティ上の最大の課題の1つに、クリック可能な要素のシグニファイア不足がある。フラットデザイン2.0は、それに対する優れた解決策を提供してくれる可能性がある。 Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users by Kate Meyer on September 27, 2015 日本語版2015年11月2日公開 フラットデザインは人気のあるデザインスタイルで、Webページのグラフィック要素に、光沢感や立体感という視覚効果を利用しないもののことである。それは多くのデザイナーからWeb
【Interview】たった1行のスクリプトでウェブを多言語化！絶好調のクラウドサービス「WOVN」に迫る | Techable(テッカブル)
Start Up 【Interview】たった1行のスクリプトでウェブを多言語化！絶好調のクラウドサービス「WOVN」に迫る 手間もコストもかけず、“たった1行のスクリプト”で、ウェブサイトを多言語化するサービス「WOVN（ウォーブン）」。 2014年のリリースから、約1年。今では多くの優良企業が、そのシステムを採用している。 7月には、完全 SEO に対応した、多言語化ライブラリ「WOVN++（ウォーブン・プラスプラス）」を新たに実装。 これまで課題とされていた、検索結果に多言語版が表示されない仕組みも、解決できるようになったという。 開発元は、スタートアップ企業のミニマル・テクノロジーズ。波に乗る同社代表取締役の林 鷹治（はやし たかはる）氏に、インタビューを行った。（写真：向かって一番左が林氏） ・A/Bテストの仕組みを多言語化に応用 Q1:「WOVN」開発のきっかけを、お聞かせ
デザイナーの本当の仕事とは？ | Fashionsnap.com
ZEPPELIN ドイツ腕時計ブランドの"ZEPPELIN"とのコラボレーションウォッチパートナ... 詳細を見る
ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略 - 情報建築家 石橋秀仁
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
年間300億。Webユーザビリティ３つの間違い・落とし穴
「ユーザビリティを意識することが大切！」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか？ ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください！ 【事例】１つのボタンを変えただけで、年間300億の売上増！売上に直結するユーザビリティとは、
効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
株式会社DXディライト｜Salesforce導入コンサルティング
DXディライトは、見込み客の獲得から顧客化、受注後の業務フローの構築など、Salesfoceを中核にあらゆる部門の業務環境・フローの構築をご提案いたします。Salesforceの認定パートナー。
シリコンバレーで聞いたデザインが美しいWebサービス／アプリ15選 - パパパパ
このブログは、僕がこれまでWebサービスをいくつか作ってきて、失敗したり成功したり色々体験していることをまとめています。 シリコンバレーに来て45日が経ちました。今日はいつもと趣向を変えて、こちらで聞いた、デザインやUI/UXが美しいWebサービスやアプリの一部を紹介してみたいと思います。 Chill http://chill.com/ デザインのイケてるサービスを聞くと、かなりの確率でこのサービスの名前が挙がりました。動画の上に投稿者のプロフィール画像が円形に表示されているのが素敵です。詳細ページの「Thoughts?」ボタンの動きが秀逸。色々参考になるサイトだと思います。 ChillのようにPinterest風デザインは、今まさにトレンドのようで、教えてもらったサイトの中でも本家に負けず劣らずのデザイン性を持ったサービスも多いです。女性ウケが良いことと、画像をファーストビューでたくさん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
タブレット向けWebデザインのノウハウ40選 ―― 第2章 タブレットデザインを考える | タブレット向けWebデザインのノウハウ40選
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
http://keynotekungfu.com/