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

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


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

【第1回】デザインは魔法か?

デザインとは

ソフトウエアのデザインを仕事にして25年がたちます。ソフトを使ってデザインするのではなく、ソフトウエアのデザインです。注文主は、プログラマーだったり、経理の人だったり、工場の方だったり、携帯サイトやWEBサイトのプロデューサーだったり様々です。主に画面に見えている部分のグラフィカルなデザインが多いですが、絵描きとはすこし違って、入り口であるタイトル画面から始まって、メニュー画面の構成を考えたり、画面遷移などのフローチャート(流れ図、サイトマップ)も作成します。グラフィックデザイナーと、工業製品を作るプロダクトデザイナーの混ざったような仕事です。

デザインは一般に「意匠」と訳され、「計画(プランニング)」とほぼ同義語です。最近では、WEBデザイナーと呼ばれる職業がありますが、htmlやタイトルGIFやフラッシュアニメを作ったりする人のことではなく、本来は、そのWEBサイトの目的を明確にし、ターゲット(訪れてほしい人)や目標(提供すべき情報や商品購入などの顧客アクション)を設定して、その目標を達成するために様々な仕掛けや工夫をする人のことだと思います。

デザイナーという看板を掲げていると、たまにこんな依頼がやってきます。

プログラマ「プログラムは作った。あとは、見栄えをちゃちゃっとカッコよくして。」
商店主「ホームページを作ってるけど、絵が描けないので、かわいいイラスト入れて。ロゴもちゃちゃっと作ってくれる?」、「絵心がないので、どすればいいのかわからない、素人ぽく見えないようにしてほしい」
WEBサイト担当「前任者がつくったサイト、評判がよくないのでリニューアルしたい。雰囲気だけちゃちゃっと変えて、ぶっちゃけ、いくら?」
こういう世の中なら、チャチャットデザイン株式会社をつくれば、儲かるはずです。

『デザインは魔法ではありません。』

最後に振りかけるとあーら、ふしぎ。素敵なサイトに変身というわけではありません。デザインの基本的な手順としては、次のようなことを行います。

(1)誰のために、何をしたいか(伝えたいか)を明確に言葉にするためのヒアリング。クライアント(発注者)から聞き出すのは曖昧なイメージではなく、これだ!という明快な言葉です。
 (2)聞き出した言葉の背景を理解し整理する。
 (3)言葉を表現するのにぴったりな、素材や表現を必死でひねり出したり、探し出す。
 (4)(3)の素材が(1)の言葉を引き出しているかをチェックする。

(1)のヒアリングにはかなり時間がかかります。なぜなら、言葉にすることの重要性に気付いてない場合が多いからです。しかし、そこをなんとか聞き出して言葉にすると、後の作業は流れるように進み、全体としては短期間で終わるものです。

デザイナーはある面では翻訳者だとおもいますが、相手の言っている事を全て訳すのではなく、相手の言いたい事の本質を理解し、要約して、違う文化の人々に伝えるという手助けをしているわけですから、先ず相手を理解することが重要です。

学校サイトのデザイン

さて、「学校サイト」についてはどのように計画を進めていくとよいでしょうか。

例えば、実際の店舗と比較してみましょう。お客さんの多い飲食店にはこんな特徴があります。

  1. 看板    外から見て何のお店かわかる。(蕎麦屋? 中華屋? 喫茶店?)
  2. ターゲット 店構えでどんな顧客を想定しているかわかる(家族向け?定食屋?高級専門店?)
  3. アピール点 「今月のおすすめ」「新蕎麦入りました」「無農薬」などの目を引く張り紙がある。
  4. メニュー  品揃えや値段がわかって安心して注文できる。
  5. 満足感   出てくる料理が期待通りでおいしい。(やがてはリピーターへ)

これを学校サイトにおきかえてみると、こんな感じでしょうか。

  1. 看板    ホームページではタイトルにあたります。どこの学校かわかるようにしましょう。(学校名が読めない、どこの県なのかわからない学校サイトは沢山あります。)
  2. ターゲット 誰のために運営しているか。(保護者? 子ども? 地域の人? 先生向け?)
  3. アピール点 トップページを見ただけで学校の特徴がわかる。
  4. メニュー  目次やサイトマップが整理されている。欲しい情報がどこにあるかが予想できる。
  5. 満足感   欲しい情報が公開されている。学校の事が手に取るようにわかる。

このように情報を整理してみると、学校サイトの方向性が具体的に見えてきます。それが、サイトをデザインするということの第一歩なのです。

次回予告

次回は、わかりやすいサイトデザインをするためのノウハウの中より、まずは色彩計画の基本とポイントを、具体例を示して解説していきます。

No1-fig01.jpg

例えば、このような絵を見ながら、A、Bの違いがどこにあるのか、言葉で表現できるようになります。そうすれば、デザインは魔法ではないという事がわかっていただけると思います。

(2011年5月9日)

ahotta.jpg

●堀田敦士
(ほった・あつし)

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