こんにちは。クリエイティブデザイン部金子和代と申します。はじめまして。
私は普段はHTML/CSSコーディングを中心にそれにまつわる業務をしています。
このたび、クリエイティブデザイン部の有志で「Web Designing ウェブフォントデザインアワード2011」に応募したところ、最優秀賞と協賛賞を受賞しました。

その作品ができあがるまでの紆余曲折を書きます。
いちコーダーがディレクターとなって、考えて行動したディレクションについての話です。

まずは案を出す

普段の業務では、「何を作るか」については決定しています。
しかし今回は「何を作るか」から考えます。

うわさのウェブフォントで何ができるか試行錯誤します。

案出ししていたときに持ち寄った資料

各自が、何を作りたいかを考えてきて持ち寄った。

案出しはクリエイティブデザイン部内で行ったのですが、なかなか話がまとまらない場面がありました。そんなとき、部長のファシリテートで案がまとまりました。

  • ・ともすればつまらなくなりそうなアイデアの良いところ(本質)をピックアップ
  • ・議論が止まりかけたときの風穴を開ける
  • ・意外な組み合わせを提示する
  • ・議論に夢中で何を話しているか目的を見失いかけたときの軌道修正をする

さて、これで、「ふきだしッター」と「SeeSea」の原型ができました。

ディレクターってつまり?

作るものが決まったあとに、舵取り役を決めました。
「SeeSea」の方は私、金子になりました。
ディレクター?プロジェクトマネージャー?呼び名は何でもいいのですが、とにかくこの案を実現させるためにはどうすればいいかを考える係になったんだなと自覚し、実現させるためにいろいろなことを考え実行しました。

作ってもらうためのものを作る

作りたいものが決まりましたが、まだまだイメージが定着していません。
イメージを固めるために作りたいものを書いてみます。

完成品のイメージ

完成品のイメージを書いた。必要機能が見えてきたので洗い出す。

何が必要か少し見えてきました。それをリストにします。

  • ・機能を書き出す
  • ・タスクと役割を決める
  • ・期限を決める
タスク一覧

機能を洗い出して、やることを洗いします。

ようやく人に依頼できるレベルになってきました。

ここで、技術的に不安なことや、操作感についてテストをしたくて、モックアップを作りました。
作ってみて使いにくいところなどは、機能として盛り込むのをやめました。

作りたいものを共有する

作業を依頼するためのものはできました。
しかし作業のみの依頼だと、作業者によってイメージにばらつきが出だろうし、デザイナーにイラストを依頼するときにも、機能だけでは雰囲気が伝えられないと思いました。
そこで「どういうものを作りたいか」を過不足なく伝えるために、コンセプトボードになるようなものを作りました。
作業するときのイメージを手助けするようなものを、画像とテキストをまとめました。

コンセプトを伝えるためのパワーポイント

イメージ画像とその画像のどこがイメージどおりかを説明したシート

○こういう感じ ×こういう感じじゃない
  • ・水族館のトンネル・大水槽
  • ・図鑑
  • ・ドキュメンタリー
  • ・動きはデフォルメ。リアリティなくて良い。
  • ・水族館のショー、動物園のふれあいコーナー
  • ・アクアリウム
  • ・バラエティ
  • ・漢字が並んでいるだけのもの。

このように、コメントと画像をまとめて、コンセプトが共有できるように工夫しました。

いざ、制作

CSSのキャプチャ

魚はこの記述で動いています。CSS3アニメーションを使っています。

ここまでくれば、コーダーの得意分野です。
以下のタスクを同時進行して、あとで合体しました。

  • ・イラストをデザイナーに依頼
  • ・クリックしたときの遷移の調整
  • ・魚の動きをつけ、その後量産・バランスを見てちりばめる

完成

できあがって初めて気付く「あら」などがありました。
部のメンバーに使用感を確認してもらって、最低限の修正をして提出しました。

そしてできあがったものがこちらです。受賞作品「SeeSea」

「SeeSea」の画面キャプチャ

完成した作品「SeeSea」

  • ・作品URL:http://kuri.nifty.com/seesea/index.htm
  • ・作品の概要:ウェブフォントを用いた文字の魚や貝などが海を泳いでいます。泳いでいる生き物をクリックすると、その画像と紹介文が読めます。
  • ・受賞した賞:ページ部門 最優秀賞、協賛賞 白舟賞

制作メンバーが作るものを共有できていたので、作業中も大きな迷いもなく、原案から遠くならずに制作を終えることができました。

制作を終えて

作ったあとに部内で反省会をしました。
進め方に問題がなかったか、ディレクター・デザイナー・コーダーが制作当時に感じたことなどを話し合いました。「作品の価値」についても話し合いました。
ただ作るだけではなく、メンバー自ら評価をして、各々気付きを得ることができました。
今後も、クリエイティブデザイン部で挑戦したいと思ってることをどう実現していけばいいか、考えて行動していきます。

mock!今月号のトップへ