デザインシステム

SIGMA fpに感じる未来

SIGMAからLマウントの「fp」という新しいコンセプトのミラーレスカメラが突然発表されザワザワとしたワクワクを感じています。

ミラーレス一眼はこれまで主流だった一眼レフに対抗する技術的な観点から発想されてきましたが、fpは全く新しい立ち位置から生まれた「システムカメラ」だったからです。

販売上の戦略として、カメラ売り場に置いてもらうために「カメラ」というフォーマットに合わせたプロモーションが

もっとみる

アメリカ政府のWebデザインシステム(4) スタイルガイド

(1)(2)(3)ときてようやくガイドライン本体です。Components、Design Tokens、Utilities、Page templatesに分かれています。

コンポーネント

ComponentsはボタンやヘッダーなどUIを構成する部品です。

USWDS components are designed to set a new bar for simplicity and con

もっとみる

アメリカ政府のWebデザインシステム(3) デザイナー向け

(1)(2)に続いて、次はデザイナー向けのページです。前にも書きましたが、誰が何をまず読むべきかという情報が整理されているのは良いですね。

イントロ

USWDS offers a flexible yet coherent visual style you can apply to any government website. Our visual style offers a clean,

もっとみる

アメリカ政府のWebデザインシステム(2) ディベロッパー向け

前回の続きで、まずはディベロッパー向けのページを見てみます。

Progressive Enhancement

USWDS components are built on a solid HTML foundation, progressively enhanced to provide core experiences across browsers. All users will have

もっとみる

<空想新書> メタ思考トレーニング  (PHPビジネス新書)

毎月なんらかの新しい「思考法」が発明されています。きっと良い思考法があるに違いありません。

全ての思考法は、”思考”というものを思考することに他なりません。それこそ「メタ思考」なのです。

メタとは、主体を1つのオブジェクトと定義し、そのオブジェクトが外側や上位階層から見て「どのようなものであるか」ということをまとめたものです。

まとめ方には、具体的な情報を羅列することでメタ情報とする場合と、

もっとみる

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアの葉栗です。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)のデザイ

もっとみる
ありがとうございます!ぜひシェアもお願いします!
66

Cosmic Designで設計するUX

この世の中にある全てのモノゴトは、単独で存在したり機能しているのではなく、他の製品やサービス、利用環境の中で意味と役割を持ち存在しています。

これが「システムデザイン」の基本的な考え方です。

ではシステムデザインとはどのようなものなのでしょうか。システムの形態は多様でまた見えにくいものですが、理解を進めるためにいくつかの代表的なパターンを示しておきます。

システムに合わせてデザインする

もっとみる

Cosmic Designのプロトタイピングツール <AdobeXDに期待すること>

Atomic Design領域の製品プロトタイピングは、操作体験ができて、アセット書き出しで開発につながるなど、ツールが充実してきており、理想に近づきつつあります。

それに対して、製品やサービスの組み合わせによって作られるCosmic Design領域のシステムデザインでは、体験できるプロトタイプを簡単に作ることがまだできません。そのようなツールが無いからです。

現在は、パワーポイントで構成図

もっとみる

デザインシステムに失敗する方法

デザインシステムを導入、運用する上で失敗しがちな例とその対策について。いくつかの現場で実際に起きたことを元にして書いています。Abnbの記事を読み直していて思い出したことのメモです。

ここでのデザインシステムとはwebやアプリケーションなどのプロダクトを中心にデザインに用いるパターンや要素を再利用可能な形で標準化したもの、くらいの意味です。ブランディング、タイポグラフィ、色、コンポーネント、写真

もっとみる

Atomic DesignからCosmic Designへ視線を上げよう

製品の開発を構造的におこなうフレームワークとして「アトミックデザイン」という考え方や仕組みが注目を集めています。

原子、分子、生体、テンプレート、ページという風に、私たちが普段触れている製品やサービスを分解し要素に分けていくことで、それを開発するものです。

再利用できるデザインライブラリーを用意しておくことで、より高い次元のデザインに注力することができるという面がありますので、アトミックデザイ

もっとみる