« 『そめけん!』8月31日第19回放送 | メイン | ブログのデザインを刷新 »

2010/09/03

「ヒマナイヌバー」ホームページをつくりました

4月からデジハリの本科Webクリエイティブ専攻という1年間のコースに通っていますが、7月・8月で中間課題の制作、というのがありました。

実在でも架空でも良いので、何か「お店のサイト」というものをひとりで作り切る、という課題です。

私は知り合いがマスターをしている「ヒマナイヌバー」さんのホームページを作らせていただき、先週無事、公開されました。昨日、頼まれたページ追加という更新作業も終え、ほっと一息ついたところなので、この中間課題について振り返ってみたいと思います。

Home_s

【課題の趣旨】(学校からの配布資料より)

実際のサイト制作を通じ、今まで個々で扱っていた2Dグラフィックス作成、HTMLコーディングなどの手法を組み合わせて、サイト制作の基礎を身につけます。

【サイトの要件】(課題として「これはやりなさい」と言われたこと)

  • 一般的なお店のサイトとして必要なメニューなどを備えた、6〜10ページくらいのサイト
  • HTMLとCSSを使ったサイト(全面Flashは×)
  • Flashをどこかに一箇所入れる(アニメーションと再生ボタンを付ける)

【スケジュール】

  • 6月中旬:課題のテーマやスケジュール等の発表。(5月後半から、授業の合間に先生から「中間課題はお店のサイトを作ってもらうから、今から考えておくように」なんて話がありましたが、正式に説明を聞いたのがこのタイミング)
  • 7月中旬:企画プレゼンテーション(企画書を作ってクラスのメンバーの前で発表し、先生からコメントをもらう。実在のお店のサイトを作る人は、なるべくここまでにそのお店の了解を得ておく)
  • 8月初旬:中間チェック(各ページのデザイン(できたところまで)をクラスのメンバーの前で発表し、先生からコメントをもらう)
  • 8月下旬:作品プレゼンテーション(クラスのメンバーの前で、作ったサイトをブラウザで動かしながら発表し、先生とみんなからコメントを書いたものをもらう)

※上記のタイミング以外に、なるべく先生をつかまえて事前に相談をしておくことを推奨されました。

【私の作業工程】

  • ヒマナイヌバーのサイトを作ろうかな、と思う。
    ヒマナイヌバーは、デジハリ大学院の先輩が昨年9月に開店したバーで、行ってみたいと思いつつ、この時点では行ったことがなかったので、まずはそのバーを訪れてみました。
    事前にバーのサイトがあるかどうかチェックしたのですが、見つからず、ないんだったら丁度いいやと思って、初めてお店に行ったその日に、「ホームページ作らせてください」とお願いして快諾いただきました。(本当はその時点でホームページは存在していました。マスターが「忙しい中適当に作ってそのままだ」と言っていて、確かにずっと更新されていないようでした)
  • バー・飲食店のウェブサイトをリサーチしつつ、企画を練る。
    ヒマナイヌバーは、前述の先輩が昼間はサラリーマンをしながら毎晩マスターをしているバーです。そんな大変な思いをしてまでどうしてバーをやるのか、ご本人の話を聞いたり、ここに書いてあるコンセプトや指針を見ると、「訪れる人達と一緒に楽しんだり、創造したりできる場を作りたい!」という気持ちがすごく感じられたので、それが伝わるようなサイトにしたいな、と思いました。
    また、もともとあったピンク色の犬のロゴマークを使うことも考えると、バーのサイトに良くあるような、全体的にダークカラーで大人のイメージのサイトはちょっと違うな、と思いました。
    どちらかというと、親しみやすさや楽しさが感じられるような、そんなサイトにしよう、と考えました。
    また、お店でしゃべっているときに、コンセプトとして「多国籍バー」というのがあるから、サイトも多言語対応にしたい!という話になり、それぞどう実現しようか、というのもこの時色々考えました。(当初は各ページの内容が5ヶ国語くらいに対応して…、というような話をしていたのですが、それはさすがに大変なので、基本的に、大事なところは日英併記、キャッチコピーは日・英・中・韓・ベトナムの5ヶ国語表示になりました)
  • 企画発表。
    上記の、ヒマナイヌバーってこんなところですという紹介、上記の親しみやすさや楽しさが感じられて多言語対応のサイトというコンセプト、サイトマップ、ディレクトリ一覧などをまとめて発表しました。
    (この時点でトップページのワイヤーフレームくらいまでは作って先生に見てもらっていたので、発表の時はそんなに指摘はなかったです。事前の相談では、「このサイトはどういう人に観てもらうものなの?」と、目的を明確にすることと、その目的に沿って、最新情報が分かりやすかったりアクセス情報が分かりやすい(地図が見やすい、携帯からも地図が見られる、など)というあたりを工夫するように言われました)
  • ワイヤーフレームの作成。
    Wireflame

    イラレを使って、このようなものを全ページ分作りました。
    文字量と画面レイアウトのバランスが分かるようにというのと、バーのマスターに見てもらって「こういう風に作りますけどいいですか?」という確認ができるように、テキストの部分もなるべく本当に入る原稿を想定して書きました。
  • デザイン。
    ここが一番大変でした。
    企画とワイヤーフレーム作成は、長年仕事としてやってきたことであり、かつ好きなことだったのでかなりスムーズに進んだんですが、これまでは、作ったワイヤーフレームをデザイナーさんに渡して、「さて、どんなデザインで出てくるかな?」って待ち構えてる立場だったので…(笑)
    コンセプトである「親しみやすさや楽しさを感じさせる」という部分を達成するために、見た目で遊び心を表現したいな、とずっと思っていて、当初はページの上部にバーのカウンターを模したリンクメニューを配置、という案もありました。
    あと、犬のロゴマークを薄いピンクの線だけにしたものを背景パターンとして敷き詰める、というようなこともやってみたのですが、先生に見せたら「素人くさい」とバッサリ。(そう言われるとは思ってたんですけどね。「ヘタウマ」みたいなゆるさをねらったんですが、やっぱり難しかった…涙)
    で、最終的にたどり着いたのが、ベースカラーをピンク、各コンテンツの背景は紙っぽいテクスチャを入れてアナログ感を出し犬の足あとやしっぽという遊び要素を入れる、という基本デザインです。
    トップページのFlashはお店にあるプロジェクタのスクリーンをイメージしました(ちょうどその頃サッカーW杯の時期で、お店でパブリックビューイングをやってたんです)。
  • 中間チェック。
    ここまでにできていた5ページ分くらいのデザインを見てもらいました。
    これも事前に先生に見てもらっていたので、ダメ出しとかはなかったけど、地図のクオリティをもっとあげよう、って言われて途方にくれました…。(結局、最終的には使用色を減らし、地図上の目印も減らし、なるべくスッキリ見えるようにするという改善をしてみました)
    クラスの中では、このあたりからみんなの作業進捗に差が出てきました。休む人も多め…。
  • コーディング。
    上記の中間チェックを経て、全ページのデザインが終わったのが8月10日くらいでした。
    それからPhotoshopで画像を切り出し→HTML作成→CSS作成、の繰り返し。
    今回はトップページ以外のページはヘッダと右サイドとフッタが全部同じなので、トップページとメニューページ1ページを完成させることが出来れば、あとは楽だろう、と見込みました。
    その見込は当たってはいましたが、各ページのメイン部分はそれぞれレイアウトが違うので、何かしらCSSで悩むところが…。悩んだとしてもそのたびに学習をしているので、ページが進むうちに悩みの解決速度も速くなっていったのですが。
  • Flash制作。
    これがなんだか気が乗らなくて…。
    課題の要件としてはやらなければいけないのですが、今回のサイトではあまり必然性が無いかな、と思っていたこともあり、Flashを表示させる場所だけ決めて、実際の中身はずっと後まわし。コーディングが全部終わり、最終の発表の前日と前々日くらいでバタバタとFlashを作りました。
    Flashは、7月中旬から教わり初めたのですが、8月の半ばからは授業が休みになったためにその頃は全然触ってなくて、いざつくろうと思ったら操作方法を忘れてて焦りました…。
  • 最終発表。
    前日くらいに先生からみんなに、全部できてなくても発表はするように、という念押しメールがきました。
    私はなんとかFlashも作り終えて、一応作る予定だったページは全部できた状態で発表に臨むことができた! はずだったのですが…、いざ発表の時にブラウザ(IE)を起動するとトップページのFlashが表示されない(涙
    JavaScriptが動かなかったりFlashのプラグインが無いときは静止画が表示されるようにしていたのですが、それが表示されるわけでもなく、Flashは起動しているんだけど、アニメーションが呼び出されなず、表示エリアには「・・・」というのが出たり消えたり、という状態でした。
    後から思えば、swfファイルを直接開くなりしてせっかく作ったアニメーションを見てもらえばよかったのですが、発表中はそんな起点は利かず、Flashのエリアが大きな空白になった状態のページを見てもらうのは大変恥ずかしかったです…。
    他の部分は問題なく表示され、後でもらったみんなの感想では、色使いがきれいとか褒めてもらえて、本当にうれしかった!

えー、長くなりましたがこんな感じで、私の課題としてのサイト制作は終わりました。
Flashが表示されないのは、Flashを表示させるためのJavaScriptをHTML内に記述していたのですが、正しいスクリプトとは別に、サンプルのスクリプトが(サンプルなので存在しないファイル名などが書かれている)余計なところに貼り付けられていたためでした。
こんなとこにコピペした覚えないのに〜、というところに潜んでたので、きっと手がすべって貼っちゃったんでしょう…。
それでも家では全く問題なく動いていたし、発表の日の朝に学校の別の教室で試した時も動いたので、本番でああなるとは…。でもまあ、ネットで公開する前に気づいて良かったです。

その後、ニュースやイベント告知の内容を最新状態に修正し、お店のマスターに送って旧サイトと差し替えてもらって無事公開となりました。
あと、制作中にお店の写真を撮りに行ったら、近くでお友達のバーがオープンするとかで、マスターから「せっかくだから友達のバーを紹介するページも作ってよ」と言われ、その日になんと4件のバーに連れて行かれる、ということがありました。行く先々で「取材だからよろしく〜」と紹介されて、成り行きで写真を撮ったり各お店のマスターの話を聞いたり、なかなか面白い体験でした。
ただ、そのタイミングでは課題の発表までに1ページ追加するのが難しかったので、後で追加とさせてください、ということにし、今週になってからそのページを作り、昨日公開しました。
それが、この「友達Bar紹介」ページです。
これ、とっても後悔しているのが、最初の「坊主バー」さんのところは店内が暗くて写真がほとんど撮れていなかったってことです。家で補正すればなんとかなるかしら、と思っていたのですが、ほとんどがなんとかならないレベルでした(涙
マスターにはずいぶん長く相手をしてもらったのに、申し訳ない…。

全体を振り返ってみると、上にも書きましたがワイヤーフレームを作るまでは慣れている、ブログのテンプレートをいじったり、すでにできあがったサイトのちょこっとした更新とかはやったことある、とはいえウェブサイト全体を全くゼロから作り上げるのはほぼ初めてで、知ってはいたけど地道な作業だな〜、ということを実感。
ディレクター、デザイナー、コーダー、フラッシャーとか、分業にするのが効率的なのも分かる気がしました。

でも、コーディングというのはすごく面白いものでした。
特にCSSでのレイアウト指定は、自分が書いたことが意図通り反映するかどうか、ちょっと書いてはブラウザで確認するのですが、全然崩れていてがっかりしたり、逆に一発でぴったり決まって喜んだり、このちょっと難しくて、その場で結果を確認できる、というのがゲームみたいで楽しいんですよね。結構いくらでも集中してやれそうな気がしました(その代わりひどい肩こりになりました)。

反省点としては、上の坊主バーさんもそうですが、写真素材がなかなか良いのを揃えられなかったということ。
ドリンクと料理の写真以外はすべて自分で撮ったのですが、いざ使おうとするといまいち見栄えが…、というのが多かった。
いっぱい撮って使えるものを使おう、みたいなやり方だったので、きちんとやるなら先にどういう写真が必要かきっちり決めて、それを撮りに行くこと、そのために必要なライトとかも用意することが必要、と思いました。

学校では、この後は「グループワーク」といって5人のチームで、クライアントさんの要件に応じたサイトの提案をし、もしそれが採用されたら本当に作る、というのをやります。
ひとりで作るのとは違う難しさがきっとある…。でもひとりでは出てこない発想とかテクニックも出てくると思うので、楽しみです^^

コメント

フィード You can follow this conversation by subscribing to the comment feed for this post.

この記事へのコメントは終了しました。

最近のコメント

Tweet

follow yatun on twitter

Powerd by TypePad. | Designed by Eri Yatsuzuka.