【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

12Nov2011

超簡単に開閉式リストができるjQueryライブラリ

先月依頼されて作成したwebサイトがあるのですが、クライアントから「リストを開閉式にしたい」という要望を頂きました。

「はーい。やっときますね^^」 と軽い感じで返事して気づく。

・・・開閉式リスト作ったことないっ!!

そのサイトにはすでにjQueryを使っていたので、慌ててアコーディオンリストのjQueryを調べる事数十分。。。

今回ご紹介するライブラリ(というかjqueryスクリプト)は、ものすごいシンプルな上に、ものすごい良い感じの動きをして、ものすごい汎用性が高い!!

是非チェックしてみてください^^

この記事を読む

4Nov2011

ヌルッとページ内リンクをスクロールさせるライブラリ

ページ内リンク

ネットショップでは目的の商品を探しやすくする為に、ページ内リンクを使う場面が多いと思います。

ページ内リンクは便利ですが、一瞬どこへ移動したのか見失ってしまうのが欠点ですよね^^;

今日ご紹介するJavaScriptライブラリを使えば、リンク先に移動する際にスマートフォンのように「ヌルッ」とスクロールさせる事ができます。

smoothScroll.js

こちらのサイトで配布されています。
to-R

サーバーの任意の場所にダウンロードして、使いたいページのhead内で外部ファイルとして呼び込めば準備完了です。

このライブラリはとても軽くて信頼性が高く、HTML5にも対応しています。

最も優れた所は

既存のハッシュタグ(#)付きページ内リンクに適用される

という点。

各リンクに個別にタグを書き加える必要はありません。

適用させたくない箇所には

smoothScroll.jsを適用させたくないリンクには、以下のように一言だけ付け加えます。

html5でコーディングしている場合

スムーズなし

html5以外

JavaScriptファイルの14行目を書き換える

var attr ="data-tor-smoothScroll";

変更後

var attr ="class";

ページのリンク部分にclass属性を追加

スムーズなし

WordPressのトップページでは動かず

HTMLで作ったサイトのほうで快調に動いていたのでWordPressのほうでも使ってみようと思い準備をすると、なぜかトップページでは動かず。。。

詳しく調べてはいないので簡単なコーディングミスの可能性もありますが、とりあえずご報告です。

2Oct2011

素人写真をプロっぽく!商品写真補正テクニック

久しぶりに写真補正関連のネタを書きます!

テーマは

冴えない素人写真をプロの商品写真に補正する方法

です。

準備と手順

まずはネットショップで使う予定の商品を撮影します。
今回は撮影テクや構図などには触れませんが、できる限りキレイに取ることが肝心です。

一般的に画像処理にはphotoshopを使いますが高価なソフトですので、まだ持っていない方もいるかと思います。
以前ネットショップ運営で必須と紹介したFireworksでも同等の画像処理ができますので触ってみてください。

手順:

1, 明るさの調整
2, 色あいの調整
3, 彩度の調整
4, シャープネスの調整

基本的には上記4つの処理を行います。

今回使用する商品写真こちらです。

プロの商品写真補正テク

商品ラベルや形などは認識できますが、以下が原因で素人写真の印象を受けます。

・全体的に青っぽい (蛍光灯で撮影したため)
・白っぽくはっきりしない (コントラスト・シャープネスが最適でない)

このような問題は撮影後に補正する事ができます!
では実際にやってみましょう。

1, 明るさの調整

明るさはトーンカーブを使って調節します。
後々何度でも調整をやり直せる「調整レイヤー」を使います。

レイヤー → 新規調整レイヤー → トーンカープ

全体がぼやっとした写真はコントラストが足りていないので、白色域はより白く、黒色域はより黒くします。

プロの商品写真補正テク

上のトーンカーブを適用すると、このようになりました。

プロの商品写真補正テク

2, 色あいの調整

蛍光灯の下で写真を撮ると青っぽくなってしまう事が多いです。
この場合にはカラーバランスを使って調整します。

レイヤー → 新規調整レイヤー → カラーバランス

全体が青っぽいので、青っぽい値をマイナスにするだけです。

プロの商品写真補正テク

基本的には「シャドウ」「中間」「ハイライト」のすべてで

・シアン/レッドを レッドよりに+2~10
・イエロー/ブルーを イエローよりに+2~10

ほど調整すると蛍光灯の青さは取れます。

参考例では上記基本を微妙に調整して最適化しています。
何回かチャレンジして、写真ごとに最適な値を見つけてください。

プロの商品写真補正テク

3, 彩度の調整

最近のコンデジはオートモードで撮ると彩度が強すぎる場合が多くて困ります・・・
彩度を減らす補正というのは難しいので、商品撮影の際は、撮影時に過剰な彩度・コントラストの設定を避けるようにします。
(撮影モードで”とても鮮やか”などは使わないほうが無難です)

今回の例の様に、何だか華のない写真は「彩度」が足りていない場合が多いです。
そんな時はphotoshopで彩度を調節します。

レイヤー → 新規調整レイヤー → 色相・彩度

プロの商品写真補正テク

「マスター」の「彩度」を
+5~15
ほど動かすとキレイになります。

プロの商品写真補正テク

4, シャープネスの調整

これまでの3つの補正、明るさ・色合い・彩度 の補正が終わったら、彩度にシャープネスをかけて書き出します。

その前に、今まで作成した調整レイヤーをひとつにまとめます。

「レイヤーウィンドウ」で全てのレイヤーを選択して、右クリックで「レイヤーを結合」します。
(または、Ctrl+Shift+E)

結合されたレイヤーが選択されている事を確認したら、アンシャープマスクをかけます。

フィルター → シャープ → アンシャープマスク

値は画像の大きさによっても異なりますので、例を参考に調整してください。

プロの商品写真補正テク

見比べてみましょう

補正前
プロの商品写真補正テク

補正後
プロの商品写真補正テク

あとは不要な余白部分を切り取ったり、文字を入れたりして使いましょう。

青っぽい(寒色系)写真は基本的に購買意欲をそそりませんので、ネットショップでは暖色系の写真を使うように心がけましょう。

商品写真加工が90円から
当サイトでは商品写真加工サービスを行なっています。
Photoshopを持っていないショップ運営者の方、写真加工を外注したい方、是非ご連絡ください。

27Sep2011

[analytics] 複数サブドメインの分析方法

analyticsでは複数のサブドメインを一つのプロファイルでトラッキングすることができます。

僕のサイトPetitCottageでも

本家サイト www.petitcottage.com
スタッフブログ blog.petitcottage.com
特集ページ magazine.petitcottage.com

このように1つのサイト内に3つのサブドメインを使っています。

複数ドメインを解析する時の問題点

サブドメインで分ける項目はない

サブドメインで分ける項目はない

当然PetitCottageでも3つのドメインを一つのanalyticsアカウントで管理しています。

サブドメインごとに異なるanalyticsアカウントを作成するのは効率が悪いですし、ドメインをまたがったトラフィックを追跡する事ができなくなってしまいます。

ただし大きな一つのサイトとはいえ解析をする際には、サブドメインごとに「販売」「ブログ」など目的が異なりますので別々に解析をする時もあります。

しかしどれだれ探してもanalyticsのメニューに「サブドメイン」で分ける項目は見つかりません。

そんな時は「アドバンス セグメント」の機能を使います。

アドバンスセグメントを新規作成する

まずはgoogle analyticsにログインします。
画像ではadwordsになっていますが、analyticsはadwordsの管理画面からもアクセスできるので便利です。

ほぼ全ページの右上に「アドバンスセグメント すべての訪問」という表示がでますので、そこを押します。
(インテリジェンスなどの一部ページでは上の表示が出ないようです。)

アドバンスセグメントの画面が展開されますので 「アドバンスセグメントの新規作成」を押します。

アドバンスセグメントの新規作成方法

ホスト名でフィルタをかけてサブドメイン用セグメントを作る

左にあるディメンションというリストの中から「コンテンツ」「ホスト名」を探します。
ホスト名を右側の「ディメンションまたは指標」という破線ボックスまでドラッグします。

値という空欄ボックスに、指定したいサブドメインを入力します。

例:
blog.petitcottage.com
www.petitcottage.com
など

条件には、今回の場合は「完全一致」「含む」などを選ぶと正常に動作すると思います。
極めていけば相当マニアックな設定も可能ですので、新たに好みのセグメントを作成する場合には「以上」「以下」「先頭一致」「正規表現」などの条件を駆使してみてください。

わかりやすい名前をつけたら「作成」を押して保存します。

アドバンスセグメントの作成方法

作成したカスタムセグメントを表示する

各ページの右上にある「アドバンスセグメント」を押します。(最初の操作と場所です。)
たった今作成したセグメントが表示されていますので、選択する事ができます。

アドバンスセグメントの作成方法

ちなみに・・・

analyticsの参考書籍ならこちらがオススメです。

立ち読みをさせて頂いただけですが、今まで見たanalytics本の中では”マニュアルとして”秀逸でした。

データ分析の基本的な考え方や筆者の自慢半分のケーススタディなどがダラダラ書いてある小説の様な本もありますが、こちらの本は操作方法やデータの意味説明が大半のまさに”マニュアル”です。
全データを使いこなせていない中級者、「仕事は何でも実践で覚えたほうが早い」と考える初級者の方にオススメさせて頂きます。