靴【シルエットイラスト】
こんにちは!雪田です。今回は、アパレルECサイトの履き物カテゴリ案内や、旅行・スポーツの持ち物チェックシートなどで大活躍してくれる、「靴(シューズ)」のシンプルなシルエットアイコン素材を作成しました!
みほん
ひと目で靴やシューズを連想しやすい形なので、服装や持ち物に関する情報をわかりやすく見せたい場面に向いています。Webサイトやアプリのカテゴリ表示、記事内の補助アイコン、配信画面のワンポイント、生活系の案内ページなどにも取り入れやすい素材です。
制作の裏話:躍動感とスマートさを両立させた「かかととつま先のライン」
このアイコンをデザインするときに一番試行錯誤したのは、「カジュアルなスニーカーにも、スポーティーな運動靴にも見える絶妙なフォルム」です!
靴のシルエットって、少し厚みを持たせすぎるとポテッとした重い印象になってしまい、逆に薄くしすぎると革靴っぽくなってしまって、汎用性が低くなってしまうんですよね。
そこで、誰もがパッと見た瞬間に「アクティブに外に歩き出したくなるシューズだな」と直感できるように、つま先のゆるやかな反り上がりや、かかとにかけてのスッキリとしたラインを1ピクセル単位で徹底的に調整して仕上げました。シャツやズボンの素材が服装そのものを示しやすいのに対して、この靴のアイコンは外出や移動、運動といった前向きなアクティビティのイメージにもバッチリつなげられますよ!
- 靴や履き物の意味が文字なしでも一瞬で伝わる、無駄のない洗練されたフォルム
- 先に配布している「長ズボン」や「靴下」の素材と並べて、足元の図解が綺麗に作れる規格設計
- 旅行の持ち物リストや運動案内など、スマホの小さな画面に配置しても形がパッと際立つ高い視認性
- 単色デザインだから、ブランドのテーマカラーや表現したいスポーツの雰囲気に合わせて自由に変色OK
こんな場面で使ってみて!おすすめの活用法
アパレル系の案内だけでなく、レジャー、スポーツ、お出かけに関する情報をスッキリまとめたいあらゆる場面で便利に使えます。
- ECサイトやアパレル系ブログでの、「シューズ・スニーカー」「フットウェア」のカテゴリ表示ボタン
- ハイキング、旅行、野外レジャー前の「持ち物チェックリスト」での、替えの靴や運動靴の項目
- フィットネスジム、ランニングサークル、エクササイズ解説記事での、トレーニング進捗やおすすめウェアの図解パーツ
- 地域のウォーキングイベント、スポーツ大会の告知バナーや資料の見出しを飾る補助アイコン
- Webアプリのマイページや設定画面で、お買い物履歴の「ファッション・雑貨」を示すメニュー用マーク
たとえば、持ち物リストの「靴」や「運動靴」のテキストのすぐ横に配置したり、ファッションカテゴリの見出し横に置いたりすると、文字だけよりも内容がすばやく伝わる親切なページが作れます。シャツ、ズボン、帽子、バッグなどの素材と組み合わせると、服装や外出準備まわりの情報をさらに綺麗に整理しやすいですよ!
PNG形式とSVG形式の使い分け
【PNG形式】
背景が透明になっている画像データなので、ブログ記事の本文に直接貼り付けたり、マニュアル用のスライド資料、動画編集ソフトのテロップ横などにそのままポンと配置して手軽に使いたいときにぴったりの形式です。
【SVG形式】
どれだけ拡大・縮小しても境界線が絶対にぼやけないベクターデータです。WebデザインのUIパーツとして組み込んだり、ほかの衣類アイコンと全体の大きさをミリ単位できれいに揃えたり、サイトやアプリのテーマカラーに合わせたりと、クリエイターさんの作品に合わせて柔軟に加工できます。
加工・アレンジの例
シンプルな単色シルエットは、色や背景との組み合わせを少し変えるだけでも、日常の案内からスポーツ向けまで色んな表情を演出できます。
- 鮮やかなブルーやレッドなどのアクティブなカラーに変更して、スポーツ用品やフィットネス関連の雰囲気を前面に出す
- 丸や四角の背景の上にアイコンを白抜きで配置して、スマホアプリのメニューみたいな押しやすいUIボタンにする
- 先に配布している「靴下(ペア)」の素材と少し重ねるようにレイアウトして、可愛い足元のインフォグラフィックを作る
- 黒やダークグレーのままスマートに配置して、ライフスタイル系ブログのモダンな見出し装飾にする
靴は、ファッション、外出、運動、旅行など幅広いテーマに使いやすい身近なモチーフだからこそ、飽きのこない美しさに徹底的にこだわりました。皆さんの分かりやすくて優しいデザイン作りに、たくさん役立ててもらえると嬉しいです!
ファッション,モノ,運動,エクササイズ,スポーツ,生活,旅行,レジャー,季節,案内,リクエスト