[Webデザイン]作例つき！アイコンやピクトグラムを作る時のデザイナーの頭の中
この記事は約16分ぐらいで読めます
約一週間ぶりのブログです、サボっててすみません！
Webサイトのアイコンやピクトグラムって、非デザイナーから見るとデザイン要素の中でも面積が小さいせいで軽んじられがちな感じがするんですけど、実はかなり奥が深いです。これをサイトに置くことで本来なら複数の文字で説明する必要のあることを利用者に直観的に理解させられます(もしくは補助として)し、単純に見た目の雰囲気を作り出すことも出来ます。
この記事では私がWebサイトにおけるアイコンやピクトグラムを作成するときどんなことを考えて作成しているのか、細かいことも含めて分解して書きだしてみました★
モチーフを選択する
まずはそこにどんな意味のオブジェクトを置くのか、それを図柄で表せばそうであることが伝わるのかを考えます。
名詞や動詞、目的語の抽出
そのボタンや項目、オブジェクトにどんな意味や機能を持たせたいのか、それをキーワードにして抽出します。
例として、Facebookで採用されているメニューのアイコンをいくつか抜粋し、そのイメージとしてどういう言葉を使っているか完成品から推測します。リバースエンジニアリングの向こうを張ってリバースデザイニングとでも呼びましょうかｗ
Facebookのメニューアイコン
| アイコンのあるオブジェクトの役割 | キーワード |
|---|---|
| メッセージのページのリンク | メッセージ |
| 写真のページのリンク | 写真 |
| 友達を検索する機能のリンク | 友達、検索 |
| 友達を招待する機能のリンク | 写真、招待 |
いくつかピックアップしたものを分解してみました。このように、言葉として分解することでそのリンクのアイコンにどういう絵を使えばいいのかが絞り込めます。
メッセージは吹き出しとして、写真は写真の絵ですが、写真が貯まるページであることを複数の写真で表現しています。
友達を検索は友達を表す人物のマークに加え、追加を表す+1の記号で表現されています。個人的には検索が友達が増える為の行動であることを考えればこれは正しいとも言えますが、そういう考えであればリンクの文言も統一して友達を増やすとかにするべきなんじゃないかなーと思ったりもしたんですけど、どうでしょうね。
友達を招待は人物のマークとメッセージを表す吹き出しの組み合わせで友達を招待することを表す一つのアイコンになっています。
このような話は過去記事の[デザイン]アイコンを作りたい人へ。作るべきキーワードを集めましたで少し解説しているのでそっちも参照してみてください。
そしてこの記事では作例として、ここで何かのWebアプリを作っていると仮定し、その中でメッセージを送信するというリンクのアイコンを考えてみたいと思います。
定番のモチーフから選ぶ
前述のFacebookのように、他にも既にこの世には何万何億というサイトやアプリケーションが存在しているわけですから、それら前例を参考にしない手はありません。
似たようなサービスやコンテンツ、機能を備えているサイトを見てみましょう。そのものずばりなアイコン素材が配布されている場合も多いと思うので、それを選んでしまえば終了です。実際、歯車の絵は設定、人物の絵はマイページ、というような定番ともいうべき図柄がありますし、特にアプリなんかはユーザーがそうした利用者の認知度が高い可能性もあります。ここでどんなモチーフを選ぶかに独創性はあんまり必要ありませんよね！
で、もちろん時間が限られているときはそれでもいいんですけど、せっかくなので実はもっと伝わりやすい表現方法もあるのではないか？って考えてみるのも面白いと思います。
ここではあえて定番のモチーフを外し、メッセージを送信すると言う意味のアイコンとして、ポストを採用することにしてみました。
「メッセージを送信する」と言えば…？
もちろん普通に考えたらメッセージ自体は手紙や吹き出しのアイコンでいいと思います。ありがちなのはメッセージ自体を表す手紙のマークに、送信を表す矢印マークで表現するとかですね。その代わりに今回はなぜポストかというと、ポストはそれ単体でメッセージと送信、その両方を表現しうるのではないかと思ったからです。
ただし、モチーフを選ぶ場合はそれがそのサイトの主なターゲットに通用するイメージなのかも考える必要があります。昔であればポストは筒状だったでしょうし、そもそも外国人にはこのイメージでは伝わらないと思います。普通に考えれば無難なのはやはり手紙のアイコンでしょうねｗ
他の項目やコンテンツとの相性
例えば今作っているサイトの機能の大半がメールに関するものであった場合、機能のリンクの全てはメッセージを～するというものになるかもしれません。その場合、送信ボタンのみをポストにするのは適切でしょうか？もしかしたら送信、受信、フォルダーを見るなど全ての機能に手紙のマークを使いつつ、～するの部分のみで区別するアイコンを作るかもしれません。
この場合は右矢印(送信)、プラス(新規メール作成)等のように手紙のモチーフすら外して統一するパターンも考えられますね。
TwitterクライアントアプリJanetterはダイレクトメッセージが手紙アイコン
また、手紙のアイコンはメッセージのメタファーですが、実際にその比喩に使われるモチーフ自体を取り扱うサイト、この例で言えば郵便局のサイトでメッセージを手紙のアイコンで表すと紛らわしくなりますよね。その場合仮にそのサイトにメッセージというボタンを作るならアイコンは吹き出しなんかの方が良さそうですね。
アイコンが先に用意されている場合なんかだと、この辺の食い違いが見過ごされることもありそうです。既存のアイコンをアプリの文脈に無理矢理当てはめるのではなく、文脈からアイコンを選び、ときにその為にアイコンを作る必要性があると思います。
使う場所に合わせて図案化する
ちょっとしたリンク、アプリケーションアイコン、favicon、ロゴマーク等、アイコンは様々な場面で使われます。その用途に合わせてモチーフを図案化します。
描写
物体なら、その物体をどのような角度、縮尺、タッチで描くかです。非物質なものも他の物質と統一した手法で描写します。
二次元的なものなら平面的な表現にするか、8bit風のドット絵にするか、落書き風、最近話題のロングシャドーなどが思いつきます。
二次元的な表現の描写色々
三次元的なものでも遠近感を用いたもの(透視図法等)、遠近感に従わないもの(キャビネット図等)、同じ縮尺で広範囲に展開出来るもの(鳥瞰図やアイソメトリック図等)といった描写の方法が挙げられます。
三次元的な表現の描写色々
図案化の抽象度
ものを図案化する際の抽象化の度合いは大きな個性の一つになります。これがプロダクトやサイト内で統一されていないと、素人目からもチグハグな印象を受けることがあります。
抽象度の違うポストのアイコン
当然デザインを気にしている人から見ると、1つだけテイストの違うアイコンを見て「これは違う人が作ったな」と容易に想像出来ます。…だからなんだって話ですけど、別にそんな小さなデザインのほころびをあげつらいたいわけではなく、そういうものを見過ごすことでそこからプロダクト、サイト全体のデザインの調和が崩れていく…ということをここでは言いたいわけです。
下手に一部のアイコンだけグラデーションを加えたり、幾何学的な図案の中に人間的なカーブを持った図案が混じったり、またはその逆をやると抽象度の一貫性が失われ、浮いた存在になったりします。手描き風の案内図の中に、急に3Dグラフィックソフトで書いたようなビルが出てきたら変ですよね。
もし仮にテイストの違う図案が混ざるにしても、結果的に混ざるのではなく何らかの意図を持って意識的に混ぜるようにします。…つまり、逆に全く統一しないという統一の仕方も出来ます。
例えばOSのホーム画面等は利用者が好きなように壁紙を設定したり様々なアプリのアイコンを設置するため、雰囲気の統一を強いるのは無意味にも思えます(iOS 7のフラット化はそれをやろうとしているわけで、上手くいくのかなーとは思います)。バラバラであるという調和の形もあるというわけです。
ミニマル、シンプルな図案化
ミニマルとは要素の最小化を表します。ミニマルなアイコンはそれが伝わる最低限の表現しかしていません。色があることが前提の場合もありますけど、モノクロでもギリギリ何を図案化したものかがわかるのがボーダーラインでしょう。
ミニマルなポストのアイコン
ポストの形状、手紙を入れる穴のみを残した必要最低限の図案です。もしかしたら穴より郵便マーク付けた方が良かったですかね？
図案の書き込みの詳細さが荒いほうがポップな雰囲気になりやすいですが、配色が暗いとクールな雰囲気になります。
リアリスティック、デコラティブな図案化
ものを図案化するにあたって、極めて写実的な表現を用いたリアリスティックなアイコンや、そのアイコンの図案を使ってサイト全体の雰囲気までコントロールしようとするデコラティブなアイコンを作る場合もあります。
リアリスティックなポストのアイコン
リアルさは単純にテイストの差ですけど、例えば実在しない概念的なモチーフを図案化した場合、不自然にデコラティブになったりする時があります。吹き出しやハートマークにリアルさなんて存在しませんよねｗ でも、同格の要素にリアリスティックなアイコンが存在する場合は概念的な要素にもある程度それに合わせたリアルっぽい図案化が必要だと思います。
図案の書き込みが細かいほどリアルで重たく真剣そうな印象を強め、そうなると配色は不自然なものを選びにくくなっていきます。
アイコンとしてのディティール作り
アイコンがそのWebサイトの世界観においてどういう物体なのかを考えます。…ちょっと意味がわからないかもしれませんね。
アイコンは絵なのか物質なのか
例えば前述のFacebookではアイコンは単なるピクトグラムで、平面の絵です。
ですが例えばiOSのアプリアイコンはそれぞれ、絵であったり、光沢のあるプレートであったり、箱庭のような物体であったり、つや消しのマットなボタンであったりします。
そして新しいiOS 7に代表されるようなフラットデザインではまるで折り紙のような擬似平面的なデザインが採用されることが多い印象です。
googleは完全には統一されてはいないものの方向性が伺える
今回のポストのアイコンはメッセージを送信するリンクのピクトグラムなので単なる絵としてのアイコンで構わないんですが、例えばそのアイコンを使うサイトのデザイン要素全体がメタリックな質感を意識していて、ボタンは機械に備えられたボタンとして作る場合は、ピクトグラムをプラスチック製のボタンに施された刻印として表現したりするといったことも考えられます。
アプリやサイトにおける、そのプロダクトが何であるのかという見立てに、アイコンが参加する場合があるということです。
この世界観の統一は、管理画面やマイページ等の機能、ビジュアル的なレイヤーの間で共通させる必要がない場合もあります。これについては過去記事[webデザイン]ブラウザーの中のセカイ ― デザインや世界観のレイヤーを認識するで述べています。
配色や配置サイズ等
アイコンがそのサイトのデザインエレメントの中でも目立つ存在になると、この配色も慎重にする必要があります。
写実性を重視するのであれば、色は現実のモチーフ自体の色を反映したものになるでしょうから色を選ぶ余地はあんまりありません。ポストなら彩度の高い、オレンジに近い赤ですね。スキュアモーフィックなデザイン要素を幾つか思い出してもらうとわかるんですが、リアリスティックな表現の上ではカメラにはカメラらしい配色しかあり得ませんし、モチーフ選びの時点で自ずと色にかなり遊びがなくなります。
写実的でなければ全体のトーンに合わせやすい
イラスト化したアイコンであればパステルカラーで統一したり、サイトの雰囲気に合わせたトーンの配色になるでしょう。
また、こうしたアイコンの実際のサイト上でのサイズが大きければ大きいほど、アイコンのイメージがサイトの雰囲気を左右します。アイコンの図案をサイトの雰囲気づくりに参加させないためには必要最低限なサイズに小さくする必要があるでしょう。
ミニマルなアイコンは小さくしても見わけがつくし、イメージを左右しにくいというメリットもあると思います。
まとめ
アイコン作りは以上、モチーフ選び、図案化、アイコンのディティール作りという三つの工程を制作フローの都合や得意な手法等によって前後させたり、並行して行います。
全ての工程はときに脳内で並行して行われる
ときにはぱぱっと作ってしまう時もありますけど、ここが早い人は経験があるからその思考の工程を飛ばしているように感じるだけで、実際デザイナーは無意識にこういった選択を行っているはずです。
まあ今ポンとサイトを作ろうと思ってもほとんどの機能の表現やピクトグラムは出揃っていてこの辺を下手に考えてもあまり意味が無いとは思いますけど、いざ新しい機能が出てきた場合に定番の表現が生まれる前に図案を考える必要が出てくる場合もあり得ますよね。その定番の表現が本当に慣れていない人にも伝わるかってところも思考のしどころでしょう。
また、仕事でなくても試しに自分オリジナルのアイコンセットを作ってみる、なんてのは結構勉強になると思います。スキルアップも兼ねて挑戦してみるのはいかがでしょーか★
こういった話が好きな人は以下の記事もオススメなので読んでみてもらえると嬉しいです！
以上、恒例の「このブログデザインで言われても」的なコメントも来そうですけど、少なくとも現在の私はこんな風に考えてアイコン使ったり作ったりしてますって話でしたー★