Webデザイン学科
授業資料

授業解説

前期の集大成として、自分のオリジナルブログの Photoshop データを作成します。
夏休み中に HTML, CSS, JavaScript（jQuery 含む）でコーディングをして、後期集中授業時に CMS（WordPress）に取り込みます。

最近では、ブログの要素も簡素的になってきている反面、自分が作ったというオリジナリティを組み込む範囲も狭まっていますが、サーバーへのアップロードや、コンテンツの運用など、学生がオリジナルのブログを作成することのメリットは大きいです。
いろいろなブログを調べて、シンプルなデザインでも自分なりの色をどこに入れるのか、
読みやすさ、使いやすさを考えて制作していきましょう。

前提知識・技術

• Photoshop の操作
• デザインの基本知識

授業目標

• 前期に学んだグラフィックツールの様々な使い方の復習および応用ができる。
• カラーデザイン、造形基礎などのデザイン力で学んだことを Web デザインに応用することができる。
• 参考資料や参考サイトから自分の作品へ変換することができる観察眼。
• HTML+CSS でのコーディングを考慮したデザインを考えることができる。
  • 画像の書き出しのためのレイヤーの命名
  • margin, padding の統一

授業資料

制作ページ

mydevice.io : web devices capabilitiesよりサイズを検討した。

1. スマートフォントップページ
   • 横幅：414px
   • 必須コンテンツ：記事一覧（タイトル・公開日・時間・更新日など）、カテゴリー、自己紹介
2. スマートフォン記事ページ
   • 必須コンテンツ：記事（タイトル・記事・公開日・時間・更新日など）、コメント
3. パソコントップページ
   • 横幅：1366px
4. パソコン記事ページ

ワイヤーフレームスケッチ

グラフィックツールで制作を始める前に、必ずスケッチをして制作物のイメージを掴みましょう。
今回は提出必要はありませんが、スケッチ用の紙を配布します。

個別ページの内容は、「WF1 で BLOG 2022」の自分の記事を使ってください。
新規に記事を作成しても構いませんが、文章量や画像のバリエーションを考慮しましょう。

制作スケジュール

• 課題完成：2022 年 8 月 2 日（火）
  1. 7 月 5 日：課題解説、ワイヤーフレーム、モックアップ制作
  2. 7 月 12 日：モックアップ制作
  3. 7 月 19 日：休講日
  4. 7 月 26 日：モックアップ制作
  5. 8 月 2 日：モックアップ制作、提出、講評（Web デザイン前期終了）
• 画像形式は、Photoshop 形式+リンク画像
• TOP ページ（① パソコン＆② スマホ）、個別ページ（③ パソコン＆④ スマホ）
• フォルダ名は、wf1_00_blog
• ファイル名は、wf1_00_blogUI.psd ※アートボードで ④ 画面とも 1 ファイルに。
• 配置した画像は、フォルダ内に images などを作成して入れておいてください。
• 提出先：f81srv1 ※フォルダごと入れてください。

発表講評

• 発表日： 2022 年 8 月 2 日（木）2 時限目
• 課題「ブログデザイン」をデータを見せながら発表をしていきます。
  何に気をつけて制作したのか、具体的にどう制作したのかなど、みんなに伝えましょう。

参考サイト

• Pinterest ワイヤーフレーム
• Dribbble ブログ UI
• Screen Resolution Stats Worldwide | Statcounter Global Stats
• mydevice.io : web devices capabilities
• Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
• さくら学院公式ブログ

前期提出課題

• トライデント SP サイトトレースデータ
• PhotoAlubun データ
• オリジナルブログデータ