生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に

この記事では、デザインシステムを作成するときの基本ガイドをまとめています。 この記事は3つのパートで構成されています。 デザインシステムを理解する（デザインシステムとは何か、いつ作るべきか？） デザインシステムの作成（作成プロセスとやっておきたい項目） デザインシステムの具体的なサンプル例（デザイナーとデベロッパー、それぞれの観点より） デザインシステム追加の検討事項（その他のコンセプトや参考文献など） *この記事では、Webサイトやアプリ、オンラインサービスなどを表す包括的な用語として、「プロダクト（Product）」という言葉を使用しています。 この記事のコンセプトをイラスト化するために作成した、デザインシステムを公開しています。ご自由にお使いください。 Basic Design System – Figmaファイル デザインシステムを理解しよう デザインシステムとは？ デザインシステ

3年前に、図解の基本をまとめた本『図で考える。シンプルになる。』を書きました。その内容から、エッセンスを抽出したのが本noteになります。 （１）「幕の内図解」と「イチオシ図解」 図には、大きく分けて、2つのアプローチがあります。 ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。 たとえば、桃太郎の話を「幕の内図解」のアプローチでまとめてみたのが、つぎの図です。 登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。 この図を使って、人に説明しようとすると、「まず、お婆さんですが……」「つづいて、お爺さんですが……」といった具合に、「お婆さん」「お爺さん」「桃太郎」それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。 相手がじっくり聞く耳を持っ

この記事では、ウェブサイトを作成するときによくある間違いを、具体的なサンプル例と解決テクニックと一緒にまとめています。 一般的なランディングページでありがちな間違い 1. コンテンツがブロックに分割されていない 論理的なブロッグにグループ化することで、ユーザーが情報を理解しやすくなります。パディングを120〜180pxに設定し、背景色を活用して文字テキストだけのコンテンツを分割することができます。 コンテンツ間のパディングはほとんどなく、コンテンツを分割するために背景色の利用が必要。結果として情報を要約するのがむずかしく、どこに何が書かれているのかわかりにくい（上） パディングを十分に確保し、ブロックごとに色で区切られており、どこまでがコンテンツに含まれるのかすぐ分かります（下） 2.Webページのアイテム間の余白スペース幅が不揃い 論理的に分割されたブロックの周りには、同じサイズのパディ

大成紙器製作所は、紙の道具「紙器具（しきぐ）」を提案するブランドです。 「紙器具」とは、紙が私たちの暮らしに寄り添う道具として考え、 その価値を再発見し「伝える・収める・設える」を理念とすること でつくられていく新しい日用品です。 また、2017年、大成紙器製作所を立ち上げたTAISEI株式会社は、 大阪を拠点とし、紙箱や紙管を中心とした印刷・加工の技術や そのネットワークを活かした会社です。1919年創業時の大成紙器 製作所の名を掲げたブランドは、紙から生まれる文化を耕し作り手 と使い手をつなげる試みを目指しています。

フォームのデザインや実装が苦手という人は少なくないと思います。スマホ時代における、ユーザーにとって利用しやすいフォーム実装のテクニックを機能・ビジュアルデザイン・実装コードごとに詳しく解説したフォーム制作実装ガイドを紹介します。 さまざまなプロジェクトで利用できるフォーム制作の知識をしっかりと身につけることができます。 本書はSmashing Magazineから2018年に発行された「Form Design Patterns」の翻訳版。洋書だと実例が英語のままで、日本語環境ではあまり参考にならないということがありますが、本書は可能な限り日本語環境に適するように翻訳されています。 本書は本日発売！ 書店で見かけたら、ぜひ手にとってみてください。300ページ超で、かなりのボリュームです。 Form Design Patterns シンプルでインクルーシブなフォーム制作実践ガイド ISBN 9

Make your ideas look awesome, without relying on a designer.Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

難しいことをしなくてもイラストは描けます そもそもデザイナーじゃないんで、絵を描くのは難しいんじゃないかなと思っていたり、デザインはするけど、イラストを描くのはきびしい。illustratorでイラストを描いてみたいけど、なんだか難しそう。adobeCCを契約していてPhotoshopは使ってるけど、illustratorはちょっと、ハードルが高そう。と思っていませんか？ そういう人はコンピュータの力を使いましょう。illustratorなら、手書きのように何度も描いたりする必要はありません。どんどん直して調整すればいいんです。昔、習字であとから筆入れして、形を整える裏技使いましたよね？やり直しがきくんです。 illustratorには、ペンで描くような「ペンツール」がありますが、絵心がない人には、一番のハードルになるポイントでしょう。慣れるととても便利なツールなんですが、かなり癖がありま

世界初の１兆ドル企業になりつつあるAppleは、あらゆる製品開発プロセスの中でも最も成功した例かもしれません。デザイナーはAppleから多くのことを学び、自分のデザイン環境に取り入れることができます。 Appleは秘密主義で知られています。Steve Jobs氏の時代は、Apple内部でどんなビジネスが行われているのかを探り出すことはほとんど不可能だったでしょう。社内のデザイン手法がビジネスマーケットにおける優位性の鍵だとしたら、秘密主義であるのも不思議ではありません。 『Inside Apple: How America’s most Admired and Secretive Company Really Works』の著者であるAdam Lashinsky氏は、秘密にされてきたAppleのデザインプロセスに注目してきました。秘密に覆われている部分もまだありますが、ハイレベルなデザイン

The best resources for Learning Design Tired of seeing the same old boring animated websites? Check out landing.love to watch & learn from the best.

フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる

SeanはCodal社の技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 UXとUIの違いを知らない人に説明する最善の方法は、比喩を使って説明することです。UIが車の見た目だとすると、UXは運転の仕方です。またUIが出会い系のプロフィールだとしたら、UXは出会い方です。これらの比較は違いを上手く表している一方で、UIの複雑性を軽視していることもあります。 UIとは、単なる塗装やTinderのプロフィールではありません。UIとは全体の環境です。ピクセルひとつひとつが重要であり、多面的な構造を持っています。私たちは、サービスのプラットフォームを選ぶときは全体の体験を最適化できるよう注意深く考えます。一方で、配色理論やレイアウト、タイポグラフィ、フォントの選択などの小さな要素については、数秒以上かけて考慮されることは滅多にありません。 そのため

There are thousands of people all over the world who create websites on Tilda. This article is based on recent research by my colleagues and I. We analysed common mistakes that people make when they create websites using our platform. Here is a list of dos and don'ts applicable to any web design tool or service you use.

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。

100万以上のロゴデザインをAIに学習させることで、ロゴの善し悪しを「独自性」「読みやすさ」「カラー/コントラスト」「総合」の4点で点数化してくれるようにしたのが「Logo Rank」です。自分のロゴがロゴとしてどのくらい適しているのかを調べたい時に便利なツールとなっています。 Logo Rank - Check your logo design with deep learning http://brandmark.io/logo-rank/ Logo Rankの使い方は非常にシンプルで、「Drop here or click to upload logo」と書かれた部分に調べたいロゴをドラッグ＆ドロップするだけ。 まずはGIGAZINEのロゴについて調べてみました。判定項目は「Uniqueness(独自性)」「Legibility(読みやすさ)」「Colour/Contrast(カラー

最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

はじめまして、ZILMOO株式会社(www.juusando.com)のUXUIデザイナーのハフィドと申します。私はモロッコ出身で、日本への留学、大手制作会社をへて現在の会社を立ち上げました。子供の頃からロゴデザインやグラフィックデザインの活動をしており、大学では哲学・心理学を学んでいました。現在は、UXUIデザインなどに携わっています。 また、東洋美術学校・日本電子専門学校でUX/UIデザイン講師としても活動しています。 2014年からコミュニティ(UXUI Designers)を主宰し、イベントや勉強会などを定期的に開催しています。 Twitter：https://twitter.com/hafidbourhim Dribbble：https://dribbble.com/juusando UUDコミュニティ：http://uuds.peatix.com/ , https://www.

Editors PickFeaturedFormsGraphicsInspirationUI 20 Creative Login Form Examples For Your Inspiration Nancy YoungApril 3, 20171 Comment018.1k We see login forms everywhere on the web these days. Do you use social media networks? Do you send emails? Do you buy things online? All of these processes require a signup form of some kind. The login form design defines the nature of a website, it’s goals an