小なり記号【シルエットタイポグラフィ】

こんにちは！雪田です。今回は、WebサイトやアプリのUIデザインで「戻る」の操作をスッキリ表現できる、「小なり記号（＜）」のシンプルなシルエットタイポグラフィ素材を作成しました！

みほん

「＜」の形は、数学の記号として馴染み深いですが、画面上では「前のページへ戻る」「左へ移動する」といった案内として非常によく使われます。小さく表示しても直感的に意味が伝わりやすく、シンプルなメニューやナビゲーションの補助アイコンとして取り入れやすいので、ぜひ活用してくださいね。

制作の裏話：大なり記号と「美しいペア」になるように

このアイコンを作るときに一番意識したのは、以前作成した「大なり記号（＞）」のアイコンと並べたときに、完全に美しいペアとして機能するようにすることです！
線の太さ、折れ曲がる角度、先端のわずかな丸みまで完全に統一し、スライダーの左右ボタンなどで並べて配置した際、画面全体に綺麗な統一感が生まれるように細かく微調整して仕上げました。

矢印（←）を使うよりも記号的で軽やかな印象を演出できるため、余白を活かしたスッキリしたUIデザインを作りたいときには、これ以上ないくらい重宝する引き算のデザインになっています。

• 「戻る」「前へ」「閉じる」といった左向きの動きをスマートにアピール
• 通常の矢印よりも主張を抑え、画面を洗練された印象に仕上げる
• 大小関係を表現する数学的な記号として、解説スライドや学習資料にも便利
• 小さくレイアウトしても形が崩れない、計算されたシルエットバランス
• 手軽に配置できるPNG形式と、自由な加工に対応するSVG形式の両方を同梱

こんな場面で使ってみて！おすすめの活用法

ユーザーに対して、進行方向とは逆の「戻る・見返す」という安心感のあるナビゲーションを提供したいときに大活躍します。

• ブログやECサイトの一覧ページに設置する「前のページへ戻る」ボタン
• 画像ギャラリー（カルーセル・スライダー）の左送りコントロール用パーツ
• スマホアプリのヘッダー左端に置く、前の階層へ戻るためのUIパーツ
• 複数階層に分かれたメニューや、パンくずリストの区切り記号の逆展開
• 学習用の教材、クイズ、研究資料などで、数値の大小関係を示すグラフのワンポイント

たとえば、ボタンテキストの左側にこのアイコンをちょこんと添えるだけで、直感的に「戻る操作ができるんだな」と伝わる親切なデザインになりますよ。大なり記号（＞）とセットで使って、カルーセルのコントローラーを作るのにも最適です！

用途に合わせて選べる2つのデータ形式

【PNG形式】
背景が透過されている画像データなので、ブログ記事内の説明、プレゼン用のスライド、動画編集ソフトのテロップ横などにそのままポンと貼り付けて手軽に使いたいときに一番おすすめの形式です。

【SVG形式】
どれだけ拡大縮小しても境界線がぼやけないベクターデータです。WebデザインのCSSに組み込んでホバー時に色が変わるような仕組みを作ったり、他のUIパーツと太さをミリ単位できれいに揃えたいクリエイターさんに向いています。

雪田流・ちょっとしたアレンジのコツ

形が究極にシンプルだからこそ、背景の敷き方や色使いで印象がガラリと変わります。

• 丸や角丸の四角い背景を下に敷いて、タップしやすい独立したボタンにする
• ダークグレーやネイビーにして、洗練されたモダンなアプリUIに馴染ませる
• 大なり記号と組み合わせて、数式や比較を視覚的に説明する図解を作る

左方向の案内や戻る操作を示すUIパーツとしても、比較を表す記号としてもマルチに使える便利なアイコンです。皆さんの素敵なWebサイト、アプリ、資料づくりにたくさん役立ててもらえると嬉しいです！

左向き,マーク,案内,文字