UIに隠されたデザインの意図 | Made with Unity
独特の世界観やゲームシステムが特徴的な「伝説の旅団」。実は、そのUIにも独特の工夫が散りばめられています。伝説の旅団について語られる時に、UIが言及されることはほとんどありません。ある意味、空気のような存在として馴染んでいるのです。しかし、ここに至るまでに、数多くのデザイン作業が行われ、紆余曲折を経て現在の形になりました。普段のプレイ中は意識することはなかったかもしれませんが、今回はそのUIデザインについてご紹介します。 早速ですが、いくつかの画面を並べてみました。 実は、これらの画面の要素は「あるルール」に基づいてレイアウトされているのです。何だか分かりますか？ そのルールとは、「主要なボタンを右側に配置する」というものです。 分かりやすいように、左半分を暗くしてみました。ゲームのメインループに関わるボタン群が、全て右側だけで押せることが分かると思います。これは、意図的に配置されたもので
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
Skeleton - レスポンシブサイトを構築するためのベースデザイン MOONGIFT
レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。 Skeletonの使い方 こちらがデモページのトップです。 デザインのデモ。スマートフォンアプリのランディング風。 3つのグリッドを分けて表示。 画像のレスポンシブにも対応しています。 幅を狭めるとこうなります。 先ほどの3段カラムは縦に並びます。 画像も縦です。 グリッドはよくある12カラムで構成されています。 タイポグラフィ。 ボタン。 フォーム。 リスト。 コード。 テーブル。 Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということは
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
The ustwo™ Pixel Perfect Precision Handbook 2 日本語版
『Pixel Perfect Precision™ Handbook 2』（以下PPP™）は、ウェブサイトなどのデジタル環境用のデザインをする上での基本原則と、実践ですぐに使える具体的なPhotoshopのテクニックが収録されているドキュメントです。その名の通り、パーフェクトな精度のピクセルでデザインをするためのノウハウが、わかりやすいビジュアルと簡潔な文章でまとまっています。 元々PPP™は、グローバルに拠点を置くデジタルデザインスタジオustwo™ のGyppsy氏が制作したドキュメントです。iBooks版とPDF版のPPP™ドキュメントに加え、スクリプトやPhotoshopパターン集を付録の「エクストラ」として、ustwo™ ウェブサイトにて無償で配布しています。 PPP™は、デジタルデザインを学びたい人に、デザインの基礎知識と概念的な全体像を提供できるドキュメントであると同時に、既
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
動画で学ぶ、Photoshopでフラットなスタイルのウェブページを作成するチュートリアル（素材ダウンロード可）
フラットなスタイルのデザイン素材を数多くリリースしているDesignmodoから、彼らの素材を使ってどのようにフラットなスタイルのウェブページをデザインするかを動画で学ぶチュートリアルを紹介します。 動画のキャプチャ 動画では、彼らがフラットなUI素材でどのようにグリッドを使ってPhotoshopでデザインしているか見ることができます。 約18分と長めなので、お茶でも飲みながらお楽しみください。
Home - Pencil Project
An open-source GUI prototyping tool that's available for ALL platforms. Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. The latest stable version of Pencil is 3.1.1 which contains stability fixes and many new features. More details can be found in the release notes. Proje
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（後編） | Goodpatch Blog
UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめていきます。 ルック＆フィールを考える photo credit: Crossett Library Bennington College via photopin cc ではHTMLプロトタイプを作っている間にデザイナーがするべきことは何なのか。それは雰囲気をデザインすること。レイアウト以外のデザイン、色やタイポグラフィ、写真や動画について考えていくのです。 具体的に言うと、スタイルガイドを作るこ
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flat UI - Free Bootstrap Framework and Theme
ソシオメディア | UIデザインパターン
新着記事
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
Opendept - Beautiful WordPress Themes
CSS Menus, css menu - high quality website navigation menus | 13styles CSS Menus
「シュッ」とか「チン」とかのフリー音源集
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ