【イモっぽいデザインから脱却したい！】レシピサイトを参考にしてみた【その３】
イモっぽいデザインから脱却したい！ということで、前回はブログのコンセプトを改めて見直してみて、今回はそのコンセプトに合うデザインは何かを考えてみたいと思います。
前回の記事は下のリンクから。よかったらご覧ください。
本ブログのコンセプト
前回の記事でまとめた本ブログのコンセプトが以下の内容です。
ターゲット：
Web デザイナーを志している初心者層。
学生。Web 業界に転職を考えている社会人。
ジャンル：
Web デザイン、HTML、CSS、Photoshop
デザインの基本
ライバルとの差別化：
エンタメよりのハウツーにしたい。
真面目なハウツーブログが多いので。
初心者の人にも、疲れた社会人の人にも、
楽しく Web デザインを学んでほしいという気持ち。
まとめると「若干大人向け」で、
かといって「子供も」できて、
「ラフ」で、
「楽しそう」で
「初心者向け」
かぁ。
まとまってる？
参考デザインサイト
上の条件を満たすものって何かあるかなぁ、、、
あっ、「料理」かな！
ということで唐突に、「料理」系ジャンルのサイトをいくつか参考にしてみました。
クックパッド
誰もが知っているレシピサイトといっても過言ではないですね。当然、幅広い層をターゲットにしていると思います。
「毎日の料理を楽しみにする」というキャッチコピーが示す通り、楽しさを意識してデザインや記事内容を作られているのではないかなぁと思います。
AJINOMOTO PARK
大手食品企業、味の素さんの手がけるレシピサイト。
コンセプトは「たべる楽しさを、もっと。」こちらも食に対する楽しさを追求したコンセプトですね。鮮やかな色使いでパキッとした印象と、全体的に文字は太めですね。
クラシル
料理レシピ動画サービスのクラシルさん。
動画で料理方法を見せているのでよりシンプルな作りでデザインできるのですね。
素人料亭まる正
素人と謳いつつも料亭のような高級感に寄せたデザインですね。
プロじゃなくてもここまでできますよ！といった魅せ方でしょうか。見た目とハードルのギャップで、自分にもできるのではないかと思わせてくれるサイトですね。
Nadia
こちらはプロの料理家さん達がレシピを投稿してくれる本格レシピサイトです。
サイトは可愛らしく柔らかい雰囲気です。本格的なレシピでも家で挑戦してみたいといった初心者さんにも入りやすい感じがしますね。
おうちごはん
「いつもの『いただきます』を楽しく。」をキャッチコピーに。
こちらも楽しさを追求していますね。やはり楽しいと食の相性は抜群！
トップページでは大きな写真のカルーセルで賑やかさを感じますが、全体的にはシックなイメージでまとめている印象です。
るぅのおいしいうちごはん
こちらはlivedoorblogの公式ブロガーさんのようですね。
手書き風のパーツを使われていてとても柔らかいイメージです。
記事で縦長の写真を載せていてすごくオシャレな感じも出てて「そういう見せ方もあるのかぁ」とインスパイアを受けました。
料理系のサイトは、背景は白ベースで写真を引き立たせる感じがしますね。可愛らしいアイコンやパーツも多用しており、コンセプトで“楽しさ”を追求するところも多く、私が目指しているデザインに近い気がしてます。全体的には女性寄りのターゲットに振っていると思うのでそちらは少し調整して参考にできそうです。
本ブログのいまいちな部分の修正案
本連載の最初に、「本ブログのいまいちな部分」として挙げた箇所を上のサイトなどを参考にどのように修正していこうかと修正案を考えてみます。
ヘッダー、グローバルナビ
グローバルナビは、そもそもコンテンツが揃っていないのでひとまずは「ハンバーガー」メニューで隠してしまおうと思います。一応フッターにはきちんと表示されているので、アドセンスの審査的には問題ないのかなと思いました。
あとヘッダー背景にも目を奪われがちなので、分けずに統一して、薄い色で統一してしまおうかな。
レイアウトのメリハリ
メインコンテンツとサイドバーのマージンとパディングを広く取りすぎていたので、それぞれパディングはなくして、マージンだけで間隔を空けることにします。これでメインとサイドでメリハリが多少つくのかな？
記事ページに入ると、メインコンテンツの方に白い下地？を敷いてパディングがつくようにする予定です。
かどの形
ここは個人的に結構悩みどころです。。
ひとまず直角で統一してみます。見た目重視に引っ張られる気がして、ある程度の無骨感は残しておいた方がおもしろ寄りに持っていけるような気がしなくもない気がしてきました。
見出し
もう少し彩度を抑えて、若干大人っぽくしてみようかと思います。また、h3~4の見出し下線を引くなり少しこだわったデザインへ変更する予定です。これは実際に作ってみながら調整かな。
文字組
行間はline-height:1.7;、とりあえず「二分四分」ってやってみて、少し広いかなぁと思い0.5だけ狭めたのだけれどので、やはり 1.75 がちょうどよいのかなぁ……。
改行にも少し間隔を空けてみようと思います。
まとめ
今回は、ブログデザインの修正のために参考になりそうなサイトをいくつかピックアップしてみました。コンセプト的に“料理”ジャンルのデザインが近しいのではないかと思いいろいろ見てみましたが、いろいろと盛り込めそうなデザインがたくさんありそうでした。
次はいよいよデザインを実際に直してみたいと思います。
