2つの画像をビフォー・アフターで比較したり、2つの画像の違いを見比べて欲しいときに、どんなふうに画像を配置しますか？ 上下に2枚置いたり、あるいは左右に並べて配置させて比べてみたり、様々な方法があります。 その中で、近年様々な媒体で使われている*「画像比較スライダー」*と呼ばれる手段があります。 画像比較スライダーとは、1枚の画像の枠に2枚の画像を重ねて配置し、境界線をスライドさせることで2枚の画像を切り替えることができるウィジェットです。 実装するためのプラグインはすでに多数リリースされており、少しのコードで簡単に実装することができます。 今回は、画像比較ができるjQueryスライダープラグイン9つをご紹介します。 ユーザーのマウス操作やスマートフォンの指の操作で作動するユニークなユーザーインターフェイスなので、ホームページやブログ記事で使うと面白みが増すかもしれません。 画像比較ができ

インターネット広告、検索結果の受け口となるいわゆる縦長のランディングページ（以下、LP）は非常に重要なWebページです。ユーザーが求める情報にあわせた構成にすることによって、広告効果アップに大きく貢献します。 一方で、実際に作る際、どのような構成にすればいいのか分からない、という方も多いのではないでしょうか。そこで今回は、LPの構成を学べる記事をまとめてご紹介します。 LPの制作機会がある方、これから作ってみたいとお考えの方はぜひ参考にしてみてはいかがでしょうか。 LPの構成が学べる記事10選 1.要注意！ランディングページ（LP）の“もったいない”をなくす構成要素のポイント http://webbu.jp/landing_page_structure-131 広告効果を高める目的で制作するLPですが、適切な構成でない場合、ユーザーが離脱するミスマッチが起こる可能性があります。せっかくの来

自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。

プロダクトデザインを行う上でよく使うモックアップは、Web制作やその他デザインの場面、ビジネスの様々なシーンで活用することができます。 例えば、Web制作の場面では、ホームページのデザインにそのまま使うことが可能です。ビジネスの現場では、プレゼン資料で完成予定のデザインを見せたい時に使えます。 様々なタイプの素材があり、しかも無料で手に入るものが豊富にありますので、活用しない手はありません。 今回は、そんな便利なPSD素材の中から無料のものだけをピックアップしてご紹介します。 ビジネスに、デザインに、ぜひ活用してみてください。 ビジネスからデザインまで、幅広いシーンで重宝する無料PSD素材まとめ 1. 3 Elegant Macbook Pro MockUps http://graphicburger.com/3-elegant-macbook-pro-mockups/ 異なる3シーンを収

デザイン業界は常に新しいトレンド・技術が続々登場し、目まぐるしいスピードで変化しています。きっと「常に情報収集を行っている」というデザイナーの方も少なくないはずです。 今回は、ぜひそうした方々に有益な情報をご紹介します。情報収集というと、インターネットや本などを通じてというのをイメージされる方が多いかと思いますが、スライドシェア（Slideshare）もオススメの手段です。 「スライドシェアが何か」というと、プレゼン資料をインターネット上で公開・共有するサービスを指します。良質なスライドが数多く揃っていますので、知識を深めたい方にはもってこいです。今回は公開中のスライドシェアの中でも、特にデザインが学べるスライドを中心にまとめてみました。ぜひ参考にしてください。 デザインの学習にもってこい！デザイナー向けスライドシェア 1. 優れたデザインの 定義と思考方法 https://www.sli

Webサイトを運営している方であれば、さまざまなメディア・ブログなどからの情報収集を欠かかすことはできません。 ferretも同様であり、常日頃から大手メディアから個人ブログに至るまで幅広く情報収集を行っています。 今回は、ferretがRSSに登録して毎日チェックしている選りすぐりのメディア・ブログ44選をご紹介しますので、ぜひ情報収集にお役立てください。 このニュースを読んだあなたにオススメ プライバシーポリシーを記載しよう 情報収集には欠かせない！便利なFeedlyのイロハを解説 効率的に情報収集できるGoogleアラートの使い方 Google／Yahoo! 1.Google Japan Blog http://googlejapan.blogspot.jp/ Google Japanが発信している、主にGoogleに関する情報が日本語で書かれているブログです。 Googleの公式サ

ロゴやビジュアルのデザインをしているとき、なんとなく上手くできないと感じた経験はないでしょうか。 デザインが失敗する原因の一つとして、レイアウトが問題となっていることが多くあります。 その場合は、レイアウトに規則をつくるだけでしっかりとしたデザインになることも多いので、デザインをおこなう機会がある方は覚えておくと便利です。 今回は、レイアウトを行う際に使う手法である「グリッド」の活用に関する情報をまとめてご紹介します。参考実例として実際にグリッドを使ったロゴデザインもピックアップしています。 自分のデザインがいまいちだと感じている方、デザインを始めたばかりの方は特に必見です。 デザインのクオリティを高める！グリッドの活用まとめ 1.グリッドとは 引用：http://welovetypography.com/post/11817 グリッド・システムとは、スイス出身のデザイナー ヨゼフ・ミュー

Photoshopは写真の補正をしたり、グラフィックを作ったりとあらゆる作業に活用できる非常に万能なソフトです。PhotoshopはWebデザインにおいても欠かせないツールですが、意外にも使ったことがないという方、試してみたけれど使い方が分からない方も多くいらっしゃいます。 今回は、WebデザインでPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介します。作業の手順から効率化までしっかりと理解することができますので、参考にしてみてください。 PhotoshopでのWebデザイン作業で読んでおきたい記事まとめ 1.PhotoshopでWebサイトのデザインをしよう｜Webクリエイターボックス http://www.webcreatorbox.com/tech/photoshop-web-design/ Web関連の情報を幅広く届けている「Webクリエイター

ferret編集部：この記事は2015年11月2日の記事を再編集しています。 ここ数年で定着してきた「レスポンシブデザイン」。 Webデザインに関わる人であれば、この言葉を耳にしたことがあるのではないでしょうか。 iPadなどのタブレットや、スマートフォンの表示に最適化されたページと理解されている方も多いかもしれません。 では従来のモバイル対応ページとはなにが異なるのでしょうか？ スマートフォンが一般に普及し、タブレットも次々に上位機種が発売される今、ますます需要が高まってくると見られるレスポンシブデザインについてまとめました。 レスポンシブデザインの定義 レスポンシブは日本語だと「反応が良いさま」と訳され、レスポンシブデザインは「単一のURL（HTMLファイル）であらゆるデバイスに最適化されるデザイン」を指します。 従来は、パソコン、スマホ、タブレットなど、表示サイズの異なるデバイス毎に

季節、トレンドに合わせてホームページの背景、パーツを変えている企業も多くありますが、全ての素材を一から作成するのは結構な手間がかかります。 そこで重宝するのが、指定した範囲に好みのデザインを適用することができるパターン素材です。 パターン素材を使えば一瞬にしてデザインを変更することが出来ますので、見た目の変化をつけてくれるだけでなく大幅な時間短縮にも繋がります。 今回は、無料で使うことが出来るパターン素材を60個ご紹介します。 どの素材も非常にクオリティが高いので、ぜひデザイン制作時に取り入れてみてください。 高品質な無料パターン素材まとめ 1.Patterns .23 http://jonatica-andi.deviantart.com/art/Patterns-23-93684999 優しい色使いと繊細な模様が素敵なパターン素材のセットです。 2.21 FREE VECTOR GEO

Webサイト上で重要な要素の一つにフォントが挙げられます。 最近では、多くのホームページでWebフォントを採用することが増えており、これまでできなかった表現が可能となっています。 今回は、Webフォントの概要と、Webフォントの使用手順を解説します。 併せて、オススメのWebフォントサイトも紹介していますので、ぜひ参考にしてみてください。 Webフォントとは これまでのフォント指定は、CSSで「font-family」というコードでフォントを指定して文字を表示させていました。 ただし、ユーザー側の閲覧環境にフォントがインストールされていなければ、表示できないというデメリットがあったため、使用できないフォントも多数ありました。 それらの問題を解決するのがWebフォントで、あらかじめサーバに格納してあるフォントの情報を提供することで、閲覧しているユーザー側のOS環境に左右されず、正しく表示する

作成した記事にユーザーを集めるためには、記事作成前のキーワード選びが重要です。 記事の作成を始める前に、そのキーワードには需要があるのか、競合を踏まえて上位表示が可能かといった要素を確認しておく必要があります。 今回は、想定したキーワードでユーザーを集客するための確認方法として、記事の作成前に使うべきツールをご紹介します。 キーワード探し 1. GoogleAdoworsキーワードプランナー https://adwords.google.co.jp/KeywordPlanner Google上で、対象のキーワードがどれくらい需要があるかを調べられるツールです。 また、キーワードの拡張機能もありますので想定していなかったキーワードの発掘にも活用できます。 2. Yahoo!キーワードアドバイスツール https://promotionalads.business.yahoo.co.jp/Ad

企業のロゴをデザインする際に重要となる要素の一つが「フォント」です。 どのフォントを使うかによってイメージが大きく異なりますので、目的としている企業のコンセプト、イメージしているものに近いものを選ぶ必要があります。 そんなロゴデザインでぜひとも参考にしたいのが有名企業、ブランドが採用しているフォントです。 誰もが知る大手企業でも意外に定番のフォントを使っていたり、既存のフォントをベースにユニークなアレンジを加えている企業があったりと、デザインのヒントが隠れています。 今回は、有名企業・ブランドが採用しているロゴフォントをまとめてご紹介します。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを

2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h

自社ホームページの新規ページやランディングページを制作する時、少しでもサービスの雰囲気が出るような画像を選択すると思いますが、画像と同じくらい雰囲気を左右するのがフォントです。 例えば、一番最初に視線に入るキャッチコピーであれば、フォントの印象がそのままコピーの内容にも影響を与えます。 こちらのLINEの公式ディレクターブログでは、フォントを買えることで広告効果に差が出た事例が紹介されています。 100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本 : LINE Corporation ディレクターブログ どのような内容でもすぐに対応できるよう、フォント素材のストックは多いに越したことはありません。 今回は、ジャンル別に高品質なフリーフォント素材をご紹介します。 デザイナーの方もディレクターの方もぜひチェックしてみてください。 1.和風な日本語のフリーフォント40選 h

イラストレーターパターンのフリー素材は、こどもの日や母の日など、イベントが近付くにつれて、それにちなんだデザインが多く登場し始めています。きっと多くの方が「やはりこういう時期はデザインも通常とは異なる仕様にしてアクセントを付けたい！」と思うのではないでしょうか。 素材を配布しているサービスでも、春から夏にかけて使える爽やかな雰囲気の素材も数多く登場します。イベント、季節に合わせたデザインをサクッと作りたいなら、パターン素材を活用しましょう。 今回は、クオリティが高く、かつ無料のパターン素材を116個まとめてご紹介します。 春から夏まで使えるフリーパターン素材5月編 1. Nature pattern design http://www.freepik.com/free-vector/nature-pattern-design_1081435.htm 鮮やかな水色のヤシの葉にビビッドなハイビ

ferret編集部：2015年5月26日に公開された記事を再編集しています。 ビジネスパーソンであれば、ビジネス本を読んで勉強したほうがいい、と思ったことが一度はあるのではないでしょうか。 特に、企業経営を考えている方であれば尚更のことです。 しかしビジネス本を読んだ方がいいことは知っていても、膨大に存在する本の中から自分に必要な本を選択するのはとても難しいものです。 一体どれを読んだらいいのか悩んだり、読んでは見たけれど難解で理解出来なかったという方も多くいらっしゃいます。 今回は、これから企業経営をお考えの方にオススメの必読本19冊をご紹介します。どれも多くの企業経営者が愛読する名著ばかりですので、ぜひ参考にしてみてください。 有名企業の経営者も愛読する必読本19冊 1.人を動かす/デール・カーネギー著 人を動かす デール・カーネギーの代表作で、人とどうやって関わっていくかといった人間

パターンとは！？ パターンとは、下記の例のような、継ぎ目なく規則的に繰り返される模様のことをいいます。 今やデザイナーでなくともフォトショップなどのデザインソフトを使う時代です。 基本的なパターンの作り方を押さえていきましょう。 パターンの使い方 パターンを使うには、 ①最小単位のパターンを作る ②「パターンを定義」でパターンとして使える状態にする ③シェイプや、塗りつぶしでパターンを適用する という3つのステップが必要です。 パターンを作ってみよう！ パターンの表示の仕組み 今回例として、下記のようなドットのパターンを作ってみようと思います。 この場合のパターンの表示の仕組みですが、下記のように、繰り返しに必要な最小単位のパターンが、たくさん敷き詰められて表示されます。 なので、後の「パターンを定義」で定義するパターンとして、まず最初にこの最小単位のパターンを作ります。 最小単位のパター

フリーフォントのまとめは多いですが、日本語フォントで印刷物までOKといったものに厳選したものはあまり見かけません。 その中でも漢字までしっかり網羅しているものを、編集部でまとめてみました。 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 フォントのライセンス 様々なまとめサイトやブログで、「フリー！無料利用可能！」と書かれることも多いのですが、フォントはとくにライセンスに気を付けましょう。 「商用利用無料」と書かれているものでも、Webの画像として書影を使ってはダメとか、**アプリに入れてはいけない（再配布の禁止）**などあります。フォントのライセン

リスティング広告を行うのであれば、LP（ランディングページ）をつくることをおすすめします。通常のホームページをリンクさせるのではなく、リスティング広告専用のLPを作成しますと、コンバージョン率を高めることができます。 本記事では、LP作成により、成果が改善した事例をご紹介します。 事例：通常のホームページとコンバージョン率を比較 事例サイト概要 事例LP：留学デビュー どのようなホームページか：若年層の女性をターゲットにした海外留学比較サイト 改善結果 【改善後】 CVRが既存サイトと比べ139%向上 【ホームページの目的】 ・留学に関するコンテンツへの誘導、または資料請求。 【ポイント】 ・ファーストビューで全てが伝わるような構成に。 ・ターゲットを若年層の女性に限定。 ・留学経験のある女性に体験談をヒアリングし、リアリティのあるコンテンツを追求。 STEP1 課題～内容が多すぎることも