今日はまず最初に2回目の中間報告発表を行いました。
MTIと図書館に分かれてそれぞれ発表を行います。
発表：３分
公表：２分
計 ：５分
で発表を行いました。
（写真）
今までのアドバイスを元に、
ペルソナにあったサイト構造を明確にイメージし、ワイヤーフレームの改善を行い、
そこから実際のデザイン案までの発表を行いました。
1回目の発表で多かったペルソナのシナリオとサイトのデザイン案とのマッチングが弱いとの指摘が多く、
今回はワイヤーフレームからしっかりサイト構造を見直す事をした人が多かった。
そこから今回の多かった問題点としては
デザイン案に進んだときの"配色"の問題が多かった。
明度や彩度の違いなどキャラクターの違う要素が多く含まれていて統一感がなくなっているモノが多くあった。
また、枠でかこったり、線で区切ったりといったレイアウトデザインをしている物も多くあった。
それら線や囲いはデザインの要素としてノイズになりやすいので、配色や余白で分ける方法をアドバイスとして受ける人が多い様子であった。
ホワイトスペースを残す事を恐れず何を見せたいのか、目的を明確に意識する事をなどが多いアドバイスであった。
後半は実装に向けて
DreamWaverを使ってHTMLとCSSでサイト構築のやり方を確認した。
（図）
2011年12月13日火曜日
11/29
本日の演習のゴール
A) ストーリーボーディングの材料を作る
ストーリーボーディング（評価を行う）
第３者にストーリーボードの評価をしてもらう。
改善点を書き込む
B) オズの魔法使いの材料を作る
オズの魔法使い（評価を行う）
第３者に発話思考法で操作してもらう。
改善案を書き込む
来週までに
１：評価2人以上
２：改善点のまとめ
３：ワイヤーフレームの改善
まずは手描きでしっかりとレイアウトのデザイン案を作る。
前回のプレゼンでのアドバイスを受けてサービスの方向性やデザインの見直しを行い、
ユーザーに対して魅力的なサイトのテーマを決定して行く。
ワイヤーフレームの見直すを行い、シナリオにあったサイトの構造を目指す。
10/25 6回目
今回の内容はタイポグラフィと色彩計画についてです。
まずはタイポグラフィについてです。
「文字＝キャラクター」です。
和文書体であれば、明朝体、ゴシック体、行書体や隷書体や勘亭流などの毛筆書体、ディスプレイ書体、欧文書体であればセリフ体、サンセリフ体、スクリプト体、ブラックレター、ディスプレイ書体など様々な書体があります。
また、欧文書体のように文字ごとに幅が異なるプロポーショナルフォントと和文書体のようにどの文字も幅が一定なノンプロポーショナルフォントに分類できます。
どの書体もそのものならではの特徴（キャラクター）があり、使用者は目的や内容、与えたいイメージにふさわしい書体を選ぶことが重要となります。
我々日本人は和文書体と欧文書体を一緒に使う場面も多いでしょう。その際にはできるだけ印象が似ている書体を組み合わせて使うと違和感がなく、読み手の頭にもスムーズに入っていくでしょう。例えば、「小塚ゴシック-Frutiger」のような組み合わせです。ちなみに、和文と欧文を組み合わせて使うことを和欧混植といいます。
「和文-和文」、「欧文-欧文」の組み合わせにおいてはフォントファミリーを揃えるというのも大切です。紙面上、画面上にいくつもの書体が使われると全体の統一感が損なわれてしまいます。とは言え、全て同じ書体を使うとメリハリがなく、どこが重要な情報なのかなどが分かりにくいこともあります。文字のサイズを変える他、太さを変える、字幅を変えるなど工夫しましょう。HelveticaやUniversはファミリーが豊富で様々な太さや字幅のものが揃っています。
文字はデフォルトのまま組めばいいものではありません。字間を調節するカーニングや行間を調節するスペーシングは欠かせません。
メッセージを読んでもらうために費やす労力は必要なのです。
「いい書体と出会う」
これは運も多少影響するでしょうが自らが行動を起こすことでお気に入りの書体を見つけられる確率は確実に高まります。OSに標準搭載された書体の中にも素晴らしい書体はたくさんあります。それ以外の書体の中にお気に入りがあるかもしれません。よく見る雑誌や街中の広告などにも様々な書体が使われています。普段から書体を意識することで自分のお気に入りの書体を見つけてみましょう。
続いてロゴについてです。
ロゴは個人や企業の顔、看板です。それにふさわしいものにしなければなりません。
ロゴ作成の際は上記のような文字選びや文字組みを応用します。
書体を決める際には持っているすべての書体で組んでみるといいでしょう。意外な発見があるかもしれません。
ロゴ作成によく使われるテクニックのようなものもいろいろあります。詳しくはリンクを参照してください。
最後に色彩についてです。
３×３のマスの塗り分けをしました。
縦と横の関係を考慮して配色します。
各々のサイトの配色を考える際に参考となるはずです。
授業で使っていたサイトのリンクを貼っておくので参照してください。
http://www.gege-channel.com/mdc/index.html
まずはタイポグラフィについてです。
「文字＝キャラクター」です。
和文書体であれば、明朝体、ゴシック体、行書体や隷書体や勘亭流などの毛筆書体、ディスプレイ書体、欧文書体であればセリフ体、サンセリフ体、スクリプト体、ブラックレター、ディスプレイ書体など様々な書体があります。
また、欧文書体のように文字ごとに幅が異なるプロポーショナルフォントと和文書体のようにどの文字も幅が一定なノンプロポーショナルフォントに分類できます。
どの書体もそのものならではの特徴（キャラクター）があり、使用者は目的や内容、与えたいイメージにふさわしい書体を選ぶことが重要となります。
我々日本人は和文書体と欧文書体を一緒に使う場面も多いでしょう。その際にはできるだけ印象が似ている書体を組み合わせて使うと違和感がなく、読み手の頭にもスムーズに入っていくでしょう。例えば、「小塚ゴシック-Frutiger」のような組み合わせです。ちなみに、和文と欧文を組み合わせて使うことを和欧混植といいます。
「和文-和文」、「欧文-欧文」の組み合わせにおいてはフォントファミリーを揃えるというのも大切です。紙面上、画面上にいくつもの書体が使われると全体の統一感が損なわれてしまいます。とは言え、全て同じ書体を使うとメリハリがなく、どこが重要な情報なのかなどが分かりにくいこともあります。文字のサイズを変える他、太さを変える、字幅を変えるなど工夫しましょう。HelveticaやUniversはファミリーが豊富で様々な太さや字幅のものが揃っています。
文字はデフォルトのまま組めばいいものではありません。字間を調節するカーニングや行間を調節するスペーシングは欠かせません。
メッセージを読んでもらうために費やす労力は必要なのです。
「いい書体と出会う」
これは運も多少影響するでしょうが自らが行動を起こすことでお気に入りの書体を見つけられる確率は確実に高まります。OSに標準搭載された書体の中にも素晴らしい書体はたくさんあります。それ以外の書体の中にお気に入りがあるかもしれません。よく見る雑誌や街中の広告などにも様々な書体が使われています。普段から書体を意識することで自分のお気に入りの書体を見つけてみましょう。
続いてロゴについてです。
ロゴは個人や企業の顔、看板です。それにふさわしいものにしなければなりません。
ロゴ作成の際は上記のような文字選びや文字組みを応用します。
書体を決める際には持っているすべての書体で組んでみるといいでしょう。意外な発見があるかもしれません。
ロゴ作成によく使われるテクニックのようなものもいろいろあります。詳しくはリンクを参照してください。
最後に色彩についてです。
３×３のマスの塗り分けをしました。
縦と横の関係を考慮して配色します。
各々のサイトの配色を考える際に参考となるはずです。
授業で使っていたサイトのリンクを貼っておくので参照してください。
http://www.gege-channel.com/mdc/index.html
登録:
投稿 (Atom)