JavaScriptで値が数値かどうかチェックする：isNaN()
JavaScript である値が数値かどうかを判定する場合は、isNaN() 関数を使用します。ここでは、isNaN() 関数の使い方と、使う上での注意点について説明します。 isNaN() 関数の使い方 isNaN() 関数は、JavaScript に組み込まれている関数です。isNaN() は、引数が数値でない場合に true を返し、数値の場合は false を返します。これによって、特定の値が数値か否かを判定することができます。なお、NaN とは Not a Number（非数）を表します。 以下に使用例を示します。 isNaN('abc'); // true （数値ではない） isNaN(123); // false（数値） isNaN(012); // false（8進リテラル） isNaN(0x12); // false（16進リテラル） isNaN('123'); // f
モバイルアプリに最適なボタンサイズと間隔とは
UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？ きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な
【2020年版】プロジェクト進行管理に便利なガントチャートツール20選
プロジェクトの進行においてスケジュール管理というのはとても重要になります。スケジュールをしっかりと把握しておかなければ効率よく業務を進めることもできなくなってしまいます。このスケジュール管理をするために使うと便利なのが「ガントチャート」です。 ガントチャートとは ガントチャートは横軸に日付、縦軸にタスクを並べ、各タスクごとに予定を記入したり進捗を記入することで、プロジェクト全体のスケジュール管理ができる表のことを指します。１つのプロジェクトを進める上で多くの作業（タスク）がありますので、ひと目でスケジュールの進捗を把握し、各タスクのスケジュール調整を適宜行うことができるのが利点です。 エクセルなどでも作ることは可能ですが、一からガントチャートを作るのはなかなか骨が折れる作業になります。そこでおすすめなのがガントチャート専用のツールやサービスです。 以下に、国内外のガントチャート管理ツールを
ユーザー体験の質を左右するナビゲーションのパターン６選
アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要
モバイルデザインのために再確認すべきヒューリスティック原則
Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。 Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則を集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。 人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです
他のデザイナーとの差別化に役立つ「USP」の考え方
Addisonは食べ物やデザイン、アート、カルチャーの融合を模索するブログ、Food Identitiesの著者です。 まず初めに１つ質問させてください。生活の中で使う歯磨き粉、デオドラントやシャンプー、または自動車のオイルに好んで選ぶブランドはそれぞれいくつありますか？ それらのブランドのうち、特定のブランドが他と異なっていたり優れていると考えたことはありませんか？ 何度も繰り返し購入したくなるような「お気に入りの」ブランドが、魅力的に見える理由は何でしょうか？ 答えはそのようなブランドが持つ「USP」にあるかもしれません。 USPとは、ユニークセールスポイント（Unique Selling Point）のことで、特定の広告キャンペーンが成功する一方、なぜ他のものは失敗するのかといった理由を説明するために1940年代に開発されたマーケティングコンセプトです。 成功したブランドのキャンペー
住所入力フォームにテキストエリアを使うべき理由
Webフォームで住所を記入する際に戸惑ってしまうことはありませんか？ ある調査によると、30％のユーザーが「住所欄２」に入ったときに困惑して立ち止まることが分かりました。 そればかりでなく、この「住所欄２」は「住所欄１」の入力を不正確に分割する原因になるのです。このことはユーザーに混乱と苛立ちを招きます。 「住所欄２」に「アパート名、部屋名、その他」という表記をすることでは問題は解決されませんでした。ユーザーはまだ困惑して立ち止まり、その入力欄が彼らにとって関連性のあるものなのかと悩みました。 慣れている形式を使う ２つの住所入力欄を設けることは、システムがユーザーの現実世界の延長で予想できることに近くあるべきだという原則に反しています。この原則に則っていれば、ユーザーはすでに慣れ親しんだ慣習に基づいてインターフェースを理解できます。 「住所欄２」はシステムが好む形式であり、ユーザーが住所
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
ブランドをもっとも印象づけるロゴの配置はどこか？ | UX MILK
ユーザーがWebサイトを見るとき、彼らの視線は左を向いています。そのため右側に配置されたロゴにはユーザーはあまり視線を向けず、ブランドリコールが弱くなります。左側に配置されたロゴには多くの視線が集まり、ブランドリコールに繋がります。 中央配置のロゴはサイトトップへのナビゲージョンを邪魔する Nielsen Norman Groupは中央配置のロゴについても研究を行いました。調査によると、ロゴが左と中央のどちらに配置されるかでブランドリコールに違いはありませんでした。位置よりもロゴのコントラストや読みやすさのようなデザイン的な違いがブランドリコールに影響していました。 それだけではなく、中央配置のロゴはユーザーがサイトトップへ遷移するのを邪魔していました。左配置のロゴを比べると、中央配置のほうがユーザーが１回のクリックでサイトトップへ戻ることを失敗する割合が「6倍近く高い」ことがわかりました
エラーメッセージはフォームのどこに表示するべきか
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
デザインと開発を繋ぐデザインプラットフォーム「Indigo.Design」がリリース
デザイナーであれば、ビジュアルデザインを元に開発をしてもらったが、デザイン通りになっていないという経験をほとんどの方がしているのではないでしょうか。 今回、そうしたデザインと開発における問題を解決するアプリケーションデザインプラットフォーム「Indigo.Design」がリリースされると聞き、開発元のInfragistics, Inc.のJason Beres氏にインタビューをしてきました。 ＊本記事は、英語インタビューの内容を翻訳したものです。 登場人物 Jason Beres / Infragistics, Inc. Senior Vice President デザイナーと開発者を橋渡しするIndigo.Design ── 今回、新しくIndigo.Designというサービスをリリースするとのことですが、まずは簡単にサービス紹介をお願いします。 Indigo.Designは、デスクトッ
jQueryで要素の高さ・幅を取得する：width(), height()など
jQueryには、要素の高さ・幅を取得するメソッドが複数用意されています。これらの違いなどを含めて説明します。 jQueryで高さ・幅を取得する４タイプ８つのメソッド HTMLの要素の高さを取得するメソッドには、height(), innerHeight(), outerHeight()の３つがあり、同じく幅を取得するメソッドにはwidth(), innerWidth(), outerWidth()の３つがあります。 これらのメソッドの違いは、paddingやmargin、borderの値を含めるかにあります。 図で説明する各メソッドの違い 高さを取得するメソッドについて、図で説明すると以下のようになります。 次から、より詳しく説明していきます。 取得する値：コンテンツ CSSなどで指定したwidthとheightの値を取得します。また、他のメソッドとは異なりwidthとheightを指定
シンプルなWebデザインを実現するための複雑な道のり
Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 シンプルで素敵なWebデザインの体験は、シームレスです。ユーザーは自信を持って快適に１つのコンテンツから次のコンテンツに簡単に移動することができます。Webデザインにおいてシンプルで完全なユーザー体験を実現することは、デザイナーや開発者が直面するもっとも困難な課題の１つです。 ここ数年の間にモノやアイデア、コンテンツが過剰に溢れたことで、世の中のトレンドはシンプルな方へとシフトしてきています。法律の専門用語は素人向けの言葉に言い換えられ、作家は飾り立てた表現よりも簡潔なコンセプトを提供するように努め、住宅所有者は牧場のように広い家を下取りに出して小さく効率的な家を手に入れています。料理人さえも
コンテンツを中心としたAtlassianのデザインシステム
デザインシステムを採用するチームは、システム内のコンテンツが担う役割を決める必要があります。私たちはAtlassianのSean Curtis氏（シニアエンジニア）とTony Starr氏（リードテクニカルライター、IXプラットフォームチームのリーダー）から、組織全体にコンテンツの考え方を浸透させるユニークな方法について話しを聞きました。 Atlassianでのコンテンツの役割 世界中のプロダクトチームで共通して言えることは、コンテンツが重視されていないということです。しかし、AtlassianのIX（Information Experience = 情報体験）チームでは、会社全体を巻き込んだ機能・チーム横断的なアプローチを採用しています。 「私たちのデザインシステムであるAtlassian Design Guidelines（ADG）では、コンテンツはすべての中心となります。私たちが重視
【2018年版】iOSアプリのための分析ツール11選
Appseeはシンプル＆パワフルな、アプリの質的分析用プラットフォームです。あなたのモバイルアプリのユーザー体験を測定、理解、改善するのに役立ちます。 モバイルアプリの分析ツールは年々増えており、2018年も増え続けているようです。Businesswireによると、モバイルアナリティクスの世界市場規模は、2016年から2023年の間、年平均24%で成長すると予想されています。多くの選択肢があることは素晴らしいですが、自分のiOSアプリにどのツールを使うか決めるのは難しくなりつつあります。 これはスーパーマーケットのWhole Food'sを歩いて、どのKombucha（編注：紅茶キノコという健康食品）が一番良いか探すようなものです。どれもKombuchaですが、どれが一番あなたのニーズにマッチしているのでしょうか？ おそらく、あなたはアサイーがブレンドされているものを選んだり、ビタミンCが
プロダクトリリース前に確認したい23のUXチェックリスト
Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
プロトタイプも埋め込める、デザイナーの情報共有を加速させるDocBase
デザイナーの仕事は、成果物に対するデザインだけではありません。デザイン制作をしたら、「なぜそのデザインなのか」をステークホルダーに説明し、コンセンサスを取る必要があります。 デザイナーがカバーする領域も広がる中、私たちデザイナーはどのようにデザインを共有するべきでしょうか？ 今回は、UX MILKチームがどのように情報共有を行っているかを紹介します。 デザインドキュメントをどのように共有すべきか デザインドキュメントには、ワイヤーフレームやプロトタイプ、ビジュアルデザインなどさまざまなものがあります。 プロジェクトが進むにつれ、デザインドキュメントは増え、また変更が加えられていきます。すると、これらをどのように保存・整理し、共有するかという問題が出てきます。 UX MILKチームでは、こういった問題を解決するために、DocBaseを使ったデザインの共有を行っています。 なぜDocBaseで
.DS_Storeの仕組みと削除＆作成しないよう設定する方法 | UX MILK
MacのFinderで不可視のフォルダやファイルを表示した状態にすると「.DS_Store」というファイルがあることが分かります。 この.DS_Storeはフォルダを開くと自動で作成されてしまい、フォルダ内の正確なファイル数が分からなくなるなど邪魔になってしまうことが多々あるので一部ユーザーからはとにかく不評です。 また、非表示にしていてもWindowsと共有しているドライブなどでは見えるようになってしまうので気になってしまう方は多いようです。そんな謎のファイル.DS_Storeについて詳しくご説明します。 .DS_Storeとは？ アイコンの位置や表示設定などのフォルダ表示設定に関するメタデータを記録するための隠しファイルです。Finder上でもリモートシステム上でもアクセスするすべてのフォルダに.DS_Storeファイルが作成されています。 .DS_Storeは削除して良い？ Find
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでDOM要素を削除する：remove(), empty(), unwrap(), detach()