この寸法線、どっちが正解？ 図面制作のセンスを磨こう
現場で通用するデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
グラフィックデザイナーの鷹野です。
ウェブ制作では、設計図として「ワイヤーフレーム」を作成することがあります。
図面を作成する場面も含め、その際に欠かせないのが、サイズを示す「寸法線」や、説明を追記するための「引き出し線」です。
これらは単なる補助ではなく、情報を正確に伝えるための重要な設計要素です。
早速ですが、クイズです。
以下の3つの作例を見て、AとB、あなたはどちらの「寸法線」が適切だと感じますか？
1問目「ワイヤーフレームの寸法線」（難易度★）
各パーツのサイズや要素同士の間隔の距離を寸法線として書き入れる場合、AとB、どちらの寸法線の書き方が好ましいでしょうか？
2問目「引き出し線の端点」（難易度★）
「ワイヤーフレーム」では、ボタンの機能などを書き入れることがあります。
その際、AとB、どちらの引き出し線が好ましいでしょうか？
3問目「グループガイド」（難易度★★）
複数の要素に対して「コの字」で囲むガイドを作成する場合、AとB、どちらが好ましいでしょうか？
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
あなたがよいと感じた寸法線や引き出し線は、AとBどちらでしたか？
ではここからは、各設問で何が違っていたのかを、具体的に見ていきましょう。
また、作例で用いられていたデザインテクニックについてもご紹介します。
1．ワイヤーフレームの「寸法線」は、対象物から離して可読性を高める
まずは、1問目から振り返っていきましょう。
この作例は、ワイヤーフレームで使われる「寸法線」の描き方を問うものでした。
私が考える答えは「A」でした。
一見、どちらも長さを測っているように見えますが、正確な情報を伝えるための「寸法線」には、守るべき基本のルールがあります。
寸法線の基本的な記入手順
寸法線は以下の3要素で構成されます。
- 寸法補助線：寸法を記入する対象の両端に描く線。対象の両端から少し離して垂直に引く
- 寸法線：補助線の間を結び、矢印を付ける
- 寸法数値：中央に配置する
作例Bは、補助線が短く、対象に近すぎます。輪郭線と干渉すると、寸法線との区別が曖昧になります。
プロの現場では、対象物と補助線の間に「わずかな隙間」を作ることで、情報の整理を行っているのです。
Illustratorの「寸法ツール」で、正確な寸法線を作成する方法
これまで手作業で苦労して描いていた寸法線ですが、2023年12月リリースのIllustrator 2024（28.1）から、Illustratorに「寸法ツール」が追加されています。
このツールを使えば、先ほど解説した寸法線のルールを、誰でもカンタンに、そして正確に再現できます。
ツールパネルの「寸法ツール」をクリックすると、ウィジェットが表示され、長さ、角度、径の3つのツールを切り替えられます。
長さ、角度、径（半径/直径）を計測しながら入力できるだけでなく、対象のオブジェクトを変形すると、それに合わせて値も更新されます。
長さ寸法は、以下の番号順に3回のクリックで記入できます。
線幅や種類、フォントなどの設定は、コントロールパネル、または「プロパティ」パネルで後から編集できます。
今回のクイズで取り上げたような、「対象物から少し離す」といった基本的な記入ルールも最初からしっかり押さえられているので、ワイヤーフレームの作成がこれまで以上にスムーズになります。
2．引き出し線の「端点」には「●（マル）」を付ける
続いて、2問目を振り返りましょう。
この作例は、「引き出し線のあしらい」を問うものでした。
私が考える答えは「B」でした。
Bでは、引き出し線の先端に「ここのことですよ」を示す●が付いています。
これを端点（たんてん）と呼びます。
端点がないAのような線だと、混み合った図解の中では「どこを指しているのか」が曖昧になりがちです。
先端に●を置くことで、視線を情報の起点に固定させ、「ここを指しています」ということを強調できるのです。
そのため、引き出し線では、Bのように端点を付けるのが基本です。
Illustratorで端点を付ける方法
Illustratorで正円の端点を描く場合、線とは別に図形として描くのではなく、線の機能を使います。
「線」パネルの「矢印」のリストから「矢印21」を選択します。
矢印の大きさは「倍率」で調節できます。
対象のオブジェクトの接点は「先端位置」で切り替えます。
この方法で端点を付けると、パスの線端をオブジェクトにぴったり合わせるだけで、正円の中心をオブジェクトの位置に正確に配置できます。
アピアランスで「白フチ」を付けて視認性をアップさせる方法
引き出し線が他要素と重なると、可読性は一気に落ちます。そのため、引き出し線には白フチを付けて視認性を確保します。
ここでよくある誤りが、「線幅を太くして白フチを作る」方法です。この方法では矢印とのバランスが崩れます。
とくに通常の矢印形状では、綺麗なフチになりません。
美しく、修正しやすい白フチを付けるには、「アピアランス」を使って線を二重に設定する方法が有効です。
少し手間はかかりますが、実務では再現性の高い方法として身に付けておきたいところです。
- 線を複製し、カラーを設定する
- 複製した線を選択した状態で、「ウィンドウ」メニューの「アピアランス」を開く
- 「パスのオフセット」効果を適用し、線を太らせる
- 「パスのアウトライン」効果を適用し、適用順を変更する
- 調整した線を、元の線の下に配置する
この方法で白フチを付ければ、元の引き出し線を動かしたり長さを変えたりしても、白フチが常にぴたっと付いてきます。
3．ガイドの「接合部」は、グループ化とアピアランスで繋ぐ
最後に3問目の振り返りです。
この作例は、複数の要素を囲む「グループガイド」の美しさを問うものでした。
私が考える答えは「A」でした。
Aは、接合部の処理に一貫性があり、線同士が自然につながっています。
一方、Bは、接合部にばらつきがあり、継ぎ目が目立ってしまいます。
このようなガイドでは、接合部の処理に一貫性があるかが重要です。
見た目では揃っているように見えても、構造的に分断されていると、サイズを変えたり拡大したりしたときに破綻し、粗さが目立ってしまいます。
Illustratorで線をグループ化して整える方法
Illustratorの基本機能だけでは位置を目視で合わせるしかなく、サイズが変わるたびに都度調整が必要になります。
そこで、2つの線をグループ化し、「アピアランス」を使って整えます。
まずは2本の線を用意します。
線のカラーや太さは自由です。
2本の線をグループ化し、グループ化した線を選択した状態で、「ウィンドウ」メニューの「アピアランス」を開きます。
そして、次のように設定します。
- 「新規線を追加」をクリックし、ドット点線になるように設定
- 「新規効果を追加」＞「パスファインダー」＞「アウトライン」をクリックし、オプションで「分割およびアウトライン適用時に塗りのないアートワークを削除」オプションをOFFにする
「パスファインダー（アウトライン）」効果を適用することで、元の線のカラーや太さが消失します。
また、連結部分で線は（内部的に）分割されます。
これに新規線を与えることで違和感のない結合部分になります。
グループのまま、「グループ選択ツール」で線を移動しても破綻しません。
毎回この作業を行うのは面倒ですが、一度完成したものを「グラフィックスタイル」に登録しておけば、次からは使い回せて便利です。
まとめ：寸法線や引き出し線を洗練させるヒント
今回は、図面やワイヤーフレーム制作において欠かせない、寸法線や引き出し線の整え方に焦点を当てました。
これらは補助的な要素や単なる装飾ではなく、情報を正確に伝えるための重要な役割を担っています。
図面やワイヤーフレームは、寸法線や引き出し線も含めて一体として設計されるべきものです。
見る人が迷わない、伝達精度の高い状態に仕上げていきましょう。
寸法線や引き出し線には、一般的に守るべきセオリーがあります。
これらにオリジナリティを持ち込む必要はなく、誰が見ても迷いなく理解できることが重視されます。
それでは最後に、今回のノウハウのまとめです。
1．ワイヤーフレームの「寸法線」は、対象物から離して可読性を高める
寸法線は「寸法補助線、寸法線、寸法数値」の3つの要素で構成されます。
それぞれセオリーがありますので、これに準じましょう。
また、Illustratorの「寸法ツール」を使うと、セオリーを守りつつ、スピーディに描けます。
2．引き出し線の「端点」は「●（マル）」を付ける
引き出し線には「ここのことですよ」を意味する端点を付けましょう。
Illustratorでは「矢印」機能を使うことで、矢印形状だけでなく、正円の端点を追加できます。
白フチを付けることも多いので、設定方法を身に付けましょう。
3．ガイドの「接合部」は、グループ化とアピアランスで繋ぐ
複数の要素に対して「コの字」で囲むガイドで、破線やドット点線を使う場合、結合部分に違和感が生じないようにひと手間かけましょう。
お相手はグラフィックデザイナーの鷹野 雅弘でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：鷹野 雅弘
株式会社スイッチでグラフィック＋エディトリアル＋ウェブ制作＋講師。
大阪芸術大学 客員教授、Adobe Community Evangelist、CSS Nite主宰。
著書に『10倍ラクするIllustrator仕事術～ベテランほど知らずに損してる効率化の新常識』など。