コンポーネント設計がReact Nativeの開発速度に直結する CTOの Shoken です。キッチハイクでは1年半前に0ベースからReact Nativeでアプリ開発を始めました。React Nativeアプリを長期的に開発・メンテナンスする際に重要になるのがコンポーネント設計です。1年半の開発を通して、デザイナーとエンジニアがコンポーネント設計での共通認識を持っていることが、機能追加・修正などの開発速度に直結するという学びを得ました。この記事では、キッチハイクアプリのコンポーネント設計の考え方を紹介します。 コンポーネント設計がReact Nativeの開発速度に直結する Atomic Designという共通言語 コンポーネントを構成する4つの要素 "デザインとしての構造性" と "コードとしての再利用性" ButtonはAtomなのかMoleculeなのか問題 Atomic Des
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
デザインシステムを作っているプロダクトチームは多くあり、デザインシステムも発展しています。 私たちはAtlassianのAlex氏（デザインチーム主任）とVenn氏（シニアデザイナー）に、どのようにAtlassianのデザインガイドライン（ADG）を発展させてきたのかと、将来この業界がどこへ向かうと予測しているのかを直接伺いました。 縦割り状態を解消する Atlassianのデザインシステムチームは、デザインや開発、コンテンツ、イラストなどさまざまな分野をまとめています。Alex氏とVenn氏は、これらの分野を相互に繋げることこそが業界の将来にとって重要だと信じています。 デザインシステムにおける微妙なニュアンスのすれ違いなどはそれぞれの分野の違いから来ていると考えられており、ADGのチームはこれらの縦割りな状況は今後なくなるであろうと考えています。Airbnbの「React Sketch
なぜスケールすべきなのか よく多くの改善、より早い提案・対応が求められている今日。エンジニアは昔から大規模化して動くための施策と実践を続けていますが、デザイナーは大規模化の歴史がないといっても過言ではありません。エンジニアのように確固したワークフローの構築が難しいというのもありますが、デザインは『個人プレー』で作るものというニュアンスが強かったという背景もあると思います。 しかし、いつまでも個人に依存したデザインをしていると、新しい施策や改善がひとりのデザイナーの動き次第になります。もちろん、それでも運用可能な環境はありますが、増え続けるビジネスサイドの要望に対応するために、ひとりでデザインを続けるのは困難です。ひとつひとつ対応してるときは、「分かりやすい一貫性のあるデザインを作ろう」と思って取り組んでいたとしても、全体を振り返ると実はそうではないということはあります。 ではどうやってデザ
Jerry Cao氏は、UXPinのコンテンツストラテジスト。プラットフォームのワイヤーフレーミングとプロトタイピングを行うためのアプリ内およびオンラインのコンテンツを開発しています。 Diana Mounter氏はGithubのプロダクトデザイナーおよびデザインシステムのリーダーです。 デザインと開発において15年近いキャリアをもつ彼女は、Etsyでシニアデザイナーを務めた後、2015年末にGithubのチームに参加しました。 私たちはこのインタビューで彼女に、デザインシステムにおけるベストプラクティスと、デザインシステムの作成・保守の経験から学んだ教訓について聞きました。このインタビューは、動画で見ることもできます。 また、デザインシステムの利点やプロセスについてもっと知りたければ、無料のeブック『Why Build a Design System？』をダウンロードしてください。 Gi
こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
Chris氏はプロダクトマーケティングマネージャーであり、デザインとタイポグラフィのバックグラウンドを持っています。アカデミー・オブ・ファイン・アーツでインストラクターを務め、学生にデザイン理論とソフトウェアデザインについて教えています。 デザインシステムをどのように作成すれば、サービスが拡大する際にデザイナーや開発者がいつも直面する問題を解決できるのでしょうか。 少し前に、UXPinのCEOであるMarcin Treder氏は、社内のデザインシステムの構築に役立つ一連の記事を執筆しました。業界のリーダーたちにインタビューすると、世界中のチームにおいて頻発する問題はデザインの一貫性の欠如であるとわかりました。また、デザインチームやユーザーにとって、この一貫性の欠如は数多くの問題を引き起こす可能性があります。 ユーザーの混乱：同じアクションなのにさまざまなパターンがあると、ユーザーは混乱して
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムは、ビジュアルやインタラクションだけに関するトレンドではありません。しかし、間違いなくルック＆フィールに影響を与えています。なぜなら、Webにおけるトレンドを生み出すデザイン原則やツール、ライブラリー、コードを提供しているからです。 デザインシステムは一過性のトレンドを超えて、2018年以降も続くベストプラクティスになりつつあり、将来的にはWeb全体でデザインの一貫性が向上すると期待できるでしょう。 これが何を意味をするかと言うと、すべてのWebサイトが同じ見た目になるということではなく、それぞれのWebサイトにおいて一貫性が保たれ、ユーザーが期待する機能性やユーザビリティを提供できるようになる
Webサービスづくりにおけるデザインツールは、プロダクトの表現、チームのコミュニケーションや生産性に大きな影響をもたらす場合があります。流行やワークフローを調べながら、どんなデザインツールが良さそうか考えてみます。 各ツールの特徴Prototyping Toolsというサイトで、プロトタイピングツールをインタラクションやユーザーテスト、コラボレーションなどの観点で比較できました。 Affordability × Interactivity × Export to Code Speed × Collaborating × Free さらにPrototyping Compareの方で、よく聞いたことがあるツールに絞りこんでみました。こうして並べてみると、AdobeXDとFigmaは比較的安価でWindowsユーザーも使えるんですね。クライアントワークでのコミュニケーションで重宝できそう。 20
「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。 実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UI Kit.sketch ・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています（引用：結局デザインシステムは何なのか） スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザインコンポーネントをまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験を提供できるように開発できるようにしようという取り組みがよく見られます。 DropboxやAirbnbなどをはじめとして積極的に自社サービスの「デザインシステム」を公開している企業も多く見られるようになってきました。 それにともなって、自分たちでも作ってみよう・開発現場に取り入れてみようと取り組み始めているという話もよく聞くようになってきましたが、どんな風にどんなところから手を付けて良いか？というのは良く聞く質問です。 「デザインシステム」を考えていくにあたって、設計の手法・考え方の一つにAtomic Designとい
公開日 : 2015年10月17日 (2019年1月26日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブサイトやアプリケーションの開発や運営においては、一貫性のあるユーザーインターフェース (UI) を採用し、維持することが、ユーザビリティ上重要になります。UI の一貫性を保つためには「パターンライブラリー」を用意し、プロジェクト関係者の間で共有しておくと便利です。 パターンライブラリーとは、サイトやアプリを構成する UI コンポーネントをパターン化して再利用できるように、一覧化したものです。「スタイルガイド」と呼ばれることもあります。 パターンライブラリーの内容 プロジェクトによってパターンライブラリーに含まれる内容は様々だと思いますが、主な構成要素としては以下が挙げられます。 UI コンポーネントの外見およびインタラクション 実装に用いるソースコード (HTML
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやServiceWorkerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「長期運用サービス改善のために構築した開発環境の話」に登場したのは、koyano氏。DMMにおいて長期間運用されているサービス「DMM動画」の改善のために、Vue.jsを使って取り組んだことについて語りました。講演資料はこちら 長期運用サービス改善のために構築した開発環境の話 koyano氏：それでは始めさせていただきたいと思います。よろしくお願いします。 （会場拍手） 「長期運用サービス改善のために構築した開発環境の話」をさせていただきたいと思います。 まず自己紹介
公開日 : 2017年5月5日 (2019年1月26日 更新) カテゴリー : アクセシビリティ ウェブサイトやアプリケーションの開発や運営においては、UI コンポーネントを一覧化した パターンライブラリー (またはスタイルガイド) を用意しプロジェクト関係者の間で共有しておくと便利です。私自身そうですが、ウェブサイトのリニューアル案件などで、情報設計 (IA) と併せてパターンライブラリーをまとめることもあるのではないでしょうか。 パターンライブラリーは、デザインの品質を保持するうえで有効なツールですが、その一方で、適切に継続運用することの難しさも実感しています。たとえば : パターンライブラリーに定義されている以上のデザインをしない。よりよいデザインにしようとする思考が停止する。デザインしない/できない理由をパターンライブラリーのせいにする。 パターンライブラリーの「ありあわせ」で済ま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く