『ペルソナ5』のカッコよすぎるUIの制作工程を紹介！ アトラスの危機から生まれ、やがて特徴となったUIができるまで【CEDEC＋KYUSHU 2017】 - ファミ通.com
2017年10月28日、福岡県の九州産業大学にて、コンピューターエンターテインメント開発者向けのカンファレンス“CEDEC＋KYUSHU 2017”が開催。本記事では、同カンファレンスにて行われたセッション“ペルソナシリーズにおけるUIクリエイティブの手法 ～ペルソナ5のUI事例～”のリポートをお届けする。 本セッションに登壇したのは、アトラスの和田和久氏と須藤正喜氏。和田氏はデザイナーとして入社後、さまざまな作品に携わり、現在は『ペルソナ』チームを統括しつつ、『ペルソナ3 ダンシング・ムーンナイト』、『ペルソナ5 ダンシング・スターナイト』のプロデューサーを担当している。須藤氏は、アトラス初のUI（ユーザーインターフェース）専属デザイナーであり、『ペルソナ5』ではアートディレクターとUIデザインリーダーを兼任。各種イベントのデザイン監修やプロモーション、ライツデザイン監修なども行っている
1ヶ月続けた“勝手にUI改善”の振り返り
他にもairbnbのトレースやTwitterのトレース等も行いました。 ある程度UIを設計する際のルールを掴んではきましたが、自分で能動的に考えて手を動かした訳ではないため物足りなさを感じていました。(トレースからの学びはたくさんあったので、独学から始める方は最初にトレースから始めることをオススメします) その時、カイさんから何かアプリを作ってみるか既存アプリのリデザインをやってみると良いよと言われました。 1からアプリを考えるのも良かったのですが、既存アプリのリデザインの方が手軽に始めることができそうだと思ったので、“勝手にUI改善”を始めることにしました。これが私が“勝手にUI改善”を始めた背景です。 ちなみにアプリのリデザインを継続させるモチベーションとして自分の思考過程をTweetすることにしました。 たまにいいねとかリプライくるので、嬉しくて毎日続けたくなりますw 継続できないよ
『NieR:Automata』のUIデザイン | NieR:Automata 開発ブログ
こんにちは。『NieR:Automata』で UI (ユーザーインターフェイス) とメカデザインを担当した木嶋です。開発ブログを書くのは『ベヨネッタ2』以来になります。(以前書いた記事) 普段あまり注目されないUIですが、ありがたいことにユーザーの方々からの要望があり、当記事を執筆することになりました。UIにもヨコオさんのこだわりがたくさん詰まっているので、その一部も併せて紹介していこうと思います。 ■はじめに：UIアーティストの仕事 UIアーティストは、体力ゲージや会話ウインドウ、各種メニュー画面などゲーム内表示物を作っています。 大まかな仕事の流れはこんな感じです。 1：UIのコンセプトデザイン策定 2：仕様に合わせて各メニュー画面や表示物のデザインを量産 3：UIのゲームデータを作成してプログラマーに実装してもらう 4：動くUIを触ってみてアニメーションなどの調整、クオリティアップ
【考察】なぜ『ファイナルファンタジー』シリーズのHPゲージは右下なのか？システムによって変化する最適なUIデザイン - GAME LIFE HACK
今更言うまでもない事ではあるが、ゲーム画面においてHPゲージを始めとした『UI（ユーザーインターフェース）』は重要な要素としてゲーム内に存在しており、HPゲージやMPゲージ、弾薬数、速度計、スコア、そしてレーダーや地図、クエストやコマンド、アイテム欄など様々なもので構成されている。 しかしこういったゲージ類は作品によって大きく異なった位置に割り当てられている。例えば、ある作品では左上に配置されていたHPゲージが、別の作品では左下に配置されていたり、中央上部に表示されているというケースも見たことがあるだろう。 それはなぜだろうか？ なぜ、HPゲージは左上で固定されていないのだろうか？ なぜ、弾薬類の表示は右側に集中しているのだろうか？ なぜ、速度計は右下に配置されているケースが多いのだろうか？ なぜ、コマンドメニューは下側に配置されているのだろうか？ そもそもなぜ、普段遊んでいる時は、このよ
POP Joins Marvel! | Marvel Blog
Back in 2012, a new app called POP burst onto the scene and allowed users to turn paper sketches into interactive prototypes. It quickly grew in popularity and by 2013 Apple had selected it as one of the Top Apps of the year. Today it has over 500,000 users. Earlier this year, the POP team joined Priceline, leaving the popular platform needing a new home. The founder of POP, Ben Lin reached out to
「洗濯絵表示」全41種類の意味を解説！覚えておきたい正しい洗い方
洗濯表示をチェックすべき理由 洋服のお手入れは、素材に合った適切な方法で行うことが肝心ですが、そのためには洗濯表示を理解する必要があります。何も知らずに乾燥機に入れてしまったり、アイロンをかけてしまうと、型崩れや縮みの原因になることも。お気に入りの洋服を長持ちさせるためにも、洗濯表示の意味は必ずチェックするようにしましょう。 覚えるべき5つのマーク 洗濯表示は、洗濯、アイロン、漂白、タンブル乾燥、自然乾燥、クリーニングの6つのマークに分けられます。それぞれの記号が何を指しているのかを覚えてしまえば、失敗することなくお手入れすることができますよね。ここからは、6種類のマークを細かい意味と合わせて解説していきます。 洗濯 洗濯の仕方は、洗濯桶のイラストで表示されています。桶の中の数字は上限の水温を示していて、30度・40度・50度・60度・70度・95度と細かく分類。桶の下の横線は衣料品に与
Kaizen Platform、アジアの現地デザイナーを結んでUI/UXの改善ソリューションを提供
Kaizen Platformは11月11日、アジア展開強化の一環として、各国の現地デザイナーをネットワーク化し、インバウンド・越境ECにおけるUI/UXの改善ソリューションを提供すると発表した。対応言語は、中国、台湾（繁体字・簡体字）、韓国（ハングル）、タイ、ベトナムの5言語6種。 今回発表したソリューションでは、中国、台湾、韓国、タイ、ベトナムにおいて、現地パートナーを中心にネットワーク化した現地デザイナーたちによる、ウェブサービスおよび広告バナークリエイティブの改善ソリューションを提供する。 近年増加しているインバウンドや越境ECのUI/UX改善ニーズに対し、「ページ翻訳」「現地デザイナーによる改善案募集」「A/Bテストの実施によるデザイン検証」といった継続的なUI/UX改善ソリューションをワンストップで提供。利用料金は、5カ国対応かつ3カ月からの利用で、税別約500万円から。 同社
今時のデザイン（UIとか設計）ってわかり難くない？
フラットデザインの流行以降思うようになってはいたんだけど、iOS10になってさらに強く感じてる。 自分やこの記事を見るような、そのデザイン以前から使ってる人やPCスマホ等に慣れてる人なら感覚的に使えるし大した問題はないんだけど、 還暦をとっくに過ぎたうちの父親（PCやiPadでニュースを見たりはできる程度）のような人にとってはどんどんわかり難くなっていると思う。 さっき父が仕事（自営業）で紙の書類と地図を取引先にメールで送りたいからやり方教えてくれと言われて教えようとしたんだよね。 んでスマホやタブレットのEvernoteや専用アプリとか使えば良いんだけど、とりあえず普通にiPadのカメラで撮ってそのまま添付するのが一番簡単かなと思って 写真撮らせてGmail起動させたまではいいけど、添付ボタンは薄い灰色のクリップアイコンだけだしカメラロールから写真を選択するのはなぜか最後英語だし、 送信
iPhone 7のTaptic Engineが今後のスマホインターフェースを変えるかもの話 - FICC Workbook
福岡です。iPhone 7買ってしまいました。もちろんJet Blackです。 今回iPhone SEからの乗り換えでまあ大して変わらんだろ…と思って触り始めたらまったくの別物！サイズ感、液晶の見やすさは当然のこととして、とにかく早い。iOS 10ではアニメーションのイージングが変わりましたが、開く、動くの動作が早い。気持ちいい。手に取ったときのJet Blackの質感含め、思った以上に気に入ってしまいました。 Taptic Engineの大進化iPhone 7の最大のフィーチャーといえばFelica対応、防塵防滴、レベルアップしたカメラ…どれも魅力的ですが今回取り上げたいのは強化されたTaptic Engine。既にiPhone 6sやApple Watchでは3D Touchの押し込み時にブルッとTaptic Engineが振動することでフィードバックを与えていましたが、iPhone
Prott Blog - Prott User Meetup vol.12を開催しました！
ProttはUser Meetupを定期的に開催して、サービスの開発・改善に欠かせないユーザーの皆様の声を直接聞く機会を大切にしています。 またユーザー同士でProttの活用方法を共有することもUser Meetupの目的としています。 今回の記事では、「画面遷移図機能リリース記念」として行われたPrott User Meetup vol.12「情報設計とプロトタイピング」のレポートをお届けします！ Prott Update News！｜Prottチーム プロダクトマネージャー まりお 現在Prottでは、プロトタイピングをより効率的に実現する画面遷移図機能、Prott for Macの開発やプロトタイプをレビューする人に便利なViewerアプリを開発しています。 最近のリリース①：画面遷移図機能 Prottの画面遷移図機能を使うと、プロトタイプの遷移やスクリーン画像がそのまま反映された画
UI/UXデザイナーのみなさん。 - not simple
こんにちは。 なぜかインターネット界隈のデザイナーの採用に関わるポジションにいることが多く 過去にデザイナーのポートフォリオを4桁は見ていて、3桁以上のデザイナーと面接しているんですが 比較的地雷だったりするのがUI/UXデザイナーと自称する方、という経験があります。 スマートフォンをはじめとするタッチデバイス全盛の昨今 ユーザーインターフェイス(UI)がユーザーエクスペリエンス(UX)に影響する度合いが大きいというのに理解はあるのですが 前者と後者でそもそも抽象度が違いすぎるし、スキルセットも違うので 安易にUI/UXデザイナーと称することはオススメしていません。 稀にこの間を行き来できる方をお見かけしますが、本当に稀でお会いできたのはまだ1桁です。 よくあるのが実はただの Photoshopおじさんだったり Sketchプラグイン探求おじさんだったり ワイヤーに色塗りするのが仕事おじさ
プロジェクト炎上を防ぐ魔法のアイテム、100徳ナイフを買ったお話２ | fladdict
こんにちは、日本で唯一の100徳ナイフコレクター（推定）兼、UIデザインとかしてる fladdictです。 先日、会社の機材として新しい100徳ナイフを購入しました。 via mantiquesmodern ゾーリンゲンのナイフマイスター、P.LANGが自ら研ぎあげた、最高級の一品です。重量950g、お値段なんと120万円。今年のお小遣いが全部すっ飛びました。 馬鹿と思われるこのナイフ、実はサービスの炎上やデスマーチを防ぐ神ツールだったりします。 このナイフをクライアントの偉い人に見せると、あら不思議！ 「弊社のアプリをこうしては絶対にならない！」「この状況を脱しなければならない！」という号令が、ほぼ100%トップダウンで発動します。 一目瞭然なほど馬鹿で、巨大で、非実用的で、そして無駄に高価であればあるほどに意味がある。これを見せた時、「多機能もすぎれば毒となる」という言質に説得力が生ま
協働のためのデザイン思考の再構築 : could
2016年9月3日HTML5 Conference 2016が開催されました。1,200 人を超える参加者。6トラック同時進行という巨大イベント。どちらかと言えばエンジニア向けのセッションが多いイベントですが、そういう場だからこそ「ぜひ話したい」と思えたところがあります。 今回「協働のためのデザイン思考の再構築」という題名で話しました。以前からエンジニアとデザイナーとの間をどう繋げるかという課題について話したいという欲求がありました。ただ、こういうトピックはデザイナーばかりの場で話すのは意味ないですし、逆もしかりです。HTML5 Conference 2016 は、デザイントラックもあったことから、両方へリーチするには好都合。幸いエンジニアの方も私のセッションに参加していただいたみたいで、非常に嬉しかったです。 デザインシステムの課題 私は HTML, CSS, JavaScript は書
【CEDEC2016】全てはプロデューサーが集中して楽しめるように！ 『デレステ』UIの要諦は基本ルールと最小のパーツ 軽量版やウインクの秘話も明らかに | gamebiz
【CEDEC2016】全てはプロデューサーが集中して楽しめるように！ 『デレステ』UIの要諦は基本ルールと最小のパーツ 軽量版やウインクの秘話も明らかに Cygamesは、「アイドルマスターシンデレラガールズ スターライトステージ 制作事例・アート編 － 総勢60名のアイドルを最大限魅力的に表現し、ライブに集中する手法（モデリングとUI/UXデザイン）」と題するセッションを8月26日の「CEDEC2016」で開催した。モデリングパートとUI/UXデザインのパートに分かれており、今回はUI/UXデザインパートの模様をレポートする。UI/UXデザインのパートでは、Cygamesデザイナー部UIデザインチームマネージャーの中村ふじ子氏（写真）が登壇した。 『アイドルマスターシンデレラガールズ スターライトステージ（以下、デレステ）』は、「Mobage」で配信されている『アイドルマスターシンデレラ
デザインデータの受け渡しが3倍捗る！Sympliはワークフロー革命だ
SketchやPhotoshopでデザインしたUI、エンジニアとどうやって共有していますか？ Sympliを使ったワークローなら、デザイナーもエンジニアも幸せになれるかもしれません。 2016年、デザインコラボレーションツールは大人気となっています。 一昔前は、カレンダーアプリとToDoリストアプリをうまく組み合わせたプロジェクトチームがほとんどで、その結果もたいていは良いものでした。しかし、デザイン・開発プロセスが複雑になり、特化したコラボレーションツールをめぐる論争はさらに激しくなっています。 では、現在利用可能な「完璧な」デザインコラボレーションプロセスとはどのようなものでしょうか。その定義は少し厄介かもしれませんが、最近デザインコラボレーションツール界の有望な選手を見つけたので、紹介しましょう。 デザインコラボレーションツールを選ぶ上で、好みの問題は大切な要素ですが、結局は誰にとっ
「2段階フィードバック」で無駄な作業を徹底排除！「minne」のデザインプロセスとは | SELECK
今回のソリューション：【GitHub/ギットハブ・Prott/プロット】 〜GitHubやProttを活用し、デザインへのフィードバックを早い段階から受けることで、手戻りを減らして開発プロセスを効率化している事例〜 プロダクトの効率的な開発のためには、あらゆる局面で「手戻りを減らすこと」が必須だ。デザインについても、それは例外ではない。 ハンドメイドマーケット「minne（ミンネ）」などを提供するGMOペパボ株式会社。 同サービスのスマートフォンアプリのデザインにあたっては、「GitHub（ギットハブ）」や、プロトタイピングツール「Prott（プロット）」を通してデザイン案を共有、紙のラフスケッチとプロトタイプの合計2回にわたって、チームからのフィードバックを募っている。 開発初期からできる限り多くのフィードバックを得ることで、作業の手戻りを防ぎ、効率的な開発プロセスを実現しているのだ。
使いやすいだけではユーザー体験が上げられないサービスでの、デザイン手法。
Transcript 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. 闌怴ة؎زٕ Title DeNA Co.,Ltd. Designer Masanori Miyamoto 2016.7.23 @Kanazawa ⢪ְװְֽׅדכ ِ٦ؠ٦⡤꿀ָ♳־זְ ؟٦ؽأדךծرؠ؎ٝ䩛岀կ 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. כׄח תַׁך .BUFSJBM�%FTJHOأة؎ٕד فٖئׇׁٝגְֹתׅկ� ֹהֿך䩛岀כػؙ Introduction 12:30 Copyright ©DeNA Co.,Ltd. All rights reserved. فٗؿ؍٦ٕ 㹧劤僅Ⱙ Profile Designer 2006 2012 2016
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Affinity Designer - デスクトップとiPadで利用できるプロフェッショナル向けグラフィックデザインソフトウェア
正しいものを 正しくつくる // Speaker Deck
