「焼肉 三十八」のリニューアルをしました!

thumb_mitohachi

こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。


受注

福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。

簡単なリニューアル時のご要望をまとめると下記6点でした。

  • お知らせ欄は更新可能
  • WordPressで構築
  • 写真やテキストは流用
  • 携帯版作成(コンテンツは一緒)
  • ブログ・口コミ掲示板は削除
  • IE6は非対応でOK(ありがとうございます!!!)

制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeやEメールで行いました。松野氏は私が制作時に使っているツールや配色の仕方などを熱心に質問して頂き、「私も使ってみます!」「勉強になります!!」と、とっても向上心のある方だなあという印象でした。そして彼女とは誕生日が一緒というミラクル!お誕生日には素敵なAAを頂きましたw ありがとうです松野氏ーーー!!!

サイト構成

旧三十八Webサイト

旧 三十八Webサイトのデザインです。最初に旧Webサイトを見たときの印象は、ホームに表示しているものが多く、使っている色も多いからか少し雑然としたイメージ…。また、いくつかのページをひとつにまとめられるかな?ということでサイトマップから見直すことにしました。

旧サイトマップ

旧サイトマップ。ホームに表示するものが多いです。

新サイトマップ

新サイトマップ。「アクセス」と「予約・問い合わせ」ページをなくし、その情報はフッターにまとめました。その他ホームに表示していたいくつかを思い切って切り捨てました。

ワイヤーフレーム

サイトマップを元にワイヤーフレームを作ります。レイアウトが変わるホーム・メニュー・三十八についての3点。レイアウト自体は特に問題ないとのことで、このまますすめることに。飲食店のWebサイトなので、なるべく画像を大きく・多く打ち出してユーザーの食欲をそそらせようというレイアウトです。下記画像クリックで拡大表示できます。

ホーム

ホーム


三十八について

三十八について

デザイン

デザイン面でのご要望は下記3点。

  • 赤と白をメインで
  • ファミリーやカップルが気軽に来れる楽しい雰囲気
  • 高級感はいらない
テクスチャと配色

赤メインでも旧サイトのように全面に使ったらドギツイ感じになってしまうので、使う箇所をしぼってアクセントとして使用。また、ロゴは和風な雰囲気だったので、和紙を連想するような茶色のテクスチャを背景に使用し、温かみのあるデザインにしました。

CTA

予約は電話のみとのことなので、電話番号をページヘッダーとフッターに2箇所設置しました。CTAがあるサイトは上部と下部に二箇所必ず設置!これ大事です!テストに出ます!!

写真を貼り付けたようなデザイン

写真を貼り付けたようなデザインにして親近感をプラス。

ページ内リンク移動時のエフェクト

ページ内リンク移動時のエフェクト

ページ内リンクをスムーズに移動できるよう、jQueryを使って効果を付け加えています。コードはいたって簡単!コピペして使っちゃってください :)

HTML

<a href="#link">ここをクリックでリンク</a>
・・・
・・・
・・・
<a id="link">ここに飛びます</a>

JavaScript

$(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });
});

jQuery

<head>~</head>内に記述してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

HTML5でマークアップ

最近はもうHTML5で統一しています。まだまだ勉強中なので時間かかったりしますが、なかなか楽しいですよ!

アウトライン

アウトライン

アウトラインはこんな感じです。画像クリックで拡大表示します。

IE対策

IE8以下はHTML5に対応していないのでhtml5.jsというスクリプトを読み込ませて対応させます。<head>~</head>内に下記コードを記述。

<!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

JavaScriptをオフにしている場合

JavaScriptを使って対応させているので、JavaScriptをオフにしている場合はこのように注意書きが表示されます。以下を<head>~</head>内に記述。

<noscript>
      このサイトはJavaScriptがオンになっていないと正常に表示されません
</noscript>

携帯版サイトの作成

携帯版サイトの作成

携帯電話に対応させるため、WordPressの「Ktai Style」を使用しました。いくつかのテーマが付属でついているので、その中からレイアウトの近いものを選び、コードやCSSをカスタマイズします。カスタマイズ方法も本家サイトで説明しています

Before & After

旧三十八Webサイト

旧Webサイト

新Webサイト

新Webサイト

いかがでしょう?その他過去に作った作品はポートフォリオサイトで見ることができます。また、過去リデザインのレビューは

を読んでみてください。ご意見・ご感想お待ちしております!

※現在多忙のため新規制作依頼を受け付けておりません。ご了承くださいませ。

※焼肉 三十八様へ配慮し、一部削除いたしました。

シェアする

コメント

  • murekumo0415

    いつも拝見させて頂いてます。

    今ちょうど自分の練習という名目で友人の会社のサイトのリニューアルをしようとしているのでとても参考になりました。

    そうとう時間はかかりそうですが勉強だと思って頑張ってみます。

  • Pingback: ~ kapuのメモ帳 ~ » Blog Archive » サイトリニューアルの工程はここで学ぶと良いかも()

  • さーや

    いつもブログを拝見して参考にさせていただいてます!
    今回はじめてコメントしました><

    簡潔にでもわかりやすく説明していただいたので、とっても勉強になりました。
    一応、web制作会社でお世話になっているんですがまだまだ勉強中でして…いつかはフリーでやっていきたいとは思っているんですが…。

    今回HTML5でマークアップされてるとの事なんですが、参考書等で勉強されたんでしょうか?
    もし、差支え無ければ教えていただけますか?

  • 原田

    さすがです!うなりました…本当に無駄が無いデザインで参考になりました!!

  • Webクリエイターボックス

    @さーや さん
    参考書は読んだことないんです。。以前書いた記事の冒頭で紹介している記事はよーく読みました!参考にしてみてください :)
    http://www.webcreatorbox.com/tech/html5-changed-elements/

  • さーや

    @Manaさん

    返信ありがとうございます!
    なるほど、早速参考にしてみます。

  • はじめまして。
    いつも為になる記事でよく拝見させて頂いてます。

    製作の流れやHTML5でのマークアップ、とても参考になりました!

  • 水月

    はじめまして
    ねこ速@VIPというブログをやっている水月と言います
    よろしければ相互リンクしていただけないでしょうか?
    内容はツール、マンガ、アニメ、その他ニュース等です
    検討のほう、よろしくお願いします
    サイト名:ねこ速@VIP
    URL:http://nic.chu.jp/
    RSS:http://nic.chu.jp/feed/

  • クリエイター見習い

    ときどき拝見させて頂いてます。

    記事を読むたびに考えさせられることが多く、サイト制作の際にも大変参考になっております。

    今回のリニューアル記事ですが、サイト構成や
    ユーザーインタラクションはとても良いと思うのですが、なんだか通販サイトみたいな感じで、あまり「食べに行こう!」って感じがしないのが残念に思います。
    メニュー写真が白いお皿の上にまばらに並べられたお肉があるだけで、全体的に「白っぽい」感じがしてしまって...。
    焼肉屋さんなのでしたら、もう少しドーンとボリュームや派手さがあったほうが良いような気がしました。

  • はじめまして。

    いつもブログとTwitterを拝見させていただいてます。

    こちらの記事、ものすごく勉強になりました!ありがとうございました!

    アウトラインというのは、ワイヤーフレームと一緒に作るものなのでしょうか?
    大変未熟者でお恥ずかしいのですが、教えていただけたら嬉しいです。

  • みゅこ

    デザインは素晴らしいのかもしれないけど、このサイトを見て「焼肉食べたいっ!ココ美味しそう♪」とは思わないなぁ。。。
    「美味しいお肉」というイメージが沸いてこない

  • Webクリエイターボックス

    @水月さん
    相互リンクは受け付けてません。すみません。

    @ゆづなさん
    アウトラインは、ただHTMLを組むときの構造を表しているだけなので、作成しなくてもおkです。構造を説明する上でわかりやすいかなあ、と思ってその図を作りました。

  • 素敵ですね~!
    しいて言えば、好みの問題ですが地図をクリックしちゃうと、ページ遷移してしまうのでblankかフロート表示だといいかなぁ~なんて思いました!

  • いつも拝見させて頂いてます。

    代理店さんが良い方だとやりやすくて良いですよね。
    記事がオープンな事が、皆さんの関係が良い事を伺えます。羨ましい。。

    ところで、写真購入の経緯は記事にしちゃって大丈夫なんでしょうか。マイナス面見えるし、あんまり必要無い気もするので、削除しちゃってOKじゃないですかね・・・

    あとKtai Style、見検証だったので助かりました。良さそうですね。ありがとうございました

  • サイトの設計の仕方大変参考になります。

    話は変わって
    最近Wordpressをかじってます。
    このサイトはWordpressをカスタマイズしたものなのかなぁと
    思ったのですが勘違いでしょうか。
    間違ってたらスイマセン。

    コメント欄がかっこよくなってる。
    マナさんの仕事の進み方にはちょっと驚いてます。
    1日どれくらい作業してるんだろうと想像してみるのですが
    バリバリというぐらいしか想像できませんでした。

  • @dearworldjayさん
    このサイトはWordPressをカスタマイズしています。
    コメント欄ちょっと変えてみましたー!

  • 何時見ても、すごいなぁ~と思います。
    ボク一人でいつもサイト作成をしていますが、なかなか…進行もうまくいかず。

    MANAさんのサイトでいつも勉強させていただいてます。

    コメント欄かわりましたね^^

  • 大変、勉強になります!そして、失礼ながらソースも拝見させて頂きました。すごくキレイで参考になります。 話は別ですが、ジョブズのメッセージを見つけて胸が熱くなりました。

  • とってもタイムリー 今、ちょうど焼肉店のメニューブックの製作中なのですが、これを見てから

    打ち合わせ中に、ホームページのリーニューアルも依頼されました。Manaちゃん、いやMana先生のおかげです。感謝!!

  • Pingback: 京都 集客販促サポート | メールソフトは何を使っていますか?()

  • Yuto Hatachi

    相変わらず丁寧な説明文付きでさいっこうに分かりやすいです^^
    確かにリニューアル前はどこをどう見たらいいのか悩むレイアウトだったようなので、すっきりしてとても分かりやすくなってますね。

    サイトを見たちょっとしたご報告なんですけど…

    三十八のメニューページのAセットの画像がたぶん落ちてます(((;゚Д゚))))「2012.1.31現在」

  • Pingback: Webデザイナーの備忘録 » Blog Archive » 今週のブックマーク(2012.2.26〜3.3)()

  • Pingback: 面白かったサイト 11月2週()

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)