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

こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。
受注
福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。
簡単なリニューアル時のご要望をまとめると下記6点でした。
- お知らせ欄は更新可能
- WordPressで構築
- 写真やテキストは流用
- 携帯版作成(コンテンツは一緒)
- ブログ・口コミ掲示板は削除
- IE6は非対応でOK(ありがとうございます!!!)
制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeやEメールで行いました。松野氏は私が制作時に使っているツールや配色の仕方などを熱心に質問して頂き、「私も使ってみます!」「勉強になります!!」と、とっても向上心のある方だなあという印象でした。そして彼女とは誕生日が一緒というミラクル!お誕生日には素敵なAAを頂きましたw ありがとうです松野氏ーーー!!!
サイト構成

旧 三十八Webサイトのデザインです。最初に旧Webサイトを見たときの印象は、ホームに表示しているものが多く、使っている色も多いからか少し雑然としたイメージ…。また、いくつかのページをひとつにまとめられるかな?ということでサイトマップから見直すことにしました。
ワイヤーフレーム
サイトマップを元にワイヤーフレームを作ります。レイアウトが変わるホーム・メニュー・三十八についての3点。レイアウト自体は特に問題ないとのことで、このまますすめることに。飲食店のWebサイトなので、なるべく画像を大きく・多く打ち出してユーザーの食欲をそそらせようというレイアウトです。下記画像クリックで拡大表示できます。
デザイン
デザイン面でのご要望は下記3点。
- 赤と白をメインで
- ファミリーやカップルが気軽に来れる楽しい雰囲気
- 高級感はいらない

赤メインでも旧サイトのように全面に使ったらドギツイ感じになってしまうので、使う箇所をしぼってアクセントとして使用。また、ロゴは和風な雰囲気だったので、和紙を連想するような茶色のテクスチャを背景に使用し、温かみのあるデザインにしました。
ページ内リンク移動時のエフェクト
ページ内リンクをスムーズに移動できるよう、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]-->
<noscript> このサイトはJavaScriptがオンになっていないと正常に表示されません </noscript>
携帯版サイトの作成
携帯電話に対応させるため、WordPressの「Ktai Style」を使用しました。いくつかのテーマが付属でついているので、その中からレイアウトの近いものを選び、コードやCSSをカスタマイズします。カスタマイズ方法も本家サイトで説明しています。
Before & After
いかがでしょう?その他過去に作った作品はポートフォリオサイトで見ることができます。また、過去リデザインのレビューは
を読んでみてください。ご意見・ご感想お待ちしております!
※現在多忙のため新規制作依頼を受け付けておりません。ご了承くださいませ。
※焼肉 三十八様へ配慮し、一部削除いたしました。
いつも拝見させて頂いてます。
今ちょうど自分の練習という名目で友人の会社のサイトのリニューアルをしようとしているのでとても参考になりました。
そうとう時間はかかりそうですが勉強だと思って頑張ってみます。
[…] 「焼肉三十八」のリニューアルをしました webクリエイターボックス 古い記事へ […]
いつもブログを拝見して参考にさせていただいてます!
今回はじめてコメントしました><
簡潔にでもわかりやすく説明していただいたので、とっても勉強になりました。
一応、web制作会社でお世話になっているんですがまだまだ勉強中でして…いつかはフリーでやっていきたいとは思っているんですが…。
今回HTML5でマークアップされてるとの事なんですが、参考書等で勉強されたんでしょうか?
もし、差支え無ければ教えていただけますか?
さすがです!うなりました…本当に無駄が無いデザインで参考になりました!!
@さーや さん
参考書は読んだことないんです。。以前書いた記事の冒頭で紹介している記事はよーく読みました!参考にしてみてください :)
http://www.webcreatorbox.com/tech/html5-changed-elements/
@Manaさん
返信ありがとうございます!
なるほど、早速参考にしてみます。
はじめまして。
いつも為になる記事でよく拝見させて頂いてます。
製作の流れやHTML5でのマークアップ、とても参考になりました!
はじめまして
ねこ速@VIPというブログをやっている水月と言います
よろしければ相互リンクしていただけないでしょうか?
内容はツール、マンガ、アニメ、その他ニュース等です
検討のほう、よろしくお願いします
サイト名:ねこ速@VIP
URL:http://nic.chu.jp/
RSS:http://nic.chu.jp/feed/
ときどき拝見させて頂いてます。
記事を読むたびに考えさせられることが多く、サイト制作の際にも大変参考になっております。
今回のリニューアル記事ですが、サイト構成や
ユーザーインタラクションはとても良いと思うのですが、なんだか通販サイトみたいな感じで、あまり「食べに行こう!」って感じがしないのが残念に思います。
メニュー写真が白いお皿の上にまばらに並べられたお肉があるだけで、全体的に「白っぽい」感じがしてしまって...。
焼肉屋さんなのでしたら、もう少しドーンとボリュームや派手さがあったほうが良いような気がしました。
はじめまして。
いつもブログとTwitterを拝見させていただいてます。
こちらの記事、ものすごく勉強になりました!ありがとうございました!
アウトラインというのは、ワイヤーフレームと一緒に作るものなのでしょうか?
大変未熟者でお恥ずかしいのですが、教えていただけたら嬉しいです。
デザインは素晴らしいのかもしれないけど、このサイトを見て「焼肉食べたいっ!ココ美味しそう♪」とは思わないなぁ。。。
「美味しいお肉」というイメージが沸いてこない
@水月さん
相互リンクは受け付けてません。すみません。
@ゆづなさん
アウトラインは、ただHTMLを組むときの構造を表しているだけなので、作成しなくてもおkです。構造を説明する上でわかりやすいかなあ、と思ってその図を作りました。
素敵ですね~!
しいて言えば、好みの問題ですが地図をクリックしちゃうと、ページ遷移してしまうのでblankかフロート表示だといいかなぁ~なんて思いました!
いつも拝見させて頂いてます。
代理店さんが良い方だとやりやすくて良いですよね。
記事がオープンな事が、皆さんの関係が良い事を伺えます。羨ましい。。
ところで、写真購入の経緯は記事にしちゃって大丈夫なんでしょうか。マイナス面見えるし、あんまり必要無い気もするので、削除しちゃってOKじゃないですかね・・・
あとKtai Style、見検証だったので助かりました。良さそうですね。ありがとうございました
サイトの設計の仕方大変参考になります。
話は変わって
最近Wordpressをかじってます。
このサイトはWordpressをカスタマイズしたものなのかなぁと
思ったのですが勘違いでしょうか。
間違ってたらスイマセン。
コメント欄がかっこよくなってる。
マナさんの仕事の進み方にはちょっと驚いてます。
1日どれくらい作業してるんだろうと想像してみるのですが
バリバリというぐらいしか想像できませんでした。
@dearworldjayさん
このサイトはWordPressをカスタマイズしています。
コメント欄ちょっと変えてみましたー!
何時見ても、すごいなぁ~と思います。
ボク一人でいつもサイト作成をしていますが、なかなか…進行もうまくいかず。
MANAさんのサイトでいつも勉強させていただいてます。
コメント欄かわりましたね^^
大変、勉強になります!そして、失礼ながらソースも拝見させて頂きました。すごくキレイで参考になります。 話は別ですが、ジョブズのメッセージを見つけて胸が熱くなりました。
とってもタイムリー 今、ちょうど焼肉店のメニューブックの製作中なのですが、これを見てから
打ち合わせ中に、ホームページのリーニューアルも依頼されました。Manaちゃん、いやMana先生のおかげです。感謝!!
[…] http://q3.snak.org/ja/ […]
相変わらず丁寧な説明文付きでさいっこうに分かりやすいです^^
確かにリニューアル前はどこをどう見たらいいのか悩むレイアウトだったようなので、すっきりしてとても分かりやすくなってますね。
サイトを見たちょっとしたご報告なんですけど…
三十八のメニューページのAセットの画像がたぶん落ちてます(((;゚Д゚))))「2012.1.31現在」
[…] http://www.webcreatorbox.com/ tech/redesign-mitohachi/ いつも参考にさせて頂いている、「Webクリエイターボックス」さんの記事。 昨年の記事ですが、HTML5の事とか、スムーズスクロールのソースなどが載っていたのでチェックしました。 […]
[…] 今日の重ね着 気温からオススメの重ね着を表示してくれるサイト。 「焼肉 三十八」のリニューアルをしました! | Webクリエイターボックス これすごく参考になります。 照英inヴァナ・ディール 公式が病気www […]