足場 scaffolding

プレゼンテーション用のスライドテンプレートを作っていたとき、同僚からこんなフィードバックをもらいました。

Let’s explore a variety of layouts thinking about the scaffolding and structure vs fully stylized layouts.
完成形のレイアウトを考える前に、まずは骨組みや構造に着目しながら、さまざまなレイアウトを試してみよう。

文脈から、「ビジュアルデザインに入る前に、まずはテンプレートの構成を考えよう」という趣旨であることは分かったものの、scaffolding の意味が分かりませんでした。辞書を引くと「建築現場などで使われる足場」とあります。

サンフランシスコでは、建物の工事現場で歩道いっぱいに足場が組まれている光景をよく目にしていたので、その景色がすぐに頭に浮かびました。

デザインにおける scaffolding は、完成形へ至るための足がかりをつくる作業だと考えると、「土台」「下地」「骨組み」といった言葉がしっくりきます。

デザインの文脈では、ワイヤーフレームやユーザーフロー、コンポーネントの設計など、ビジュアルデザインに入る前の基礎づくりが scaffolding にあたると言えそうです。

Here’s a wireframe. We have the scaffolding built on the landing page so ready to dive in anytime!
これがワイヤーフレームです。ランディングページの骨組みはできているので、いつでもデザインに取り掛かれます。

The design team is working on optimizing the user flow, and revising the scaffolding of the product.
デザインチームでは、ユーザーフローの最適化と、プロダクトの骨組みの見直しを進めています。

scaffolding に似た言葉に scaffold があります。どちらも建築現場の「足場」を表しますが、少しニュアンスが異なります。

scaffold は、作業員が立つ足場そのものを指す言葉で、名詞だけでなく「足場を組む」「足場を設ける」という動詞としても使われます。一方、scaffolding は、足場全体の構造や、それを構成する仕組みを指す名詞です。

デザインの文脈では、完成形を支える骨組みや土台という意味で scaffolding が使われることが多く、ワイヤーフレームや情報設計などを表す比喩としても定着しています。

なお、scaffold には「絞首台」という歴史的な意味 😨 もありますが、建築やデザインの文脈では通常「足場」として理解されるため、混同されることはほとんどありません。

FEATURE

私がデザイン作業の初期フェーズでつくっているもの、つまりデザインの土台となるものを紹介します。いわば、私にとっての scaffolding です。

これらを先に整えておくことで、その後は細かなビジュアルやインタラクションに集中して取り組めるようになります。

プロジェクトの規模にかかわらず、まず最初に要件を整理します。他チームから依頼を受けてデザインが始まる場合でも、質問を重ねながら、誰に向けた施策なのか、プロジェクトのゴールは何か、スケジュールはどうなっているのかを一つのドキュメントにまとめます。

あとからコピーライターやエンジニアなど、ほかのメンバーが加わっても、このドキュメントを共通の拠り所にできます。まさに、その後のデザインを支える scaffolding をつくる作業です。

プロダクトデザインやウェブサイトの改修、プレゼンテーション用のスライドなど、どのようなプロジェクトでも、まずは参考になる事例を集めます。

たとえば mmhmm のウェブサイトのフッターを改修した際には、さまざまなサービスのフッターをキャプチャして並べました。ただ集めるだけではなく、レイアウトや情報の整理の仕方が似ているもの同士で分類していきます。

そうしてパターンを分析することで、どのような設計が一般的なのかが見えてきます。同時に、自分のデザインの方向性が定まったり、新しいアイデアのきっかけになったりもします。

Cloaked というモバイルアプリのオンボーディングをデザインしたときは、画面デザインに取りかかる前に、まずユーザーフローを作成しました。

目的は、ユーザーがホーム画面にたどり着くまでの流れを整理することだけではありません。今回のプロジェクトでどこまでを扱うのか、デザインの対象範囲を明確にする役割もありました。

Cloaked のプロジェクトでは、ユーザーフローに加えてワイヤーフレームも作成しました。体験の流れや UI の骨組みを整理するだけでなく、UX ライターと一緒にコピーを検討・編集するための土台としても役立ちました。

これらの足場づくりを怠った結果、デザインを進める途中で何度も手戻りが発生し、想定以上の時間を費やしてしまったことが何度もありました。

また、つくった足場についてチームと認識を合わせておくことも重要です。土台が間違っているまま詳細なデザインを作り込んでしまうと、後から修正するコストは一気に大きくなってしまいます。

どのような scaffolding を用意するかは、デザイナー個人やチーム、会社によってさまざまです。しかし、完成形へ向かう前に足場を整えるという考え方は、多くのデザインの現場に共通しているように思います。

📎 What is scaffolding in information architecture

📎 Scaffold vs Scaffolding: Which Should You Use In Writing?

📎 word choice - Scaffold or scaffolding? - English Language Learners Stack Exchange

📎 word choice - Is there a difference between "scaffold" and "scaffolding"? - English Language & Usage Stack Exchange

📎 流離の翻訳者：「足場」 “scaffolding”と“scaffold”