Amebaのデザインシステム「Spindle」の全貌公開
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
DarkModeのデザインを中心とした色彩設計の考え方 - くらげだらけ
こんにちは、くだくらげです。最近ははじめてのUIデザインという本を共著で書きました。 おかげさまでたくさんの人に読んでいただいて、コメントをもらえたりして嬉しいです。ありがとうございます！ PEAKSさんから出版しており購入できますので、よろしければ手にとってみていただけると嬉しいです。 peaks.cc 概要 WWDC 2019で新しく発表されたiOS13でOSレベルでのDarkMode設定が搭載されることになりました。MacOSの方は以前より追加されていましたが、iOSではなかったので個別のアプリが各々対応していました。 今回、iOSにもDarkMode設定が標準搭載されたことによって、iOSアプリのダークモード対応が必然的に迫られることになって来るのではないかと思っています。 ダークモードを好んで使う人は一定数存在していて、かく言う私もダークモードを好んで使っています。目に優しいだっ
FigmaではじめるUI（Web）デザイン｜Part1｜Nao Komura｜note
Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思います。 というより、昨今はデザインツールが多すぎてシンドいことこの上ないですね。一度効率化の味を知ると更なる効率化を追い求めてしまいますし、そんな現状だと日頃から使用しているツールを変えるのも一苦労です。 ......さて、今回は初心者〜中級者くらいまでに向けてFigmaで作るUIデザイン入門的な記事を書いていこうと思
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
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
サービスデザインで考慮しておきたいUXチェックシート35問 - DeNA Design
こんにちは。DeNAデザイン戦略部 デザイナーの宮本です。 今回はサービスデザインをする上で考慮しておくべきUXについて考えたいと思います。 「既存サービスのリプレイス」「新規サービスの立ち上げ」どちらにせよプロジェクト初期段階で考慮する点が重なっていることが多いのですが、毎回白紙の状態から進めてしまうと必ず考慮漏れが起きることから、これを予防するために実際の現場でのノウハウ（失敗）を元に問いかけ形式のチェックシートを作ったので公開したいと思います。 なお、今回のチェックシートはモバイル向けアプリの改修・立ち上げ時を想定した初・中級者向けで、あくまで個人的観点から重要だと思うところを中心に列挙しておりますので、参考程度に捉えていただけると幸いです🙇 戦略・施策設計においてはターゲットユーザーの鮮明化と、本当にそのサービスが使ってもらえるのか？を重点的に言語化できるようにしています。 また
最近よくクリエイターが移住するカナダで Atomic Design を学ぶ
こちらは Frontrend Advent Calendar 2014 19日目の記事です。 2014年 12月8日〜12月14日の間、カナダに滞在してきました。目的は12月9日〜12日に開催される Smashing Conference 2014 へ参加するためです。 海外のカンファレンスに参加するのはおろか、海外旅行もしたことがないので、今回１人でカナダに行くということで終始緊張の連続でした。（Frontrend の @hiloki さんが「僕も行こうかな」と言っていたので、心強く思っていたのですが、残念ながら叶わず。） 本記事は、カンファレンスが開催されたカナダという国にまつわるお話を Frontrend の話題を交えながら書きつつ、このカンファレンスで一番楽しみにしていたトピックである「Atomic Design」について書いていきます。 参加の理由 今まで海外カンファレンスなど参
0から学ぶアプリの配色 - Rejasupoem
当方Androidエンジニアをしておりますが、プライベートでアプリを作るとき、画像リソースについてはAndroid組み込みのものを使ったり、Fontawesomeを使ったり、フリー素材を使ったりしています。 しかし配色はインターネットに落ちていなくて、自分でやるとイマイチで、いい感じにしたいという気持ちがありました。 そこで、調べたり試行錯誤をして知見が得られたので、配色に悩むエンジニアのために共有します。 3行まとめ デザインはセンスで行うものではなくロジックで成り立ってる、つまり努力でなんとかできる Color Scheme Designer 3 便利 配色を学ぶのには下のスライドが一番分かりやすかった 色彩センスのいらない配色講座 from Mariko Yamaguchi STEP 1. 対象に興味を持つ 〜〜で必要だから勉強しなければって始めてたものが長く続いたことがないので、
レスポンシブウェブデザインのつくり方：mockup
こんにちは、西野です。好きなinput typeはinput type="range"です。 前にAdobe Edge（現Adobe Edge Animate）の使い方記事を書きました。（Edgeが出た当時の記事なので情報が古いかも…） 今回は、最近ぼちぼち見かけるようになってきたレスポンシブデザインについてお話したいと思います。 実装の話はさわり程度で、企画、ディレクター、デザイナー向けにまとめています。 1.レスポンシブデザインとは レスポンシブデザインとは、簡単にいうと同じHTML/CSSでいろいろな画面サイズに対応することです。 「あー、ワンソース マルチユースってやつでしょ」と言うと業界っぽい感じが出せます。（あくまで出せるだけです） 実例としてはTIMEのサイトやBREAKING NEWSなどが完成度が高いサイトとして挙げられると思います。 Bootstrapもレスポン
多種多様なWebアクセスにおけるパソコン向けデザインの弱点
通信機器の普及率を2010年と2012年度で比較（総務省 2013年）。 日本も既にポストPC時代 先週、総務省が平成二十四年度の通信利用動向調査を発表しました。詳しくは公開されている PDF (又は生データで公開されている Excel/CSV) を参照してほしいですが、特筆すべき点は以下の 6 つです。 パソコン（デスクトップやノート）からの Web アクセスは 2009 年をピークに毎年下降している 家庭内、外関係なくパソコンからの Web 利用は低下している 同時に低下しているのは従来の携帯電話。保持率は依然高いが Web アクセスは減ってきている 従来のアクセス端末の利用は低下しているが、今まで以上に Web アクセスする人は増えている 10代から40代の Web 利用率は頭打ちをしているが、増えてきているのが 65 歳以上の高齢者 パソコンや従来の携帯電話の代わりになっているのが
Nicholas Zambetti
Nicholas Zambetti works across visual and physical to create new products, tools, and meaningful experiences with aesthetic qualities. Previously of Apple Inc. and IDEO, he is experienced with interface and product design, design strategy, user research, prototyping, and software development. Nicholas co-founded Astep in 2014 and is currently based in Copenhagen, Denmark. CV
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nord
Tondemodesign.com
Redirecting to Animate.css
Octicons Your project. GitHub's icons.
GoodUI
http://saucerjp.heroku.com/
Tsukasa Obara (saucerjp) - Profile | Pinterest
https://www.splashnology.com/article/30-free-flat-ui-kits-for-web-designers/9347/