Skip to main content

「みんなで分け合えば、できること。」のポスターデザインで考えた7つのこと。


「みんなで分け合えば、できること。」のポスターを作ってから、予想外の反響にてんやわんやで思考がオーバーヒート状態だったのですが、少し落ち着いてきたので、自分がなぜポスターを作ろうと思ったのか、その過程と広がりを時系列にしつつ、デザイン的な観点で整理して記しておきたいと思います。

1.デザインのきっかけ
地震発生後、テレビなどで被災地の惨状を見るたび、一人の人間として何も出来ないことに歯痒さを感じていました。そんな中、余震が続く東京などでは、少しでも安心したいという気持ちからか、食料品・日用品の買い占め現象が発生し、物資が少ない中で多くの人が必要以上に買いだめする事で、物流のバランスが崩れ「今、本当に必要としている人々」に届かなくなるという事態が起きました。
地震発生直後は落ち着いていたスーパーやコンビニなどが、翌日には買いだめする人たちで溢れ、食料品などほとんどの棚がガラ空き状態になっているのをみて「これは異常だ」と感じていました。
その中で、twitter上で節電を呼びかける「ヤシマ作戦」に続き、物資の譲り合いを呼びかける、どうぞどうぞ精神の「ウエシマ作戦」を広めようという動きがあり、コピーライターの方々が続々と買いだめ防止をよびかけるコピーをツイートしていました。私もその目的のわかりやすさに共感し、「デザイナーとして何ができるだろう」と考えた時に、「買い占めの皆様へ。」という「少しだけ我慢すればどれだけ多くの人を助ける事ができるか」ということが明確に数字にされたツイートを見て、このメッセージをさらに分かりやすく瞬時に伝え、「買いだめ現象の異常さに気付きをもってもらえる様にすること」がデザイナーとして出来る事なのではないかと考えました。


2.デザインの役割
デザインとは付加価値を生み出し、差別化していくための手段だと思われがちですが、原点に立ち返ってみるとデザインは目的を達成するために「情報をより分かりやすく整理する」ということにたどり着きます。
錯綜する情報、刻一刻と変わる状況で、世の中は「スピード」と「分かりやすさ」が求められていると感じ、その状況でデザインの力を活かす事が出来るのではないかと考え、その効果を最大限に生み出せる「インフォグラフィックス」という手法を使おうと考えました。
インフォグラフィックスとは、複雑な内容やイメージしづらい物事の仕組みなどを把握・整理し、視覚的な表現で他の人に情報を分かりやすく伝えるグラフィックデザインのこと。絵や図で説明すると、言葉で伝わらないことでも簡単に理解できる。それがインフォグラフィックスの目的であり、理想である。(木村 博之/インフォグラフィックス―情報をデザインする視点と表現、2010、P8)


3.デザインのジレンマ
節電が叫ばれている中で、Macやモニタなどの電力を消費するものを使って制作をしていたので、「このままポスターを作らずにMacをシャットダウンした方が節電になり、自分が今すぐできることなのではないか」というジレンマに陥りました。
しかし、ポスターを作りtwitter上のテキスト主体のコミュニケーションだけでなく、より多くの人に伝わるように視覚化する事で、自分一人が節電するよりも、より多くの人に見てもらい、気付きを持ってもらう方が、前向きな成果を見込めるのではないかと考えました。
デザインが生み出す分かりやすさ、その可能性を信じました。


4.デザインの可能性
ポスターをデザインしている時に、一番に重視したことは「押し付けがましくないデザイン」にするということ。買いだめの心理は一人一人の不安な気持ちからなる生存本能であり、人として生きる為の能力を否定することはできない、でも一方で理性的な生き物でもあるという事から、「買い占めのみなさまへ。」の物資の関係性を分かりやすく見せる事で、自発的に気付きを持ってもらえる様なものを目指しました。買いだめ防止を押し付けるよりも個人の自主性を尊重した方が遥かに納得感が起きやすいと考えたからです。

また、標識や工事現場の表示などで日常的に刷り込まれている「黄色と黒」の注意喚起のイメージをベースに、情報は極力シンプルに、奇をてらわず愚直に分かりやすさを追求したものにしました。

デザインがある程度進み、最後のコピーをどうしようかと考えた時に、買いだめ防止を呼びかけるコピーが次々とツイートされていた中で、@YOUTHEKICKさんの「分け合いの気持ちを大切に」という趣旨のコピーがストレートに飛び込んできて「これだ」と思いました。実際にコピーを入れてみると、意味がストンと落ちる様な形でデザインが仕上がりました。


5.デザインの拡散力
ポスターを作り始めて約3時間後に完成し、ツイートしてからその日の夜には10万を越えるフォロワーを持つ方々に次々とリツイートされ、翌日からは新聞、テレビ、ネット、ラジオなどあらゆるニュースメディアで紹介されていき、それを推進力にデジタルからリアルへ大きく広がり、実際にあらゆるところに貼り出される様になりました。
他にもポスターとしての形態に留まらず、ムービー、バナー、待ち受け、Tシャツ、萌えイラスト版、歌など様々なアクションのきっかけにもなり、デザインの意図がシンプルで明確であればあるほど共感が起きやすいということを実感しました。


6.デザインの本質
今回のポスターデザインで感じた事は、情報量が増えていく中で、ロバート・キャパをモデルにしたミュージカル『NEVER SAY GOODBY』の歌詞に「たった一枚の写真でも 人生の真実を映し出せると」あるように、「たった一枚のデザインでも 物事の本質を導きだせる」ということ。グラフィックデザインの力強さを再認識しました。


7.デザインの力
ポスターをデザインしてから数日後、学生時代にとてもお世話になった方から突然電話をいただきました。その方は、私が新聞奨学生をしていたときの販売店の店長で、色々と相談に乗ってくれたりしていて、その方が店長でなければ今の自分はないと言っても過言ではないくらい心の支えになっていただいた方でした。
その店長の奥さんが気仙沼の出身で、親戚の方々が被災されてとても大変な状況であるという事でした。私自身もその知らせに驚き、心が痛みました。
でも、その中で「自分が世話をした学生が震災復興のために、前向きな行動を起こしていたことをニュースを通して知り、とても元気付けられた」とメッセージをいただきました。自分にできる「デザインの力」で少しでも貢献・恩返しできたこと、一人でも多くの方に役立てたのだということを心の底から実感することができて、行動を起こして本当によかったと思いました。


主観的で退屈な長文になってしまいしたが、最後に強調しておきたいのはポスターが出来たのはソーシャルメディア上で共感の連鎖があったからだということです。
@amnesia828さんの「買い占めの皆様へ。」の分かりやすいツイートがあって、@YOUTHEKICKさんの素晴らしいコピーがあって、twitter上で多くの方々に共感していただけたからであり、決して自分一人の力で出来たものではないということ。ソーシャルメディアの大きな可能性を体感する事が出来ました。

一刻も早い震災復興のために、今回の経験を糧に「デザインの力」を信じて、次なる行動へつなげていきたいと思います。

Popular posts from this blog

細かすぎて伝わりづらい!
iOS 5のデザイン変更点まとめ。

iOS 5のリリースやiCloudの開始、iPhone 4Sの発売と、ここ最近のAppleのプロダクトが一通り出そろった感じですね。 3GSを使っていて常々もっさりしていたので、早速iPhone 4Sに乗り換えたところ、画面の中をスケートをしているかのようにスイスイ動いてくれてとても快適です。 2年前に3GSを使っていたときは、なんて速いんだろうと思っていたわけですが…慣れとは恐ろしいものです。 さて本題ですが、ここ数日使っていた中で気付いた、細かすぎるデザイン変更点があったので 前回のLion と同じようにまとめてみました。  細かすぎるデザイン変更点第2弾、今回も目を凝らしてどうぞ。  1.アイコンバッジ  iOS 4のアイコンバッジのシャドウは濃いめのブラックで強めのシャドウになっていましたが、iOS 5ではグレーっぽく明るくなっています。 全体的に比較してみると、iOS 4のシャドウは浮いている感じがするので、明るくなったことで画面全体のトーンにまとまりが出たように感じます。 2.ボックスデザイン 設定画面などのボックスデザインが、iOS 4ではフラットなラインに対して、iOS 5ではシャドウとハイライトが追加されて立体的なデザインになっています。  iOS全体で同様の立体的なデザインが適用されているので、デザインの一貫性がより高まった感じがしますね。  3.メッセージのハイライト これは賛否両論ありそうですが、iOS 4ではメッセージの文字がプレーンなテキストだったのに対して、iOS 5ではハイライトが追加されてこれまた立体的なデザインになっています。 他にも吹き出しの背景色やシャドウが明るくなったことで、背景と文字のコントラストが高くなり、個人的には文字の可読性が高まって良くなったと思います。  5.回転ロックボタンの厚み iOS 4では回転ロックボタンのシャドウ距離が3pxだったのに対して、iOS 5ではシャドウ距離が4pxとなって、より立体的に見えるようになっています。 反対にミュージックアイコンのシャドウ距離は3pxで変わらずのままですので、1pxの違いをデザインすることで、回転ロックという 機能アイコン と、ミュージックを起動するという 起動アイコン の違いを表しているのではないかと

icloudのアイコンに隠れた美しさの法則。

Thank you for coming to my blog! this article English version is here. 先日のWWDCで発表されたicloud。アップルのクラウド本格参入ということで色々とサービスが話題になっていますが、相変わらずアイコンのデザインも綺麗に仕上がっていますね。 では、なぜ美しく見えるのか、少し視点を変えてアイコンのデザインそのものに注目して、その美しさの理由に迫ってみたいと思います。 まずは、なんとなく眺めてみましょう。 雲の輪郭が不規則な曲線を描きつつも、とてもバランスのとれた形になっていますね。ワラのなかから一本の針を見つけるぐらい、とまではいかないと思いますが、シンプルでバランスのとれた形にしながらも雲に見えるような形に定着させるのは、簡単そうに見えて意外と難しく、磨き抜かれたデザインだということが分かりますね。 なんとなく眺めているだけでは美しさの理由に迫れないので、もう少し目を凝らして見てみましょう。 勘の良い方は既にお気づきだったかと思いますが、形の中に4つの円が隠れていることに気がつきます。一見、何となく描いたように見えるカーブでも正円で構成することでバランスのとれた形になっていることが分かります。 つまり、 「アイコンの美しさは幾何学で構成することにあり」 ということが分かるわけですが、単純にランダムな円を配置していくだけでバランスのとれたデザインに仕上げることができるか、と考えるとあらゆる可能性が頭をもたげ、少し疑問に思えてきてしまいます。 そこで、さらなる理由を追い求めて、今度は円の直径を測ってみました。 すると… なんとまあ、それぞれ左右の円の比率が1:1.6と、見事に黄金比に近い比率になっているではありませんか。 さらにさらに、雲の形の比率も調べてみると…。 まさに、「One more thing」。 幾何学だけでなく、黄金比のような原理的な法則を駆使しながら、美しさを無意識に訴えかけるスキのないデザインに仕上がっていますね。 まとめてみると… ・曲線を幾何学で構成(補正)することでバランスのとれた形になる ・細部のランダムな大きさの中にも一定の法則を適用することで、全体的にバランスのとれたデザインになる シンプルなのに奥深い。

細かすぎて伝わりづらい! iOS 6のデザイン変更点まとめ。

iPhone5やiOS 6のリリースなど、アップルユーザーにとって目が離せない日が続いていますね。 iOS 6に関しては地図アプリが散々なもので正直ガッカリですが、UIは全体的に使いやすくなって、じっくり観察してみると細かすぎる変更点も健在でした。 大きな変更点に隠れた細かすぎる変更点たち、その涙ぐましささえ感じる進化をどうぞ! ■設定アイコン iOS 5では歯車の形が尖っていましたが、iOS 6では角が丸くなってソフトなイメージになっています。 OSXの設定アイコンと同じになったので Back to the mac の方針がアイコンでも徹底されているようですね。 ■時計アイコン 設定アイコンと同じ様に、iOS 5では時計針のシャープな印象でしたが、6では太さが一定になり、角張った印象になっています。 Apple製品がブラウン製品とよく似ている という事から考えると、 ブラウン社のアラームクロック に、よりデザインが似てきていますね。 ■ヘッダー iOS 5では光沢感のある質感になっていましたが、iOS 6ではそれがなくなってマットな質感になり、さらにシャドウが追加されています。 iPhone 5の背面もマット加工がされていることから、ハードとソフト両方の質感を統一してきているということが分かります。 ■アクションシートのボタン ヘッダーと同じ様に、光沢のあったものが、iOS6では光沢感がなくなりマットな質感になっています。 個人的には光沢のある感じも好きでしたが、新しいボタンもグラデーションの感じが綺麗で良い感じですね。 ■カメラアイコン やや角張った印象のアイコンでしたが、iOS 6 ではより丸っこくなってかわいらしい感じのアイコンになっいます。より親しみやすさを重視して来ているということでしょうか。 ■キーボードの角 iOS 5ではキーボード下部に角丸の処理が加えられていましたが、iOS6ではそれが無くなって直角になっています。 ジョブズ氏の伝記で、アップル製品で角丸が多いのはジョブズ氏が角丸にこだわっていたから、というエピソードがありましたが、もうその必要性が無くなった、ということでしょうか。 ■メッセージアプリ iOS 4からiOS 5に変わった際に追加