見やすいサイトを作るときに最低限チェックしたい６項目
いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ
分かりやすく美しい直感的に使えるタイムラインを実装できる「Timeline JS3」:phpspot開発日誌
Timeline JS3 - Beautifully crafted timelines that are easy, and intuitive to use. 分かりやすく美しい直感的に使えるタイムラインを実装できる「Timeline JS3」 時系列に何がおきたのか、GoogleのSpreadsheetから組み立てて生成できます。 タイムラインと共に流すコンテンツもスライダーで生成されるので歴史等を分かりやすく説明するUIが作れます ソースコードをかかなくてもWEB上で生成できるので誰でも使えます 関連エントリ CSS3のみでレスポンシブなタイムラインUIを実装したデモ CSSオンリーで動作するタイムラインUI「timelined」
ユーザビリティテストの被験者をしてみて感じた、テストの流れや重要ポイント
2016年9月1日 ユーザビリティ 8月某日、ワイヤーフレーム作成ツールのCacooなど、制作業務を円滑に進めるための様々な便利ツールを開発しているヌーラボさんにおじゃましました。そこで、まもなくプロジェクト管理ツールのBacklogをリデザインするということでしたので、ユーザビリティテストの被験者をしてみることに！ユーザビリティテストを行うことはありましたが、本格的なテストの被験者をすることはあまりなかったので、ワクワクしながら受けてみましたよ。 ↑私が10年以上利用している会計ソフト！ リデザインの経緯 長く愛用され続けてきたUIを改新するということですので、デザインを変更することを決めた理由や経緯について、中の人に聞いてみました！ 今までのUIは、少し前のWebアプリケーションで良く見られたような、1画面に多くの情報を載せてすべての機能を文字ラベルで表示するタイプでした。この方針には
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
ジャストシステムの転職サイト『ピタジョブ』のユーザー行動観察事例。競合ひしめく領域で優先すべき考え方とは？ | ナイルのマーケティング相談室
本記事では、関連したサービスを運営されている方に共通する悩みや課題を発見することを目的として、話題のサイトやモデルケースになりそうなサービスでユーザビリティテストを行った事例を共有します。 今回は、「一太郎」や「ATOK」で有名な株式会社ジャストシステムの転職サービス【ピタジョブ】を対象に課題発見事例をご紹介します。競合性の高い領域において、サービスの特徴をユーザーに認知させるには何が重要かを調査しました。 調査結果では、サービスの強みを打ち出すためにどんなサイトでも気をつけられる以下の課題点が発見されました。 ▼対象サイト ピタジョブ | ぴったりが見つかる転職･就職･求人情報サイト ＼ナイルのサイト改善提案の紹介はこちらから！／ 今回のユーザビリティテストの発見点 発見① ユーザーは自分の求めている情報を的確に・迅速に手に入れることに“しか”興味が無い 発見② ユーザーと同じフレーズや
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
若者のウェブアプリ離れ - NZ MoyaSystem
どうも、海外就活生のはっしーです。 自称プログラマとして、たまにはIT系のネタを。 現在、現役の大学生たちと一緒に、プライベートでウェブアプリを開発運営しています。大学生向けに、不要な本を無料で譲渡しあえるプラットフォームとしてのサービスです。 テクスチェンジ 先日、この広報および運営を担当してくれているメンバーが、こんな報告をしてきました。 「はっしーさん、Facebook ログインと Twitter ログインが使えません！」 くだんのウェブサービスには、SNSのアカウントと連携してユーザ登録できるボタンを用意しています。なんでも、大学構内で新規ユーザ登録を呼びかけたところ、この機能がうまく使えなかったそうなのです。 「なにかバグがあるってこと？」 「いえ、Facebook や Twitter の アカウントをもっていても、パスワードを覚えてなくてログインできないんです」 ｴｯ!? (
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
英会話アプリ「Chatty」のUIデザイナーが語る、リニューアルで会員登録率を2倍に上昇させた改善ポイント - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
英会話アプリ「Chatty」のUIデザイナーが語る、リニューアルで会員登録率を2倍に上昇させた改善ポイント 本稿は、カナダ、アメリカを拠点に活動している26歳フリーのUIデザイナーである高橋麻衣さんによる寄稿記事です。 日本の広告代理店で広告営業とプロデューサーを経験した後、昨年にはシリコンバレーでゲーム開発のブートキャンプ「MAKE SCHOOL」を卒業。現在は、カナダに在住し、フリーランスとして仕事をしています。 ユーザーの大半がビジネスマンであるレアジョブ英会話。一方の英会話アプリ「Chatty（チャッティ）」のコアユーザーは、意外にも女性が7割、それも10代がメインでした。以前女性向けサービスの運営に携わった経験があり、個人的にも英語に興味があったことから、この若い女性というコアユーザー向けにリニューアルデザインを担当させてもらうことになりました。 結果として、Chattyのデザイ
JavaScript Dashboard Demos based on HTML5 CSS UI framework - Webix
Build modern HTML5 web apps with Webix UI widgets and controls. Look at the most required UI structures and check out other JavaScript Dashboards web applications. Student/Teachers Dashboard JSThe app for student progress monitoring can greatly facilitate teachers' work. Information visualization allows them to analyze the achievements very quickly, even if the number of profiles is considerable.
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
デザインワークをGitに含めるべき? 含めないべき? - Qiita
「プログラマ業界」であればコンパイラの多くがオープンソース化されていますが、デザインツールはAdobeを筆頭に今もほとんどがプロプライエタリなツールです。そのことが、原理原則に沿うのを難しくしています。 複製不可能な部分に価値を置くという文化的な面 ツール開発にコストがかかるという金銭的な面 もあって、ツールがオープンに向かうことは当面なさそうです。Blenderという例外はありますが、GimpやInkscapeは実質プログラマだけのためのツールになっています。そういえば、Fireworksのオープンソース化嘆願はどうなったんだろう...? ツールが有料 デザインツールはときに高額です。また、セットアップに割く時間も「見えない」コストです。残念なことにインストールも自動化されていません。caskも使えません。$ npm installでは片付かないのです。また、アップグレードの問題もありま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
https://jp.techcrunch.com/2016/08/17/20160815using-artificial-intelligence-to-create-invisible-ui/
IDEA * IDEA
製品の比較を行える次世代のUI実装:phpspot開発日誌
日本中の「UI/UX」の参考になるスライド資料を気合いで全部集めました！（たぶん） | BtoBサービスキューレーション Boxil（ボクシル）まとめ！
ログイン - はてな
液体っぽいクリエイティなエフェクトでUIを楽しくするサンプル集:phpspot開発日誌