こんにちは、クリエイティブデザイン部でHTMLコーダーをしている阿部です。
今回の自由研究は、Web Designing ウェブフォントアワード2011への応募で体験した「ものづくり」のお話です。
普段コーダーの自分が、ニフティ初ディレクションを担当して学んだ3つのことをご紹介します。

-アワードと応募作品のご紹介-

アワードと応募作品のご紹介

ふきだしッター

http://kuri.nifty.com/fukidashi/

ウェブフォントのコンテスト

Web Designing ウェブフォントデザインアワード2011」の応募条件はウェブフォントを使ったページを作ること。

フォントメーカー発の新しいウェブフォントサービスは、書体が豊富で予想以上に美しかったです。これまで日本語ウェブフォントは数が少なく、商用で使えるものがほとんどありませんでした。

-応募作品「ふきだしッター」-

応募作品「ふきだしッター」

Twitter+ふきだし=ツイート検索ビューワー

誰かに伝えたい言葉は、画面いっぱいに大きく表示させてみたい。
マンガの吹き出しみたいに見えたら楽しいよね、ウェブフォントの魅力も伝えたい。

Twitterで投稿する小さな1ツイートには、瞬間の感情が詰まっています。
思ったようなTwitterビューワーがなかったので「ふきだしッター」を作りました。

-初ディレクションで学んだ3つのこと-

普段コーダーの自分が経験したディレクションは得るものが多く、
これからインタラクティブなサイトでコーディング担当する機会に活かしたいです。

1.サイトコンセプトとイメージの共有がとても大事!

サイトコンセプトとイメージの共有がとても大事!

動きの意識合わせが一番むずかしいところでした。
動画を見てラフを描いてみましたが、動きのスピード感を伝えられずラフを見た人も実装が大変でした。
最終的にいくつかの動くモックを作り、動きを調整して完成しました。

ディレクションからは、サイトコンセプトと動きのイメージを提示する。
どんな目的でサイトを作るか制作者に明確に伝えることが、大切だと思います。今回はウェブフォント吹き出しのアイディアから「ぼんやり眺めて楽しめるTwitterービューワー」を作るために、動きと効果音をつけたいと伝えるように資料を作りました。

実装からは早い段階で動くモックを提示する。
実際に動きのパターンを作ることで、イメージに近づくメリットと
技術的にできるできないが明確になるので、手戻りが少なくなると思います。

2.整理されたパワーポイントよりも、その場でかける手描きラフ!

整理されたパワーポイントよりも、その場でかける手描きラフ!

下手でも手書きラフを描く。
動きやUIの説明は言葉よりも絵が共有言語になりました。
制作チーム内で素早くイメージを共有するには、美しくpptにするよりも手描きラフが役立ちました。

サイトの全体設計図を遷移図として形にする

サイトの全体設計図を遷移図として形にする
クリックしたらどのページに移動するのか? 動作に必要なページはそろっているか。
サイトマップの他に、サイト全体図=遷移図があるとサイト構成が可視化され、抜けに気づけました。

3.こまめな意識あわせの会がブレをなくすポイント

予想以上に実装箇所が増えたり、優先順位の高い作業の振り分けをするため、
実装段階に入ってから毎日ミーティングを行いました。
ブレが少なくなり、タスク管理をしながら進行できました。

-ディレクションを終えて-

効率重視の分業時代と変わりディレクター・デザイナー・コーダーは連携する必要性が強くなりました。このタイミングでディレクターを経験できて、個人的に学んだことが多くありました。

HTML5やCSS3を使った制作が増えていますし、webサイトのマルチデバイス化が進みインタラクティブなwebサイトが増えています。クリエイティブな役割分担を意識して制作していく必要を感じました。

ふきだしッターキャプチャ

-制作者-

  • 阿部 ディレクション
  • 西野 メインコーディング、Twitter API
  • 伊東 ウェブフォント、CSS3アニメーション
  • 早川 音楽作曲、効果音作成
  • 竹中 デザイン、サイトロゴ
mock!今月号のトップへ