[デザイン]ピクトグラムに求められる条件、制作の難しさと楽しさ
この記事は約13分ぐらいで読めます
先日ピクトグラムを作ってその出来を競うデザイナー向けのハッカソン、「ピクタソン」というイベントに参加してきました。その中で、元々好きなピクトグラムの制作の難しさと、そして楽しさをまた実感することができました！
というわけでイベントのレポートも交え、ピクトグラム制作の面白さについて書いてみます。
ピクタソンは以前エンジニアだけじゃない！参加型イベント「○○ソン」を紹介しますという記事でも紹介しています。
文字と図、それぞれの役割
ピクトグラムについての前に、文字と図とは何かを考えてみましょう。
文字とは
文字は読めるひとにのみ情報を伝える
文字という表現は、要は決まったルールを利用者同士が知っておくことで情報の伝達ができる形の集合だと言えます。
文字は、多くの人に繰り返し使われるため普通はできる限り単純な形状をしています。そしてそれが使われる文化に深く根ざしているため、その文化に生きる人であればほとんどの人が使いこなせます。おかげで誰もが情報を受け取ることができますが、そのかわり文字をあらかじめ知らない人にはまったく情報を伝えることができません。
図とは
図という表現は、説明的な絵であり、文字を用いる代わりに見たままの様子や心象風景をディフォルメしたものだと言えます。
図は、事前知識がなくてもそれを見たり体験したことがある人には何を表しているのかを読み取ることができるのが利点です。そのかわり共通のルールがないため、それをどのようにディフォルメするかが人によって変わってしまいます。また、伝達する情報が複雑になりがちです。
例えば大人の男性というだけのことを表現したいときにあまり図の描写が詳細だと、見る人によってはそれを白人のひげを生やしたというように余計な情報を受け取ってしまう可能性があります。海外では実際にスマホの絵文字には人種多様性が欠落しているという議論というものがあったりするようです。
iOSの絵文字。描写が細かすぎるため人種などの情報も持ってしまう
不要な情報を削ぎ落とし、かつ事前知識がなくてもわかるようにする図というのもなかなか難しく、面白いものですね。
ちなみに事前知識がないとわからない図は、記号または記号的表現とも言います。例えば赤い十字のマークが赤十字を表すことは世界的に知られていますが、それを知らない人には全く伝わらないでしょう。絆創膏のイラストは、絆創膏を見たことがある人であればなんの図かわかるはずです。
ピクトグラムとは
文字と図、この両方の特徴を持ったものが絵文字、つまりピクトグラムです。
ピクトグラムは文字のように、それを知っている人が共通のものを表す形状として使うことができます。そして図のように、その図自体を知らない人でも見た目だけでそれが表す情報を受け取ることができます。
文字表現の補助としてわかりやすいピクトグラムが用いられる
私たちWeb制作者の慣れ親しんでいるWebサイトのインターフェースなどにも、パソコンやスマートフォンを表すピクトグラムがアイコンに使われています。シンプルなため、絵心のない人でもこれがスマートフォンだと表す図を書くことができるのではないでしょうか。
ピクトグラム制作の面白いところ
ピクトグラムを作ることの面白いところはいかに情報を伝えるかといかにディフォルメするかです。表現するものが物体ならそれを観察して抽出した特徴を、概念や行為であればそれが人に与える印象を、できる限りシンプルに伝える…これはデザイナーとしてもやりがいのある取り組みだと思います。
もちろんこれは単に作るのが面白いというだけではなく、実際に有用なことです。
ピクトグラムには説明やラベルが添えられるときも添えられないときもある
そもそもピクトグラムは単体で、または複数で、ラベルと併用して、というふうに様々な運用のされ方が考えられるものです。言葉が通じなかったり、場所が暗かったり明るすぎることもあり、色の見分けがつかない人が見ることや目の見えない人に利用される可能性すらあります。そうしたとき、単色で、エンボスなどの形状で、文字と同じように情報が伝えられるピクトグラムは優れた共通言語となります。
どうやってシンプルに伝えるかという試みはときにデザイナーの自己満足のようにも聞こえますが、この試みの面白さは如何に多くのひとに情報を伝えるかという努力と同時に生まれるものだというわけです！
ちなみに私は以前[Webデザイン]作例つき！アイコンやピクトグラムを作る時のデザイナーの頭の中という記事を書いています。
ピクトグラムはコンテンツに応じて表現を変えたりもする
Webサイトで使うアイコンなんかも、やはり出来合いのものを使うより一から作る方が好きですね★
ピクタソンに参加してみた
というわけで、元々興味のあったデザイナー向けハッカソンとして好きなピクトグラムを題材に掲げているこのピクタソンに私が参加したくないわけがありませんね！w
デザイナー向けハッカソン、ピクタソン
このイベントの内容は以下のような流れです。
- 練習問題。参加者全員で同じお題にトライ。15分程度で手書きのピクトグラムを作成、みんなで見る
- 予選。2〜30人の参加者をA、Bのブロックにわけ、それぞれ異なるお題で1時間で、3つで1セットのピクトグラムを作成する。Aブロックがトライ中Bブロックは懇親会、その後Aブロックの作品で良かったものに投票を行う
- ブロックを交代し、今度はBブロックがトライ。それぞれ人気上位の二人が決勝戦に進出
- A、Bブロック各2人の計4人以外の全員で敗者復活戦。30分で1つの手書きピクトグラムを作成、上位1、2名が決勝戦に進出
- A、Bブロックの上位2名と敗者復活戦の上位者で1時間に3つのピクトグラムをデザインソフトで作成、参加者全員で投票
競技性を持たせたデザイン大会という感じですね。参加者はどちらかというとイラストレーターやDTPデザイナー、そしてプロダクトデザイナーが多く、Webデザイナーは少なめ。こういうイベントでは知り合いが多いことがよくあるんですが、ここには全然いない…！
軽くレポート
写真主体で軽くレポートを。
みんなでお題にそって描いたピクトグラムを評価しあう
予選で出したドアの「押す」「引く」「横にスライド」を表現したもの。右が自分の作品
Bブロックは「フォローしている」「フォローされている」「相互フォロー」
結局予選は抜けたものの、決勝戦は実力の差を実感してしまうような結果に。私の能力ではこの短時間に皆さんのようなクオリティーの高いピクトを作ることができませんでしたね>< 最近デザインソフトをまともに使っていないということが露骨に現れてしまいがっくりしました…。どう考えても白の使い方がへたくそすぎるw 後で見るとどう考えてもダメなところがあるわけですが、ぶっちゃけ形にするので精一杯でした。
[caption id="attachment_5215" align="aligncenter" width="540"] 決勝は「現金」「クレジット」「電子マネー」[/caption]
私の作品は一番右です。今見ると余計残念な出来…
今回は商品もMBAと超豪華だったのですが、自分の作品は惜しいとも思えなかったので、優勝した及川さんには惜しみなく拍手です！w 準優勝の猪瀬さんは毎回準優勝か優勝というとんでもない実力者で、決勝の作品も投票権があればこれに入れていただろうキレイでとてもわかりやすい作品でした。
優勝作品。スッキリまとまっているし、これが一時間で作られたものとは…
優勝の及川さん（右）。優勝商品と作品、主催のカズワタベさんと
あ、一応決勝進出でもらえるSUZURIの無料作品注文券というものを頂くことができました！SUZURIは普段から私も利用していて、SUZURIで勘違いさせそうなTシャツを作ってみた(そして届いた)でサービスの使用感も解説しています。HTML5プリントTシャツとか殺伐とした会議室にビールジョッキが！（右利き用）マグカップとか作ってるので良かったら見てやってください★
SUZURIでは画像をアップするだけでこういうグッズが簡単に作れます！
ちなみに実はこのピクタソン、私前回も参加したんですがレポートは書いてません。予選敗退したからというわけではないんですけど、あまりブログ書く時間がなくてですね…w いろんな意味で今回は一歩前進できてよかったですねw
競技型イベントとピクトグラム制作の相性
こうしたデザイナー向けイベントについても少し書いておきます。
みんなもくもく作業するかというとそうでもなくワイワイやっている
私も前述の記事で紹介した、エンジニアとデザイナーが力を合わせて何かを作るオールナイト・クリエイソン(ANC)というイベントをやっています（Facebookグループに参加してもらえれば開催の際には招待もします！）。このイベントはそもそもデザイナーをハッカソンに呼びたいという趣旨を持っていましたが、思っていたとおりデザイナーの人はなかなかハッカソンイベントには参加したがらないことも多く、集客が難しいのです。デザインはできるけどサービスが作れないからエンジニアに手伝ってほしいという人、結構多いのではと思ってたんですが…。
その大きな理由として、デザイン作業は短時間で制作物を作るのに向かないということが考えられます。決まったデザインを作るだけのオペレーションならそうでもないのでしょうが、参加して楽しいかどうか、かつエンジニアがデザイナーにやってほしいこと…と考えるとそれだけでは物足りないでしょう。
その点、ピクトグラムを作るというものは非常にわかりやすく、作業スパンも短いクリエイティブで、こういう形の競技イベントに非常にマッチした題材だと思いました。作るものが明確だと、デザイナーの人も参加しようと思いやすいですしね。
イベント自体も非常に楽しく、今回はイベントのスポンサーである企業のプレゼンも面白いものが多かったです。特に印象に残ったのは株式会社ゼロベースの石橋秀仁さん（@zerobase）が手がけるハイパーピクトグラム構想のプレゼン。
ARで各国の言語を見せるとか、今後の都市計画を見据えたピクトグラムの運用についてのプレゼン
そして我らがアドビの轟さん（@keisuke322）が持参した、まだ日本未発売のタブレット用ペンとその補助デバイス、Adobe Ink & Slideの紹介。すでにリリース済みのタブレット用アプリAdobe LineとAdobe Sketchとの連携で色々見せてくれたんですが、これは別途記事を書こうと思います。
基本的には大会出場者しか参加できないイベントですが、内容は非常に濃いものでした！スポンサーの皆さんにも感謝ですね★
ちなみにイベントの様子は主催であるカズワタベ（@kazzwatabe）さんの記事、Pictathon vol.5を開催しました。（イベントレポート）でも見ることができます。
おわりに
ピクトグラムは簡単に始められる問題解決としてのデザイン、ビジュアルデザインの両方の面白みを持つデザイン要素です。グローバル化していく世の中の状況を鑑みても文字に頼らない情報伝達を行うこと（いかに伝えるか）、そしてコンテンツやプロダクト、場所に魅力的な印象を持たせることも含めて創意工夫すること（いかにディフォルメするか）。これらのためにピクトグラム制作をしてみることはとてもオススメです。
もちろんピクトグラムは即興で作るものとは限らないので、こうしたイベントで票を集めたものが実践的かというとそれはまた他の評価軸があり得るとは思いますが、こうしたイベントを機によりピクトグラム制作に親しむのもアリだなと感じました。個人的には今後もこのイベントに参加していきたいと思うと同時に、似たアプローチでデザイナー向けのイベントができないかなーと思っていますw
この記事を読んだ皆さんがイベントに参加したくなったり、単にピクトグラムを作ることを楽しむ、という視点で制作ができたりすると嬉しいですね！