Nick Babichはエンジニアであり、ＵＸの愛好者です。テクノロジーに対して情熱をもっています。彼は10年間ソフトウェア業界にて、開発を専門として仕事をしてきました。彼は数々の興味の中で、宣伝や心理学、シネマなどを重視しています。 検索は、ユーザーとアプリ/Webサイト同士の会話のようなものです。ユーザー側は必要な情報を問い合わせ、アプリやWebサイト側は検索結果をもってそれに対応します。 ユーザーは検索をするとき、作業がスムーズに行われることを期待します。そして大抵、１、２回ほど検索した結果の質によって、アプリやWebサイトを即座に評価してしまいます。 検索とその裏側のUIをデザインするとき、考慮すべきたくさんの事柄があります。みなさんが読みやすいように、この記事では検索のベストプラクティスを検索ボックスのデザインと結果ページの配置の２つの領域に分けて紹介しています。 Webサイトご

大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

プロジェクトを遂行するためには、工数の見積もりやスケジュール管理が必要になります。正確な見積もりは難しく納期に間に合わなかったり、残業や休日出勤で埋め合わせたりした経験はありませんか？ 今回は、より正確に工数の見積もるための手法や、差し込み作業を考慮したスケジュール手法などについて解説されている記事をまとめました。 マネージャー、エンジニア、デザイナーなどすべての方に参考なる内容だと思います。 開発の見積もりとスケジュール管理 クックパッド株式会社の方が実践している見積もりとスケジュール管理方法について紹介されています。工数を見積もるステップや、スケジュールを立てるときの注意点、スケジュール管理の方法について学びたい方におすすめの記事です。 開発の見積もりとスケジュール管理 不安とストレスから解放される見積りとスケジュール方法 開発をしているとき、納期に間に合わなかったらどうしようと不安に

ミニマルなデザインがトレンドになってからしばらく経ちますが、次のトレンドはなんでしょう？ ここ数か月、デザインの最先端を行くアプリやサービスの中で、「ミニマルデザイン」を次の段階へと押し進めるものが出てきました。FacebookやAirbnb、Appleは、それぞれのプロダクトをよりシンプルに見せることに対して同様の方向を見据えており、それは、モバイルのデザインにおける「コンプレクション・リダクション」という新しいトレンドを反映したものです。 「コンプレクション・リダクション」とは 「コンプレクション・リダクション」なんて聞いたことがありませんか？　聴いたことがないのも無理ありません、何しろ私が勝手に名付けたものですから。最近私はフラットデザインやミニマルデザインとは違う方向性を持つものが出てきたことに気付きました。 編注：Complexionは「顔色」「血色」という意味で、Reducti

この記事では、インスピレーションを与えてくれる、Webデザインの参考になるサイトを紹介します。 サイト全体のデザインやレスポンシブデザインに特化したサイト、サイトパーツ、ロゴ、アイコン、バナーなどを収集して紹介しているサイトなど10サイト厳選しました。あなたのWeb制作の刺激になること間違いなしです。 1.  MUUUUU.ORG クオリティが高く、縦に長いサイトを収集しているギャラリーサイトです。サイト自体シンプルで使いやすく、またカテゴリー分けが詳細でとても探しやすいサイトです。 2.  現代デザイン 技術的、デザイン性がすぐれたサイトを収集したギャラリーサイトです。カテゴリーは業種と色、日時のみですが、業種を細かく分類しています。また、気に入ったサイトをブックマークに入れることができます。 3.  I/O 3000 国内外問わない、秀逸なデザインのサイトを収集しているギャラリーサイト

Web マーケター。 ソフトウェアのテクニカルサポートからキャリアチェンジし、Web/アプリ業界へ。株式会社ファンコミュニケーションズを退職後フリーランスとなる。独立した理由は髪の毛を伸ばしたかったから。 Webやアプリ等のデジタルなサービスに触れていると、UXと言えばUIを前提としたものと考えがちです。 今回は、ECサイトを例にとり、UI変更を伴わないUX改善について触れてみたいと思います。 2015年9月9日、Amazonジャパンが携帯電話番号があればメールアドレスなしでもアカウント作成できるよう仕様変更を行いました。これはあまり大々的にニュースに取り上げられていませんが、実際にはEC業界にとって大きな意味を持ちます。また、UXの観点からも、UI変更を伴わないながら大きな意義があると思えます。 メアドを持たない若者たち ECの歴史が始まってより長く、メールアドレスをベースとしたユーザー