こんにちは、コンスキです。
今回は、カフェタイムとランチタイム用のページのワイヤーフレームを作成します。
サイトマップを参考にする
そういえばワイヤーフレーム作成の作業に入る前に、サイトマップを作りましたよね。
コンセプトページのワイヤーフレームを作成している途中、サイトマップの内容には一切触れませんしたが、実はずっと参考にしてワイヤーフレームを作ってきました。
ワイヤーフレームを作っていたことで、「サイトどんな内容を配置するか」ということはほとんど考えずに、「サイトマップにある内容をどこにどんな風に配置するか」を考えることに集中することができました。
では、前回作ったコンセプトページのワイヤーフレームと以前から作ってあったサイトマップ部分とを比較してみましょう。
サイトマップ
ワイヤーフレーム
どうでしょう。サイトマップに書かれている要素がワイヤーフレームの方にほとんどそのままあるのがわかるでしょうか。
ちなみに今回は、下のサイトマップの赤い四角で囲まれている部分をワイヤーフレームに入れていきます。
もちろんこの段階では、含める内容を変更することもできます。
そのため、もしかするとサイトマップにある内容が作られたワイヤーフレームに含まれていなかったり、逆にサイトマップにはなかったけど、完成したワイヤーフレームの方に新しい要素が含希ていたりすることもあり得ます。
作ったワイヤーフレーム
今回作ったハイヤーフレームがこちら↓になります。
私の場合、ワイヤーフレームは「デザートの写真」や「メニュー」といった大雑把な分け方をしています。
具体的な内容やデザインは、まだ決めないのですが、例外として上の画像の例でいうと「Dessert」という文字は実際に「Desser」という文字を配置するつもりです。
そこで他の大雑把なことを書いてある文字と区別できるように、具体的な文字は太字で入力することにしました。
コメント