12月の授業日記

12/3 情報設計

情報設計

1. 情報自体の整理＝カテゴライズ
2. 到達手段の整理＝ナビゲーション

ナビゲーション

ナビゲーションに求められる要件

• リンクの存在・リンクと判るデザイン
• スクロールせずに操作可能＞ファーストビューエリア
• 各ページで同じ法則性を保つ

ナビゲーションの種類

グローバルナビゲーション

• トップ第一階層のナビ
• 全てのページのスクロールは不要な同じ場所に配置

ローカルナビゲーション

• カテゴリー内を移動するためのナビ

コンテンツ内ナビゲーション

• ページ内要素が多い場所の見出しとリンクを兼ねたもの

ナビゲーションのレイアウト

水平型

• スクロール不要で使い勝手に優れる
• 項目数・文字数の制約に受ける

垂直型

• 項目数の増減に柔軟に対応可能
• 下部は操作性が劣る

プルダウンメニュー

• 垂直・水平のメリットを組み合わせられる
• 使いづらい側面も

12/10　コンテンツ提案とマルチデバイス対応

マルチデバイス対応

• セパレートURL＞デバイスごとのページを用意し切り替える
• レスポンシブwebデザイン＞同一htmlをデバイスごとのCSSで切り替え
• 動的配信＞DBでデバイスに応じて異なるファイルを出力

レスポンシブwebデザイン

既存サイト分析と提案

コンテンツの分析

• YDAのサイトは全体的に文字などが大きく、画像数も多く感じ、見えやすさがあった。
• ただ、東京デザイン専門学校と比べるとやはり差が出ていた。
• 動きをもう少し入れるとさらに良くなるのではないかと感じた。

課題と解決案

• YDAのサイトは全体的に文字などが大きく、画像数も多く感じ、見えやすさがあった。
• そのまま参考にする
• ただ、東京デザイン専門学校と比べるとやはり差が出ていた。
• さらに東京デザイン専門学校の分析が必要
  →画像数は多いけど、一つ一つが小さく感じ、まとまりが少ない。
  →コンテンツごとの画像を大きく、必要最低限の画像を使用する
• 動きをもう少し入れるとさらに良くなるのではないかと感じた。
• トップ画像をスライド式ではなく、動画のように少しづつ見せる。

企画コンテンツ案

やりたいもの

• トップ画像をスライド式ではなく動画に
• コンテンツごとの画像に動きを入れる
• 今まで私が制作してきた作品を文なしで紹介するサイト

実現性の高いもの

• 文章なしのポートフォリオ
• トップ画像のスライド式ではなく動画に
• コンテンツごとの画像に動きを入れる

12/24　ワイヤーフレーム

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

今日の一言