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

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

①デザインカンプ作成

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

②コーディング

  • マークアップ（HTML）
  • CSS記述

③レスポンシブ対応

  • %指定、max- min-指定
  • メディアクエリ

④アップロード（成績考査）

  • TOPページのみ完成

今週の提出物と提出先(dropbox)

①-1.内容決定

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

【オリジナルサイト】20210216_内容決定

①-2.サイトマップ

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

今回は省略

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

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

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

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

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

【オリジナルサイト】20210217_ワイヤーフレーム