ページ構成

ページ構成を図案化する

  • Webサイトの構成を考える
  • サイトマップを作る(Webサイトの構成を図案化する)
  • 手書きの設計図を描く(大まかな配置を決める)
  • デザインカンプを作成する
Cacoo
  • Googleアカウントで使う
  • 「ログイン」→「Googleアカウント」





  1. 「図の一覧」→「フォルダーを作成」
  2. フォルダーに図を作成


  • 「お問い合せ」は、CGIまたはメールリンクで設定
  • 検索エンジン最適化には、カテゴリのフォルダー名の中に「index.html」がベスト
  • サイトマップは、トップページ「index.html」と同じ階層に「sitemap.html」として配置する

制作のワークフロー

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


イデアを具体化する

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


注意

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


サイトマップの作成


仕様書の作成

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

など

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

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


ヌケのよいレイアウト

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

960