Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー

これは、僕のYouTube動画の台本です。台本、というと、これを朗読しているみたいですが、これをこのまま読み上げているわけではなく、話す内容を整理したり、それを頭に入れるために、まずこのくらい書かないといけないので、コツコツと文字を打って、何度も読み返して、それから話すようにしています。 普段はもう少しメモ書きに近いのですが、今回はしっかり書いたので、noteに置いてみます。 動画はこちらです。あっ、台本の時とタイトル違う……。 これは、僕の予備校時代のある気づきに関する話です。漫画やイラストではなく、鉛筆の石膏デッサンの話ですが、イラストでもこの考え方はそのまま使えます。 絵は基本的には手を動かさないと上手くなりません。でも、ただ枚数をこなしても、上手くなるとは限りません。予備校時代、何年も浪人していて、でもあるレベルで止まってしまう人もいたし、現役生でスイスイと上達していく人もいました

最近のスマホアプリで見かけるUI、レイアウト、コンポーネント、アニメーション、インタラクションなどがまとめられたギャラリ−を紹介します。 デザインのアイデアを探している時に、ブックマークしておくと便利ですね。 Mobbin 150種類以上のiOSアプリ、8,000パターンのUIがまとめられたギャラリー。一つのアプリで、さまざまなUIが収録されているので、非常に便利です。スクリーンはiPhone X対応で、気に入ったアイデアは保存することもできます（要サインアップ）。

様々なもののデジタル化が進む中で、デザイナーの役割も大きく変化し始めている。 特にインターネットを介したサービスにおいては「design, Design, DESIGNの違いを知っていますか?」でも紹介されている通り、世界中の不特定多数のユーザーを念頭にデザインしなければならない時代になってきている。 それは同時に、受け取り側の趣味嗜好や価値観を十分理解した上で、プロダクトやメッセージングを考える必要があるということでもある。デザインコミュニケーションとして、単純に言葉を翻訳しただけでは不十分なのである。 目で表情を伝える日本人、口で表情を伝える欧米人日本と欧米では絵文字の表現方法が大きく異なる。特に日本では「目」を主な表現として利用しているのに対し、欧米では主に「口」の形の違いで感情を伝えている。 この違いの原因の一つが日常生活における人々の生活習慣の違いだろう。 ご存知の通り、花粉症の

いま話題のツイートまとめが読めるTwitterまとめに特化したまとめサイト。人気のツイートやTwitterトレンド、写真やマンガといった話題の画像から、さまざまなニュースの反応まで、みんなであつめる国内最大級のメディアプラットフォームです。

「UI Crunch #13 娯楽のUI - by Nintendo -」に参加しました。世界的にも注目される企業かつあまり表に出てこないデザイントークが聞けると言うことで、倍率も相当なものとなっておりました。この企画は構想から2年くらいかかったそうで、とても濃いお話を聞くことができました。めちゃ感動しました。今回は、そちらのイベントレポートです。最初の方あまり写真を撮らなかったので、後半の写真が多めになります。 1人目は、UI/UX デザイン チーフの正木さん。「娯楽UIの思考の原点」についてお話いただきました。 Nintendo流の「伝え方」Nintendoが人に何かを「伝える」時にこだわっていること。それは、以下の3つです。 ・「教える」ことよりも「体験する」ことで、より早く、的確に伝えることができる。 ・初めての体験は一度きり。新鮮な印象を大切にする。 ・体験はやっぱり面白くしよう

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける

Search, watch, and cook every single Tasty recipe and video ever - all in one place! News, Politics, Culture, Life, Entertainment, and more. Stories that matter to you.

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

2017.08.7イラスト コンセプトアート, チュートリアル, リファレンス, 参考資料あなたが神か・・・！！マンガ・イラスト講師である長世氏のツイートが超わかりやすくて素晴らしい！！ マンガ・イラスト講師である長世氏のツイートが超わかりやすくて素晴らしかったので紹介させて頂きます！！ なんといってもわかりやすい！！それも超がつくほどわかりやすい！！ 専門学校でイラストの講師を努めている長世氏！！ 月刊少年エースで新人賞を受賞したりBL雑誌に掲載経験があったりとかなりの実力派絵師さん！！ Twitterで度々ホワイトボードにお絵描きの極意を描いた写真を公開してくれていますが有難すぎます！！ ガラスを割る！ pic.twitter.com/xq0G85nNkj — ながよ (@324_6) July 25, 2017 キャラデザ目指す人は、10代だけじゃ駄目なんやでｯ！！！涙 pic.tw

この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では

鈴木裕氏： ただ、そうね……僕は全盛期に世界のトップシェアを取っていた日本が、こんなふうに海外に負けてしまったことが、やっぱり悔しいんですよ。だって、セガが全盛期の頃、僕たちは圧倒的な世界一のゲーム大国だったんです。（中略）ちゃんと新しい武器を製造しないとダメです。だって、良い武器があったら、色々なツールを工夫したりして、少人数でも勝てるんですよ。 そんな鈴木裕氏がインタビュー中、非常に強い興味を持って語っていたのがAI技術だった。そして先にズバリ言ってしまうと、この記事は、日本のゲーム産業が21世紀に世界市場で存在感を失い、今や新興国の国々までもが背後に迫ってきたシビアな状況に、実は「AI技術の軽視」という問題が一つあるのでは――という視点から強く光を当てるものだ。例えば、しばしば日本のゲーム業界の「敗因」として、グラフィックの人材不足や大規模マネジメントの失敗などの問題が挙げられる。だ

スマートフォンなどのデジタルツールによって便利な世界になりましたが、依然として媒体としての「紙」の優秀さは変わることがありません。そんな紙の持つ良さにデジタルツールの強みを組み合わせることで、「紙がインターネットにつながる未来」を実現するカレンダー「Magic Calendar」が登場しました。 Magic Calendar https://www.android.com/object/vote/magic-calendar/ Magic Calendarがどんなツールなのかは、以下のムービーを見れば一発で理解できます。 Android Experiments OBJECT グランプリ : Magic Calendar - YouTube Magic Calendarの開発者の坪井浩尚さん。Googleカレンダー愛用者の坪井さんはスケジュールを家族とも共有しているとのこと。 Magic C

学生たちを見ていると、きちんと議論して、きちんと設計して、きちんと何かを作ろうとするみたいです。ときには副作用を考慮して、やっぱり作るのやめようかという話になり、再び議論に戻ることもあります。 ああ、もったいない、もったいない。私は適当な人間なので「なんてマジメなんだ、とりあえず何か作ればいいのに」と思います。デザイン思考ではそのことを「クイック＆ダーティプロトタイプ」と呼んだりしますが、それだとなんだかカッコよすぎるので、私は「雑に作れ」と言ってます。 でも、言葉だけでうまく伝わるはずもなく、「どうすれば雑に作れるのか？」と再び議論を始めたりするので、なかなか難しいところです。 それでも「締め切り」というのは効果的なもので、次回までに何かを発表しなければいけないとなると、「議論してばかりじゃ話が進まない！」となり、ある種の覚悟を決めて雑に作ってくれるようになります。 私が印象的だったのは

2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？

完璧な写真を撮影する方程式はありません。 しかし、これから紹介する20個のガイドラインを利用すれば、つまらない写真の構図を魅力的に改善することができるでしょう。 このチュートリアルでは、写真の仕上がりがグッと良くなる、20個の構図テクニックを参考サンプル例と一緒に見ていきましょう。もっとも基本的なガイドラインにはじまり、より複雑で高度なテクニックまでまとめています。 コンテンツ目次 0. 構図ってなんだろう。 1. 三分割法 2. 中央揃えと左右対称 3. 前景シーンと奥行き感 4. 枠のなかの枠 5. リーディング・ライン 6. 対角線と三角形 7. パターンと質感 8. 奇数の法則 9. フレームを覆いつくそう。 10. 余白スペースを利用しよう。 11. シンプルさとミニマリズム 12. 被写体のみ切り抜こう。 13. 視点を変えてみよう。 14. 配色の組み合わせを考えよう。 15

Webデザイナーに求められるスキルは、HTML・CSS・JQuery・WordPress・タイポグラフィ・配色・コピーライティングなど多岐に渡ります。より多くの知識・技術を身につけていれば、Webデザイナーとして活躍できるチャンスは増えるでしょう。そこで今回は、これらのスキルを独学で学ぶための方法をご紹介します。 ＜この記事に関連する記事＞ 初心者Webデザイナーの独学におすすめの本10選 グラフィックデザイナーからWebデザイナーに転職するには？ Webデザイナーになるには？未経験のための実践的フロー 目次 Webデザイナーの仕事内容と必要なスキル Webデザインを独学で勉強する方法 独学でWebデザインを学習するときにおすすめのサイト 独学をするときの注意点 まとめ Webデザイナーの仕事内容と必要なスキル 独学で勉強をする前に、Webデザイナーの仕事内容とそれに伴って必要となるスキル

コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕

顧客に何かを「与えない」ことで、価値とエンゲージメントを高めるという方法がある。ビジネスにおける引き算の重要性を、事例を通して考えてみよう。 下の格子模様を見てほしい。 白い丸、そして斜めに白い線が並んでいるように見えるが、実際には存在しない。しかし、この図で最もおもしろいのはまさにこの部分である。空白を無視しようとしても、脳が現実をねじ曲げてしまうのだ。 ビジュアル・アーティストなら誰でも知っていることだが、空白は描画部分とまったく同じように重要である。音楽でも、無音の間（ま）が音と同等に重要な働きをする。しかしビジネスでは、私たちは隙間を見つけるやいなや、さまざまな雑音で埋めようとする。新しい製品・サービスの提案、新機能の追加、電話会議の予定、等々――。 逆に空白を大切にすると、どうなるだろう。すなわち適切なものを、適切な方法で取り除くことで隙間をつくるということだ。すると、他者がその