Space, grids, and layouts #3
FigmaのDesign Systemに掲載されている記事をよんでみました。
＃2の続編です。元記事は→Spacing, grids, and layouts (designsystems.com)
和訳はDeppL / chat GPTで行ってみました。個人的に重要そうなところは太字にしてみています。
Composing a layout
Layouts are the culmination of defined spatial rules and the organization of content into one single composition. Bringing together your content into thoughtful structures is the easy part, making it all flow together with a clear hierarchy across a sea of changing platforms and screen sizes is the hard part.
和訳：レイアウトは、明確に定義された空間ルールとコンテンツの一つの統合された構成における集大成です。コンテンツを考え抜かれた構造にまとめることは簡単なことですが、大量の変化するプラットフォームやスクリーンサイズに明確なヒエラルキーを持たせ統一させるのは難しいことです。
Defining the scaling logic is now a requirement for both native and web apps. From desktop to mobile and everything in between, the screen sizes and scales can vary widely. There are three main concepts for crafting a layout that can scale gracefully. Some designs will call for all three of these concepts at once.
和訳：スケーリングロジックを定義することは、今やネイティブアプリとウェブアプリの両方にとって必要不可欠です。デスクトップからモバイルまで、そしてその間にあるあらゆるもので、画面サイズや縮尺は大きく異なります。優雅に拡大縮小できるレイアウトを作るには、3つの主要なコンセプトがある。デザインによっては、これら3つのコンセプトを同時に必要とするものもあります。
1. Adaptive
An adaptive layout is one that changes entirely based on the format it is presented in. For example, loading different experiences based on desktop, tablet, and mobile devices. This promotes a more tailored experience for the user’s device but can become expensive to rebuild the same functionality into multiple formats.
和訳：アダプティブ・レイアウトとは、表示されるフォーマットに応じて全体が変化するレイアウトのことです。例えば、デスクトップ、タブレット、モバイルデバイスに基づいて異なるエクスペリエンスをロードします。これは、ユーザーのデバイスに合わせた体験を促進しますが、同じ機能を複数のフォーマットに再構築するにはコストがかかります。
2. Responsive
A responsive layout is fluid and can adapt to a changing format size. This is a common practice on the web and has become a necessity for native apps as screen size variations have increased. This allows you to build a feature one time and expect it to work across all screen sizes. The downside is that touch and mouse interactions are very different and it’s expensive to account for all devices and use cases.
和訳：レスポンシブ・レイアウトは流動的で、変化するフォーマットサイズに適応することができる。これはウェブでは一般的な手法であり、画面サイズのバリエーションが増えるにつれ、ネイティブアプリでは必須となっている。これにより、ある機能を一度構築すれば、すべてのスクリーンサイズで機能することが期待できる。欠点は、タッチ操作とマウス操作ではインタラクションが大きく異なるため、すべてのデバイスとユースケースを考慮するにはコストがかかることだ。
3. Strict
This layout will not flex with a changing format size. Fixed layouts are often used to promote a specific interaction or informational layout that would be degraded at a smaller size. Data tables and graphs will often create a scrollable strict layout at a specific size because the legibility and interactions would be significantly degraded below a certain size.
和訳：このレイアウトは、フォーマットのサイズが変わってもフレックスしません。固定レイアウトは多くの場合、特定のインタラクションや情報レイアウトを促進するために使用されます。データテーブルやグラフは、特定のサイズ以下では読みやすさやインタラクションが著しく低下するため、特定のサイズでスクロール可能な厳密なレイアウトを作成することがよくあります。
How do I implement a spatial system on an existing set of designs?
Starting from scratch is easy. The challenge is retrofitting an existing set of designs. The first step is to bring your other collaborators into the conversation. Convincing team members and stakeholders to change a current product development process can be difficult without laying out the value relative to their role. Engineers want clearer requirements and to spend less time with a fussy designer telling them the padding is off. Product managers want user and business value delivered faster. Designers want their designs to be translated directly into coherent user experiences quickly and efficiently. All of these things can be attained by investing in a shared spatial system.
ゼロから始めることは簡単です。課題は、既存の設計を改造することだ。最初のステップは、他の協力者を対話に参加させることだ。チームメンバーや利害関係者に、現在の製品開発プロセスを変更するよう説得するのは、彼らの役割に見合った価値を提示しなければ難しいかもしれない。エンジニアは、より明確な要件を求め、うるさいデザイナーに詰めが甘いと言われる時間を減らしたいのだ。プロダクトマネージャーは、ユーザーとビジネスの価値をより早く提供することを望んでいる。デザイナーは、自分たちのデザインが首尾一貫したユーザー体験に迅速かつ効率的に直接変換されることを望んでいる。これらのすべては、共有空間システムへの投資によって実現できます。
Start small. Rebuilding everything to fit into a newly defined spatial system can seem daunting. Look for simple components to convert, like buttons, and then spread into their common sibling elements, like form fields. Build up momentum and understanding with your team along the way. Policing the design system is like herding cats. Empower the folks, like engineers, who will be implementing the system to maintain and enforce it.
和訳：小さなスタートから始めましょう。新しく定義された空間システムに合わせてすべてを再構築することは大変に見えるかもしれません。ボタンなどの単純なコンポーネントを変換する機会を見つけ、それから共通の兄弟要素であるフォームフィールドなどに広げていきます。チームと共に進みながら勢いをつけ、理解を深めましょう。デザインシステムの管理は、猫を追いかけるようなものです。システムを実装し、維持し、強制するエンジニアなどの関係者に力を与えましょう。
Make balanced decisions. Prove to stakeholders how this work reduces design/tech debt and improves speed along the way. After completing a section of work, like organizing your icon workflow from design to implementation, take a moment to capture the before and after by interviewing the team. Use those quotes from teammates about the time saved to reinforce the value of your work. Whether you’re working for a scrappy startup or a massive enterprise, the common reason to not invest in design system initiatives is that the business is directly sustained by providing value for users not organizing the perfect spatial system.
和訳：バランスの取れた決定を下してください。ステークホルダーにこの作業がデザイン/テクノロジーの負債を減少させ、速度を向上させる方法を示してください。例えば、デザインから実装までのアイコンワークフローを整理するような作業セクションを完了した後、チームへのインタビューを通じて前後の状況を捉える時間を取りましょう。チームメイトから得た時間の節約に関する引用を使用して、あなたの仕事の価値を強調します。スクラップなスタートアップで働いている場合でも、大規模な企業で働いている場合でも、デザインシステムの取組に投資しない一般的な理由は、ビジネスを直接的に維持しているのは、ユーザーに価値を提供することで、完璧な空間システムを組織化することではないからだ
Keep up the momentum. Once you begin, have a vision and a date in mind to complete the changes. Getting stuck with half of your work adhering to a spatial system and the other half in limbo is a rough place to be. It makes creating new value for your users more complex. Have a plan with clear milestones, create visibility for the team, and share progress along the way.
和訳：勢いを維持しましょう。一度始めたら、変更を完了するためのビジョンと日付を心に留めてください。空間システムに従う作業の半分と立ち往生の半分に詰まることは、非常に難しい状況です。新しい価値をユーザーに提供することが複雑になります。明確なマイルストーンを持つ計画を立て、チームに可視性を持たせ、進捗状況を共有しましょう。
まとめ
これで終わりです。今回ChatGPTとDeepleを使った感想としては最終的によみやすくするには人間が言い換える作業が必要だと思いました。肝心の中身についての気づきは下記です
デザインシステムがユーザーにあたえるブランド価値
グリッドの種類（クラシカルデザイン領域での代表的な３種類）
レイアウトの種類（WEBに関して３種類）
組織の中でデザインシステムを改修するために重要なこと
空間システムの改修はビジネス維持の観点で直接的ではないため難しい
現在担当しているプロジェクトでデザインシステムの重要性を、デザイン部以外の人に客観的にわかるように説明する報告書をかかないといけないので、まぁまぁ参考になりました。
この記事が気に入ったらサポートをしてみませんか？