Alan Smith氏は、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 UXとUIの定義についての論争は、その２つの言葉が現れて以来ずっと続いています。UXはUser Experience（ユーザー体験）、UIはUser Interface（ユーザーインターフェイス）を表しています。 さっぱりわからないですか？　これを理解できる瞬間はおそらくこないでしょう。エンドユーザーへのインターフェイスがユーザー体験に対してどのように影響を与えるかわかるでしょうか？ また、UXとUIという言葉が同じ時期に作られたものでないという事実も、この２つをとりまく混乱の原因のひとつであることは間違いないでしょう。UXとUIは、同時期に考え出された言葉ではなく、当初は明確に定義され

アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 あなたが書いた文章をすべてのユーザーが楽しみながら読んでいると想像するのは簡単です。しかし、現実を見てください。ユーザーはそんなことはしません。ただ斜め読みをするだけです。 ユーザーはWebページを読まず、斜め読みをします。何か目を引くものがあったときにだけ、斜め読みをやめて文章を読むのです。 デザイナーは、デザインしたWebページ上で人々がどこを見るかコントロールできます。ユーザーの目線を誘導するには、目がどのように情報を処理するのかを理解する必要があります。この記事では、Z字型パターンを使用したWebデザイン内に視覚的階層を生み出す理論と実践について説明します。 Z字型パターンとは何か、どのように作用し、なぜそうなるのか 読んで字のごとく、Z字型パターンのレ

Marcinは製品デザインのプラットフォームである、UXPinのCEOおよび共同創設者です。2010年にUXPinを共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも７年間は、この主張を聞き続けてきました。もしこのような議論に対して、人気がすべてを証明するというなら、真実はこの主張の逆と言えるでしょう。なぜならワイヤーフレームは終わったらしいと議論され続けているという事実自体が、ワイヤーフレームは顕在で、デザインプロセスにおいて少なくとも一部のプロジェクトやデザイナーに適合する形で存続していることを証明しているからです。 ワイヤーフレームはどのように生き残ってきたのでしょうか？　実はワイヤーフレームは進化し続けています。 ワイヤーフ

Fabio Muniz氏はTestLodge社のプロダクトデザイナーであり、製品開発の立ち上げ段階における設計で活躍しています。Fabio Muniz氏の仕事はfabio.designでご覧ください。 ソフトウェアの設計プロセスではプロダクトの欠陥が見つからず、ユーザーが使う段階になって欠陥が明らかになりユーザー体験を損ねてしまうことがあります。 この記事では、そういった事態に陥らないようにチェックしておくべき事項をリストアップしました。ここで挙げるチェックポイントは一般的なものであり多くのプロダクトに適用可能ですが、例外もあることをご理解ください。 インタラクションデザイン 01 - 頻繁に発生する操作が簡単にできるか チェックをする理由：同じ情報を繰り返し入力することは面倒であり、ユーザーの生産性向上に寄与しません。面倒な操作が多ければ、ユーザーはより生産性の高い競合プロダクトへの乗り

SlackやHipchat上でチーム間のスケジューリングをチャットボット形式でスムーズに実現する、Meekanというプロダクトがあります。この記事では、スマートスケジューリングサービスのMeekanのプロダクトデザイナーが、チャットボット形式のUIをデザインするにあたって気をつけた点や施した工夫などを紹介していきます。 今回は対話型のUIをデザインすることの難しさを、いくつかの例を通して紹介しつつ、それに対してMeekanが見つけた解決方法を見ていきたいと思います。 入力内容の検証 典型的なGUI、つまりフォームなどでユーザーに更なる情報を求めるときは、処理が行われる前に正しい形式で入力が行われているかどうかをあらゆる手を使って検証すると思います。 これは有効なメールアドレスか？　これは電話番号か？　このユーザーネームはすでに別の人に使われていないか？　項目によっては数字やあらかじめリスト

アジャイル開発という言葉が騒がれるようになってしばらく経ちますが、ピンときていない人もまだいるかと思います。あるいは、概念は理解していても、実際どう実務に取り入れたら良いのかわからない方も多いかもしれません。 今回はアジャイル開発の簡単な紹介と、導入を検討している方のためのサイトやスライドを紹介していきたいと思います。 アジャイル開発とは アジャイル開発とは、迅速かつ柔軟な開発手法の総称を指します。ちなみに、アジャイル（=agile）とは英語で「すばやい」「俊敏な」という意味です。アジャイル開発の手法としては、スクラムやエクストリーム・プログラミング（XP）などがあります。 アジャイル開発と言われる手法の特徴としては、１〜２週間の短い期間で１つの機能を開発し、これを繰り返して全体のソフトウェアを作り上げていく点が挙げられます。 ウォーターフォール型とアジャイル型の違い アジャイル開発はしば

リーン・スタートアップが話題になってからしばらく経ちますが、「まだいまいち理解していない」という人や「本は読んだが実践したことはない」という人は多いのではないでしょうか？ そこで今回はリーン・スタートアップの基礎知識と、リーン・スタートアップを実践した事例を紹介していきたいと思います。 リーン・スタートアップとは？ リーン・スタートアップは、新規事業の立ち上げに関する方法論のひとつです。シリアルアントレプレナー、エリック・リース（Eric Ries）によって2011年に提唱されたもので、書籍『リーン・スタートアップ　ムダのない起業プロセスでイノベーションを生みだす』に、その手法の詳細はまとめられています。 その手法の特徴は、初期から緻密な事業計画書や収益シミュレーションを作るのではなく、仮説の検証を繰り返すことを重視するというものです。次からリーン・スタートアップの基礎と事例を紹介していき

エンジニアの方はすでにGitを使用している方も多いと思いますが、最近ではGitを活用しているデザイナーの方も増えてきました。今回はGit初心者の方にもわかりやすく解説されているスライドをまとめてみました。Gitは使っているけど、うまく活用できていないという方にもオススメです！ デザイナのためのGit入門