CSS Nite LP, Disk 12「デザインコンテスト」に出してみた

サイトを作る上でユーザーを把握する事は大変重要ですね。仮説を元に制作を進める事もおおいですが、ある程度の指標を用意する事はデザインを行う上で助けてくれる事と思います。FMチャッピーは、埼玉県西部地区のコミュニティFMです。埼玉の人口を見ると705万人。全国で5番目に人口の多い県です。
また平均年齢が全国平均年齢は 49.1歳であることに対して、41.3歳と他県より若い県です。しかしその一方では6人に1人が高齢者と言われる65歳以上です。
この数値から分るのは、若年層と高齢者層を埋める40代～50代が少なく、また県全体的に他県よりも高齢者総数も多いという事が分ります。
上記の内容を踏まえ下記をサイトのゴールとさせて頂きました。

サイトのゴールに基づき出来上がったのがこのデザインです。
非常にシンプルですが、ゴールを踏まえた結果非常にシンプルなものになりました。

各所説明は下記を参照ください。

「周波数「FM77.7MHz」をはっきり表示してください。」とクライアント要望もあり、サイトID横に記載させていただきました。
よく陳列棚でなど遠くから陳列棚を見る場合、英数字の「F」の様な目線の動きをします。
Webサイトを閲覧する際にはこの動きと近い動きをするそうです。
つまり、左上からその横にかけてが自然と目に入る順番になるのです。
また単純にFM77.7MHzと記載するのではなく、「あなたの街のラジオ局エフエム茶笛は77.7MHzで毎日放送」とすることでコミュニティFMを印象づけています。

サイト内の欲しい情報を探させるのではなく探してあげる。サイト内検索を実装することで、より少ないアクションで欲しい情報を引き出す事を可能にします。

幅広い年代の方に分りやすいラベルを設定しました。
例えば、「タイムテーブル」→「番組表」とする事で、新聞のテレビ欄を読んだ事のある方はイメージがつけやすいかと思います。
また、「DJ」「パーソナリティ」など1つの意味に複数の表現が設定されていましたので、「パーソナリティ」に統一しました。

画像テキストはマシンテキストと違い拡大縮小ができない事を考慮し大きめの14ptに設定し、なるべく明度差のある文字色、背景色を使用することで読みやすい様に処理をしています。
また、マシンテキストについては、文字サイズ変更ボタンをつける事で、ブラウザの機能を使用せずとも文字可変を可能にしております。

文字の読みやすさを考慮して下線を使用しないリンクを採用される場合もありますが、青文字下線という表現は年齢を越えて一番理解しやすいシンプルなリンクの表現方法だと思います。
また、文中リンク以外にはお茶の葉をイメージしたリンクアイコンを使用することで、固くなりすぎない用に配慮しています。

毎月、毎回更新があるコンテンツは、スタッフの方でも容易に変更ができる様にしています。

エフエム茶笛（チャッピー）はより地域に密着した情報や皆さんのサポートを行っている企業です。
フリーマガジンの発刊から、ラジオCM、イベント運営にいたるまで幅広い事業内容で、地域の皆さんに貢献していく企業ですが、現状のサイトでは伝わりにくい様に感じます。
サイドナビにまとめ、一言で連想出来そうなラベルを使用する事でより伝わりやすくなるのではないかと思います。

こちらのコンテンツは、街の情報、天気・防災情報など地域に密着した情報を提供して行く事が、将来的に必要ではないかと思います。
現状は、リンク集や、天気・災害情報などは他サイトへのリンクを貼る程度になっています。
さらに一歩踏み込んで防災情報、災害時の対応など、新たにコンテンツを充実させることも必要ではないかと思います。

こロゴカラーをキーカラーとし、他カラーをおさえる事で、ロゴを隠してもサイトのイメージが同様に保たれる様に配慮しております。 操作がわからない方は、ページ遷移や別ウィンドウが立ちあがることで、元のページを見失ってしまいます。キーカラーをサイト全体で使用することで、サイトのイメージがスクロールしても保たれる様に配慮しております。

文字の行間を大きく開ける事で、文字が小さくても読みやすくなっております。また、上下の文字が離れているので、読んでる最中に読んでる場所を見失なう事もありません。

キービジュアルエリアには、今日のゲスト情報や、コンサート情報など、強く見せたいコンテンツを大きく掲載します。
また、エリア背景に茶畑の風景をあしらう事で、より一層地域感をだしています。