ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。
架空サイトのワイヤーフレーム を実際に作ってみましょう。
入れるコンテンツ
- ロゴ
- ナビゲーション
-トップ
- menu
-info
-access
-wedding
-Reservation
- キービジュアル
- ギャラリー(サムネイルが6〜8個)
- menuコンテンツ(ランチメニューのバナー、ディナーメニューのバナー、メニューの詳細ボタン)
- infoコンテンツ(お店の情報、SNSのタイムライン)
- weddingコンテンツ(式の様子をyoutube動画、googleカレンダー)
- 予約フォーム
- フッター
デザインルール
- ワイヤーの段階で色を入れない
- ファーストビューの中(高さ700px前後)にh1、ナビゲーション、キービジュアル、h1直下のp(可能であれば)
- 複数ページの場合、ヘッダー、ナビゲーションは基本的に全ページ共通
- 揃えるコンテンツは幅960pxで
VisBugはChromeの機能拡張で、ブラウザに表示した既存のページのデザインなどをその場で検証・編集できます。色を変えたりマージン・パディングの値を変えたり、テキストを編集したりと、様々な事がこの拡張機能を入れるだけでchrome上で出来る様になります。
デザイナー向けの検証モードといった感じです。とても便利なので、ぜひ導入してみましょう。