Webページ制作実習

デザインカンプ・ロゴデザイン・バナーデザイン

〇デザインカンプ(デザインを考える)→photoshop/illustratorなど

  • 色、画像、フォントで全体の完成を見るため必要

※使用する写真、画像は自分で書いたもの、自分で撮影したもの、フリーイラスト、フリー画像を使用すること(フリー素材は使用するサイトの利用規約を守ること)。また自分で撮影したものでも著作権などに接触するもの(商品名や肖像権に接触するもの)は使用しないこと。

【2日目の実習】デザインカンプを制作する

  • 1.ヘッダー
  • 2.ナビゲーション
  • 3.コンテンツ
  • 4.サイドバー
  • 5.フッター

制作順はコンテンツ部分を除いた共通部分から制作しましょう。

1.ヘッダー

基本的に上部のスペースに同じ位置・同じ内容で全てのページに表示されるもの

必要なものはロゴ・キャッチコピー・お問合せボタン・ログインボタンなど

〇ロゴの作り方

ロゴはイラストを使用した凝ったものから頭文字のローマ字を使用したものなどいろいろ

2.ナビゲーション

5.フッター

コピーライト、リンク、住所などを文字で入れます。

4.サイドバー

3.コンテンツ

コンテンツ内の文字もきっちり決めましょう。




制作する大きさ

横幅1920px 高さ1080px以上をphotoshopかillustratorで制作(実際の表示範囲は1440pxや1200pxや1000px)

制作を進めているうちに変更しなければいけないものがあれば変更してください。その場合ワイヤーフレームに変更箇所がわかるように色ペンなどでチェックしましょう。

使用するソフトの設定

  • 単位をピクセル(px)に変更
  • 画像のカラーモードをRGBに変更
  • 使用フォントの確認





〇参考例1

〇参考例2