ヒロフロデザイン部Vol.7「アイコン作りワークショップ」開催報告
こんにちは、デザイナーのTantanです。
先日3/3に、ヒロフロデザイン部Vol.7を開催しました。
アイコンのアイデア出しなどをみんなでワイワイやったので、その様子をレポートさせていただきます。
３月３日ということで、ひなあられと甘酒をご用意しました。
参加者は8名ほど。初参加の方もいらっしゃいました。
アイコンの役割って？
まずは皆さんにアイコンを見てもらいました。ある動物病院サイトのメニューをアイコン素材に置き換えたものです。
（アイコンは、素材配布サイト「icooon-mono」様より拝借しました。http://icooon-mono.com）
「左は、、、院長のあいさつ！」「つぎは、スタッフ紹介」「その隣は、病院案内？」「それから、、診療案内？」「犬は、、、なんだ？」「本は、ブログじゃない？」
みなさん勘がよろしいようで、結構当たっています。
唯一わからなかった犬のマークは「子犬しつけ教室」でした。
このように、アイコンには意味を伝える役割があります。
文字ラベルだけじゃだめなの？
「子犬しつけ教室」のように、アイコンだけでは伝えにくい内容があるため、やっぱり文字ラベルは必要です。
じゃあ文字だけで良くない？アイコンってわざわざ何のために作るの？と思いますよね。
では、文字ラベルだけの状態を見てみましょう。
いかがでしょうか。ちょっとそっけない感じがしませんか？
「この動物病院、優しく対応してくれるだろうか」
「あんまり歓迎されてないのかな？」
無意識にそんな気持ちになるかもしれませんよね。
アイコンがある方が、「とっつきやすさ」「ウェルカム感」を感じてもらうことができます。
画面を華やかにして、楽しげで親切そうな印象を与えるのが、アイコンやイラストのもう一つの役割です。
外国人やこどもだったら？
試しに翻訳サイトで韓国語に変換してみました。
どうでしょう、文字だけではまったくわからないので、アイコンのありがたみが増しますね。
視力が低かったら？
視力の低い状態を再現するため、全体をぼかしてみました。
文字だけよりはアイコンがあったほうが判別しやすいかもしれません。
アイコンは文字を補助してくれる大事なパーツ
文字だけでなくアイコンやイラストを使うことで「わかりやすい、親しみやすい」デザインができます。
ぜひ必要に応じて使っていきましょう。
ではどんな絵柄にしよう
実際のコンテンツに対してどんな絵柄をあてればいいのか、実践的な方法をやってみました。
今回はある日本料理店のメニューアイコンのお題をご用意しました。
「お店のこだわり」「お料理」「店舗案内」「宅配商品」「宴会」「仕出し」の６つです。
手順１：ブレインストーミング
複数人で色々なアイデアを出し合い、発想の幅を広げていく手法です。
「こだわりは、、、のれんの絵とか」「巻物はどう？」「素材の魚とか野菜とか」「女将か大将は？」
いろんなアイデアを付箋に描いていきます。絵の上手い下手は関係なし、自由に発想してもらいます。
複数人でやると、他人のアイデアが手がかりになって次々と案が浮かんできます。
「宴会は、徳利がいいんじゃない？」「←徳利ひとつより、３つくらい並べたほうが宴会感が出るかもよ」「←一個たおれてたら、更に飲んでる風になる」「←それは宴終わっとるね」
連想ゲームのようにアイデアが広がります。
手順2：マトリクス分析
ひととおりやったら、それぞれのアイデアを「わかりやすいか」「作りやすいか」という２つの軸で評価し、マトリクス化して整理します。
上にいくほど「わかりやすい」、左に行くほど「作りやすい」となっています。
左上：優先的につくるべき
右上：作るのは大変だけどチャレンジする価値がある
左下：他にアイデアがない時、時間がない時はこっちで妥協
右下：やめとこう
作ってみて、バランスをみる
その場で選んだアイデアを、デモンストレーションとしていくつか作ってみました。
「お釜は上が金属よー」「こだわりの人は眉毛がキリッとしてたほうが良くない？」など、ヤイヤイ飛んでくるアドバイスも盛り込み、形にしていきます。
複数並んだとき、サイト上でどのような見え方になるかを確認しながら最終的に着地するといいですね。
↑私が作ったアイコン
こうやって並べると「お箸はバランスとりにくそう」とかがわかります。
作るって楽しい！
アイコンも作れる万能フロントエンドエンジニアのかみーゆさん。「イラレ久しぶり！楽しいわ―♪」
そして、腹巻きと鉢巻の頑固親父が出現。
↑こんな作品ができました。
頑固親父の存在感。
ご参加ありがとうございました
手を動かしてご協力いただいた皆様、ありがとうございました！
おかげさまで、ワイワイ楽しく進めることができました。
またのご参加、お待ちしております（^-^）/
