CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。横からのスライド、バウンド、フェードと多彩 ...

レスポンシブ、フリック対応のコンテンツスライドショー「Flickity」を使い方・設定方法ご紹介します。jQueryに依存せず、単体で動き、スマホでの動作もスムーズ。実装したい機能はほぼオプションで対応してくれているので、カスタマイズも非常 ...

Webサイトで商品の魅力を伝えるためのライティング。費用を抑えるためにWeb担当者がライティングも行うことが多く、どう書けばいいのか分からない、どうすれば魅力を伝えられるのだろうか、と悩みながら書き進めることもあると思います。そんな時は、テ ...

バナーに必要なのは、整ったデザインではなく、目を惹き付ける、興味を湧かせるということ。ついついクリックしたくなるような効果を、画像や文字、色などで創り出すことです。どのようなデザインが目を惹き付けるのでしょうか。いくつかのバナーを例に、ポイ ...

今やどんなサイトにも設置されているSNSアイコン。おしゃれな無料アイコンもたくさん配布されていますね。でも、アイコンだけならスマートに収まるのですが、「tweetボタン」や「いいね！ボタン」など、シェアボタンまで並べだすと見た目にごちゃごち ...

Googleの検索結果で表示されるタイトルには、基本的に＜ＴＩＴＬＥ＞タグに記述されているものがそのまま表示されます。ですが、時にGoogleによって自動的に書き換えられてしまうケースがあります。そこで、書き換えられてしまったときにチェック ...

ContactForm7は、フォーム送信後にサンクスページに移動することはなく、最下部に「あなたのメッセージを送信しました」というメッセージが表示されるだけです。そこで、別の方法でこのメッセージをもっと目立つように工夫してみたいと思います

WordPressのプラグイン「ContactForm7」では、名前や電話番号だけでなく、日付け・テキストエリア・ドロップダウン・チェックボックスなど様々な項目を処理することができます。今回は、この項目の設定についてご紹介します。

WordPressでお問い合わせフォームを作るならこれ、というくらい人気のプラグイン「Contact Form 7」。使い方がシンプルで簡単、安定した動作、日本語の管理画面が使いやすく、おすすめのプラグインです。今回はContact For ...

Webデザイナーの腕試しに！カーニングや色彩感覚をチェックする５つのゲーム

色彩感覚やセンス、余白の取り方など、Webデザイナーには様々なスキルや感覚が求められます。今回は、そんなスキルを気軽にチェックできるゲームをご紹介します。

CodePenに学ぶ！サイトに使える最新テクニック

HTMLやCSS、JavaScriptを共有するコミュニティサイト「CodePen」。クリエイター達が毎日、数々の優れたソースを公開してくれています。その中から、すぐにサイトに活用でき ...

CSSだけで簡単実装！入力フォームの新しいエフェクト

Codropsで、入力フォームにフォーカスした時の、面白いエフェクトが紹介されていました。CSSトランジションやアニメーションを使い、様々なエフェクトを実現しています。

INS ...

【WordPress】初心者にも使いやすい！日本語対応の商用無料テーマ７選

過去にも紹介しましたが、無料のWordPressテーマでもとても魅力的なデザインのものがたくさんあります。ですが、ダッシュボード上のテーマ設定画面や利用規約がが ...

jQuery不要！レスポンシブのグリッドレイアウトを作ってくれるスクリプト「Masonry」

複数のボックスをタイル状に並べるグリッドレイアウト。これを、簡単に実装できるスクリプト「Masonry」をご紹介します。
サイズの異な ...

ユーザーを惹き付けるストーリーテリング型のウェブデザイン

2015年に流行すると注目されているWebデザインの中に、「ストーリーテリング型」というものがあります。縦長の１ページの中で、スクロールで進むごとに様々なエフェクトを交えてストー ...

CSS3でサクッと実装！かっこいいナビメニュー「Fixed Nav Hover Effect」

CodePenにCSSのみで実装できる、ホバーエフェクトがかっこいいナビメニューが紹介されていました。マウスを置くと左からカーテンを引くよう ...

本文と見出しのフォントサイズに迷ったらこれ。最も美しい比率を提案してくれるツール「Type Font」

Type Font

本文や見出しのフォントサイズをCSSで調整した際、比率をどのくらいにするか悩むことがありま

コーディングに便利！使用中のCSSプロパティを簡単にチェックできるchromeの拡張機能「CSS Dig」

Webサイト内で使用しているCSSを解析してくれるChormeの拡張機能「CSS Dig」。コーディングがうまく行かない時のCS ...

デザイナー必見！参考にしたいデザイン満載の記事7選

Webデザインに限らず、デザイナーなら他の人の優れたデザインには興味がありますし、そこから大いに刺激を受けていることと思います。
そこで今回は、様々な媒体で表現された優れたデザ ...

【css3】レスポンシブレイアウトに使いこなしたい！CSS3の単位指定「vw」「vh」「vmin」「vmax」

これまで、CSSでのサイズ指定にはpxや%を用いることが多かったのですが、CSS3では新しい単位の指定が可能になりました。そ ...

【jQuery】ブランドサイトにも最適！ゴムのように弾むコンテンツスライダーで魅せる「WOBBLY SLIDESHOW EFFECT

限られたスペースの中で、効果的にコンテンツを見せていくスライダーは訴求力が高く、ブランドサイトなどにも ...

スマートフォン用サイト構築時にやっておくべき、モバイルSEO対策のポイント

サイトをスマートフォン用に最適化するとき、いくつかの方法があります。

①レスポンシブ・ウェブデザインで対応する
②同じURLで、ユーザーエー ...

Googleアプリを活用しよう！Googleインドアビュー編

飲食店や雑貨店、サロンなど、そのお店の雰囲気が集客を左右するような店舗を持つ人にとって、内観をアピールすることはとても有益です。
そこでおすすめなのが、Googleイ ...

定番からトレンドまで！無料で使えるパターン素材が満載のサイト８選

背景やボタン、バナーなどに何かと入れたいパターン素材。今回は、シンプルで使いやすいものから、個性的なもの、流行を取り入れた新しいデザインまで、無料で使えるパターンをご紹介 ...

眺めるだけで参考になる！デザインに煮詰まった時のお役立ちサイト8選

WEBデザイン業務で煮詰まった時に大切なのは、他人のつくったデザインに触れること。新しい視点を与えてくれ、思いもよらないアイデアが浮かぶこともあります。
今回は ...

絶対入れるべき！高機能すぎるWordPressプラグイン「Slim Jetpack」

WordPressでのサイト制作では、ギャラリーやお問い合わせフォーム、ウィジェットを作成するために、プラグインをインストールするか、自作のPHPやJ ...

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

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

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

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

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

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

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

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