コンセプトモデルを考えてアプリのUIをデザインする
表１. シンプルなオフィス用カレンダーアプリのオブジェクト指向分析 オブジェクト：カレンダー、イベント、To Do項目、人などのオブジェクトが含まれます。バッファ、ダイアログボックス、データベース、文字列、といったタスクと関係ないオブジェクトは含まれません。 属性：カレンダーには所有者とデフォルトフォーカス（日、週、月）があります。イベントには、名前、説明、日付、時刻、期間、場所などが入ります。To Do項目には、名前、説明、期限、優先順位などが入ります。人には、名前、職業、オフィス、電話番号などが入ります。バイトサイズも確かめられますが、タスクではなく実装に着目した要素なため含まれません。 操作：カレンダーには、調べる、印刷、作成、表示変更、イベント追加、イベント削除といった操作が含まれます。イベントは、調べる、印刷、編集などが入ります。To Do項目はイベントとほぼ同じです。データベー
UI トレースは何をトレースしているのか｜ai
エレクトリックベースをはじめて買ったとき、まず練習したのは Mr.Big の To Be With You だった。Billy Sheehan のベースの中ではそこまで難易度が高くないバラードだし、寮で同じ部屋の先輩が、よく口ずさんでいたから。 楽器を手にした人が最初にやるのは、誰かの作った曲を奏でることだろう。たくさんの曲をコピーするうちに、だんだんと自分なりの弾き方が身についていく。 その練習方法について批判する人はあまりいない。しかし UI のデザインやイラストになると、とたんに渋い顔をされたりする。 自分が良いと思ったデザインをトレースし、なぜ良いと思ったのか分析することは、有意義なことだと私は思う。もちろん、ただ写すだけではツールの習得にしかならない。 しかし例えば、有名な Jesse James Garrett の 5 Planes Model を地図に、トレースした表面から深
娯楽のUI~人々を笑顔にする任天堂~｜井上乃彩 / sasakure
みなさん、こんにちは！ 株式会社クラウドワークスのUIデザイナー井上です。 Twitterで知ってるひとも多いかな・・・？ 今日はUI Crunch #13「任天堂のUIデザイナーが語る娯楽のUI」というイベントに参加したので、グラフィックレコーディング(以下グラレコ)描きました！グラレコだけは伝わりにくい熱量もあるので、イベントで大事だと思った部分をまとめ、最後に自分の感想を書いていきたいとおもいます。 (このブログはすこしポエモミ〜な表現を含みます。) より感覚的に、直感的に、笑顔の共有を。①あそび心を伝えるUIデザイン(正木さん) みなさんが普段、人に何かを伝えたい時に気をつけていることはなんですか？人に何かを伝えるときには、"言葉を使うより、体験してもらう方がはやい。" ● 伝え方の心がけ - 教えることよりたいけんしてもらうこと - はじめての体験は貴重 - 体験はやっぱりおもし
[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス
既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。 デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。 ボタン、フォー
![[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d34cdd6f924a706cf29bd75ff95cedf76093a2f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110601.png)
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
UIデザインのアイデアを探す時にチェックしたいサイトのまとめ
Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。
Photon - Electron開発者要注目のOS X風UIツールキット | ソフトアンテナ
元々GitHubのAtomエディタのために開発されたデスクトップアプリ作成用フレームワーク「Electron」。HTML/CSSといったWeb系技術を使って、クロスプラットフォームのデスクトップアプリを開発可能なため、多くの開発者の注目を集めています。 本日紹介する「Photon」は、このElectron用の便利なコンポーネントを多数収録したUIツールキットです(GitHub、Hacker News)。 ツールバー、タブ、ナビゲーション、リスト、ボタン、フォーム、テーブルといった、GUIアプリ作成に必要なさまざまなコンポーネントを、アプリケーションに素早く組み込むことができます。コンポーネントの見た目もOS X風でクールです。 以下ご紹介。 バー ヘッダーとフッターを組み込むことができます。 バーとアクション バーにボタンを設置してアクションを定義することもできまうｓ． バーとタブ タブを
LukeW | Dropdowns Should be the UI of Last Resort
Dropdowns Should be the UI of Last Resort by Luke Wroblewski July 17, 2015 All too often mobile forms make use of dropdown menus for input when simpler or more appropriate controls would work better. Here's several alternatives to dropdowns to consider in your designs and why. Expectations impact conversion No one likes filling in forms. And the longer or more complicated a form seems, the less li
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
The Top 50 Free Flat Design UI Kits & Templates
With the explosion of flat-designed websites, web designers now follow the trend in a snap, adapting a cleaner and much simpler design which can be found in flat UI kits. We seldom see skeuomorphic designs nowadays. In fact, all of the depth has been slowly becoming flat. This is the reason why more and more designers have created flat design UI kits for web designers who want to follow the trend.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのアイデアが豊富！最近のWebデザインで採用されているレイアウトやUI要素が揃った素材のまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
iOS Human Interface Guidelines：Designing for iOS （日本語）
ログイン - はてな
UIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
ユーザーエクスペリエンスの分解
