UI/UXデザインツール『Sketch』入門

5-7. ボーダーの色と太さを指定する(Border)

  • UIデザイン
  • UXデザイン
  • Webデザイン

オブジェクトに適用されるボーダー(border)について解説します。インスペクトエリアのBorderでは、オブジェクトの境界線であるボーダーの太さ、色を指定でき、さらにブレンドモードを利用することで、オブジェクトに好きなだけ境界線を追加できます。テキストレイヤーのみ唯一線が適用できません。

公開日:2020/01/06最終更新日:2020/01/06

1.ボーダーの適用と位置の指定

境界線は単色にすることも、線形、放射状、または円錐状のグラデーションで塗りつぶすこともできます。オブジェクトに適用される境界線の位置はパネルの中央に位置するアイコンを操作することで境界線の位置を「外側」「中央」「内側」の3種指定できます。

 

ショートカット:Bで境界線の表示/非表示

境界線の位置はオブジェクトの最終的なサイズにも影響するため境界線の位置はかなり重要な要素です。閉じたパスの場合は、輪郭の内側、外側、中央に境界線を配置できますが。開いたパスの場合はオプションは中央となります。

2.ボーダーをカスタマイズする方法

境界線のタイトルの横にある設定アイコンをクリックして、キャップ、コーナー、矢印、破線の境界線のオプションを表示できます。

①キャップ(Ends)

ボーダーの端部の形状を3種類から選択できます

  • バットキャップ:右ベクトル点に境界を描きます
  • ラウンドキャップは:ベクターを越えて延びる経路を丸め、半円形のポイントを作成します
  • プロジェクティングキャップ:丸いキャップに似ていますが、直線のエッジになります

②コーナー(join)

ボーダーのコーナーの形状を3種類から選択できます

  • マイターージョイン:デフォルトの設定で角張ったコーナーを作成します
  • ラウンドジョイン:ボーダーの半径に相対して境界線の丸みを帯びたコーナーを作成します
  • ベベルキャップ:境界線の角に面取りされたエッジを作成します

③矢印などの指定(Start / End)

パスの始点と終点に矢印などを選択できます

  • ラインやオープンパス場合ドロップダウンメニューを使用してパスの始点と終点に矢印を選択できます。

④破線にする(dash / gap)

ラインやパスを破線にできます

  • [dash]に値を入力してdashの長さを設定します。gapはdashの間の長さを指定できます。

理解度チェック





UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう



このレッスンの著者