-本日のアジェンダ-
1限目
学科 レイアウトデザイン基礎②
サイトマップについて
2限目
学科 レイアウトデザイン基礎②
ワイヤーフレームについて
3限目
学科 レイアウトデザイン基礎②
課題制作
4限目
学科 レイアウトデザイン基礎②
課題制作
5限目
学科 レイアウトデザイン基礎②
課題制作
本日のテーマ
サイト制作にスケジュール管理は重要！
オリジナルサイト作成のスケジュール
①デザインカンプ作成 →大淵が担当します！
- 内容決定
- サイトマップ（今回は省略）
- ワイヤーフレーム
- デザインラフ(PC、SP)
- コーディングの設計図
②コーディング
③レスポンシブ対応
④アップロード
提出物と提出先(dropbox)
①-1.内容決定
task_〇〇〇〇_20201225.txtのままで良い場合は、そのままアップ。
内容を変更する場合は、今日の日付でアップ。
【作品】オリジナルサイト_20210319_内容決定
①-2.サイトマップ
「ホームページの内容と構成を整理するためにまとめられた構成図」と「検索エンジンがホームページ内のURLを集めるためのxmlサイトマップ」の２つがあります。
今回は省略
①-3.ワイヤーフレーム
まずは、カラム数とサイト幅を決めましょう。
- サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】
- 1カラム？2カラム？3カラム？サイトの目的に合ったデザイン構成とは
- 【2020年10月版】デザイナー必読！Webサイト横幅サイズとファーストビューサイズ
ワイヤーフレームはフォトショップで作成します。提出はjpgです。
サイトの幅と高さは自由ですが、こだわりがなければ下記で作成しましょう。
サイト幅・・・960px
ファイルの横幅・・・1280px
１、フォトショップを開き、コンテンツ幅(960px)でファイルを新規作成※アートボードは外しておく
２、レイヤーを新規作成して、塗りつぶしツールで適当な色で全面を塗る
３、編集＞カンバスサイズでファイル幅（1280px）にする
４、塗りつぶしてできた四角の両端にガイドを引く
５、長方形ツール・グレースケールでレイアウトを決める
カンバスの横中央にガイドを引く
表示＞新規ガイド＞垂直方向50%
コピーライトの書き方
［©マーク（©は環境依存文字なので（C）でもOK）］［著作物を最初に発行した年］［著作権者の名前］
© 2015 FAINPIXAR
▼HTMLの例(footer内に書かれることが多い)
<p><small>© 2015 FAINPIXAR</small></p>【作品】オリジナルサイト_20210322_ワイヤーフレーム