学科 レイアウトデザイン基礎②

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎②
サイトマップについて

2限目
学科 レイアウトデザイン基礎②
ワイヤーフレームについて

3限目
学科 レイアウトデザイン基礎②
課題制作 

4限目
学科 レイアウトデザイン基礎②
課題制作 

5限目
学科 レイアウトデザイン基礎②
課題制作

本日のテーマ

サイト制作にスケジュール管理は重要!

オリジナルサイト作成のスケジュール

①デザインカンプ作成 →大淵が担当します!

  • 内容決定
  • サイトマップ(今回は省略)
  • ワイヤーフレーム
  • デザインラフ(PC、SP)
  • コーディングの設計図

②コーディング

③レスポンシブ対応

④アップロード


提出物と提出先(dropbox)

①-1.内容決定

task_〇〇〇〇_20201225.txtのままで良い場合は、そのままアップ。
内容を変更する場合は、今日の日付でアップ。

【作品】オリジナルサイト_20210319_内容決定

①-2.サイトマップ

「ホームページの内容と構成を整理するためにまとめられた構成図」と「検索エンジンがホームページ内のURLを集めるためのxmlサイトマップ」の2つがあります。

今回は省略

①-3.ワイヤーフレーム

まずは、カラム数とサイト幅を決めましょう。

ワイヤーフレームはフォトショップで作成します。提出はjpgです。
サイトの幅と高さは自由ですが、こだわりがなければ下記で作成しましょう。
サイト幅・・・960px
ファイルの横幅・・・1280px

1、フォトショップを開き、コンテンツ幅(960px)でファイルを新規作成※アートボードは外しておく
2、レイヤーを新規作成して、塗りつぶしツールで適当な色で全面を塗る
3、編集>カンバスサイズでファイル幅(1280px)にする
4、塗りつぶしてできた四角の両端にガイドを引く
5、長方形ツール・グレースケールでレイアウトを決める


カンバスの横中央にガイドを引く
表示>新規ガイド>垂直方向50%


コピーライトの書き方
[©マーク(©は環境依存文字なので(C)でもOK)][著作物を最初に発行した年][著作権者の名前]

© 2015 FAINPIXAR

▼HTMLの例(footer内に書かれることが多い)

<p><small>&copy; 2015 FAINPIXAR</small></p>

htmlの記述【body】

【作品】オリジナルサイト_20210322_ワイヤーフレーム