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

2011年11月8日
Webサイト制作, Webデザイン

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

受注

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

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

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

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

サイト構成

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

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

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

ワイヤーフレーム

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

ホーム

三十八について

デザイン

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

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

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

予約は電話のみとのことなので、電話番号をページヘッダーとフッターに２箇所設置しました。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をオフにしている場合はこのように注意書きが表示されます。以下を<head>～</head>内に記述。

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

携帯版サイトの作成

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

Before & After

旧Webサイト

新Webサイト

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

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

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

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