デザインシステム導入しました - 一休.com Developers Blog
プロダクト開発部デザイナーの河村恵です。昨今、デザインシステムを用いた「UI / UXの品質担保」「トンマナの統一」「再利用性の向上による開発効率のUP」が注目されつつある中、一休.comでも本格的なデザインシステムの構築を目指し、プロジェクトが発足しました。 本記事では、プロジェクト発足から一休.comならではの課題・実際に作っているUIガイドラインについてなど赤裸々にお話ししたいと思います。 目次 １） プロジェクト発足に至る経緯 ２） プロジェクトの進め方 ３） 実際に作っているUIガイドライン ４） まとめ 1.プロジェクト発足に至る経緯 CTOからのフィードバック そもそも「デザインシステム導入しよう！」となったきっかけは、CTO（以下直也さん）から一休.com と Yahoo! トラベルの2システムを一つに統合することで実現した、Yahoo!トラベルのリニューアル（詳しくはこち
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
閉包テーブル（Closure Table）を試してみた - enomotodev’s blog
はじめに SQLアンチパターンという本を読んでいたら、再帰的なデータに対して『閉包テーブル（Closure Table）』という考え方があっったので、MySQL 5.6 で試してみました。 再帰的なデータとは、例えば上司を1人までもつことができ、部下は複数持つことができる、下記の組織図のようなツリー構造のデータのことを指します。 テーブル作成 それでは早速テーブルを作成してみましょう。 CREATE TABLE `Employees` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `TreePaths` ( `ancestor` bigint(20) N
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
元Googleの中の人がハイテク企業がどうやって「ユーザーの心を乗っ取るのか」をタネ明かし
Googleに買収されたサービスAptureでCEOを務めていたトリスタン・ハリス氏が、ユーザーのサービス依存度を高めるためにテクノロジー企業がどのような手法を取り入れているのかを解説しています。マジックの経験があるハリス氏は、その手法を人間の心理を上手く利用している点でマジックに通じるところがあると評価しています。 How Technology Hijacks People’s Minds — from a Magician and Google’s Design Ethicist — Medium https://medium.com/@tristanharris/how-technology-hijacks-peoples-minds-from-a-magician-and-google-s-design-ethicist-56d62ef5edf3#.aec83wojz IT企業が出
Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision
Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
Good Design Award
グッドデザイン賞ってなに？グッドデザイン賞は、日本で唯一の総合的なデザイン評価・推奨のしくみです。 ６０年以上にわたり「Ｇマーク」とともに広く親しまれながら、 デザインによって、暮らしや社会をよりよくしていくための活動をしています。もっとくわしく
Wireframe Stencils for PowerPoint - Resources - Paul D. Hibbitts, Vancouver, Canada
Resources > Wireframe Stencils for Microsoft PowerPoint Overview: This is a collection of common user interface elements for use when creating wireframes of desktop or Web applications in Microsoft PowerPoint. Most elements are created using tables to allow for easier editing of more complex objects (e.g. tab panels). Download Wireframe Stencils for PowerPoint 2007/2010 (PPTX) Download Wirefram
アプリのUI設計は「紙でやる」のが早い！ - Qiita
はじめに こんにちはー！！ UI設計やってますか？ 今回は「ペーパープロトタイピング」の話。 アプリでは主流になってる現場も少なくないですよね！ 今までのやり方とペーパープロトタイピングの違いや、 プロトタイピングツール「POP」と「Prott」の比較の話なんかをしようと思います！ 今までのアプリUI設計 Webデザインと同じ方法でアプリ設計を行っている場合、手順は ●ワイヤフレーム→モックアップ→実装 厳密に言うと ●①ヒアリング→②ワイヤフレーム→③レビュー→④モックアップ→⑤レビュー→⑥実装→⑦レビュー デザイナーがいないと ●①ヒアリング→②ExcelでUI設計→③レビュー→④実装→⑤レビュー って場合も結構多いと思います。 これ結構時間かかりますよね～。 しかも！ 大抵の場合、実装後のレビューの段階（つまり最終段階）で 「やっぱここ動きおかしいよね！直せる？」 「・・・。（えー！
Entity-Attribute-Value: SQL アンチパターン - ペンギンラボ Wiki
Bill Karwin “SQL Antipatterns: Avoiding the Pitfalls of Database Programming” の読書メモ。 Jaywalking 目的 ある属性について、複数の値を持たせる。 アンチパターン : カンマ区切りリスト カンマ区切りで複数の値を 1 つの列に納める。 例では、特定の製品についての担当者を複数設定するのにカンマ区切りで、担当者のアカウントIDを記述している。 create table products ( product_id integer, product_name varchar(1000), acount_id varchar(100), -- comma separated list -- ... ); insert into products (product_id, product_name, accou
今まで見たもっともクソなテーブル設計 - 何か着ていればいいよ
あれは、僕がデータベースを扱ううち最初から３件目のプロジェクトだった。 C++のソースが難解で火を吹いているという話で、自分は低スキルの若造。火にくべるには丁度良い程度のやる気と責任感をもっていた。折悪く別のプロジェクトが終了した直後だったもので投入されたのでした。 現場で『DBからデータを吸い出すツールかSQLを作ってくれ』といわれ話をきくと他社が作ったDB定義がすこぶる使いづらいという。 ER図やDB定義を見せてくださいと言ったのだけど、そんなものは無いという返事。 今ならもうここら辺で逃げ出すところですが、当時は『ふーん。』てなもんでそういうこともあるのかくらいの軽い気持ちで考えていました。 で、プロジェクトの資料をあさりまくって何とかDB定義のようなものも見つけDBのデータを調査し始めたのですが何かがおかしい。 機能の数に比して異様にテーブル数が少ないのです。 ふと周りを見ると、皆
「設定」を設計するための資料 - Hibariya
プログラムは、なるべく何もしなくても良い感じに動いてくれるのが理想的だけど、実際には何らかのかたちでユーザの設定を必要とすることがある。 Rails を使うときは config/application.rb でタイムゾーンを指定したり、DB へ接続するための情報を config/database.yml に指定する。 Bundler の挙動を変えたければ bundle config で設定を変更する。 Gem をインストールするときに毎回指定したいオプションがあれば、~/.gemrc に追記する。 もし自分の関わるプロダクトに「設定」のAPIが必要になったとき、何を判断の基準にして設計すればいいだろう。 ちょっと近所を見渡すだけでも、「設定」のやり方には色々ありそうだ。 設定という視点から、Rubyist にとって身近なプロダクトたちを資料として眺めてみた。 (NOTE: ちょっと悩みなが
神職人に学ぶWordの使い方：iOS 7のデザインを全て再現する（動画）
今頃、Adobeも戦々恐々としているに違いありません。 Microsoft Wordといえば、言わずとしれた文書作成ソフト…のはずですが、頭のネジがぶっ飛んだ神職人にかかれば、あのiOS 7のホーム画面すら簡単に再現できるようです。しかもiPhoneの筐体まで作ってアップル風クリエイティブに仕上げてくるあたり、こだわりとクオリティの高さハンパない！ この作品を作ったのはデザイナーのVaclav Krejciさん。いやー、Wordでここまでできるものなんですね。ふだん自分がWordの能力を全く目覚めさせていないどころか、パソコンの肥しにしているレベルなのだと深く反省しました。ええ。 もしかしたら、アップルのデザイナー陣もWordで制作してるかもしれませんよ？ ［Twitter］ Rumi（MARIO AGUILAR 米版）
すばらしいソフトを作るには、カリスマが講演 ― ＠IT
記者という職業柄、これまで非常に多くのプレゼンテーションを見てきたが、プレゼンテーションの1枚目が半裸の女性モデルの写真だったのは初めてだった。 2月13日、14日の予定で東京・目黒で開催中の「デベロッパーズ・サミット2008」で講演したFog Creek Softwareの創業者でCEOのジョエル・スポルスキー（Joel Spolsky）氏のプレゼンテーション「Joel on Developers Summit――素晴らしいソフトウェアを作るということ」は、型破りに楽しく、なおかつソフトウェア開発者にとって示唆に富む内容だった。 スポルスキー氏は米マイクロソフトのExcelチームで、Excel用マクロ言語を、後にVBAと呼ばれることになるモダンなオブジェクト指向言語に置き換える仕事でプログラムマネージャを務めたことがあるなどソフトウェア開発のベテランだが、エッセイの書き手としても名を馳せ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
色見本と配色サイト - color-sample.com
カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル
Online Mockup, Wireframe & UI Prototyping Tool
モデリングなんて簡単だ 3 ブログシステムを作って学ぶ データベースの設計法 きちんと設計されたデータベース （以下、 DB） 維持管理や拡張がしやすく、 は、 パフォーマンスにも優れ
Free prototyping tool for web & mobile apps - Justinmind