webサイト制作の勉強|2018月2月クラスブログ

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