愛される学校づくり研究会

分かりやすい学校サイト・デザイン講座


★このコラムは、「愛される学校づくり研究会」にて発表された、「わかりやすい学校サイト・ポイント講座」を元に、具体例を追加しながら、デザインにつてい解説していくシリーズです。

【第8回】矢印でわかりやすい図解

何年か前のことですが、学校関係者評価の資料作りで「PDCAのサイクル」を図解して本文に添えたいという話がありました。
こんなPDCAサイクルの図です。

No8_fig01.jpg

割と簡単な図ですので、デザイナーに頼んだらあっという間に出来上がってくるだろうという事で、お話がきたのだと思われます。こういった依頼では、デザイナーに話がくるときはこんな感じです。
「PDCAサイクルの図をカッコよくしてほしい」
おそらく、お願いされる方(クライアント)には、すでに何らかの完成イメージはあるけれど、もっとカッコいい見栄えのよいものを採用したいと考えている。あるいは、伝えたいことは沢山あるが、うまくまとまらない。といったことでお願いされるのだと思います。

■図解をつくる前に

一見簡単と思われる依頼程、むずかしいものはありません。
ここでどう料理するかですが、まず
(1)誰に
(2)なにを伝えるか 
この2つを言葉にして整理することです。
疑問があれば、クライアントにヒアリングもしますが、同時に自分の中でも言葉で整理してみます。

  • PDCAは何も説明がいらないのか。Pッてなに?という人はいないか?
  • 見る人は、PDCAがわかるか。日本語の解説はどの程度入れる?
  • P、D、C、Aそれぞれの関連は、等価なのか、重要度に順番や差があるか。
  • サイクルというのは、双方向なのか、一方通行なのか。
  • 連続なのか一過性なのか。
  • 右回りなのか、左回りなのか、どちらでもよいのか。
  • そのサイクルは短期なのか、長期なのか。(1日に何度もまわるサイクルなのか、1年に数度なのか。)
  • 速度は一定か、速度に変化があるか。それとも速度は無関係なのか。
  • 実際にはゆっくりであるが、図ではスピード感を出したいのか。
  • あるいは逆に、速い速度のものをゆったりとした時間軸に置き換えて見せたいのか。
  • P、D、C、Aの各項目が大切か、項目から項目へ変化する事が大切なのか。

etc...

というように整理をして、自分自身の中で明確にする作業をしました。

■図への展開

この言葉による整理の後、図解設計では、先ず白黒で考えます。
これは、色を副次的なものとして捕らえている訳ではなく、色は影響力が大きいので、色に左右されないで、形を決めたいからです。

No8_fig02.jpg

あまり複雑な線を引かずに、シンプルに線・丸・三角・四角から始めて、図形から得られるイメージが、チェック項目にあっているかイメージをふくらませたり、絞り込んだりして試してみます。

このとき一番、絞り込みに苦労したのが、矢印です。”サイクル”ですから、流れや回転みたいなイメージを表現したいですしね。

■ 矢印考

この依頼で感じた事は、矢印って意外に知ってるようで知らないな。ということでした。 「PDCAサイクル」図の制作は、矢印について考えるキッカケにもなりました。

身の回りにはいろいろな矢印がありますが、説明したり、わかりやすくする為にもっと積極的に利用してもいいのではないかと思います。 矢印という図形は、ついついその先端を凝視したり、方向を気にしたり、自然とそちらへ向いてしまったりしますよね。 矢印はどこにあっても、形自体が目立つものですが、他にもいろいろな組み合わせで「意味」を表現できる図形だとおもいます。 丸・三角・四角といったプリミティブな図形よりも、注目させたり、説明したりという機能が備わっている図形です。

No8_fig03.jpg


先生も、黒板上で矢印を使う事が多いと思います。 私も、自分の考えを整理したり、他人に伝える時のメモには、頻繁に矢印が登場します。

方向と大きさ(ベクトル)という基本的な特徴に加えて、多くの「意味」を語ることができます。

No8_fig04.jpg


■矢印と感情表現

試しに矢印を画像検索してみると、沢山の種類の矢印があることがわかります。
あまり沢山ありすぎて困ったときは、書体の時とおなじく、使用する矢印は3種類までにしましょう。
使う上では何かの軸で整理しておかないと混乱するかもしれません。
私の中ではこんな感じで捉えてみました。

No8_fig05.jpg

こういった事を考慮して、PDCAサイクルを改めて見てみると、表現の幅が広がりそうな気がしました。 ほんの少し形を変えただけで「意味」が変わってくるのがわかります。

No8_fig06.jpg


この白黒での図解に、色を付加して完成へ持っていきます。色彩についてのポイントは第2回目、3回目の「見やすいサイト」を参考にしてください。

次回は、「ルネッサンスから学ぶ学校サイト」の予定です。

(2011年12月12日)

ahotta.jpg

●堀田敦士
(ほった あつし)
教育+ネットワーク+ゲームを3本柱に開発するデザイン会社勤務。若くて元気な頃は、シミュレーションゲーム「TheTower」「シーマン」などのアートディレクターとして徹夜の連続。現在はWEBサイトデザインやCMS開発で主に学校を対象にした広報支援のためのお手伝い。お手伝いがエスカレートして、息子の高校PTAのICT委員会顧問に抜擢され、ICT教育の準備で徹夜の連続。