Webクリエイターボックス » Webサイト制作 http://www.webcreatorbox.com WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 Sat, 04 Feb 2012 01:55:43 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 Facebookページの作り方 2012年1月版 http://www.webcreatorbox.com/tech/facebook-page-jan-2012/ http://www.webcreatorbox.com/tech/facebook-page-jan-2012/#comments Tue, 10 Jan 2012 01:55:04 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=6279 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。

IT系、Web業界の求人に強い転職サイト【green】

冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。

基本的なFacebookページの作り方

Facebookページ作成

まずはFacebookページを新規作成します。こちらの「Facebookページを活用」ページの右上、「Facebookページを作成」をクリック。

Facebookページ名を入力

カテゴリーを選びます。Facebookページ名を入力し、規約に同意したら「スタート」！

Facebookページ用画像を追加

はい完成！楽チンですね。「ようこそ」と表示されているところの「画像をアップロード」からFacebookページ用画像を追加できます。

Facebookページを編集

画像を追加したら右上の「Facebookページを編集」をクリック。

Facebookページの基本情報を入力

「基本データ」からFacebookページの基本情報を入力しましょう。「基本設定」「権限の管理」も必要があれば変更。これで基本的な設定は完了です。

「ウェルカムページ」の作成

「ウェルカムページ」は、Facebookページへ初めて訪れたユーザーに表示されるランディングページです。設定によりウォールをランディングページとして表示させることもできますが、このFacebookページが何についてのものなのかを説明できるので、ウェルカムページを作成しておいた方が効果的です。

「Facebookページを自由にカスタマイズする方法」で紹介した時との一番の変更点は、iframe（インラインフレーム）を使うことになった点です。表示されるウェルカムページの部分はユーザーが自分で用意したサーバーにファイルをアップロードすることになります。iframeになった事でより自由にFacebookページをカスタマイズする事ができるでしょう。

iframeを使ったFacebookページ

ただし、注意しなければいけないのが、そのiframeで表示するページは2011年10月1日からSSL必須となりました。つまり https:// で始まるURLに対応したセキュアなページでなければなりません。そのためSSLが利用できるサーバーが必要です。レンタルサーバーによっては最初から共有SSLが使用できるところもあるので、まず今使っているサーバーで使えるかどうかを確認しておきましょう。

それではSSLが利用できることを前提に手順を紹介します。大きく分けて3ステップあります。

1. iframeの中身を作成

画像一枚でも、HTML/CSSを使った簡単なランディングページでも、PHP等プログラミングを使った本格的アプリでも何でもOK！ただし、いくつか注意点あり。

<div id="fb-root"></div>

追記：大事なことなのに書き忘れていたので追記。HTMLの </body> の直前に <div id="fb-root"></div> を記述します。これ自体なくても表示されるし、動作もするのですが、記述するのがルールです。おまじないだと思って書いておきましょう。HTMLファイルの最後はこんな感じになります。

    <div id="fb-root"></div>
</boby>
</html>

リンクターゲット

iframeなので、ターゲットを指定しないとiframe内に表示されてしまいます。すべての a タグに target="_blank" を追加して別タブで表示するのを忘れないようにしましょう。JavaScriptですべてのリンクのターゲットを _blank にすることもできます。便利ですね。以下のコードを <head>〜</head> 内に記述してください。

<script type="text/javascript">
window.onload = function() {
     for (var i = 0; i < document.links.length; i++) {
          var ele = document.links[i];
          if (ele.href.match(/^http/)) {
               ele.target = "_blank";
          }
     }
}
</script>

iframeのサイズ

規定のサイズは幅520px、高さ800pxです。このサイズを超えるとスクロールバーが表示されます。幅はCSSで body の幅を指定すればOK。

body{width: 520px}

問題は高さです。もちろん800pxをこえても表示はされますが、スクロールバーが嫌っていう人もいますよね。そんなときはJavaScriptでおまじない。以下のコードを <div id="fb-root"></div> の後、</body> の前に入力します。「YOUR_APP_ID」を任意のものに変更。「YOUR_APP_ID」については下で出てくるのでしばらくお待ちくださいまし。

追記（2012/1/10/15:30）：コードを最新のものに変更しました。

<div id="fb-root"></div>

<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  FB.init({
    appId  : 'YOUR_APP_ID',
    oauth  : true,
  });

  FB.Canvas.setAutoGrow();

  function growSize() {
    var height = Number(
      document.getElementById('myContent').style.height.split('px')[0])
      + 100;
    document.getElementById('myContent').style.height = height + 'px';
  }
</script>

</boby>

以上の点に注意してiframeページが完成したらサーバーにアップロードします。これでiframeの中身が完成！

2. アプリ登録

Facebookページのコンテンツはアプリとして登録します。

Facebookページのコンテンツはアプリとして登録

まずは「Facebook開発者」ページへ行き、「アプリ」をクリック。

新しいアプリケーションを作成

「新しいアプリケーションを作成」をクリックするとポップアップウィンドウが表示されます。コンテンツ（タブ）の名前を入力して規約に同意したら「続行」。「App Namespace」はとりあえず空欄でOK。

セキュリティチェック

恒例の読みにくすぎるセキュリティチェックが終わったら「送信」。

App ID

とりあえずアプリ完成。先ほどでてきた「App ID」はコレのことです。

アイコンを設定

コンテンツの横に表示されるアイコンを設定しましょう。ファイル形式はJPG, GIF, PNG。ファイルの上限は5MB。サイズは16x16ピクセルです。それより大きなものはリサイズされます。ロゴも登録できますが、どこに表示されるのか…？サイズは75x75です。

iframeで表示するURL

ページ下部にある「ページタブ」をクリック。ページタブ名、iframeで表示するURLを「Secure Page Tab URL」に記入して「変更を保存」で完成！

3. FacebookページにIFrameタブを追加

アプリを作っただけではFacebookページに反映されません。Facebookページで見れるように設定します。

ブラウザから以下のアドレスを開きます。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_IDを 2. でも登場したApp IDに、YOUR_URLを「Secure Page Tab URL」で記入したiframeのURLに書き換えてGo！

ページタブを追加

するとこのように表示されるので、ページタブを追加したいFacebookページ名を選択して「ページタブを追加」。

Facebookページタブ

Facebookページに戻ると、タブが追加されています！うまく表示されているか確認しましょう。時々反映されるまでに時間がかかる事があります。（この例を作っている時は20分くらいかかりました…）「あれ？表示されない？！」という時は慌てず紅茶でも飲んで反映されるのを待ちましょう。

最初に表示させるコンテンツ

デフォルトではFacebookページを開くとウォールが表示されるようになっています。ウォールではなくウェルカムページを表示させたいので、Facebookページを編集 ＞ 権限の管理 にある「デフォルトで表示するタブ」のセレクトボックスから、最初に表示させるコンテンツを選択します。

うまく設定できましたか？え？前よりハードルが高くなってる？はい、私もそう思います。なんかややこしいですよね…。「アプリを作成」という単語だけでびびっちゃいますね…。もっとわかりやすい作り方になるよう願っています。まあそしたら私はまた記事を書く事になるんですけどね。

今回記事に合わせて新たにウェルカムページを作りなおしたので、ぜひぜひご覧ください！お気に召したらぜひ「いいね」！

参考サイト：

]]> http://www.webcreatorbox.com/tech/facebook-page-jan-2012/feed/ 20 WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ http://www.webcreatorbox.com/tech/wordpress-smartphone-change-theme/ http://www.webcreatorbox.com/tech/wordpress-smartphone-change-theme/#comments Tue, 20 Dec 2011 01:55:23 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=6046 以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Media Queriesを使った方法の２通りを試したので、その比較についても書いてみようと思います。

IT系、Web業界の求人に強い転職サイト【green】
最初に試した方法はCSSのMedia Queries（メディア クエリー）を使ってCSSを変更する方法。画面がスマートフォンサイズであればサイドバーを非表示にしたり、ページ送りの表示方法を変更していました。でも、「画面が小さいのにトップページに抜粋文やサムネイル画像はいるのか…」「どうせ非表示にするコードは不要なんじゃないのか…」「もっと使いやすくできるはず…」「もっと省けるものがあるはず…」と思い、試しに別のテーマを作ることにしました。

「Media Queriesってなんぞや？」という方は「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」を読んでおさらいおさらい！

WordPressのテーマを変更してスマートフォンに対応させる

1. スマートフォン用テーマフォルダを作成

まずは /wp-content/themes/ 内にスマートフォン用テーマを作成します。テーマの作成方法は主に３つのやり方があります。

スタティックHTMLから作成

オリジナルテーマを作る要領で、HTML／CSSで静的ページを作成しておき、その後WordPressの機能をつけていくやり方です。確実に思い通りのサイト設計にするにはこの方法がいいかもしれませんが、一番時間がかかるやり方でもあります。元テーマと大きくデザイン・構成が変わる場合や、テーマ作成に慣れていない場合はこの方法でやるといいかも。

子テーマを作る

元の親テーマファイルを読み込み、必要であればテーマファイルを用意し、上書きする方法です。必須ファイルは style.css のみ。

/*
Theme Name: wcb2-mobile
Template: wcb2
*/

@import url('../wcb2/style.css');

style.css 上部にテーマの名前と親テーマのディレクトリ名（両方必須）を記述し、 @import で親テーマのCSSを読み込みます。子テーマについて詳しい説明はWordPress Codexをご覧ください。

簡単にできるのですが、結局親テーマを読みこんで上書きするので、読み込むファイル自体は増えますね。

元のテーマフォルダをコピー

今回やった方法はこちら。元のテーマフォルダをコピーし、テーマ名を変更してカスタマイズする方法です。Webクリエイターボックスの場合、元のテーマフォルダ名が「wcb2」、スマートフォン用テーマは「wcb2-mobile」と名づけ、その中で不要なファイル・コードをガツガツ捨てていきました。Web版とスマートフォン版で同じ画像を使うなら、テーマファイルやCSSファイルに記述する画像ファイルのパスを変えるだけなので簡単です。

2. プラグインでテーマを切り替える

スマートフォン用のテーマが完成したら、プラグインでユーザーエージェントを判定し、スマートフォンだった場合はテーマを切り替えます。様々なプラグインがありますが、今回使用したのはWPtap Mobile Detectorというプラグイン。スマートフォンといってもiPhoneやiPad、Androidなど、機種によってテーマを選択することができます。

WPtap Mobile Detector
ドロップダウンメニューからスマートフォン用テーマを選択するだけ。確認するとちゃんと切り替わっています。簡単ですね！

CSS Media Queriesとの比較

スマートフォン用テーマを適応させる前と後ではどのように変化があったのかを簡単に検証してみました。

表示速度

表示速度のテストはWebWaitというサービスを使用しました。5回計測したうちの平均値を出してくれます（計測回数は変更可能）。このまま使うとWeb版の速度しか測れないので、Safariを立ち上げ、「開発」メニューの「ユーザーエージェント」を「iPhone」に設定して計測。同じWi-fi環境の元、キャッシュはクリアしてテストしています。

CSS Media Queriesで対応したバージョン
まずは CSS Media Queriesで対応したバージョン。5.06秒。

スマートフォン用テーマを適用させたバージョン
続いてスマートフォン用テーマを適用させたバージョン。2.57秒。

約2秒早くなりました。3G回線だとさらに遅くなりそうです。

ファイルサイズ

表示ファイルサイズはSafariのデベロッパーツールにある「Network」から確認。

Media Queriesで対応したバージョン
CSS Media Queriesで対応したバージョン。1.11MB。

スマートフォン用テーマを適用させたバージョン
スマートフォン用テーマを適用させたバージョン。95.48KB。

ちなみにテーマフォルダ自体のサイズは元テーマが1.2MB、スマートフォン用テーマが323KBです。

製作時間

日頃から常に制作にかかった時間を計っているので、こちらも公開。
CSS Media Queriesを使った場合の制作時間は約1時間40分。対してスマートフォン用テーマの制作時間は約4時間。
ただし今回はプラグインの選定・テストの時間も含めているので、次回からはもう少し早くできそうです。

どちらも制作時間だけでなく設計を考える時間も必要ですし、サイトによって大きく変わると思います。が、やはりCSS Media Queriesの方はいじるファイルがCSSのみですむので、CSS Media Queriesで対応させたほうが制作時間は短くてすみそう。

結論

以前から「[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである」という記事にあるとおり、Media Queriesの使用はまだまだ議論の余地がある部分だと思います。なので一概には言えない気もしますが、とりあえず今回思ったことまとめ…。

テーマを変えた方がよさそうなサイト

  • 非表示させるコンテンツがたくさんある
  • HTMLの構成自体が大きく変わる

CSS Media Queriesで対応できそうなサイト

  • 表示させるコンテンツはあまり変わらない
  • 元サイトのコンテンツ量が少ない
  • 制作時間があまりない

CSSの display: none; などを使って大幅にコンテンツの表示・非表示を変える場合、HTMLの構成自体が大きく変わる場合は、今回のように別テーマを作って切り替えた方がいいように思います。逆に表示させるコンテンツ自体はほとんど変わらないという時はCSS Media Queriesで十分対応できるでしょう。そのサイト、コンテンツによりますね。最初から対応させるデバイス、対応方法も頭に入れて設計していくように心がけましょう。

]]> http://www.webcreatorbox.com/tech/wordpress-smartphone-change-theme/feed/ 3 Webクリエイターボックスのデザインをリニューアルしました！ http://www.webcreatorbox.com/webinfo/wcb-redesign/ http://www.webcreatorbox.com/webinfo/wcb-redesign/#comments Fri, 09 Dec 2011 01:25:42 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5894 ブログを開始してほぼ２年！初めてデザインを変更してみました。古臭いコーディングとはさようならです。デザインコンセプト自体はそのままですが、より見やすく、使いやすくなっているんじゃないかな…と思います。リニューアル時のポイントや使ったプラグインなどをまとめておきます。

IT系、Web業界の求人に強い転職サイト【green】

リデザインの理由

ブログ立ち上げたばかりの頃は、日本のブログをほとんど見たことがなく、日本のWeb業界に知り合いもいなかったため、ブログを読んでもらうにはまず「インパクト」が大切だと思いました。記事の内容はもちろん大切ですが、一度見たサイトを覚えて頂くことも大切かな、と。なのでレイアウトも通常のブログとはちょっと変えて、大きなヘッダーで「なんか他のブログとは違う」デザインにしました。

ただそれでは読みづらい、使いづらいサイトになるだろうなあ…という事はわかっていたので、人気がでてきたらすぐにリデザインするつもりでいました。それまで最低でも一年くらいはかかるだろうと思っていたら、１ヶ月後にはアクセスが急増してしまったため、リデザインのタイミングを見失ってしまった感はあります…。申し訳ないっす。

で、やっと今年の春頃リデザインにとりかかりました。時間が確保できなかったのでチビチビと。この時のデザインは結構イメージをガラリと変えてキレイめな整ったデザインでした。が、完成間近になってなんだか嫌気がさしたのでまた最初からやり直すなど。


勝手に「前髪」と読んでるギザギザ部分や、配色、斜めな感じ、斜線はだいたいそのまま。

仕様

WordPressプラグイン

使用しているプラグインいろいろ。目新しいプラグインは使っていないので、ざっと羅列してみます。

可変幅とiPhoneサイト

可変幅とiPhoneサイト
メインコンテンツ部分の幅は％指定してウィンドウサイズに合わせて可変する仕様です。リキッドレイアウトってやつですかね。スマートフォン用にはCSS3のMedia Queriesを使って対応させました。スマートフォンについてはもうちょっと使いやすくなるんじゃないかなあ…と更なる改善案を考え中です。

カテゴリー部分

カテゴリー部分
カテゴリーをクリックすると突然カテゴリー内の記事一覧ページへとぶのではなく、スライダーを使って最新５件を先に表示するようにしました。「もっと表示」をクリックで一覧ページにとびます。

エラーページ

エラーページ
「33 Unique Eye Catching 404 Error Pages」のようなエラーページのデザインを集めた記事を見て「なんかいいなあ」ってことでサックリ作ってみました。エラーページはなるべく表示させたくないんですけどね…。カフェでこれ描いてたら「Hey you! You’re Mangaka eh!?（おいネーちゃん、マンガカか！？）」と聞かれたりなんだり。

フォントサイズ

前のデザインではメインのフォントサイズを14pxにしていましたが、今回ちょっと大きい16pxに変更しました。コンテンツ部分の横幅が広くなった分、14pxだとなんだか小さい気がしまして…。

サーバー変更

落ちまくりな弱小サーバーから、VPSとやらに変更しました。今まで「サーバー落ちてるよ！」というご連絡を頻繁に頂いていたのですが、どうにかなるのではないかと思います。これでサーバー落ちちゃったら…私はどうすれば…。

いろいろ削除

「なんかゴッチャゴチャしてるなあ…」という事で削除できそうなものは削除してみました。

アンケート

アンケート
WP-Pollsというプラグインを使って、Webに関するちょっとしたアンケートを設置していましたが削除しました。ちょいちょい記事のネタに使っていたのですが、Facebookページでも同様に簡易アンケートはとれるなあ…と思ったので取ることにしました。

タグクラウド


これは最後まで悩んだのですが、タグクラウド内リンクのクリック率が0.4%以下と思っていた以上に低かったので実験的に取ってみました。「タグ一覧便利なのに！」という声が多ければ復活の可能性大。

シンプルなフッター

シンプルなフッター
前回のWebクリエイターボックスではフッターにコンタクトフォームや私の紹介文を掲載していましたが、こちらも削除してかなりシンプルなフッターになりました。


削除の理由は「オートページャー、使ってますか？」というアンケートをとっていたのですが、意外と使っている方が多かったので。オートページャーとは、記事一覧ページや検索結果ページなど、分割されたサイトを同じページ内に自動で表示していく機能です。Firefox Add-ons やChromeエクステンションでその機能をプラスすることができるようです。オートページャーを使っているユーザーには、フッターにコンテンツがあっても永遠に見ることができないらしいので削除しました。

まだテスト仕様のものがいくつかあったり、付け足したかった大きな機能が１つ実装できてないので、完了次第またお知らせします。乞うご期待！バグ報告なんぞありましたらお気軽にご連絡ください！

]]> http://www.webcreatorbox.com/webinfo/wcb-redesign/feed/ 31 WordPressでどんなサイトでも作れちゃう気になれる無料プラグイン9個 http://www.webcreatorbox.com/webinfo/wordpress-useful-plugin/ http://www.webcreatorbox.com/webinfo/wordpress-useful-plugin/#comments Tue, 29 Nov 2011 01:55:51 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5727 WordPressのプラグインってすごいですよね。少しカスタマイズするだけで思い通りの機能のついたWebサイトを作ることができます。今回は「えっ、こんなことまでできちゃうの？」と思わせてくれるような高性能プラグインをいくつか紹介します。WordPress 3.0から追加されたマルチサイト機能を使えばWebサービスとして運営することもできそうなもの多め。どんな風に使おうかわくわくしちゃいますよ！


IT系、Web業界の求人に強い転職サイト【green】

1. SNS

BuddyPress

WordPressをSNSとして運営することができるプラグイン、BuddyPress。過去記事「WordPressプラグイン「BuddyPress」でSNSサイトを作成」で詳しく紹介しています。サンプルサイトもあるので実際に使ってみてください！

BuddyPress メッセージ

友達の申請やメッセージを送ったり…

Twitterのような簡易コメント

「今なにしてる？」系のコメントができたり…

BuddyPressのグループ

グループ（Mixiでいうコミュニティ）を作成できたり…

BuddyPressで使える便利なプラグイン（プラグインのためのプラグイン…）もたくさんありますよ。ぜひ使ってみてください。

2. ECサイト

WP e-Commerce

WP e-Commerce

WP e-Commerceは有名なECサイト構築用プラグイン。商品の追加や料金の設定など、簡単にできます。特に配送の必要のないダウンロード商品を販売したい時は便利です。

管理画面から細かい設定可能。

管理画面から細かい設定可能。

「商品カテゴリー」「買い物かご」「スペシャルオファー」など、独自のウィジェット付き。ドラッグ＆ドロップでサイドバーに実装できます。

通常のテーマからWP e-commerceの機能に合わせてテーマをカスタマイズするには少し慣れが必要かも。このプラグインを使用することを前提として作成されたテーマはこのあたりで配布されています。ただし多機能なテーマなのでほとんどが有料。Tokokooではいくつかのテーマが無料で配布されているようです。

3. 不動産

不動産プラグイン

不動産サイトをサクッと作れる不動産プラグイン。不動産サイトに必要なものは全てそろっていると言っても言い過ぎじゃないです。日本のものなのでもちろん日本語で使えます。デモサイトあるので、どんなことができるのか試してみてください。

管理画面のツールから設定できます。物件の登録は用意されているフォームに入力するだけ。

QRコードまで生成できて文句なしですね。

他にも実際にプラグインを導入しているサイトの実例を見ることができます。また、「不動産サイト構築がとても楽になる国産で無料のWordPressプラグイン見つけた」という記事で詳しい使い方が紹介されています。

4. 求人情報

Job Manager

Job Managerはサイトに求人情報を簡単に掲載することができるプラグイン。基本的には自社求人の掲載を目的に作られたプラグインですが、WordPressをマルチサイト化すれば求人サイトの作成も簡単にできそうです。

管理画面の左サイドに設定項目が追加されています。「Add Job」で新しい求人情報を追加できます。「Apply Now」からエントリーフォームへ進みます。

5. 請求書作成

WP-Invoice

WP-InvoiceはWordPress内で請求書の作成、管理ができるプラグイン。こちらもWordPressをマルチサイト化して請求書サービスを運営できそうですね！

プラグインを有効化すると「Invoice」という項目ができています。「Add New」から新しい請求書を作成します。請求書の内容・金額などを入力して保存。

メール通知用のテンプレートが表示されます。テンプレート内容は「Settings」の「Email Templates」で変更できます。メール通知をすると請求書内容のページがクライアントに送られるので、下のフォームに入力してもらい、入金の手続きができます。

6. レシピ

RecipePress

RecipePressは簡単にレシピを追加していくことができるプラグイン。レストランサイトで簡単な一品メニューのレシピを公開したり、マルチサイト化してレシピの共有サイトを作ったりと、料理好きにはたまらない（かもしれない）プラグインです。プラグインのサイトでデモが見れます。デモサイトではユーザーがレシピを投稿できるレシピ共有フォームも設置しています。

管理画面のサイドバーに「Recipes」項目が追加されています。「Add New」から新しいレシピを追加。材料などはフォームに入力していくだけ。「Setting」から表示する項目（準備時間、調理時間、何人分かなど）や画像のサイズなどが設定できます。

7. 画像販売

Image Store

Image Storeであなたが撮影した写真を販売することができます。こちらも画像販売サイトとしてWebサービス化できそう。スライドショーやライトボックスでの表示も最初から設定されています。「Settings」で画像の料金、サイズ、スライドショー、ウォーターマークなどの設定ができます。カスタマイズするときにはこちらのショートコードなんぞ役に立つかもです。

「Gallery」の項目が追加されています。「Add New」から画像を追加。会員のみが画像を見れるように設定することもできます。

ショッピングカートに入れるとこんな感じ。クーポンコードの設定もできるようです。

8. 寄付

Donation Can

Donation CanはWebサイト上で寄付金を募れるプラグイン。目標金額の設定もでき、目標額までの達成度バーも表示・非表示選べます。

「Add New Cause」で新しい寄付の目的と目標金額を設定します。

Donation Can用ウィジェットも追加されているので、ドラッグ＆ドロップでサイドバーに表示。

その他、「General Settings」で通貨やありがとうメッセージの文章をカスタマイズ、「Add New Donation」で手動で寄付金を登録できます。

追記：日本ではPayPalを利用しての個人間の送金は法律で禁じられているそうです。知りませんでした…。ご指摘頂きありがとうございます。

9. 予約システム

easyReservations

easyReservationsでユーザーに予約してもらう事ができるカレンダーを導入できます。ホテル、レストラン、美容院など、様々なサイトに取り入れられそうです。

管理画面に「Reservations」の項目ができてます。「Setting」でフォームに表示する内容やメール通知の文章などを設定できます。また「Add Reservation」から手動で予約を入れられます。

基本的にこのプラグインはホテルの部屋を予約するために作られているので、予約が部屋単位となっています。予約用の投稿カテゴリーを作成し、お部屋の名前を記事で登録。Setting > General > Reservation Settings > Room Categoryで予約用のカテゴリーを選択。時間単位で予約してもらいたいときは、単純にお部屋の名前のところを「18:00～19:00」のように時間で表示させればできるかなあと思います。

また、時間指定は有料ですが、「Booking Calendar」もよさそうでした。

わくわくしてきましたか？他にも「こんなわくわくあるよ！」というプラグインがあればぜひ教えてください！

私がまとめ記事を書くといつも数字のキリが悪いよ＼(^o^)／

]]> http://www.webcreatorbox.com/webinfo/wordpress-useful-plugin/feed/ 17 「焼肉 三十八」のリニューアルをしました！ http://www.webcreatorbox.com/tech/redesign-mitohachi/ http://www.webcreatorbox.com/tech/redesign-mitohachi/#comments Tue, 08 Nov 2011 02:10:37 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=5595 こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。


IT系、Web業界の求人に強い転職サイト【green】

受注

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

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

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

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

サイト構成

旧三十八Webサイト

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

旧サイトマップ

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

新サイトマップ

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

ワイヤーフレーム

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

ホーム

ホーム


三十八について

三十八について

デザイン

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

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

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

CTA

予約は電話のみとのことなので、電話番号をページヘッダーとフッターに２箇所設置しました。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サイト

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

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

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

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

]]> http://www.webcreatorbox.com/tech/redesign-mitohachi/feed/ 21