なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

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

Unity臭さとは これ 非常にいい感じの画面ですね。こういう雰囲気の画面を見たとき、一目で「あーUnityだなー」と感じるような体験をしたことがある方は多いのではないでしょうか。今回はこの画面をどうにかしていきます。 数が多いうえに基本的なテクニックが多いので、この記事ではそれぞれの手段についてそこまで詳細に説明してません。キーワードをもとに適宜ググればいくらでも記事がヒットしますので、そっちに丸投げすることにします。 あらかじめことわっておきますが、別に「Unity臭い作品は悪」というわけではなく、私が「いい作品なのにUnity臭さが抜ければなー」と思う機会が多いので、ひと手間、手軽にクオリティアップができる手段として「Unity臭さを消す」方法をまとめておきたいな、という意図で書いています。ですのでプロトタイプやゲームの手触りを確かめるような目的のもとでは、今回上げるような方法は必要

はじめに 現代では多くの人々がスマートフォンやタブレットを所持し、ゲームを楽しんでいることと思います。 モバイル向けのゲーム市場は大きく、世界では今も多くの開発者たちが iOS / Android 向けの商用ゲームを作っています。 さて、モバイルゲームの開発には、多くの開発者を悩ませるちょっと困った事情があります。 それは ディスプレイが非常に多くの多様性を持っている ことです。 正方形に近い形のタブレットもあれば細長い端末もあり、カメラがディスプレイの中に割り込んでいたり、 OS が専有する領域があったりと様々です。物理的な大きさもバラバラですね。 そのくせモバイル端末はタッチパネルで、ディスプレイに触れる UI になっているのです。 ゲーム開発を生業とする多くのエンジニア / アーティスト / ゲームデザイナーは、 これまでに何度も頭を抱えてきたことでしょう。 本稿では、2019 年現

※記事本文やコメント欄は長文ばかりのため、パソコンやタブレットなどの大きいディスプレイで読まれることをオススメします。 スマホのような小さいディスプレイだと「長文全体から意味を汲み取る能力」が大幅に低下するためです（それでもスマホの閲覧を意識して改行を多く入れています）。 追記を３つ行いました。 – 追記1 2017/07/15 – 追記2 2017/07/19 – 追記3 2021/01/20 —以下本文— ふと思い立ち、「国内家電は使いやすいのか」を念頭に入れ、その視点を意識しながら家電を使い、この一年間を過ごしてみました。 なぜそれをするキッカケになったのかと言うと、実家に帰省した際に、「洗濯機」の使い方がわからず挫折したからです。 ちなみに僕は今までにMacもWindowsもLinuxも使ってきており、プログラミングもやってきているので、 平均以上の「マシン」への打たれ強さはある方

2016.04.15 転職 「テクニカルクリエイターって言葉、聞いたことある人は会場内にどれくらいいますか？」 開口一番こう切り出したのは、サイバーエージェントで『Ameba』ブランドのクリエイティブやスマートフォン向けサービスのUIデザインをリードしているチーフ クリエイティブディレクターの佐藤洋介氏。 同氏は4月14日、DeNAとグッドパッチが共同運営するデザイナー向けイベント『UI Crunch #8』に登壇し、サイバーエージェントが2016年1月に新設した「テクニカルクリエイター」職についての解説を行った。 「UIデザインに求められる実装スキルと考え方」をテーマに開催された『UI Crunch #8』 このポジションを作った理由を代表の藤田晋氏自らブログで説明するなど、テクニカルクリエイターは同社のサービス開発で重要な立場を担うことが期待されている。これまでは業務内容でも文化的な面

グーグルの旧ロゴは14,000バイトもあったのに、新ロゴはたった305バイトなのはどうして？2015.09.07 17:3021,779 SHIORI そんなに違うの？ グーグルの新ロゴが発表され、旧ロゴのファイルの大きさは14,000バイトだったのに対し、新ロゴはたった305バイトになったそうです。どうしてそこまで変わるのか？ UIデザイナーのIlya YakubovichさんがQ&AサイトQuoraでわかりやすく解説してくれています。 グーグルの古いロゴにはローマン体のフォントが採用されていて、セリフと呼ばれる飾り（線の端にちょこんと付いてるやつ）あるため、ベジエ曲線を使わないと作れないデザインでした。その結果、ロゴ全体でのアンカーポイントは100箇所。ファイルの大きさは6KB（6,380バイト）になり、圧縮しても2KB（2,145バイト）といったところです。 一方シンプルになった新し

高齢者へのiPad導入を阻んだiOSのUI/UXの話 先月（2013年11月）、徳島県南部局と美波町が共催する「ITふるさと村」の講座で、iPadを使ったタブレット講座を開催しました。その成功と失敗の体験について書こうと思います。 Facetimeビデオ通話のデモで会場を一気に盛り上げたものの、参加者に実際に体験してもらう段階で「大失敗」。AppleIDの取得とそのためのiCloudメールの登録をしてもらってから、と進めたのですが、30名ほどの参加者のうち時間内にゴール出来たのは、たったの１名。好きなアプリをダウンロードしてもらい、タブレットの楽しさを感じてもらう目標が、そのスタート地点にも立てず(;_;) 企画や運営、インストラクターとしては完全に落第点でした。それを棚に上げると、高齢者とITに関する課題が大量に見えたという点では、ある意味「大成功」だったとも言えるでしょう。 【講座内容

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

UIとUXの意味と価値をもう一度考えよう。大ヒットアプリ、LINEのプロダクトデザイン担当者が、制作現場での具体的な開発手法を語った勉強会をレポートする 2012年11月7日、六本木ヒルズにあるアカデミーヒルズ49階で「第4回テックヒルズ　UI、UXの衝撃　～ユーザーを魅了するプロダクトの裏側～」が開催された。UIとUXの根本的で分かりやすい解説がなされ、大人気アプリ「LINE」ヒットの裏に隠された緻密なUI／UXへのアプローチ方法や、実際の開発現場のノウハウが学べる勉強会だった。Webサイトやアプリに限らず、ユーザーにとって魅力的なプロダクトを作るための知識が披露された。 UXを意識したUI設計を UX Tokyo（UX関連の実践家ネットワーク）所属で、ミクシィの酒井洋平氏は、自身の朝の通勤風景を撮影した動画をスクリーンに流した後、UIとUXの定義を次のように語った。 「UXとはユーザー

一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結

ユーザビリティを考える上でかなり重要なのがボタンのデザイン。聞いた話だと、某どこかのローンお申し込みページではボタンのサイズを極端に大きくして目立つようにして、ボタンに「OK」とか「投稿」ではなくデカデカと「今すぐ申し込む」というようにラベリングしたところ、数百パーセント増しで申込みがあったとのこと。ほんの少しのデザインの差でもバカにはできません。 というわけで、いろいろな有名サイトのアイディアが詰まって練り込まれたボタンのデザインを見てみると、どれもこれも一見すると普通に見えるようでも、実はそうではないことがわかります。それらには共通して5つのルールが適用されています。 秘伝の法則は以下から。 ■秘伝その1：色 ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。 ■秘伝その2：場所 ユーザーがすぐに見つけることが