コ・デザインのためのシンキングシート
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ!」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん?」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう! 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう!クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
英国のゲームスタジオDouble Elevenに所属するシニアUIデザイナーEdd Coates氏は12月5日、ゲームのUIデザインをまとめるサイト「Game UI Database」を公開した。現時点で325作品・1万1569枚のスクリーンショットがデータベース化されており、画面用途・ジャンル・アートスタイル・操作デバイス・レイアウトなど、豊富なフィルター機能によって、ゲーム/スクリーンショットを検索できる。扱っているタイトルは『Apex Legends』『エースコンバット7 スカイズ・アンノウン』『ブラッドボーン』『Call of Duty: Warzone』『DOOM』『ゴースト・オブ・ツシマ』など幅広い。 Proud to present the Game UI Database! A whopping 11569 screenshots, 325 games, and filte
UXや認知科学のブックリストはおかげさまでかなり読まれていますが、そういえば「UIデザイン」のリストは作ってなかったなと思い至って本を探し始めました。手元の本を並べてみると該当する本はあまり多くなくて、関連する周辺の分野のものにも対象を広げることにしました。UIデザインと周辺分野との境界はハッキリと分かれるわけではないので、自分が作った他のブックリストとの重複があります。また、分野の明確な線引きはしていませんのでご了承ください。 UI(ユーザー・インタフェース)が関わる分野はかなり広いのですが、このリストでは主に、比較的新しい(と言ってもiPhone発表から10年以上経ちますが)「スマートフォン・アプリのUIデザイン」を念頭において選んでいます。パソコンのソフトウェアや情報システム、ウェブ(情報設計やウェブ・ユーザビリティーを含む)のインタフェース・デザインについては、すでに世の中に知見や
6月中旬からはじめた「ゲームUI素材の作り方」画像が増えてきたので、振り返りの意味も込めてまとめました。 ちなみに、「ゲーム関連のデザインで何に興味があるか」というアンケートをとりました。結果は、下記の通り。 ボタンやゲージなどの「UIパーツの作り方」が最も多かったです。この辺りも考慮に入れて、作り方の1枚画像をアップしていこうと思っています。 最近、1枚画像芸になりつつありますが・・・ UI素材(ボタン、ゲージ他) 戻るボタンの作り方 これは、ゲームアプリ「連結だいすき」のゲームUIデザインをしたときに作成したボタンです。 属性アイコン(水)の作り方 ソシャゲでおなじみの属性アイコンです。戦闘時に敵と自分の属性で威力が変わるというゲームシステムはよく見かけますよね。 フラットボタン(光彩)の作り方 ゲームでも、フラット系のUIデザインが流行っています。今回は光彩を強めにつけました。こ
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ(15x15)でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
6 months premium support included 100% W3C valid HTML5 files Future updates Fully responsive pages 30 day refund policy Built by Themesberg 5 Hand-crafted Example Pages After downloading Neumorphism UI Bootstrap you will get 5 high-quality example pages to save you time writing boilerplate code and set up the user interface of your website or web application in no time. Hover over any page below a
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの
はじめに blogs.unity3d.com 日本時間 2019/04/16 (Tue) に Unity 2019.1 が正式リリースされました! ってことで、いつもの 個人的に気になるポイント をまとめます。 2019/04/16 (Tue) 23:37 Package Manager に関して追記 気になるポイント LWRP 正式版 Unity 2018.x の間はずっと Preview でしたが、ようやく Preview が外れて安心して利用できるようになりました。 既存のプロジェクトのマイグレートは大変ですが、Shader Graph のコトなどを考えれば対応を前向きに考えたいところです。 モバイル向けのパッチビルド どこまで行けるかは分かりませんが、パッチビルド的なことができるようになるのかな? IL2CPP ビルドがクソ重い問題とかの光明になれば嬉しい。 Mobile Adap
最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd(72種類のレイアウトとチャート) .ai(72種類のレイアウトとチャート) .sketch(72種類のレイアウトとチャート) .png(72種類の各レイアウト) 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。
プロジェクトの初期段階で、アイデアが完成に固まっていないとき、モバイルやWebプロジェクト用ワイヤーフレームを作成することで、機能とユーザーの流れをうまく計画することができます。ホワイトボードや鉛筆と紙でワイヤーフレームを作成するだけでも、デザイン制作において重要な役割を果たしてくれます。 今回は、探している特定の無料ワイヤーフレームを簡単に見つけることができるよう、マテリアルデザインやiOS向け、多目的モバイルアプリ、ウェウデザイン、UXデザインにカテゴリ分けしてご紹介します。 仕様やガイドライン、デザイントレンドは絶えず改善されており、以下の最新ワイヤーフレーム用テンプレートを活用してみましょう。 1. iOS ワイヤーフレーム素材 2. マテリアルデザイン用ワイヤーフレームキット 3. 多目的モバイル向けワイヤーフレームキット 4. Webデザイン向けワイヤーフレームテンプレート 5
通っていたサンフランシスコのデザイナー養成所Tradecraftの一番最初の課題で、アプリをピックアップして、見知らぬ人に声をかけてユーザビリティテストをして改善のプロトタイプを作って検証するーというものがあったのですが、そのプロセスをこの度記事にまとめてMediumに投稿しました。 するとGoogleのデザイナーが、なんとFoursquareの創業者のDennisにメンションしているではないですか。 Awesome, just shared with the team!— Dennis Crowley (@dens) 2018年3月9日 チームの人にシェアしてくれたみたいで、Foursquareのエンジニアの人からメッセージが届いたり、その日のうちに人事の人から「今ちょうどシニアプロダクトデザイナーのポジションを募集しているんだけど、興味があったら連絡待ってるよ」みたいなメールが届きまし
管理画面のフロントエンドコードを書く時代は終わりました。 Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。 そしてこれはOSSです。誰でも自由にお使いいただけます。 概要 Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。 APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。 経緯 私の会社では、大小さまざまな自社サービスが開発・運用されています。 管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。 エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。 運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。 さらに外から見たいときにスマホから見れないし、
普段、インターネット上ではただのゲーム好きとして活動(?)しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ(@asuyakono)です。 退勤後はイベントに登壇!土日はコンセプトデザインで習作!みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の3本揃いで、物心ついた時から1人で黙々とビデオゲーム
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く