この寸法線、どっちが正解? 図面制作のセンスを磨こう

現場で通用するデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

グラフィックデザイナーの鷹野です。

ウェブ制作では、設計図として「ワイヤーフレーム」を作成することがあります。
図面を作成する場面も含め、その際に欠かせないのが、サイズを示す「寸法線」や、説明を追記するための「引き出し線」です。
これらは単なる補助ではなく、情報を正確に伝えるための重要な設計要素です。

早速ですが、クイズです。
以下の3つの作例を見て、AとB、あなたはどちらの「寸法線」が適切だと感じますか?

1問目「ワイヤーフレームの寸法線」(難易度★)

各パーツのサイズや要素同士の間隔の距離を寸法線として書き入れる場合、AとB、どちらの寸法線の書き方が好ましいでしょうか?

2問目「引き出し線の端点」(難易度★)

「ワイヤーフレーム」では、ボタンの機能などを書き入れることがあります。

その際、AとB、どちらの引き出し線が好ましいでしょうか?

3問目「グループガイド」(難易度★★)

複数の要素に対して「コの字」で囲むガイドを作成する場合、AとB、どちらが好ましいでしょうか?

いかがでしたか?

私が考える答えは……

1問目の答え:A

2問目の答え:B

3問目の答え:A

以上が私なりの解答です。

あなたがよいと感じた寸法線や引き出し線は、AとBどちらでしたか?

ではここからは、各設問で何が違っていたのかを、具体的に見ていきましょう。

また、作例で用いられていたデザインテクニックについてもご紹介します。


※本コーナーの作例は、Adobe Illustrator使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustrator使ってみてください。


1.ワイヤーフレームの「寸法線」は、対象物から離して可読性を高める

まずは、1問目から振り返っていきましょう。

この作例は、ワイヤーフレームで使われる「寸法線」の描き方を問うものでした。

私が考える答えは「A」でした。

一見、どちらも長さを測っているように見えますが、正確な情報を伝えるための「寸法線」には、守るべき基本のルールがあります。

寸法線の基本的な記入手順

寸法線は以下の3要素で構成されます。

  • 寸法補助線:寸法を記入する対象の両端に描く線。対象の両端から少し離して垂直に引く
  • 寸法線:補助線の間を結び、矢印を付ける
  • 寸法数値:中央に配置する

作例Bは、補助線が短く、対象に近すぎます。輪郭線と干渉すると、寸法線との区別が曖昧になります。

プロの現場では、対象物と補助線の間に「わずかな隙間」を作ることで、情報の整理を行っているのです。

Illustratorの「寸法ツール」で、正確な寸法線を作成する方法

これまで手作業で苦労して描いていた寸法線ですが、2023年12月リリースのIllustrator 2024(28.1)から、Illustratorに「寸法ツール」が追加されています。

このツールを使えば、先ほど解説した寸法線のルールを、誰でもカンタンに、そして正確に再現できます。

ツールパネルの「寸法ツール」をクリックすると、ウィジェットが表示され、長さ、角度、径の3つのツールを切り替えられます。

長さ、角度、(半径/直径)を計測しながら入力できるだけでなく、対象のオブジェクトを変形すると、それに合わせて値も更新されます。

長さ寸法は、以下の番号順に3回のクリックで記入できます。

線幅や種類、フォントなどの設定は、コントロールパネル、または「プロパティ」パネルで後から編集できます。

今回のクイズで取り上げたような、「対象物から少し離す」といった基本的な記入ルールも最初からしっかり押さえられているので、ワイヤーフレームの作成がこれまで以上にスムーズになります。

2.引き出し線の「端点」には「●(マル)」を付ける

続いて、2問目を振り返りましょう。

この作例は、「引き出し線のあしらい」を問うものでした。

私が考える答えは「B」でした。

Bでは、引き出し線の先端に「ここのことですよ」を示す●が付いています。

これを端点(たんてん)と呼びます。

端点がないAのような線だと、混み合った図解の中では「どこを指しているのか」が曖昧になりがちです。

先端に●を置くことで、視線を情報の起点に固定させ、「ここを指しています」ということを強調できるのです。

そのため、引き出し線では、Bのように端点を付けるのが基本です。

Illustratorで端点を付ける方法

Illustratorで正円の端点を描く場合、線とは別に図形として描くのではなく、線の機能を使います。

「線」パネルの「矢印」のリストから「矢印21」を選択します。

矢印の大きさは「倍率」で調節できます。

対象のオブジェクトの接点は「先端位置」で切り替えます。

この方法で端点を付けると、パスの線端をオブジェクトにぴったり合わせるだけで、正円の中心をオブジェクトの位置に正確に配置できます。

アピアランスで「白フチ」を付けて視認性をアップさせる方法

引き出し線が他要素と重なると、可読性は一気に落ちます。そのため、引き出し線には白フチを付けて視認性を確保します。

ここでよくある誤りが、「線幅を太くして白フチを作る」方法です。この方法では矢印とのバランスが崩れます。

とくに通常の矢印形状では、綺麗なフチになりません。

美しく、修正しやすい白フチを付けるには、「アピアランス」を使って線を二重に設定する方法が有効です。

少し手間はかかりますが、実務では再現性の高い方法として身に付けておきたいところです。

  1. 線を複製し、カラーを設定する
  2. 複製した線を選択した状態で、「ウィンドウ」メニューの「アピアランス」を開く
  3. 「パスのオフセット」効果を適用し、線を太らせる
  4. 「パスのアウトライン」効果を適用し、適用順を変更する
  5. 調整した線を、元の線の下に配置する

この方法で白フチを付ければ、元の引き出し線を動かしたり長さを変えたりしても、白フチが常にぴたっと付いてきます。

3.ガイドの「接合部」は、グループ化とアピアランスで繋ぐ

最後に3問目の振り返りです。

この作例は、複数の要素を囲む「グループガイド」の美しさを問うものでした。

私が考える答えは「A」でした。

Aは、接合部の処理に一貫性があり、線同士が自然につながっています。

一方、Bは、接合部にばらつきがあり、継ぎ目が目立ってしまいます。

このようなガイドでは、接合部の処理に一貫性があるかが重要です。

見た目では揃っているように見えても、構造的に分断されていると、サイズを変えたり拡大したりしたときに破綻し、粗さが目立ってしまいます。

Illustratorで線をグループ化して整える方法

Illustratorの基本機能だけでは位置を目視で合わせるしかなく、サイズが変わるたびに都度調整が必要になります。

そこで、2つの線をグループ化し、「アピアランス」を使って整えます。

まずは2本の線を用意します。

線のカラーや太さは自由です。

2本の線をグループ化し、グループ化した線を選択した状態で、「ウィンドウ」メニューの「アピアランス」を開きます。

そして、次のように設定します。

  • 「新規線を追加」をクリックし、ドット点線になるように設定
  • 「新規効果を追加」>「パスファインダー」>「アウトライン」をクリックし、オプションで「分割およびアウトライン適用時に塗りのないアートワークを削除」オプションをOFFにする

「パスファインダー(アウトライン)」効果を適用することで、元の線のカラーや太さが消失します。

また、連結部分で線は(内部的に)分割されます。

これに新規線を与えることで違和感のない結合部分になります。

グループのまま、「グループ選択ツール」で線を移動しても破綻しません。

毎回この作業を行うのは面倒ですが、一度完成したものを「グラフィックスタイル」に登録しておけば、次からは使い回せて便利です。

まとめ:寸法線や引き出し線を洗練させるヒント

今回は、図面やワイヤーフレーム制作において欠かせない、寸法線や引き出し線の整え方に焦点を当てました。

これらは補助的な要素や単なる装飾ではなく、情報を正確に伝えるための重要な役割を担っています。

図面やワイヤーフレームは、寸法線や引き出し線も含めて一体として設計されるべきものです。

見る人が迷わない、伝達精度の高い状態に仕上げていきましょう。

寸法線や引き出し線には、一般的に守るべきセオリーがあります。

これらにオリジナリティを持ち込む必要はなく、誰が見ても迷いなく理解できることが重視されます。

それでは最後に、今回のノウハウのまとめです。

1.ワイヤーフレームの「寸法線」は、対象物から離して可読性を高める

寸法線は「寸法補助線、寸法線、寸法数値」の3つの要素で構成されます。

それぞれセオリーがありますので、これに準じましょう。

また、Illustratorの「寸法ツール」を使うと、セオリーを守りつつ、スピーディに描けます。

2.引き出し線の「端点」は「●(マル)」を付ける

引き出し線には「ここのことですよ」を意味する端点を付けましょう。

Illustratorでは「矢印」機能を使うことで、矢印形状だけでなく、正円の端点を追加できます。

白フチを付けることも多いので、設定方法を身に付けましょう。

3.ガイドの「接合部」は、グループ化とアピアランスで繋ぐ

複数の要素に対して「コの字」で囲むガイドで、破線やドット点線を使う場合、結合部分に違和感が生じないようにひと手間かけましょう。

お相手はグラフィックデザイナーの鷹野 雅弘でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。


執筆:鷹野 雅弘

株式会社スイッチでグラフィック+エディトリアル+ウェブ制作+講師。
大阪芸術大学 客員教授、Adobe Community Evangelist、CSS Nite主宰。
著書に『10倍ラクするIllustrator仕事術~ベテランほど知らずに損してる効率化の新常識』など。


すべての問題にチャレンジしてみよう!

あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」

第44回 このイラスト、どっちが正解?イラストを使ったデザインのセンスを磨こう

第43回 この寸法線、どっちが正解? 図面制作のセンスを磨こう

第42回 このあしらい、どっちが正解?バナーのあしらいのセンスを磨いておこう

第41回 この線のスタイル、どっちが正解?シーンに合わせた線を使うセンスを磨こう

第40回 この色の選び方、どっちが正解?配色のセンスを磨こう

第39回 この図版、どっちが正解?見やすい図版作成のセンスを磨こう

第38回 このグラフの見せ方、どっちが正解?伝わるグラフをデザインするセンスを磨こう

第37回 この文字の遊ばせ方、どっちが正解?文字デザイン演出のセンスを磨こう

第36回 この写真の見せ方、どっちが正解?買いたくなる商品写真のセンスを磨こう

第35回 この情報の強弱の付け方、どっちが正解?情報整理のセンスを磨こう

第34回 このあしらい、どっちが正解?装飾のブラッシュアップ力を磨いておこう

第33回 この文字のあしらい、どっちが正解?バナーの文字デザインのセンスを磨こう

第32回 このアイコン、どっちが正解?アイコン作成のセンスを磨こう

第31回 この背景パターン、どっちが正解?パターンを扱うセンスを磨こう

第30回 このZINEのデザイン、どっちが正解?誌面デザインのセンスを磨こう

第29回 このタイポグラフィ、どっちが正解?作字のセンスを磨いておこう

第28回 このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

第27回 表のデザイン、どっちが正解?情報の整理に役立つデザインセンスを磨いておこう

第26回 そのデザインの仕上げ、どっちが正解?「整列」や「ガイド」を使いこなすセンスを磨こう!

第25回 このレイアウト、どっちが正解?視線誘導のセンスを磨いておこう

第24回 このパス、どっちが正解? ロゴ制作で必要になる造形センスを磨いておこう

第23回 この矢印のデザイン、どっちが正解?図解における矢印選びのセンスを磨いておこう

第22回 線の扱い、どっちが正解? 罫線のセンスを磨いておこう

第21回 このドロップシャドウ、どっちが正解?ドロップシャドウのセンスを磨いておこう

第20回 この名刺の文字組、どっちが正解?名刺デザインのセンスを磨いておこう

第19回 この価格の見せ方、どっちが正解?数字のデザインのセンスを磨いておこう

第18回 この書き出し、どれが正解?画像の特徴に合わせた書き出しを学ぼう

第17回 色の組み合わせ、どっちが正解?配色のセンスを磨いておこう

第16回 このスライドのデザイン、どっちが正解?伝わるプレゼン資料作成のセンスを磨いておこう

第15回 このコントラスト、どっちが正解?文字と背景の配色のセンスを磨いておこう

第14回 この余白、どっちが正解?レイアウトにおける余白のセンスを磨いておこう

第13回 このレイアウト、どっちが正解?レイアウトのセンスを磨いておこう

第12回 このフォント選び、どっちが正解?フォントを上手に使うセンスを磨いておこう

第11回 この改行や行揃え、どっちが正解?文字組みのセンスを磨いておこう

第10回 この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

第9回 このグラデーション、どっちが正解?グラデーションのセンスを磨いておこう

第8回 この吹き出し、どっちが正解?デザイン演出のセンスを磨いておこう

第7回 この名刺デザイン、どっちが正解?名刺作成のセンスを磨いておこう

第6回 このデザインのあしらい、どっちが正解?装飾のセンスを磨いておこう

第5回 欧文フォントの見せ方、どっちが正解? フォント選びのセンスを磨こう

第4回 このデザインの配置、どっちが正解?整列のセンスを磨いておこう

第3回 この文字間や行間、どっちが正解?文字の余白のセンスを磨いておこう

第2回 この文字組み、どっちが正解?ベースライン調整のセンスを磨いておこう

第1回 この文字詰め、どっちが正解?文字間調整(カーニング)のセンスを磨いておこう

Illustratorを始めましょう。