なぜデザイン思考はゴミみたいなアイデアを量産してしまうのか｜サカキバラ・ケイ
デザイン思考がもてはやされてしばらく経ちましたが、デザイン思考の成功例、何か思い出せますか？仮に思い浮かんだとしたら、その「成功例」は本当にデザイン思考によって生まれたものですか？ 一応最初に断っておきますと、僕は「デザイン思考はゴミだ」と言っているわけではありません。デザイン思考（デザインシンキング）にも向き・不向きがあるのに、その特性を踏まえないまま変なバッターボックスに立たせた企業が大変シュールな状況に陥っていることを、普段デザインで事業成長を支援している身として危惧しているというわけです。マイナスドライバーでプラスのネジを回すのはやっぱり無理があるし、おもしろTwitterおじさんだった人に大統領をやらせたらそりゃみんな怪我するよね、という単純な話です。 著名デザインファームPentagram New Yorkのグラフィックデザイナーであり教育者でもあるNatasha Jenは「D
『なるほどデザイン』表紙ができるまで｜筒井美希
『なるほどデザイン』といえば、なんといってもNoritakeさんのイラストが目を引く表紙が目印。たくさんの人が手に取ってくれるきっかけをつくってくれたこの表紙は、デザイナー関口裕くんの手によるものです。 表紙も自分でデザインするという選択肢も、もちろんありました。そうしなかった理由は、あまりにも内容にどっぷり浸かりすぎていて、適切な距離を置けないだろうと感じたから。もともと自分は、欲張りな性格かつ文脈を盛り込むのが好きなので、記号のように削ぎ落とした状態にするのはあまり得意でないという自覚もあった。本の内容をアラカルトで盛り付けたような、騒がしい表紙になってしまうことを恐れていたのです。 では誰に表紙を託そうか？ と考えたときに思い浮かんだのが、会社の同期であり、装丁の仕事ぶりを「上手いな〜」と思って横目に見ていた関口くんでした。今回は彼と２人で、表紙の制作プロセスを振り返る対談をお届けし
Figmaを使ったリモートワークショップの可能性｜Takehisa Gokaichi
昨年末に書いた「できる！リモートワークでのUXデザイン」という記事に引き続き、今回はUXデザイン界隈の実践者に向けて、主にスマートルアーとGoodpatch Anywhereでの業務で見つけた「Figmaを使ったリモートワークショップの可能性」について語ってみます。 ※この記事に書かれている「ワークショップ」は、基本的に「UXデザインの現場におけるワークショップ」に限ったものです。ワークショップって何？ワークショップといえば「モノづくり会」や「体験型講習会」が一般的です。新人研修や外部セミナーでの意見交換会を想像される方もいるかもしれません。 一般的な学習は、答えが定まっていたり学ぶべき事柄が明確に決まっています。一方でワークショップは定まっていない答えを自ら探す活動です。授業のように、決まった内容、決まった答えを受動的に学ぶのではなく、ワークを通じて「気づき」や「発見」を得ることを促すた
コードを書きながらデザインする意味と効果 #ProductKitchen｜Takaya Deguchi｜note
Takramさんをお呼びして開催した Cookpad Product Kitchen の登壇資料を全文公開してみます😀当日の様子は #productkitchen からどうぞ。 --- クックパッドの出口 (@dex1t) と申します。 今日はコードを書きながらデザインする意味と効果というタイトルでお話します。 本日のテーマはデザイン×エンジニアリングということで、両者を掛け合わせると何がおこるのかをテーマにお話します。 また、クックパッドではUXエンジニア、Takramさんではデザインエンジニアという肩書がありますが、じゃあこのUXエンジニアというのは何をする人なんだ、というのも話せればと思います。 クックパッドとTakramさんとの違いは、大きく事業会社とクライアントワークという違いです。僕からはクックパッドという事業会社でのサービス開発において、デザインとエンジニアリングを越境する
デザインレビューシステム〜正しいデザインを正しく作ったか〜｜Tomotsugu Takahashi
こんにちは。デザイナーのたかはし（@tmtgtk）です。かれこれ社会人8年目のデザイナーとなりました。広告制作会社からスタートし、事業会社、スタートアップを数社渡り歩いた僕が、何らかの知見をシェアできないかなと思い立ち、初めてnoteを書いてみようと思います。 いきなりですが、デザイナーのみなさん、「デザインレビュー」って普段どうしてますか？ ・上司に見てもらいフィードバックしてもらう・デザインチームの複数人で集まってスクリーン見ながら・エンジニアさんやディレクターさん含めたプロジェクトメンバーで・デザイナーが自分ひとりなので、誰もレビューしてくれない…などなど、様々なケースがあるかと思います。一方、デザインレビューのよくある問題で、 ・その都度上司の言うことが変わる・その時の参加メンバーによってツッコミどころが全然違う（立場が上だったり声の大きい人の意見が通りがち）・エンジニアさんやディ
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
大規模デザインシステムを作る：いかにしてアメリカ連邦政府のデザインシステムを作り上げたか - カタパルトスープレックス
原文："Building a large-scale design system: How we created a design system for the U.S. government" by Maya Benari, October 3, 2017 現在、ほぼ30,000の米国連邦政府のウェブサイトがありますが、それらウェブサイトの間に一貫性はほとんどありません。テクノロジーの分野で働く数十万人の政府機関の職員がいますが、彼らの携わるウェブサイトの構築や管理方法に共通点はありません。 その結果、政府はユーザーが十分に満足できないサービスに多くのリソースを費やしています。連邦政府のウェブサイトは行政が提供するサービスの正面玄関です。アメリカ政府と何らかの接触をはかるときユーザーが最初に出会う場所です。米連邦政府一般調達局のFederal Front Doorイニシアチブの調査からウ
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
デザインしやすい部品の分け方を考える
Atomic Design の課題 デザインシステムを作っていく際、Atomic Design は非常に参考になる考え方です。Atomic Design は以下の 5 つの要素によって構成されていて、Pages へ近づくほど、より複雑で大きなものになります。 Atom : UI を構成する最小かつ基礎要素。ラベルやボタンなどが含まれる。 Molecules : 2 つ以上の Atom によって構成された小さなグループ。ラベル、インプット、ボタンで構成された検索フィールドはその一例。 Organisms : 2 つ以上の Molecules もしくは Atoms によって構成されており、画面上で独自の枠組みになっていることが多い。 Templates : コンテンツ構造が分かる大きな枠組みで、利用文脈によって分類できるレイアウトになっている。 Pages : テンプレートが実際どのように扱わ
意外とできてる会社ばかりではない！？Webデザインを行う前にすべき、Webディレクション作業まとめ。
こんにちはMUUUUU.ORGの中の人こと、QUOITWORKS Inc.のムラマツです。 最近はWebデザインと、グラフィックデザインが同時に発生する案件を絶賛募集しております！（宣伝） えーと今回は、Webのディレクションというのは正直決まったやり方が存在していないのが現状でありまして、 今の時代の業界標準を確認し直そうと思いまして「第一線のプロがホンネで教える 超実践的 Webディレクターの教科書」を参考に、改めてWebディレクションとは何をする仕事なのか、 Webデザインを始める前段階というところにフォーカスしてまとめました。 目次 前段：コミュニケーションはディレクターのメイン商品 1.ヒアリングをする 2.リニューアルの場合、現サイトの課題だしをする 3.コンセプトを作る（共通言語となる目標を決める） 4.ポジション設定をする（競合に対しての強みを見つける） 5.ペルソナ作り（
エンジニアがデザインに取り組んでわかったこと
最近、いくつかのデザインに取り組んでわかったことがあるので、書いておこうと思う。 ぼくは2,3年前にこの業界に入ってからずーっとフロントの実装畑でやってきた。 それは自分の意図していたものではなかったけど、前職のまぼろしという会社は実装が強みの会社だったので、デザインに触れることはほぼほぼなかった。 それもあってか、ぼくは「もうちょっとコストを考慮してほしい」「このあしらいが一体ユーザーにいくらのお金を落とさせるんだろう」とか、あげくの果てには「実装のことを考えたデザインをすべき」とまで考えていた。これらの考え方はぼくだけでなく、コーダーからよく同様の声が上がっている。 だけどデザイナーさんと接する機会が増えるごとに、デザインができるようになったら今までイラついていたことがどんな風に見えるのか確かめたいな、という気持ちになった。 それ以外にも「なにか作るとデザイナーばかり褒められて厳しい」
コンテンツから先に考えなければデザインすらできない理由 : could
ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過
デザインって何だっけ？ と仕事中に考えた話 — Medium
Don’t write aloneCopy and send this draft link to anyone. They’ll be able to leave you notes before you publish. 編集者という存在の大きさ コンテンツから先に考えなければデザインすらできない理由 : couldこちらの記事を読んでいろいろ素朴に思うことがあったので、ちょっと書いてみようと思う。とくにオチもなければ、否定的な気持ちもない。Web は紙媒体とは違うとよく言っていますが、雑誌から学べるところがあります。それは、雑誌は必ずコンテンツからスタートしている点です。雑誌の制作プロセスは中身もないのに表紙から作り始めることもなければ、原稿があがる前にレイアウトを作り始めることもありません。大まかなシステムを作るところから始めることができる、まずは形にすることができるのが Web
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
【Rails】デザイン〜プログラム作業の連携 KRAYの場合
お寿司大好き！ KRAY の亀井です （好きなネタは炙りサーモンです） 巷ではデザイナーとプログラマーの協業についてのブログ記事を見かけたり、webプログラマーの「HTMLのzip納品つらい」という声が聞こえたりします。 デザイン（HTML コーディング）とプログラムの連携作業については、悩んでいる人が多い印象を受けます。。 デザイナーとプログラマーの協業 KRAY でもデザインとプログラムの連携については改善を試みています。 今回は KRAY でのデザイン 〜 プログラム間の連携作業について書いていきたいと思います。 KRAY は Rails を主に使っているので、Rails の場合の話になります どちらかというと HTML コーディング 〜 プログラム間の作業の話が主です 今までのやりかた KRAY はシステム開発専門の会社なので、社内にデザイナーがいません。 なのでデザインはパートナ
５歳児とAgileUX | オブジェクトの広場
私には５歳の息子がいるのですが、手先が器用で紙を切ったり貼ったりして、いろんなものを自分で作ります。ところが彼にも限界があるようで、家をつくろうとしたところうまくいかず、大泣きをしてしまいました。「薄い紙なのでうまくいかないよ」というアドバイスは全く効果がありませんでした。そこで「次の休日に一緒に家をつくろう」という提案をしたところ、素直に受け入れられました。とはいえ、どんな家を作りたいかはかなり漠然としており、相手はこだわりの強い５歳児。さて、どうなることやら・・・。 まず、今回のケースを整理したいと思います。お客様＆エンドユーザーは５歳児で開発者は私です。お客様は、かなりこだわりが強く、期待レベルも高いと想像できます。要望が漠然としていることと、お客様の特性を考えると、受注はリスクは高いですが、今回は受け入れざるを得ませんでした。ゴールはお客様が期待する家をつくること。家は、ミニカーと
『デザイナーがデザインしたとおりになっているかは...』
少し昔を思い出してました。当時いた会社の制作物のデザインは、一時期ほぼすべて巨匠とよばれるベテランデザイナーがやってたのですが、ぼくはPMの立場でわりとぞんざいに扱っていました。 入社した頃はデザインセクションとシステムセクションが半々だったのですが、受注額に年々差が付いて行きいつしか人数比でエンジニア9に対しデザイナー１くらいまで減っていました。 そして経験の浅いPMであるぼくは、デザインの適正価格があまりみつもれず500万のiPhoneアプリ開発だと50万円くらいとか、価格比もそんな割合にしていました。UIデザインを頑張ると開発工数も連動して、あるいは数倍に跳ね上がることを知ってたので、案件が炎上しないようデザインにこだわったアプリを受注することを嫌ったのです。 そして受注した後僕は巨匠にこう言います。 「この案件、予算少ないんで雑なデザインでいいですよ」 しかし、巨匠はきっちり仕事を
これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編） | Goodpatch Blog
先日、長谷川恭久さんとの共同プロジェクト、“Patch Project”がスタートしました。これはUIデザインの新しいワークフローを作るために立ち上がったプロジェクトです。これまでのワークフローを見直して、より良いUIを作っていくためにはどうするべきなのか、実際に何かのUIをデザインしながら模索していきます。そのプロセスや結果はどんどんオープンにしていきますのでお楽しみに！ まず今回はその導入部分として、ワークフローの提案について長谷川さんに話して頂いた内容を記事にしました。前編では、デザインカンプをやめてプロトタイプを作るべき理由を中心にまとめています。 そもそもUIとは何か UIの話というと多くの人がビジュアルデザインの話をしますが、そもそもUIとは人間とコンピュータの関係を円滑にするためのものです。人がコンピュータと関わるとき、そこには必ずインプットとアウトプットがあります。その中で
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン負債の返し方 〜ネイルブックの場合〜