• XHTML1.0
  • CSS2
  • javascript
  • jQuery

Culture-S

カルチャースクール【Culture-S】(架空サイト)

http://yane-ni-kabochano.com/Culture_S/
ページ数 26p ()
使用ツール Photoshop , Illustrator , Fireworks ,
Dreamweaber
使用言語 XHTML1.0 , CSS2 , javascript(jQuery)
コンセプト 校舎施設を所有しているカルチャースクールを想定して作成。全年齢向けで、市民交流の場としても利用できそうな大型スクール。
備考 写真素材…素材辞典フォトバイブル
     素材辞典フォトバイブル2
     フリー写真素材「足成」
制作期間 2011年8月

情報を分かりやすくグループ分け・レイアウトする練習として、少しボリュームのあるサイトを作成しました。

全世代向けカルチャースクールということで、明るく快適な施設イメージとしてグリーンをベースとし、趣味や学ぶ楽しさを連想させる明るいカラーでコンテンツを色分けしました。

  • サイトイメージ
  • サイトイメージ
  • サイトイメージ

制作時の思考あれこれ

サイトを作るにあたって、学習目標やサイトの目的を明確にして取り組みたいと考えていました。
以下はこのサイトを制作するにあたって考えた・感じたことをまとめています。
(サイトの出来にはあまり関わりのない取り組み姿勢的な部分なので、読み飛ばし可)

コンセプトイメージ

駅前の大型カルチャースクール

「駅周辺に大きな学校ができたら、新たな人の流れが生まれるかな」とスクール通学中に妄想したのがきっかけ。

最寄駅周辺のカルチャースクール。市民向けの、生涯学習の場として広く利用してもらえるような施設をイメージしています。

全年齢向けで、誰もが利用できる文化施設のイメージで、爽やかさ・清潔感を印象づけるため明るいグリーンを使用。明るい多色遣いを心がけました。

構成イメージ

「誰が」「どの情報」を見るのか

前回(香梅屋8p)よりも多い情報量のため、どこに何を配置するのかを特に意識しました。


想定されるサイト利用者を、「新規の受講希望者」・「受講生・会員」・「イベント参加・施設の一般利用者」と大まかに区分し、トップページはそれぞれの層に向けた情報を固めて配置。

使用PCのモニターサイズによっては、ちょうどサイト全体の2/3程の表示となることから、このような配置にしてみました。

受講希望者は主に上・中段を、催事や施設の一般利用者は1スクロールして中・下段を表示し、表示範囲内で必要な情報を得られるようにという狙いです。情報量が多めなので、利用者が求める情報をグループ分けし、できるだけ迷わせないようにと意識して制作しました。

アイコンイメージ

ボタン・アイコン・バナー…定番加工の練習

サイト内容的に使用頻度が高いボタンやバナーなど、各種パーツの作成練習を兼ねていました。Photoshopにて、ボタン・アイコンの定番加工をできるだけ取り入れることが目標その1でした。

javascriptやjQueryで動きのあるページに

前回は使用しなかったjavascript(jQuery)をできるだけ自然な形で取り入れること、サイトに動きをつけることが目標その2でした。


今回はトップページにクロスフェード画像、下層ページのサイドバーにアコーディオンパネルを使用。トップの画像はおすすめ講座の紹介やスクールのイメージを利用者にわかりやすく発信するため、下層サイドバーのアコーディオンパネルは省スペースのために利用しています。

イベント風景の写真をギャラリー風に見せるページを想定して、Lightboxを使用。無論、架空スクールにイベント風景など存在しないため、単なるサンプルギャラリーです。

ページトップへ