プリンター【ミニマルイラスト】
こんにちは!雪田です。今回は、Webサイトやアプリの印刷用ボタン、社内マニュアルの出力手順、事務・オフィス系カテゴリのメニュー表示などをスマートに整えてくれる、「プリンター」の洗練されたミニマルアイコン素材を作成しました!
みほん
プリンターらしい形がすっきりまとまっているため、Webサイトやアプリの印刷ボタン、資料作成の説明、オフィス系カテゴリ、書類やファイルまわりの操作案内などに取り入れやすい素材です。パソコンや書類アイコンと組み合わせることで、作業の流れも視覚的に伝えやすくなりますよ。
制作の裏話:極小サイズでも機種が潰れない「排紙口の隙間と紙の比率」
このアイコンをデザインするときに、わたしが一番こだわったのは「本体中央の排紙スリット(紙が出てくる隙間)の太さと、そこから覗く書類の絶妙なバランス」なんです!
プリンターのマークって、本体のメカニカルな給紙トレイやボタンをリアルに描き込みすぎると、スマホの小さなナビゲーションメニュー等に縮小したときに要素がくっつて、ただの立体的な四角い箱に見えてしまうんですよね。
そこで、どんなサイズや解像度で表示しても、ユーザーが直感的に「あ、ここを押せば資料を紙に印刷・出力できるんだな」と認識できるように、本体のすっきりしたアウトラインに対して、出てくる紙の幅や隙間の余白を1ピクセル単位で徹底的に計算して仕上げました。書類アイコンが文書そのものを示しやすいのに対して、このプリンターは「紙に出力して手元に用意する」というアクションをスマートに伝えてくれますよ!
- 印刷や出力の操作意味が文字なしでも一瞬で伝わる、無駄のない洗練されたミニマルデザイン
- アプリの印刷実行ボタンからオフィスの機器案内まで、どんなスペースにも綺麗に馴染む高い汎用性
- マニュアルの操作手順など、長文テキストの横に添えても全体のレイアウトを邪魔しない高い視認性
- 手軽に配置できる透過PNG形式と、どれだけ拡大・縮小しても境界線が絶対にぼやけないSVG形式を同梱
こんな場面で使ってみて!おすすめの活用法
「印刷」「資料の準備」「出力デバイス」など、事務作業や手続きに関する項目を分かりやすく整理したいあらゆる場面で便利に大活躍してくれます。
- ブログや解説サイト、マニュアルでの、「このページを印刷する」「PDF出力手順」の実行用案内ボタン
- 社内ポータルやWebシステムでの、コピー機・プリンター設定画面や複合機管理機能のカテゴリ見出し
- 行政の手続き案内やオンライン申請サイトでの、「住民票の印刷方法」「必要書類の準備」を呼びかける図解パーツ
- お仕事コラムやビジネス系ブログでの、ペーパーレス化、書類整理術、デスク周りの環境解説などのアイキャッチ装飾
- 「わたし(雪田)」が作った他のオフィス系素材(書類ファイルや方眼紙ファイルなど)と組み合わせる、業務プロセスのインフォグラフィック
たとえば、資料を印刷する手順の説明に添えたり、管理画面の印刷ボタンとして使ったりすると、文字だけよりも機能の場所がすばやく伝わる親切なページが作れます。パソコン、ファイル、書類、設定、チェックマークなどの素材と組み合わせると、書類に関する操作や状態の流れもさらに綺麗に整理しやすいのでおすすめです!
PNG形式とSVG形式の使い分け
【PNG形式】
背景が透明になっている画像データなので、ブログ記事の本文に直接貼り付けたり、操作手順をまとめたプレゼン資料、解説動画のワンポイントなどにそのままポンと配置して手軽に使いたいときにぴったりの形式です。
【SVG形式】
どれだけ拡大・縮小しても境界線が絶対にぼやけないベクターデータです。WebデザインのUIパーツとしてシステムに組み込んだり、企業のブランドカラーに合わせて落ち着いたビジネスカラーにしたり、ボタンの大きさに合わせて見た目を100%最適化したりしやすい形式です。
加工・アレンジの例
無駄を削ぎ落としたアイコン素材は、色味の選び方や背景との組み合わせで全体の印象を大きく変えられますよ。
- 落ち着いたダークグレーや黒に変更して、オフィシャルな機器管理や業務系UIにぴったりの知的なバナーにする
- 優しいパステル調の背景の上にこのアイコンを白抜きで配置して、スマホアプリのメニューみたいな押しやすいUIボタンにする
- 先に配布している「書類ファイル」の素材と矢印で繋いで並べ、「データを紙に印刷する」というワークフローを視覚的に表現する
- チェックマークや他のオフィス系素材と等間隔で横一列に並べて、スマートで洗練された設定メニュー一覧を作る
プリンターは、印刷、出力、書類作成、オフィス作業を表すときに誰もが親しみを持てる定番のモチーフだからこそ、飽きのこない使いやすさに徹底的にこだわりました。皆さんの分かりやすくて優しいデザイン作りに、たくさん役立ててもらえると嬉しいです!
書類,文房具,家電,パソコン,コンピューター,ビジネス,会社,案内,モノ