webのデザインってなんだろ？その2

まいど。

今日はちょっと雨降ったね。
でも今は晴れ。
ただ…湿気が。


ってことで、昨日の続き。
というか、続きのふりをした別の話。

デザインをあげるまでに、現状どういうワークフローをしているのか。
ちょっと自分の整理のためにもまとめてみる事にしました。


■使うもの

データファームで使っているのアイテム、ソフトはこんな感じ。

・FileMaker
・Tree
・OmniOutliner
・OmniGraffile
・Fireworks

これは使う順番で書いてます。

ってことでワークフロー。


■まずはコンテンツの洗い出し

サイトにどういった要素が必要か。
サイトマップ（俺的にはコンテンツマップ）を作ります。
（あ、ここでは何をやりたいか、何が必要かなどのブレストは終わっている、とします）

サイトマップ製作はデータファームでは、FileMakerを使ってやっています。
それ専用のシステムを自分が作りました。
ここでサイトの構造をがしがし組んでいきます。

通常のサイトマップと異なる（だろう）点は、

そのページが含むユニーク（個別）な要素も書き記す

ってことでしょうか。
例えばトップページ。
だいたいメイン画像とかフラッシュとかが入りますよね。
そしたらそれももれなく記載します。
ページ内に配置されるだろうコンテンツには（）をつけて表現しています。

サイトに必要なページは全て書き出し。
ぺージに必要なコンテンツはできるだけ書き出し。
これでサイトマップ、という名のコンテンツ構造が完成です。


■サイトマップを作ります

FileMakerからボタン一発でTreeというソフトに書き出します。
ここで重要なのは、

複数のサイトマップを描き出す

ということですかね。
現状ですと二つ。

・備考などが入ったお客様用サイトマップ
・フォルダ名、カテゴリ名が入った、主にコーダーさん用のサイトマップ

です。
用途別にサイトマップつくってます。

これがFileMaker使ってる理由ですね。
複数のサイトマップそれぞれに、変更があった場合、混乱したり二度手間になります。
なので「メインのシステムで管理」して「そっからパブリッシュ」って形をとっています。

ということなので、FileMakerで作ったシステムには、フォルダ名（カテゴリ名）やファイル名を入れる欄があります。
サイトマップを作るときに、できる限りそこも埋めていきます。

これは「メタタグ」「ディスクリプション」も追加してく予定。
（すぐてきるのに、していない）


■サイトイットでだいたいの形を決定

コンセントさんが提供してくださった「サイトイット」って考え方を、三人体制になってから導入しました。
これをやることで

このコンテンツ（内容）にあうのは、どういうページパターンなのか

というのを考えていきます。
デザインパターンを考えることで、

このページは何を表現しているのか、を考えることができる

というのは思いがけない発見でした（さくさく考えていっても、気がつく事があった）

デザインパターンを決めていく（サイトイットをきめていく）作業をすることで。
ざっくりですが、

サイトで使用するテンプレートの数

が見えてきます。
これを元に、ワイヤーフレームを起こしていくわけです。

このサイトイットは、FileMakerから書き出したOPMLファイルを材料にします。
OmniOutliner経由でOmniGraffileに持っていき、用意してあるスタイルをつかって、サイトイットをつくっていきます。


■要素ワイヤーを作る

・サイトマップ（コンテンツマップ）
・サイトイット

この二つを材料にして、ワイヤーフレームを作ります。
これは現在のところFireworksでやっています。
というのも現状の作業フローとして、

pngで作ったワイヤーフレームにデザインを落とし込んでいく

という作業が定着してきたからです。
昔はOmniGraffileでやってました。
今でも考えるだけなら、OmniGraffileの方が個人的には便利です。

どういうテンプレートを作るかはサイトイットを頼りにします。
そのテンプレートに何が必要なのかは、サイトマップ（コンテンツマップ）に書いてあります。

この段階では、デザインはあまり気にしません。
（ページ幅とか違っていてOK）

とりあえず使い回しのテンプレートにどんどん要素を落とし込んでいきます。
落ち漏れがないか、追加したほうがよいだろう要素はないか。
ここで確認します。

こうしてできたワイヤーを「要素ワイヤー」と呼んでいます。


■デザインワイヤーを作る

昔はこの後が「デザイン」でした。
でも今はもう一度ワイヤーフレームを作ります。
今度のワイヤーは、デザインを意識したものになります。

デザインルール（っていっても横幅がこれくらいとか軽い情報）を元にして。
メニューなどの除法的な優先順位などを考えながら、実際にデザインするつもりで、要素を配置してます。

ここで足りないのがあったら当然足します。
実際にデザインを意識してワイヤーフレームを作っていくと、

デザイン上、もうちょっと何か欲しい

とかもでてきます。
その場合は足したりします。
（最低限の構造はあるはずなので、足してもそんなに影響はない、という考え）

そうやって、「これに色が付いたらサイトデザインになるぞ」という形までワイヤーフレームを落とし込みます。
こうしてできたワイヤーフレームを、データファームでは「デザインワイヤー」と呼んでいます。


■疑似ページの作成

デザインワイヤができたら…。
つい最近まで、この後も「デザイン」でした（笑）
でも今は「疑似ページ」っていうものを作っています。

これは俺、正直作るの嫌だった。
でも最近は作ったほうがいい、って思ってやってます。そう思える。

疑似ページは簡単にいうと、

実際に作成するページの数だけ、嘘でもpngを作ってみる

という工程です。
実際は複数pngにするのではなくて、fireworksの「ページ機能」で作ります。

これをやると、想定したテンプレートと、実際の記事が入ったサイトとの「ずれ」が見えてきます。
このテンプレートでいいと思ったけど、もうちょっと必要、とか。
あるいは、実際に記事を流し込んでみたら、ちょっといまいち、とか。

記事がない場合は適当なダミー記事をいれていきます。
記事があるならあるなりに、ないならないなりに。
とにかくpng上にページをどんどん作っていきます。

作ったら最後にボタンなどをシンボルにして、ページの飛び先を設定します。
これをした後に、pdfで書き出し。
こうすることで、リンク機能付きのpdfになりますので、お客様にもwebサイトを疑似体験していただけます。

なので「疑似ページ」です。

ちなみに先日60ぺージのpngつくりましたが、二日かかりました。
これはコンテンツの詳細や原稿があればあるほど大変です。
コストがかかるので、以前の自分は「やりたくない」と思っていました。

まあ正直今もそういう気持ちになるときはあります！


■ワイヤーフレームにフィードバック

疑似ページを作ったときに「このワイヤーは直した方がいい」という部分。
これらをワイヤーフレームにフィードバックしてあげます。
また、デザインが重複するような部分があったら、こちらもフィードバックしてまとめます。
使い回しができるものを、わざわざ二度デザインする必要はないので…。

ということでフィードバックを反映させたら、デザインするためワイヤーフレームが完成です。


■やっとデザイン

ここまで来たらデザインです。
デザインしながら考えるのではなく（とはいってもデザインしてみたら違う事もあります）、

あとは装飾をあてて、完成にたどり着くだけ

という作業を行います。


ということで、まあ、こんな感じでデザインを行っている今日この頃です。
ちなみにディレクターになった私は、デザインはしません。
でもデザイン以前までは、そこそこやります。
サイトイットまではほとんど自分が作業にあたってます。

こういう工程を、デザイナー、ディレクター、コーダー。
その他もろもろ作業に関わる人間が一緒に取り組むこと。
理解しようとすること。
そのあたりが、webデザインには大事なんだろうなって思います。

あとサイトマップやら疑似ページやら。
実際にできた成果物は全部みんなで考えた結果です。
それらにきちんと目を通すこと。軽んじない事。
そうでないと、なかなか適切なデザインは難しいとも思います。

23：59だ！

タグ【】

---