sutudio nob-san

  • home >
  • design >
  • 第7回 逗子 子どもフェスティバルのイベントサイト
web
第7回逗子子どもフェスティバルトップページ画像

第7回 逗子 子どもフェスティバルのイベントサイト

ツール
手描き / photoshop / illustrator / dreamweaver
技術
xhtml1.0 / css2.1 / jquery
ゴール
  1. 興味を持ってもらい、イベントに足を運んでもらう
  2. イベントのWebチラシとして分かりやすい情報の提供
  3. ユーザーに安心・信頼・親しみを感じてもらう
  4. 初めての人には知って興味を持ってもらう
  5. 次回以降の参加者へのプレゼン資料として
問題
イベント数が多く情報が煩雑、スタッフや参加者の顔が見えにくい
制作期間
一か月半
URL
http://kodomo-fes.k-n.me/
詳細
今回で7回目を迎える第7回 逗子 子どもフェスティバルのサイト制作です。逗子 子どもフェスティバルは行政と民間が一体となって行われるイベントで会場は逗子文化プラザ複合ホールで行われます。
サイトデザインは親しみや安心を感じさせるUIデザインと、使いやすさ見やすさを意識した情報配置を目指しました。
また、関わっている人や子どもフェスティバルの物語や、大切な価値観・目指す将来像が伝わるコンテンツを盛りこみ、興味や関心を惹き、共感を持ってもらう事を狙いました。

>> 第7回 逗子 子どもフェスティバル サイトTOPへ

基本設計

日程や会場などのイベントの基本情報は全てのページのヘッダーとメインイメージに掲載しユーザーが最低限必要な情報をスクロールせずに閲覧できるようにしました。
メインコンテンツである"おすすめのイベント"や"各日のイベント一覧ページ"は大き目のグローバルナビボタンやバナーにしてコンテンツへの誘導を促す事を狙いました。
グローバルナビは4つですがこれは近年の認知心理学において人が記憶しやすい数字は4であるという理論を採用しています。

インターフェースデザイン

子ども向けなので見出しやボタンにいくつかの分かりやすい色を用い、かわいいイラ ストをちりばめ、見ていて楽しくなるサイトを目指しました。
安心安全の場を大事にしてるとの事なのでナチュラルな素材を用いて安心感のあるサイトを目指しました。
子どものイベントでありつつサイト閲覧のターゲットは大人ですので、上述のインフェースデザインに加え情報の配置はグリッドデザイン採用し、やわらかさ・かわいらしさと情報の見易さの両立を目指しました。

レイアウトデザイン

【情報のチャンク化】

コンテンツ内の情報レイアウトは一つの情報ブロックを周囲に余白を取りチャンク化して認識しやすいようにしました。

【見出しデザインの基本的な考え】

  1. 書体の大きさ・色・種類を文章と違う物にする事により情報の違いを示し情報を拾いやすくしています。これはデザインの基本であると同時に人の認知を意識し”詳細に読み込みたい人”と”全体の情報を短時間で把握したい人”の双方に向けてです。
    (参考理論)NLP・LABプロファイリングのオプション・プロセス型と全体・詳細型
  2. 読み物系コンテンツの見出しは閲覧ユーザーにどんな風に情報を捉えてもらいたいかを意識しており、物語を感じてもらう・共感してもらうと言うサイトコンセプトにそった形で考えています。

【ホール別見出しのデザイン】

  1. デザインは色や大きで情報を分け、手書きで印象を変え、他と情報が違う事を明確化しました。
  2. 全体では3から4色とカラフルですがチャンク単位の情報では本文色+見出し色のみとシンプルにしました。

【リズムと視線の導線】

必ず各情報ブロックにアイキャッチである写真を配置し文章は右そろえと左そろえが交互に並ぶように配置する事により、視線の導線をジグザグに誘導し最後まであきずにリズミカルに読めるレイアウトを目指した。

【本文】

本文と付加情報など情報の種類が違うものはフォントの色や大きさを変えて煩雑な文章を読みやすくしました。

【デザインのバランス】

コンテンツ内部の情報レイアウトはシンプルですが、近年の認知心理学で「人は対象物の詳細な認識では主として中心視野を使うが、場面全体のあらましをつかむには周辺視野を使う」と言う理論がありますので周辺のナチュラルなデザインや作りこみでサイトのやわらかい印象を無意識的に伝える事ができているのではと思います。

>> 第7回 逗子 子どもフェスティバル イベントページへ

第7回逗子子どもフェスティバルイベントページ画像
第7回逗子子どもフェスティバルアバウトページ画像

子どもフェスティバル を深く理解してもらうコンテンツ

子どもフェスティバル を深く知ってもらい、興味・関心を惹き共感してもらうためのコンテンツを用意しました。
コンテンツ設計のベースにあるのは次の3つです。

  1. 子どもフェスティバルとそれに関わる人の物語を描く事
  2. 子どもフェスティバルが何を大切にしてきたか(価値観)を示す事
  3. 子どもフェスティバルがこの先どうなって行きたいか(将来像)を示す事

【具体的な施策】

  1. 最初の情報ブロックで子どもフェスティバルの説明をしてここだけでも子どもフェスティバルを理解できるようにしました。
  2. 後に続く情報ブロックは立ち上げのきっかけからはじまり時系列にそって将来像につなぎ物語の流れを作りました。
  3. トラブルを乗り越えた経験など物語性が高く共感してもらいやすいエピソードを盛り込みました。
  4. 価値感や将来像を示す事により子どもフェスティバルに対する理解と共感が促進する事を狙っています。

>>第7回 逗子 子どもフェスティバル とはのページへ

スケジュールページ

イベントが多く、3日間の日程で情報が把握しにくかったのでイベントが一覧できるスケジュールのページを作りました。
制作にあたっては見やすさを意識し下記の点に気をつけました。

【イベントスケジュールのデザイン】

  1. 日付やホール別の項目部は色分けをする。
  2. テーブル内部は白ベースで余白を取り情報をチャンク化する。
  3. 見出しをホール別の項目と同じ配色にする。
  4. アイキャッチとして写真を配置する。
  5. 有料企画や事前申し込みが必要な企画が把握できるようにアイコンを設置する。
  6. 可能なかぎり罫線を省略する。

【フェスティバルパーク・スケジュールのデザイン】

  1. スケジュールが縦に長くなったのでエリアごとのテキストナビゲーションを設ける。
  2. 飲食、物販などのエリアごとに色分けをする。
  3. 店舗の情報と出店日程を同時に把握できるように1つの行で表現する。
  4. 可能なかぎり罫線を省略する。

>> 第7回 逗子 子どもフェスティバル スケジュールページへ



最後に”本サイト制作に対する私の想い”

当初クライアントである実行委員長が求めていたのはイベントの情報が分かるチラシとしてのWebでしたが、接する中で子どもフェスティバルに対する熱い想いを聴き、裏で支える人たちを目にし、立ち上げから今までのエピソードを耳にしまして、そういった表には出てこない事柄を形にできないかと考えるようになりました。

そういった中でサイトの目標は第一に”イベントの情報を知ってもらい来てもらう”、”第二に支える人・関わる人・子どもフェスティバルのストーリーや子どもフェスティバルに対する想いを形にする”と言う方向性になりました。

また、今回の制作は1年ほどWeb制作から離れてブランクがある中でのスタートでしたので、なかなか勘がもどらずに苦労したのですがその甲斐あって良いものができたと思います。

第7回逗子子どもフェスティバルイベントページ画像

Page Top

Copyright @ 2012 studio nob-san.All Rights Reserved.