やっとこさ2度目のトレースが終わりました。かなり間があいてしまいました…..
今回の見本
今回トレースしたページはこちら↓(若干現在とデザインが変わってます；)
http://www.fujicco.co.jp/index.html
こちらを選んだ理由としては、
・グラデーションを多用したデザイン
・統一感があり、サイトから会社のイメージが伝わってくる
・取り掛かり易いボリューム
などが挙げられます。
トレース完成
制作時間約6〜7時間で完成したのがこちら。
フジッコのホームページで使われているフォントをどうしても見つけることができなかったので、似たようなフォントを使用したのですが、やはり比べると大分違いますね…orz
このマーカーのようなフォントが何というフォントなのか！ぜひ教えてもらいたいです。(ちなみに使用されている部分が全て画像だったのでソース見ても手がかりなしでした..)
今回のトレースでの発見あれこれ
このサイトの特徴はやはり、グラデーションが多用されているところかと思います。
メニューやh2、サイドのリンク、背景などほとんどの箇所にグラデーションがかかっています。
ボタンのグラデーションにはハイライトが入っているのも気をつけたいところです。ぷっくりしたボタンにするには必須ですね。
次に、
・統一感があり、サイトから会社のイメージが伝わってくる
これは、サイトのテーマカラーによるものと思われます。オレンジを基調とし、文字も茶色で統一感があります。
「安心」「環境」「食育」「社会貢献」などを取り上げているフジッコのイメージを伝えるには、オレンジはぴったりですね！
テーマカラーって、とても重要な要素だと改めて気づきました。
それから、ふと思ったのが「愛情レシピ」のところだけテクスチャばりばりですごく目立つ……
「商品ラインナップ」「キャンペーン」などは統一されているのに……
こういうサイト見る人ってただ商品を見に来ているのではないのか〜。見せる側が推したいのは「レシピ」のページなのか〜。と一人で納得しました。
見せたいところを差別化するのも、重要ですね。
差別化でいうと、画像なんかもそうですね。白の縁取りがされてます。あとはコンテンツごとにドロップシャドウが結構濃いめにかかってます。
ちなみに、文字サイズはh2でも小さめだな〜と感じました。
しっかりした印象を与えたいサイトなんかは、ゴシックでばんっと目立つ感じが多いですが、こういったほっこり系のサイトだと文字は大きすぎず太すぎずでちょうど良さそうです。
こんな感じで第二回トレースはおしまいです。
あと１回は記事を書こうと思うのですが、まだトレースのページが決まってないので、まずはそこからです；；
普通のグラデーションを使ったボタン等は大分慣れてきたので、もうちょっと凝ったデザインを選ぼうと思います〜！
それから、今回イラレではじめてつくったギザギザの素材についての記事を別で書こうと思います！メモです！
長々とご覧頂きありがとうございます！！
Pingback: イラレでギザギザをつくる。 | LOL.blog---webデザインetcを勉強中()