今日の作業:デザイン修行 @machidaさんのレビュー

今日の作業:2012.12.6


  • 町田さんにレビューしてもらった内容をまとめる
  • レビューを受けて改善
  • Herokuで閲覧出来るようにする

@machidaさんのレビュー


めっちゃ色々書いてもらってとっても参考になったので、許可を頂いてup。
レビューしてもらったデザイン案:
intern_blog_design_2012.11.22

  • 「背景の印象」
    • パリっとしてる
    • 都会的
    • 清潔感
    • 洋服で例えたらパリっとしたYシャツって感じ
  • 「ロゴのフォントの印象」
    • 可愛らしい
    • ファンシー
    • 太い
    • 洋服で例えたら可愛いダッフルコートって感じ

パッと見、パリっとしたYシャツに可愛いダッフルコートを着ているような印象を受けました。テイストを統一すると狙いが明確になりそうです:

  • 背景に合わせて細いsuns-selifのフォントを使うことでオシャレな都会っぽい印象を与える
  • フォントに合わせて、キャンバス生地や木目のテクスチャを使うことで温かみのある印象を与える
  • <色について>
    • 原色、無彩色で作られてるので、全体的に強烈な印象を感じます
    • 同系色を使ったりなどしてコントラストを少し弱めるのもひとつの手かもしれないです
    • 色と背景だけを見ると、さらに都会っぽさを感じるので、フォントの持つ人間味がさらに野暮ったく感じでミスマッチ感が増してるかもしれないです
  • <ヘッダについて>
    • 背景が黒いヘッダと赤いリボンは結構大きいので、背景のキッチリした印象と比べると、ポップな印象を与えてミスマッチかもしれません。
    • パリっとしたスーツの女性がちょっと変わった髪型をしているような印象を感じました。
    • デザインをする、と意識しすぎると、結構装飾をしなくては、と思うことがあるのですが、一度作ったあとに、必要か不要かを判断するために消したりするのも手です。もしかしたらないほうが綺麗、ないほうがわかりやすい、みたいなことがあったりします。あと、デザイナーあるあるなんですが、何でも囲いたがる病、に陥ることがよくあります。囲うのは何のため?囲う以外に手はなかった?ということをよく自問したりします。なんでも囲うと目立つために囲ったはずが、全部の強さが均一になって目立たない、ミチミチした印象になる、ということがあります。
  • <タイトルについて>
    • 印象的なロゴに使われているフォントがタイトルにも使われていますが、結構太いフォントなので、見にくいかもしれません。
    • 例えば、ロゴに独特なserifを使ったら、本文にはあまり独特でないものを使うと、よりロゴが際立つ場合もあります。
  • <僕も挑戦してみました>
    背景が都会っぽかったので、知的な女性みたいな感じをテーマに簡単ですが作ってみました。
    コントラストを使って、見せたいところなどの差別化、全体的に地味過ぎないように、
    丸の部分はあえて彩度の強い色を選びました。華やかになってるかと思います。
    女性っぽい印象を与えるために曲線が欲しかったので、雫を使ってみました。
    あと、アイキャッチの部分(白背景の場所)も微妙に角丸にしています。
    アイキャッチの白と背景の境界を少しわかりやすくしたかったので、影を少しだけ付けました。
    machida_cb7d2015ff6bcd3215337854310efc01

フォントについて


そもそもフォントのserifって何かよくわかってなかったので調べました:

  • sans-serif:ゴシック体風。ひげ無し。
  • serif:明朝体風。ひげ付き。
  • monospace:等巾フォント。大文字、小文字、英数文字の巾が等しい。
  • fantasy:装飾体。花文字、ポップ文字など。読めないフォント(絵文字、シンボル・フォント)は除く。
  • cursive:手書き体風。

http://msugai.fc2web.com/web/app/font.html より

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s