ygoto3.com
現在開発担当している AbemaTV で、昨年末にパナソニックさんのスマートテレビ VIERA 向けにアプリケーションをリリースしました。AbemaTV リモコンボタンで AbemaTV にアクセスできます。今回このアプリケーションの UI を開発するにあたって、新しいデザインワークフローを導入しました。 本記事では、 Story-Assured Design というデザインワークフローを、現在プロダクト開発で直面しているデザインの課題とともに紹介します。 Story-Assured Design とは？ Story-Assured Design はその名前が示しているように、ユーザーストーリーを保証することを目的とした UI デザインのワークフローです。UI デザインを３つのステップに分けて行います。 ストーリーデザイン デザインの構造化 視覚情報デザイン 一番重要なユーザーストーリーの
繰り返しが印象深い！「ワンパターン・デザイン」７選
Webサイトギャラリーを覗いて感じたのですが、やはり美しい写真やムービー、斬新なレイアウトなどのデザイン要素がふんだんに使われているサイトに目が奪われがちだったりします。 その中で、あえて一つの要素にフォーカスし、うまく繰り返して魅せる手法があることに気づきました。 今回はこれを「ワンパターン・デザイン」と称し、その手法を取り入れたサイトを紹介します。 http://naotaro.com/ 森山直太朗 オフィシャルWebサイト シンガーソングライター、森山直太朗氏のオフシャルサイトです。 TOPに配置されている森山さんの画像が背景に指定されており、スクロールしても追従してきます。 写真は変えず、顔の落書きだけを差し替えることで、着せ替え人形のような効果を生み出しています。 本人は至って真面目なのにとてもPOPな雰囲気を生み出しており、お茶目な森山さんの人柄が垣間見えるようです。 メインの
Vue.js + Vueify + gulpでプロトタイピングぽいことをする - Qiita
はじめに… 最近WebViewを使うプロジェクトに関わっているのもあって、iOSやAndroidだけではなくWeb関連の技術も追っかけなくてならない状態です。故に、デバイスはモバイルだけではなくデスクトップもウェアラブルも全て対応範囲の視野にいれておかなければならないため、既存のプロトタイピングツールでは対応しきれないシーンに度々出会います。 プロトタイピングツールって プロトタイピングツールは色々あります。画像ベースのものから、Scriptベースなどなど。しかし、次のような問題点でInVisionでさえもどかしい思いをしています。 画像ベースのプロトタイピングツールの問題点 結局全てのステートに合わせたカンプをつくらなくてはならない。 条件分岐でデザインの一部を変更したい デザイナーが少数の環境ではプレビュー共有くらいでしか使えない。 インタラクションや動線を選ぶのは面倒くさい。 そもそ
Heroku Dropbox Syncで実現するWeb開発の未来 - MOL
Heroku Advent Calendar 2014の13日目の記事です。 2014年11月にHerokuからDropbox Sync機能のアナウンス（Beta版）がありました。今日はこれを使ってみようと思います。 この記事はBeta機能について解説しています。機能に関しては変更の可能性があります。 デザイナーとデプロイ まず先に私とHerokuと言えば、StyleStatsというCSS解析ツールをHeroku上で動かしています。私は元はWebデザイナーでしたので、つい最近まで『デプロイ？なにそれ？おいしいの？』って感じでしたが、git push heroku masterでデプロイできるHerokuさんのおかげで、こんな私でもWebアプリを稼働・運用していけています。 配備する、配置する、展開する、配置につく、などの意味を持つ英単語。 ソフトウェアの分野で、開発したソフトウェアを利用で
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
targeted.io - Domain Name For Sale | Dan.com
Buyer Protection Program When you buy a domain name at Dan.com, you’re automatically covered by our unique Buyer Protection Program. Read more about how we keep you safe on our Trust and Security page. Next to our secure domain ownership transfer process, we strictly monitor all transactions. If anything looks weird, we take immediate action. And if the seller doesn't deliver on their part of the
Gemba | Unified Business Systems
Automate Your Business. Manage in Real Time. Unify your Business Operations & Technology into one seamless system with Gemba & Salesforce. Bringing ERP, Field Service, Point of Sales & eCommerce under one roof. Gemba builds unified Business Operations Systems on the Salesforce Platform, delivering timely insights, integrated customer experiences, and better teamwork.
esnext - Tomorrow’s JavaScript syntax today
esnext is a JavaScript library for converting JavaScript written using the ES6 draft specification syntax to JavaScript that will work today. Demo /* On the left is code written with new JavaScript features, and on the right is the console output, plus the same code re-written so it can run in today's browsers. Edits made to the code on the left will re-generate and re-run the code on the right. T
React Bootstrap | React Bootstrap
React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation. Built with compatibility in mind, we embrace our bootstrap core and strive to be compatibl
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
Non-blocking HTML parsing
このファイルを使用中のユーザーが多すぎるため、一部のツールを利用できない場合があります。再試行詳細閉じる
Asciidoc-Bootstrap
Features Since the version 1 Fixed Navbar is always pinned at top of the output file (even if empty). Brand is configurable. Dynamic Navbar control which navigation information files will be included in the output file. Dynamic Footer control which footer information file will be included in the output file. TOC position can be place on a sidebar on left or right of the main document. Themes suppo
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
JavaScript for Designers with Rachel Nabors
with Rachel the Great (aka Rachel Nabors) I am Rachel the Great Nabors A cartoonist turned web designer turned front end developer (You can still read the comic adventures of Rachel and Tuna at RacheltheGreat.com) I am not a hardcore JavaScript developer. Most JS study materials are written by programmers for programmers—not designers. You are… Why learn JavaScript? Can't you just use a library or
Crush & Lovely — 7 Patterns to Refactor JavaScript Applications: Value Objects
By Michael Phillips, Engineer On October 17, 2012, Bryan Helmkamp, founder of Code Climate, wrote a blog post outlining 7 patterns to refactor fat ActiveRecord models in Ruby on Rails. Here at Crush & Lovely, this post is a core reference for all Rails developers on how to separate concerns, write modular, concise and expressive code, and make testing exceedingly simple. This series of posts demon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアミーティング vol.9
GitHub - lafikl/RWDPerf: Performance testing tool for Responsive web designs.
GitHub - tagawa/bootstrap-without-jquery: Twitter Bootstrap without jQuery
Prott - Prototyping tool for Web iOS Android apps
Start Bootstrap
