WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

ワイヤーフレーム の作成

ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。

f:id:yachin29:20180501132842p:plain


架空サイトのワイヤーフレーム を実際に作ってみましょう。

入れるコンテンツ
  • ロゴ
  • ナビゲーション

 -トップ
 - menu
 -info
 -access
 -wedding
 -Reservation

  • キービジュアル
  • ギャラリー(サムネイルが6〜8個)
  • menuコンテンツ(ランチメニューのバナー、ディナーメニューのバナー、メニューの詳細ボタン)
  • infoコンテンツ(お店の情報、SNSのタイムライン)
  • weddingコンテンツ(式の様子をyoutube動画、googleカレンダー
  • 予約フォーム
  • フッター
デザインルール
  • ワイヤーの段階で色を入れない
  • ファーストビューの中(高さ700px前後)にh1、ナビゲーション、キービジュアル、h1直下のp(可能であれば)
  • 複数ページの場合、ヘッダー、ナビゲーションは基本的に全ページ共通
  • 揃えるコンテンツは幅960pxで

www.wirify.com




www.webcreatorbox.com



markehack.jp



cacoo.com


www.justinmind.com


goworkship.com




VisBugはChromeの機能拡張で、ブラウザに表示した既存のページのデザインなどをその場で検証・編集できます。色を変えたりマージン・パディングの値を変えたり、テキストを編集したりと、様々な事がこの拡張機能を入れるだけでchrome上で出来る様になります。
デザイナー向けの検証モードといった感じです。とても便利なので、ぜひ導入してみましょう。


chrome.google.com



coliss.com