CSSについて, WEBデザイン

【CSS】 すぐに使える!デザイン・アニメーションともに洗練されたツールチップ9種

デザイン性にも優れ、きれいにアニメーションするツールチップがCODROPSで公開されていたので、ご紹介します。
まずはデモ

jQueryについて, WEBデザイン

【Javascript】alert(アラート)をスタイリッシュにデザインするスクリプト「Sweet Alert」

Webサイトで警告メッセージを出すとき、Javascriptのalert(アラート)を使用しますが、ブラウザ独自のものをそ ...

CSSについて, jQueryについて, WEBデザイン

【jQuery】かっこよくて実用的!レスポンシブ対応のLightbox風ギャラリー

画像をかっこよくギャラリー化してくれるjQueryプラグイン「Strip」。レスポンシブで、しかも、IE7以上の主要なブラウザに対応。動画にも対応してい ...

便利なサイトの紹介

無料で使えるクラウド型の文書作成ツール5選

オンライン上で文書の作成や管理ができる無料のツールがたくさんあります。オンラインなのでネット環境さえあればどこでも閲覧・編集が可能。また、スマホ用アプリとしても公開されているので、手軽に文書管 ...

CSSについて, jQueryについて, WEBデザイン

【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法

表やリストに順番に連番を振りたいとき、Javascriptでも実装することができますが、もっと手軽な方法があります。
CSSの「counter-reset」と「co ...

CSSについて, jQueryについて, WEBデザイン

【CSS】@font-faceでのWebフォント指定方法と気をつけるべきこと

以前、「今さら聞けない「Google Web fonts」の使い方」という記事で、Webフォントについてご紹介しました。この時はGoogleが提供するサービス ...

Googleサービス

Googleアプリを活用しよう!Googleマイビジネス編マイビジネスで集客する方法

地域密着型のサービスを展開する店舗や企業が顧客やファンとつながる方法の一つにFacebookがありますが、最近よく目にするのが、Google検索をした ...

Googleサービス

Google+がSEOに使えるって本当?!Google検索に与える影響

Google+のSEOへの活用については、以前からあちこちのサイトで話題になっています。ですが、本当のところ、Google+はSEOにどれほどの影響力を持っているの ...

Googleサービス

Googleアプリを活用しよう!Google+編②Google+の使い方と集客

「Googleアプリを活用しよう!Google編①」では、Google+への登録と最初の設定方法についてご紹介しました。今回は、基本の使い方をご紹介します。 ...

Googleサービス

Googleアプリを活用しよう!Google+編①
Google+への登録と最初の設定方法

Google+は、Googleが提供するSNSサービスです。友達とつながったり、サークルを作ってその中だけで会話を楽しんだりすることはも ...

jQueryについて, WEBデザイン

【javascript】レスポンシブなタブメニューをサクッと実装できる「Responsive Full Width Tabs」

PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。
特にタブメニューとなると、スマホサ ...

Photoshopのテクニック

【Photoshop】顔写真をレタッチ!まつげをボリュームアップ&目の色を変える方法

女性の顔写真のレタッチで、覚えておくと便利な「まつげのボリュームアップ」。一本一本書き足していくことになるので、少々手間はかかりますが、手順はとても簡 ...

CSSについて, WEBデザイン

No Image

ページのロード中に表示されるローディング画像。ユーザーにストレスを感じさせないよう、ローディング状況をアニメーションや数値で表示させるもので、読み込み時間がかかりそうなページには必須の仕掛けです。今回ご紹介するのは、CSSオンリーで実装でき ...

WEBデザイン, 便利なサイトの紹介

すぐに使えるダミーテキスト&ダミー画像ジェネレーター

Webサイトやチラシ・ポスター等の制作中に必要となるダミー画像。サイズや背景色など、制作物に合わせたものを使いたい時に便利なのが、画像作成ジェネレーターです。
Photosh ...

デザインのテクニック, 便利なサイトの紹介

全部無料!バナーやチラシに使いやすいシルエット素材11選

Webのみならず、チラシやポスターなど、あらゆるデザインでシルエット素材を使いたい場面は多いと思います。そこで今回は、多種の高品質なシルエット素材を11セットご紹介します。

Googleアナリティクス, Googleサービス

Google アナリティクスでメルマガ経由のアクセスを解析する方法

発行したメルマガがどれくらいクリックされているか、メルマガ経由でどれくらい商品が購入されたかを知ることは、メルマガマーケティングの改善に非常に役立ちます。
メル ...

アクセスアップ

開封率を上げ、サイトへ誘導させるメルマガライティング、4つの効果的な方法

Webマーケティングに非常に有効なツールであるメルマガ。多くの企業が活用していると思いますが、配信はしているけれど、十分に効果を発揮できていないメルマガもあるので ...

CSSについて, WEBデザイン

【CSS3】CSSだけで実現!背景画像を固定&スクロールで切り替えるパララックス風効果

背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...

CSSについて, WEBデザイン

【CSS3】CSSだけで実現!背景画像を固定&スクロールで切り替えるパララックス風効果

背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...

Photoshopのテクニック

【Photoshop】水滴ブラシを使ってビールグラス写真にシズル感を演出するテクニック

食べ物や飲み物などの写真をおいしそうに見せることを、焼き肉などが焼けるジュージュー音を表す英語「sizzle」をそのまま取って、「シズル感」などと言 ...

WEBデザイン, 便利なサイトの紹介

SVGを便利なアイコンフォントに!フォントジェネレーター「IcoMoon」

「CSSで簡単にアイコン作成!CDNのWebフォント「Font Aesome」」では、CDNのWebフォントを利用して、CSSでアイコンを作成する方法をご紹介し ...

WEBデザイン, 便利なサイトの紹介

CSSで簡単にアイコン作成!CDNのWebフォント「Font Aesome」

デザイナーさんにとって、アイコンの一つひとつも作品であり、こだわりたい部分・・・ではあるものの、作る時間がないから今回はフリー素材で・・・ということもあるかと ...

Photoshopのテクニック

【Photoshop】レイヤースタイルだけで作るガラスのような透明テキスト

透明感のあるガラスのようなテキストを、レイヤースタイルのみで簡単に作るチュートリアルが「Photoshop Lady()」で公開されていましたので、ご紹介します ...

WEBデザイン参考, 便利なサイトの紹介

GPL?MIT?CC?最低限覚えておくべきWEB素材ライセンスの意味

インターネット上には、無料で使えるWeb用素材やソフトウェア、スクリプト等が出回っていますが、これらを使うにあたって注意しなければいけないのが「ライセンス」です。無料 ...

Googleアナリティクス, SEO対策・アクセスアップ, WEBデザイン

Google AnalyticsソーシャルレポートでSNSのコンバージョン効果を測定する

SNS上で、いいね!やリツイートの増減を把握したり、アクセス解析でアクセス数やコンバージョン率を計測するということは、おそらくどの企業でも行ってい ...

WEBデザイン, 便利なサイトの紹介

PSDで編集可能!無料で使える高品質アイコン素材10選

数あるアイコン素材の中でも、無料で、しかもPSD付きで完全編集可能のセットをご紹介します。サイトのデザインに合わせて色やサイズを変えられるので、デザイン業務の効率化に便利です。

WEBデザイン, 便利なサイトの紹介

サイトで使用されているフォントが分かる!試せる!「FontFaceNinja」が便利

このサイトのフォントが素敵だな、と思ったとき、フォント名を知りたいことはありませんか?今回は、ページ上のテキストにマウスオーバーするだけで、フォント名 ...

jQueryについて, WEBデザイン

【Javascript】3Dアニメーションで切り替わるレスポンシブのコンテンツスライダー

奥行きのある3D効果で画像を配置し、アニメーションをしながら切り替わる「Tilted Content Slideshow」。Janvascript ...

WEBデザイン, 便利なサイトの紹介

カスタマイズ自由!無料のWebサイトテンプレート

Webデザインの時間短縮とデザイン力アップを助けてくれるWebテンプレートPSD。デザインの効率化、というだけでなく、テンプレートPSDはきちんとガイドが引かれていて、パーツごとにフォル ...

写真撮影・カメラ

カメラ初心者必見!人物写真を今までよりもずっと美しく、おしゃれに撮るコツ

人物写真を撮影する際、少し雰囲気の良い写真を撮りたいと思っていても、いつも平凡で、記念写真のようになってしまう、ということはありませんか?
光や構図を少し ...