静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
もう、SP用のWebデザインを倍の解像度で作るのをやめよう
デザイナーがコーディングできるべきかという議論がSNS上で白熱していますが個人的にはあまり興味がなく、コーディング経験の有無に関係なくWebに適したデザインデータを作ってもらえたらあとはフロントエンドの領分であると思っています。 とはいえ、Webに適したデザインデータをつくれないデザイナーが多いのでああいった議論が白熱するのではないかとも思っています。 Webに適していないデザインデータとはどういったものかというと、古くから言われているものではPhotoshopの『乗算』を使うとCSSで表現できないためダメというものがあったりします。 CSSでもmix-blend-modeという機能で対応できるけどブラウザの対応状況を鑑みるに、よほどの理由がないかぎりPhotoshopの『乗算』を使っていはいけないのが今の現実です。 参考：mix-blend-mode - CSS: カスケーディングスタイ
プロダクトの「色」と向き合う「デザインとエンジニアリング」 | CyberAgent Developers Blog
UXエンジニアの谷です。 「クリエイターHangout」はデザイナー数名のグループで構成される社内のコミュニティです。（Hangoutについては過去の井上の記事をご覧ください。）定期的ににテーマを設けての勉強会や活動をおこなっているのですが、その機会に今回講師として参加させてもらいました。 ▼今期のHangoutのグループ Webフロントエンドエンジニアでもある私が講師を勤めたのは「デザインとエンジニアリング」です。今回はデザイナーとエンジニアのコミュニケーションにおいて、課題となる「色」を主題に「デザインシステム」のトピックを交えておこないました。 1. デザインシステムの定義とは 2. 第1回 色の棚卸し 3. 第2回 & 第3回 色の整理 4. 第4回 コントラストチェック 5. 色と名前を決めることの難しさ 6. デザインシステムはどこまで作り込むか デザインシステムの定義とは 「
モダンなFireworks後継アプリは存在するか？
この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFireworks 2Jから使用していますが、最近使用しているAffinity DesignerはFireworksと特徴が似ていて、Fireworksが好きだった方にとって後継アプリとして使いやすいのではないかと思っています。 Fireworksと私 私は 神速Photoshop [Webデザイン編] や プロになるためのWebデザイン入門講座 などの本を執筆しています。 私はなぜかFireworksが嫌いな人と思われているようですが、この本の最後に「Fireworksを使っていたが、Photoshopで制作したい」と書いたためではないかと思っています。 しかし、私はFireworksには結構思い入れがあります。 なぜかと
デザインシステムの落とし所はどこにある？
寛大姿勢と厳格構造の間 デザインシステム開発における課題はいろいろありますが、いつも迷うのが『落とし所』を見つけることです。デザインシステムは下図のような軸のどこかにプロットされると考えています。コンポーネントやドキュメンテーションがほとんど用意されてない「寛大姿勢」と、様々な要素が細かいところまで決まっている「厳格構造」の 2 つです。 寛大姿勢 表現に自由があり過ぎる サポート体制がない 一貫性がない 改修コストが高い 厳格構造 トップダウン 守るべきルールと捉える人がいる 周りからの反発を受けやすい ユーザーニーズより現存コンポーネントを優先 デザインシステムはいずれかの状態に極度に寄るものではなく、軸のどこかにあります。ただし、間のどこが良いかは組織によって違うので落とし所が難しいわけです。デザイン組織の成熟度はもちろん、何を達成すると次のステップへ進めるのかを長・中・短期それぞれ
Twitterで好評だった手元に置いておきたいデザイン本13選｜上司ニシグチ
みなさま、こんにちは。上司ニシグチです。 こちらのnote記事は昨年末にリリースしたものですが、今年に入ってからもデザイン本をいくつか紹介していますので、改めて加筆（追加）させていただきました。 本当にオススメの本しか紹介しておりませんので、是非お手にとって確かめてもらえると嬉しいです。 「Twitterで好評だった手元に置いておきたいデザイン本13選」と題して、簡単にまとめてみましたので、是非ともチェックしてみてください！ ＊＊＊ − 目次 − ①文字のレイアウトで魅せる広告デザイン ②デザイナーのラフスケッチ デザインのアイデアを形にする過程 ③グッズ製作ガイドBOOK④キャラクターでもっと伝わるデザイン ⑤販促会議SPECIAL EDITION 実際に提案された秘蔵の企画書 ⑥入稿データのつくりかた⑦いとしの印刷ボーイズ ⑧配色アイデア手帖 めくって見つける新しいデザインの本 ⑨パケ
Webサイトのメインビジュアルの構図を集めて分析してみた。｜ameko
初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった
『なるほどデザイン』表紙ができるまで｜筒井美希
『なるほどデザイン』といえば、なんといってもNoritakeさんのイラストが目を引く表紙が目印。たくさんの人が手に取ってくれるきっかけをつくってくれたこの表紙は、デザイナー関口裕くんの手によるものです。 表紙も自分でデザインするという選択肢も、もちろんありました。そうしなかった理由は、あまりにも内容にどっぷり浸かりすぎていて、適切な距離を置けないだろうと感じたから。もともと自分は、欲張りな性格かつ文脈を盛り込むのが好きなので、記号のように削ぎ落とした状態にするのはあまり得意でないという自覚もあった。本の内容をアラカルトで盛り付けたような、騒がしい表紙になってしまうことを恐れていたのです。 では誰に表紙を託そうか？ と考えたときに思い浮かんだのが、会社の同期であり、装丁の仕事ぶりを「上手いな〜」と思って横目に見ていた関口くんでした。今回は彼と２人で、表紙の制作プロセスを振り返る対談をお届けし
デザインとは交渉すること
受け身のままでは後退する 長くキャリアを積んだとしても、時に「デザインとは？」という疑問が頭に浮かび上がります。様々な定義がありますし、文脈や状況に応じて正解といえるデザインが変わると思います。私が携わっている web サイトやアプリケーション（デジタルプロダクト）という観点からデザインを捉えると「デザインは交渉すること」だと思っています。 ユーザーの立場・視点を想像して、質の高いプロダクトをデザインしたいと考えるのは良いですが、その想いをそのまま周りに伝えても理解されません。デザイナーが考える「質」は、その職域に携わる人独特の視点であることは多々ありますし、技術制約やビジネスゴールを考慮するとコスト高という場合もあります。 だから諦めましょう … ではないからこそ交渉する必要があります。デザイナーは与えられた課題に対して解決案を作るといった受け身の仕事になりやすいことから、指示・注文・提
じゃじゃーんをやめる。デザイン案はできるだけ早い段階でオープンにするのがおすすめ - Satoshi Murata
日頃デザイン案をどの段階で他者に見せていますか。わたしは最近、途中でもできるだけ早い段階でチームメンバーにデザイン案をオープンにしていくということを試してみています。 具体的には、Adobe XDでウェブデザインのモックアップを作成しているのですが、プレビューのシェアURLをグループウェアやGitHubのIssueに貼っておくというものです。翌日には新しいボタンが増えているかもしれないし、一週間後にはガラッと印象が変わってるかもしれない、という断りも添えて。 最初からほぼ最終の段階まで誰にも見せずに、多くの時間をかけてからできましたとメンバーに見せること。これをじゃじゃーんと呼んでいます。これはチームで仕事をしていく上では次の点からアンチパターンでしょう。 向かう方向が見当違いだった場合に手戻りが多く発生する 他者からみると順調なのか困っているのかわからない 他者の仕事をブロックする可能性
Figmaで使えるSticky Notesを作った｜灰色ハイジ
2020/04/20 追記：Figma Community にSticky Notesをアップロードし直したため、リンクを変更しました --- 日本でも話題にする人が増えてきたFigmaですが、Sketchとの大きな違いは、Google Docsのようにリアルタイムに人と共同編集できるところにあります。 デザインはもちろんのこと、Miro （旧RealtimeBoard）のようにチームでアイデアを出し合ったり、議論を整理するのに使うこともできます。Figma公式ブログでもそのような使い方を提案していたりします。 そこで、一番使い方として多そうだと思ったSticky Notes（付箋）を作りました。すでに自分が関わるプロジェクトで使ったりしているので、配布できるようにファイルを整理して公開しました。 Figmaで使えるStickey Notes作りました🗒 使用例として別ページにAffin
経営者にデザインや技術の大切さをわかってもらうには？｜深津 貴之 (fladdict)
よく講演をした後に、そのような質問を受けることが多い。 結論から言うと、経営者にデザインやエンジニアリングの重要性を伝えようと頑張るのは、オススメできない。なぜなら、それを大事にしてくれる別の経営者と仕事をする方が、はるかに簡単で手っ取り早いからだ。 基本的に、経営者の考えを転換させるコストは極めて高い。それだけの時間やコスト、能力や忍耐があれば、転職先や別のクライアントを見つける方が簡単だ。そもそも、ある程度は職を選べる能力がなければ、経営者の考えを変えることはおろか、アクセスすることすら難しい。 シンプルに、デザインやエンジニアリングを経営に持ち込みたい人は、そのような経営者と仕事をすべきだ。過去に色々なクライアントで、経営者や社長室、経営企画室、新規事業部の方々とお会いしてきたが、実質的にそれ以外の答えは無いと思う。 経験上、ほとんどの経営層は人的ロジスティクスの硬直化が起きるまで、
59分割ヤバイ｜深津 貴之 (fladdict)
こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割
私の考えるプロダクトマネジメントとUXデザインの関係
2019/2/26 BIT VALLEY -INSIDE- Vol.6 @Leveragesでの登壇のスライドです。 発表の内容をnoteにしてますのでこちらもご参照ください。 https://note.com/taketetsu1982/n/n2e431592eade https://atnd.org/events/103410 BIT VALLEY -INSIDE- Vol.6 ハッシュタグは #bvinside 渋谷界隈にオフィスを構える企業による合同勉強会のコミュニティ、BIT VALLEY -INSIDE-。 参加はオープンなので渋谷以外の企業の方も参加いただけます。 第6回はレバレジーズ株式会社にて、マーケティング、ユーザエクスペリエンス（UX）、プロダクトマネージメントをキーワードに、領域におけるスペシャリストの方々にお話いただきます。 後半はライトニングトークスを行います。
デザインとエンジニアリングの狭間で/ design-engineering - Speaker Deck
サイバーエージェントの技術者（エンジニア・クリエイター）向けカンファレンス『CA BASE CAMP 2019』 デザインとエンジニアリングの狭間で 谷拓樹
【翻訳してみた】Google Design - モーションデザインは難しくない｜Iori Iwaki｜Motion designer
前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleのマテリアルデザインチームで働くモーションデザイナー。 彼のTwitter,Dribbleアカウントはこちら。 https://twitter.com/jonasnaimark https://dribbble.com/jonasnaimark モーションデザインはUIの表現力を向上させ、使いやすくする手立てになります。そ
DroidKaigi2019でRoomClipのデザインガイドラインを公開した話｜takaaya＠RoomClip
2019年2月7〜8日に開催されたDroidKaigi2019で、RoomClipは企業スポンサーとして参加しました。 （パーティでご好評いただいたケーキの会社です🧁✨） そこでデザインガイドラインを（抜粋ですが）公開したところ、私からしてみると意外にも好評だったようで、少しでもエンジニア・デザイナー間のやりとりが円滑になったらいいなぁを応援したくて、いただいた反応やらエピソードやら記事に書くことにした次第です。 前置き実は、アンドロイドチームから『DroidKaigi2019にデザインガイドラインを公開したい』という打診があった時は正直ぜんぜん気乗りせず。 というのも、デザインガイドラインなんて先人がいくらでも知見を発揮していますし、「今やみなさんどこでも作ってるでしょ」という思いから、採用ベースでもエンジニア目線でも特に目新しくもなく、大したフックにはならないんじゃないかと思ってたか
デザイナーはコーディングを学ぶべきか？ 2019年変わりつつあるデザイナーとコードの在り方
デザイナーはコーディングを学ぶべきか？ デザインやプロトタイプ、エディタなど、最近のツールの進化に伴い、この問題を見直す時期がきたようです。 2019年変わりつつあるデザイナーとコードの在り方、ワークフローについて紹介します。 Should design tools code? by Fabricio Teixeira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイナーはコーディングを学ぶべきか？ これからはデザイナーはデザインに専念できるワークフローに デザイナーはコーディングを学ぶべきか？ コードを学ぶデザイナーに価値がある、そう支持する人たちには2つの考え方があります。 最終的な成果物にできるだけ近いプロトタイプを作成することにより、他人によってそれが実装される可能性が高くなる（デザイナー自身ではない場合）。 デザ
カクヨムViewerのデザインを紹介します - Hatena Design Group
こんにちは。ノベルチームでデザイナーをしている id:murata_s です。カクヨムでは昨年末にiOS/Androidアプリをリニューアルし、全体的なデザインのリファインと名称の変更をしました。約2年半ぶりのメジャーバージョンアップとなり、読むことに特化したアプリであることをより押し出しています。この記事ではこのカクヨムViewerのデザインについて、簡単に見どころの紹介をしたいと思います。 カクヨムViewer よりリッチな読書アプリを目指して このカクヨムViewerのリニューアルプロジェクトは、アプリならではのリッチな体験ができる画面を増やし使い勝手を改善することで、好みの小説が探しやすくなることや読む量が増えることを目指して始まったものでした。 アプリにとってのリッチさとは何かという話ですが、私見としては、まず画面の遷移や情報の表示のされ方がシームレスで直感的であること、それから
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
素人が作ったチラシを、プロのデザイナーが作るとこうなる→デザイナーのすごさや、視覚効果の重要性がよくわかる例です
