PhotoshopのデザインをCSS3に落とし込む際、Photoshopのレイヤースタイルの数値を細かくチェックしてCSSを組んでいくのは手間でこんなもんだろうっていう感覚でやってしまうことも多いと思います。 ちょっと前に話題になっていたフリーのプラグインなので今更ですが、「CSS3Ps」を試してみて、注意点などをまとめてみました。 インストール CSS3Ps 上のリンクからCSS3Psのサイトに移動します。 まずは右上の「Free Download」を押して、プラグインファイルをダウンロードしましょう。 ダウンロードファイルは以下の2つに別れています。 Download for Adobe Photoshop CS5 and CS6 Download for Adobe Photoshop CS3 and CS4 Mac OS X Lionの場合はAdobeから提供されているパッチのイン

例えば、以下を見比べてみて欲しい。どちらの方がお買い得に見えるだろうか？ たったの３万円で１年間使い放題です。１日当たりたったの１００円以下で使い放題です。おそらく、ほとんどの方は後者の方がお得だと感じているだろう。このように、同じ商品でも伝え方を変えるだけでお客様に「お得感」を持ってもらうことができる。 このPAD効果は、継続性を持った商品であれば、会員権だけではなく様々な商品に適用することができる。例えば、以下のように、、、。 健康食品：１食当たり○○円サプリメント：１回当たり○○円マーケティングソフトウェア：１日当たり○○円コンサルティングサービス：１日当たり○○円英語教室：１回当たり○○円etc重要なのは、商品自体を安く見せることではなく、お客様が、「この価格で、これだけの効果が得られるなら安いものだ」と思って頂くということだ。つまり、商品を納得して買って頂く上で重要なのは、価格そ

基調講演に登壇したのは、SEM専業代理店アイレップなどを経て独立し、フリーランスのSEOコンサルタントとして活躍する辻正浩氏だ。現在は大規模サイトや中小ECサイトなど数十サイトをサポートし、ハウツーサイトとして急成長している「nanapi」のSEOを手がけていることでも知られている。 新規の仕事は引き受けていないので、きょうはSEO業界の現状を、完全にポジショントークなしでお話しします。どうか空気を読んだシェアをお願いします。 このように切り出した辻氏の講演を、本レポートでは全力でシェアしていきたい。 辻氏はまず、SEO会社には、大別して「ホワイトハットSEO」「ブラックハットSEO」の2種類があることを説明した。ご存じの方が多いだろうが、あらためて紹介すると次の通りだ。 ホワイトハットSEO 検索エンジンのガイドラインに従って、Webサイトを正しく評価させるSEO手法ブラックハットSEO

サイトを制作する上で、便利な素材PSD。photoshopで扱えるファイルで、細かなカスタマイズも可能で、扱いやすいファイル形式は制作者としてはありがたい形式ですが、今日紹介するのは、2012年に公開されたフリーPSDを集めたエントリー「Best Free UI PSDs of 2012」を紹介したいと思います。 Mini glyphs (12 px) ベーシックなアイコン素材から、ローディング用のプログレスバーなど、制作に利用できそうな様々な素材がまとめられています。今回はその中から特に気になったPSD素材を紹介したいと思います。 詳しくは以下 Circular Progress Bar 立体的で円形のプログレスバー。ローディングを印象的に見せたい時におすすめです。 Free Footer Detailing フッターに利用するTOPに戻るボタンをリアルなリボンで表現したPSD Pric

3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ

こんにちはこんにちは！！ 今日はちょっとだけ実用的なお話です！ はい！ タイトルの通り、『今すぐサイトの広告収入を２倍にする方法』。 なんだか、うさん臭いですね＞＜ でも、やり方はシンプルで簡単です。 やり方： スマートフォンでアクセスされた時に、 一番上 (ファーストビュー) に 300x250 のレクタングル広告を貼る。 これだけ。 ちなみにこんな感じになります。 (スクロールさせようとすると、絶対に広告に指が触れてしまう！) 最近は、この方法で広告を貼っているサイトが増えてきているので、見たことがある人も多いと思います。 うざいですよね。わかります。 けど、この方法で貼られた広告は、クリック率がハンパない。 しかも、(今のところは) 規約違反じゃない。 それどころか、アドセンス公式ブログで推奨すらしています。 (推奨している位置は記事下だけど) ブログの場合、通常の広告クリック率はだ

Fireworks Lover Advent Calendar 2012の9日目の記事です。 こんにちは。hamnalyの矢部と申します。静岡県在住、個人でWeb制作を行なっています。主にフロントエンドの実装（下請け、約60%）と、地元の企業や個人商店さんのサイト構築（直受け、約30%）が業務です。以上、「Fireworks Lover Advent Calendar 2012」向けの自己紹介でした。 Fireworksの「スライス」「書き出し」機能は非常に便利 いきなりぶっちゃけますが、あんまりFireworksが得意じゃないです。ですのでデザインをFireworksで行うことはまずありません。そんな私ですが、スライスと書き出しはFireworksで行なっています。PhotoshopやIllustratorにはないメリットがあると感じているからです。こんな感じです。 スライスを重ねること

WEBデザインに限らず、その作り込みや分かりやすさでデザインの精度を左右する要素アイコン。アイコンを作りこむにはかなりの時間を要しますが、今回紹介するのはそんなアイコン制作の手間を軽減してくれる、300個のアイコンをセットにしたフリーアイコンセット「Batch.」です。 全部で300以上のアイコンがセットになっており、スタンダードなものから少し変わったものまで、考えられるアイコンは粗方押さえられています。 詳しくは以下 POPなデザインから、シンプルなデザインと比較的合わせやすい少し角の丸い柔らかい雰囲気のアイコンとなっています。ダウンロードは無料で行え、PSD, SVGs (128×128) and PNGs (16×16, 32×32, 64×64)とそれぞれのデータ形式で配布されています。制作者サイドとしては嬉しい限りですね。 ライセンスは商用利用可のと明記されており、詳しいライセン

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="fruit" value="apple" checked><span class="label">Apple</span></label> <label><input type="radio" name="fruit" value="grape"><span class="label">Grape</span></label> <label><input type="radio" name="fruit"

来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ

ドットインストール代表のライフハックブログ