明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag

CACON 11/2 14:00–17:30Airbnbデザインシステムを総括しているデザイナーハン・ユジンさんのコンファレンスに参加しました。 ハンさんは19年目UI・UXデザイナーで、ustwo、Google、Spotifyを経て現状Airbnbでデザインシステムを総括をしています。 コンファレンスは３つのセッションに構成されて行われました。 なぜ、デザインシステムであるべきか。Airbnbデザインシステムケーススタディー海外でデザイナーとして生きることQnA 1. なぜ、デザインシステムであるべきか。主に、プロダクトデザインは４つのプロセスで構成されます。 DiscoverデザインリサーチインタビューDefineデータ分析カルチャー理解やデザインアイデアコンセプト定義・レビューDevelopデザインFIXプロトタイピング・開発Deliverプロダクト共有ユーザー検証テスト・フィードバ

こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI

#html5j #html5j_e Webやアプリを世に出すにはエンジニアの力が欠かせませんが、競争が激しくユーザーの要望も高まっている現在、デザインは大きな差別化に繋がります。 同じモノ作りをする職業ですが、課題解決の取り組み方から評価の仕方まで違いがあります。その違いが誤解に繋がること…

どうもみなさんこんにちは〜！ AID（Ameba Innovation Designers）というデザイナー組織に所属している、松本です。「Ameba占い館SATORI」のデザインを担当しています。 今回は、AIDのロゴができるまでにやった5つのことをお話ししたいと思います。 AIDってなに？ AIDとは「Ameba Innovation Designers」の略で、Amebaが提供しているサブブランド事業のデザイナーの集まりです。 Amebaサブブランド事業をDESIGNでAID(助成、促進)し、Innovationを起こすことを目的としています。 今までに、メンバー各自で一つテーマを決めて研究＆発表をしたり、勉強会やデザインコンペの開催をしてきました。 ▼Amebaのサブブランド事業 AIDの活動を広げていく上で、チームの共通認識を持ったり、社内外の認知を向上するために、組織のブランデ

クックパッドといえば料理レシピのサービスでお馴染みだろう。サービスのスタートは1998年の3月とのことなので、2019年の今年で実に21年目を迎える。 そんなWebサービス業界では老舗とも言える同社が主催し、サービス開発の手法や考え方について知見や学びを共有する勉強会「Cookpad Product Kitchen」が2018年12月6日（木）に開催された。 イベントでは、クックパッドの新規サービス開発部 UXエンジニア 出口貴也氏とデザイン・イノベーション・ファーム Takramでリードデザインエンジニアを務める神原啓介氏とが登壇。約75名の参加者を相手に、出口氏と神原氏それぞれが「なぜデザインとエンジニアリングの融合に取り組もうと思ったのか？ プロジェクトにとって、デザインとエンジニアリングを越境することはどのような効果を生むか？」などといったトピックについて、それぞれが実践的に取り組

デザイナーにある2つの仕事 デザイナーの仕事は情報を整理したり何か成果物を作ることであることに異論を出す人はいないと思います。何か形にできるのはデザイナーの特殊能力だと思いますが、それだけがデザイナーの仕事ではありません。デザインの見方や伝え方を周りに教えるのもデザイナーの役割です。 デザイナーの間では「デザインは課題解決すること」という認識が広まっていますが、周りからは「デザインは見た目を整えること」と思われています。デザイン思考、UX といった言葉をデザイナー以外が発することはありますが、それでもデザインは見た目の話に止まることがあります。 こうした状況に対して「デザインのことを分かっていない」と言うのはナンセンスです。私たちデザイナーと同じように情報収集と実践を繰り返しているわけではないのに、デザイナーと同じ認識と姿勢でデザインに取り組むことを期待するのは現実的ではありません。結局、

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

売上を伸ばしたい。 課金率を伸ばしたい。 でも、難しい！ コンバージョンするサブスク UI を勉強したかったので、いくつかのアプリをスクショ。あたまの整理にまとめたのでアップ。 Web の LPO はかなりノウハウ系記事がありますが、アプリのサブスク UI は、まだまだ少ない気がします。誰かの参考になれば嬉しいです。 まとめ内のコメントは個人的感想です。まだまだ勉強中なので、お気軽にご意見いただけるとうれしいです。 ※ スクショは少し前に撮影したものなので、一部古くなってるかもしれません。 UI パターン 1. ミニマム型 2. プラン比較型 3. 横スクロール型 4. リスト型 5. ロング LP 型 規約表示パターン 1. 固定表示型 2. 隠しスクロール型 3. フッター型 4. 遷移型 サービスパターン 1. 探索財 2. 経験財 3. 信頼材 UI パターン1. ミニマム型最低限

この記事は Goodpatch UI Design Advent Calendar 2018の4日目の記事です。 前回は、usagimaruによる結局、画面とはどこなのかでした。また、この記事の前段としてソフトウェア開発に関わる「●●デザイン」の分類を読んでいただけると幸いです。 この記事では、私がデザイナーとして関わったプロジェクトでデザインガイドラインを作成した話を元にギャレットの5段階モデルに記述されている構造層においてデザイナーが何をするのか。というのを個人の経験から書きたいと思います。 POとデザイナーがGUIに対して同じ思想を持つデザインガイドラインと聞いたときに、みなさんはどんなものを想像するのでしょうか。 プロダクトの思想、色やタイポグラフィ、UI Componentなど目的によって粒度は様々かと思います。 今回のデザインガイドラインは、POとデザイナーがGUIに対して同じ

はじめに NewsPicks のソフトウェアエンジニアの三浦です。NewsPicks アカデミア というプロダクトの開発チームリーダーをやっています。NewsPicks Advent Calendar 2018 の12日目を担当します。 今回は、ソフトウェアエンジニア視点でのプロダクトづくりについて、 UX デザイン(以下 UXD)とドメイン駆動設計（以下DDD）を中心に書いてみようと思います。 なぜ UXD と DDD を同時に論じようと思ったのか 結論から先に書くと UXD と DDD は親和性が高いのではないか？と考えたからです。 伝統的なソフトウェア開発のプロセスを挙げると、 要件定義 基本設計 詳細設計 実装 テスト リリース のような構成になると思います。 しかしこのプロセスで開発したソフトウェアはユーザにとって魅力的なものになるでしょうか？ 昔よくあった、やたら入力項目が多か

CrowdWorks Advent Calendar 2018 の3日目の記事です。 はじめに こんにちは。 UXデザイン部でデザイナーをしている @kanako16 です。 クラウドワークスでは2018年1月から、チーフデザイナーの上田と新人デザイナーの私を中心に、 クラウドワークスの新しいデザインシステムを作りはじめました。 デザインシステムはまだまだ完成していませんが、「今年の懺悔は今年のうちに！」ということで、私がしてしまった「デザインシステムにまつわる失敗 2018」を懺悔していきます。 デザインシステムってなに？ デザインシステムとは、UIコンポーネント、スタイルガイド、情報アーキテクチャ、フロントエンドフレームワーク、さらにはデザイン原則やブランド、アクセシビリティなどから構成されています。 デザインシステムやデザインガイドラインなどいくつかの似ている概念があり、その線引きは

この記事は InHouseDesigners Advent Calendar 2018 13日目の記事です。 こんにちは。@toi_toi_yです。インハウスデザイナーです。 自分はサイボウズという会社で自社プロダクトであるkintoneのデザイナーをしています。 チームにはプロダクトマネージャー、エンジニア、QA、ライター、デザイナーなどなどいろんな役割の人がいます。 一般的に事業会社はしっかりと分業されていて、それぞれのロールに割り振られた仕事をしています。自分はデザインをして、エンジニアはコードを書いて実装するのが主な役割です。 自分はサイボウズに来る前に製作会社でWebサイトを作っていました。自分でディレクターもやるし、デザインもするし、コーディングもやるという分業とは程遠い環境にいました。 2年半前サイボウズに転職してきた当時、「ちゃんと分業されている！ 専門家がいるって素晴らし

Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design

モバイル基盤グループのヴァンサン(@vincentisambart)です。 iOSの設定画面の右側は一定の幅を超えないように作られています。 iPadでは: 新iPad Pro 12.9"では: iPadでTwitterのタイムラインのセルの中身も一定の幅を超えません。 このように、自分のアプリで広い画面でもコンテンツが広がりすぎないようにするためにはどうすればよいのでしょうか。AutoLayoutでいくつかの制約を使ってできるのですが、もっと簡単な方法はないのでしょうか。 iOS 9以上では、端末の種類を気にせず、複雑なAutoLayout制約を使わず、殆どのビューですぐ使える仕組みがあります。Appleのドキュメントで「readable content」や「readable width」と呼ばれているものです。以下日本語で「読みやすい幅」と呼ぶことにします。 注意点：下記の説明はAut

UIは小さな構成要素の入れ子の組み合わせという考えを元に、化学のメタファーを用いて階層と粒度を定義した設計手法 画面を構成する要素を、原子（Atom）分子（molecule）有機体（organism）テンプレート（Templates）ページ（Pages）の5つの階層に分け、最終的なUIとUIの基礎となるデザインシステムを同時に作成する設計方法で、アメリカのWebデザイナーBrad Frostブラッド・フロスト氏が考案・提唱した。 公開しているアトミックデザインの電子書籍では、アトミックデザインの実践プロセスが紹介されていて「アトミックデザインの本質はUIを構築するためのメンタルモデルに過ぎない」と述べている。 アトミック・デザイン誕生の背景 紙というメディアにおけるページというメタファーの崩壊 1991年にWWWワールド・ワイド・ウェブの誕生当時にはウェブの概念が斬新過ぎて理解できなかった

この記事は、「BASE Advent Calendar 2018」の7日目の記事です。 devblog.thebase.in こんにちは、BASEのデザインチームに所属している北村（@naomi_kun）です。 BASEのデザイン管理ツールに「Abstract」を導入してちょうど1年が経ったので、導入する前を振り返りながら、良かったところの所感をまとめたいと思います。 はじめに 突然ですが、デザインデータの管理ってみなさんどうしていますか？ 共有するのが大変だったり、バージョン管理のルールを厳格にしておかないとメンテがしづらかったりと、デザインデータの管理って非常に面倒ですよね。 BASEもGoogleDriveやDropboxを用いてデータ共有していたものの、ファイルの置き場が煩雑になったり、新しいデータがどれなのか毎回他のデザイナーに確認しなければならないなど、多くの課題を抱えていまし

Takramさんをお呼びして開催した Cookpad Product Kitchen の登壇資料を全文公開してみます😀当日の様子は #productkitchen からどうぞ。 --- クックパッドの出口 (@dex1t) と申します。 今日はコードを書きながらデザインする意味と効果というタイトルでお話します。 本日のテーマはデザイン×エンジニアリングということで、両者を掛け合わせると何がおこるのかをテーマにお話します。 また、クックパッドではUXエンジニア、Takramさんではデザインエンジニアという肩書がありますが、じゃあこのUXエンジニアというのは何をする人なんだ、というのも話せればと思います。 クックパッドとTakramさんとの違いは、大きく事業会社とクライアントワークという違いです。僕からはクックパッドという事業会社でのサービス開発において、デザインとエンジニアリングを越境する