1月の授業日記

ワイヤーフレーム

• ページをデザインする元となる設計図
• ナビゲーションや本文の基本的レイアウトをここで決めておく
• 好き嫌いが影響を与えないようデザインと切り離して設計

今日のひとこと

ワイヤーフレームを使うことによって、Webデザインの情報の管理がものすごくしやすいと感じました。ただ、雑貨・おもちゃコースの説明文が無くなっていたのが悲しかったです。

コンテンツの構成

1. 要素の抽出
   • 項目名を全てあげる
2. カテゴライズ
   • グループごとにまとめる
3. インデックス付け
   • グループにふさわしい名前をつける
     • 一般的なキーワード＝スキーマ

デザインと実装の分離

webではデザインとコーディングが分離されていてデザイン完成後実装に入る

• デザイン修正はコーディングのやり直しにつながる
• コーディングのしやすさにとらわれずデザインのバランスを保てる
• 実装できるかを考えながらデザインする

デザイン

デザインテイスト

無意味な作り直しを避けるためにクライアントとどのようなテイストにするのかを事前に決定しておく

複数案

クライアントが介在する場合、複数案を与えて選ばせる事で制作への連帯感と選択への責任感を共有してもらえる

A案

• アナログ作業や物作りの楽しさを雑貨・おもちゃコースらしいポップな雰囲気で表現しました。

B案

• グラフィカルな作業の多いメディアコースをイメージしたモーショングラフィックスな画像を引用し、イラスト・デザイン・WEBを駆使するメディアコースを表現しました。

今日の一言

時間が足りず授業外での作成になってしまいましたが、短時間でA案とB案が制作できたのでよかったと思います。 A案はコラージュが楽しい雰囲気が伝わるようなヘッダーにできたと思うので、達成感がありました。

カラースキーム

カテゴリ毎の違いがわかりやすいようにカラーを設計し、それをキーカラーに設定する

メニューとタイトルの関係性を整理

メニューをクリックしたところがリンク先だとわかる必要がある

• メニューとタイトルの位置関係
  • 極力メニュー近くへ配置し関係性を明確に
• カラースキーム
  • 統一を図り関係性を明快に
• 表記の統一
  • 統一を図り関係性を明快に

デザインカンプ

デザインの完成状態のダミー

• クライアントへのデザインの承認
• 画像パーツはここから切り出しコーディングで再現

スペシャルコンテンツ

タイトル：雑貨おもちゃ好き大集合！

今日の一言

前回休んでしまったので追いつけるように頑張ります。