Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
CSS Gridとatomic Designで1年間サイトを作ってみたよ その1 | ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
WorpPressのCMS案件や、コーポレートサイトの案件、店舗サイトの案件やWebアプリ案件などに使っています。 クライアントなどは出せませんが、Atomicモジュールを大量に作って納品した案件もありました。 1年間、CSS Gridと Atomicモジュールを使ってWebサイトを作ると、モジュールの問題点も出てきます。何回か記事でまとめていきたいと思います。
Sketchを使ったAtomic Designのワークフロー
SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドラインをまとめたものです。 ほとんどの場合、デザインシステムはスタイルガイドとコンポーネントライブラリから構成されています。加えて、ブランドバリューや、口調や雰囲気といった要素を含めることもあります。デザインシステムを導入する際のポイントは、プロダクトやブランドについての唯一の正しいソースとして運用される基準を作ることにあります。 Googleのマテリアルデザインは構築されたUIデザインシステムの一例です。マテリアルデザインは2014年に、一貫したAndroidアプリをデザインし開
「Atomic Design & Design Systems」をお話させて頂きました | よりデザイン
DMM.com ラボさまの社内勉強会にお声がけ頂き、「Atomic Design & Design Systems」というテーマでお話させて頂きました。 当日の構成 勉強会のテーマがAtomic Designについてだったので、前半はGUILDさん勉強会でお話させて頂いた内容を少し持ってきました。 後半ではAtomic Designの視点をもう少し広げて、Design System（毎回デザインシステム表記とどっちにしようか悩む）全般について、僕が調べたり考えたことをまとめました。 と言っても自分は何かしらのデザインシステムを取り入れたり実践したりと言った経験はありません。そのため、内容のほとんどは海外の事例や記事の引用・意訳になります。Design Systemについてまとまった情報が知りたい！という方には有益かと思いますが、基本的なことは知ってるよーという方にはあまりお役に立てないと思
2017年、デザインガイドラインについて考える。｜Yuya Furusato｜note
株式会社rootのUIデザイナー 古里祐哉です（@remmyfurusato）。 rootでは、サービスの立ち上げやリニューアルに伴う、UI/UXデザインをご支援しています。 さて、今年を振り返えると「デザインガイドラインに注力した」年でした。デザインガイドラインを必要とされるクライアント様には共通点があります。 ・レイアウトパターンやパーツの使い方が定義されていないで、設計者やエンジニアが迷う。 ・結果、サービス全体の一貫性がなく使いづらい。 このような課題を抱えるクライアント様からのご依頼を多くいただきました。サービス開発の現場で、徐々にデザインガイドラインの重要性が広まってきているのではないでしょうか。 デザインガイドライン作成を通して考えたことをまとめたいと思います。 デザインガイドラインとは？ デザインガイドラインの定義は「サービスやプラットフォームのデザイン方針を示したドキュメ
Atomic design: how to design systems of components
Nowadays, digital products must be able to exist across any and all devices, screen sizes, and mediums at the same time: Every type of medium can now display our interfaces elementsSo why the hell are we still designing our products by “page” or by screen?! Instead, we should be creating beautiful and easy access to content, regardless of device, screen size or context. By keeping this in mind and
ui component evaluate and design — UIの設計・評価は、Atomic DesignやOOUXのようなコンポーネント指向
アプリケーションのUI（主にGUI）の設計・評価をする際、ほとんどの場合は評価の範囲が画面（ページ）単位で行われることが多く、この設計・評価のフォーカスの粒度についてもっと考えたほうがいいのではないかと最近よく思います。 画面単位での評価をしていてよくあることは…画面 A 画面 B どちらにもリストがあり、そのリストは同じリストアイテムを表示していたりする場合でも、 「画面 Aとリストがー…」 「画面 Bのリストがー… 」 と同じリスト要素なのに画面単位で話をしてしまうことがよくあります。これはかなり無駄なことをしているように思えます。 もちろん、《そのデザイン要素はどういうコンテクストなのか》を議論する上で画面を持ち出すのは必要な事と思いますが、そもそもそのコンテクストは何に依存するものでしょうか？ それはコンポーネントとして分解していくと実は画面そのものにあまり依存していない事が見えて
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
ここ半年開発していた動画サービスをベータ版ながらリリースしました（正式リリースは 4 月）。そのサービスの開発において、以前投稿した Atomic Design を採用しました。本記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基本的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人（たとえばデザインよりもエンジニ
Atomic Design by Brad Frost
We're tasked with making interfaces for more users in more contexts using more browsers on more devices with more screen sizes and more capabilities than ever before. That's a daunting task indeed. Thankfully, design systems are here to help. Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster
The Unicorn Workflow, Design to Code with Atomic Design Principles and Sketch
Walk with meBrad Frost, the stunning human being in the video above, is largely responsible for the system this article is about. Atomic Design was developed in response to the responsive, digital world we live in. We’ve been making style guides, elemental guidelines, mood boards and many other tools to help make our designs easier to understand for years now. Similarly, developers have been using
The “Other” Interface: Atomic Design With Sass — Smashing Magazine
We’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future. But we shouldn’t forget that developers are users, too. Therefore, our convention for naming and organizing files is critical if we are to ensure active development in the future. But do we really design the partials, files and director
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create atomic design systems with Pattern Lab - Pattern Lab
Atomic Design & creativity
Atomic Design – by Brad Frost @ Beyond the Desktop Conference - Unmatched Style