課題制作の準備

ページ構成を図案化する

  • Webサイトの構成を考える
  • サイトマップを作る(Webサイトの構成を図案化する)
  • 手書きの設計図を描く(大まかな配置を決める)
  • デザインカンプを作成する
  • 「お問い合せ」は、CGIまたはメールリンクで設定(この段階での選択肢)
  • 検索エンジン最適化には、カテゴリのフォルダー名の中に「index.html」がベスト
  • サイトマップは、トップページ「index.html」と同じ階層に「sitemap.html」として配置する

制作のワークフロー

  1. 計画(ヒアリング、サイトの目的の明確化)
  2. 企画(サイトマップ・スケジュール作成、プレゼンテーション)
  3. デザイン(コンセプトの具体化、カンプ作成)
  4. 制作(ガイドライン作成、ページの作成)
  5. 検証(Webブラウザで検証、バグ修正)
  6. 納品(成果物の引き渡し、保守スケジュール)
  7. 立ち上げ(サイトの立ち上げ、告知)
コンセプト
  1. 思考の過程(誰のために役立つサイトか)
  2. 視覚化(ビジュアル表現、コピーライト表現)


イデアを具体化する

  1. 優先順位を決める(ブランディング、新商品の紹介、顧客管理、売上の拡大など)
  2. 決まった優先順位を「図案化」する
企画・提案・スケジュール
  • クライアントとの打ち合わせ
  • プレゼンテーション
  • 素材の提供の有無
  • 日程を具体化する


注意

  • 勉強の過程で作るサイトは、クライアントが望むすべてをかなえることは難しいと心得ること
  • 安請け合いはしない
  • Web業界で使われる言葉を並べすぎない
  • 制作者側が決める(提案する)テーマや、デザイン案などを強要しない
  • テーマは、可能なもの1点に絞る
  • 無理なスケジュールにしない
  • お互いが喜ぶことができる落としどころを考える


サイトマップの作成


仕様書の作成

  • 画面サイズ
  • ページサイズ
  • ファイルサイズ(ページ全体、画像など個別に規定)
  • ネットワーク回線のスピード
  • プラットフォーム
  • ブラウザ
  • プラグイン

など

レイアウトスタイルの決定

レイアウトを始める前の準備
  • 鉛筆と紙で考える
  • 思いつくまま描く
  • きれいさよりもすばやさ
  • 日頃から感動すること
レイアウト基本パターン
  • グリッドレイアウトを使う
  • レイアウトへ機能を振り分ける
  • 見やすさに配慮して情報量を調節する


ヌケのよいレイアウト

  • ヌケとは、画面上を風が吹き抜けるような感覚をイメージしている
  • 通常、風は地面と平行に吹き抜ける。つまり画面に天と地を存在させることが必要となる
  • 近年、footerのボリュームが大きくなったのも、その意図を組んで画面を安定させるためにデザインしているからです
  • 自然環境の重力の法則に従って、レイアウトすると安定して見える

注意

  • このクラスは、最初から営業できない場合にかぎり、趣味的なサイト作成を許可します
  • ただし、猶予期間をもうけているだけで、次回は営業をして取ってくること(他クラスは、必ずそうしています)
  • 趣味的なサイトは、自分がすべてを決定できるので、文字中心で画像は補足説明として使用すること(紙芝居的な画像が変化するだけのものは、就職活動には役立ちません)
  • ここまでの授業は、文書構造+修飾が勉強のすべてです。それに+αとしてJavaScriptで挙動をプラスすることを勉強して来ました
  • それを踏まえてのWebサイト作りです


最初から他で見るような企業系のサイトの完成形は難しいと想いますが、誰もが通ってきた道です。
サンプルサイトをよく見て、どうするべきかを判断し、実践しましょう。

960