おしゃれなローディング画像をサクッと実装するjQueryプラグイン「fakeLoader.js」

ページの読み込みが遅いとき、真っ白な画面が表示されているのと、ローディング画面が表示されているのとではユーザーの印象は変わります。訪問者を逃さないためにも、読み込みに時間がかかるページにはローディング画面を出し、数秒の間待ってもらえるような ...

リッチなアニメーションが楽しい！背景画像を画面いっぱいに表示するスクリプト「Vegas2」

画面いっぱいに画像や動画を表示させ、アニメーションで切り替えるスクリプト「Vegas2」をご紹介します。多数のオプションが用意されており、簡単に ...

>シンプルにデザインされたアイコンもいいですが、細部にまでこだわったデザイン性の高いアイコンも、アクセントにはピッタリ。
今回は、個性的なデザインで惹き付けられる無料のアイコンをご紹介します。

Googleがウェブマスター向け公式ブログで、サイトがモバイルフレンドリー（スマホ対応している）かどうかをランキング要素の一つとして利用し始めることを発表しました。これによって検索結果に大きな影響がもたらされることは確実です。今のうちに、自 ...

メンテナンスをしたいとき、リニューアルをしたい時など、一時的にサイトを「メンテナンス中」にできるプラグイン「WP Maintenance Mode」をご紹介します。公開までのカウントダウンや、メンテナンス終了のお知らせ通知なども設定すること ...

お問い合わせフォームなどをつくる時に気をつけたいのがスマートフォンでの入力。PCと同じフォームではユーザービリティが低く、せっかくフォームを表示させるところまで行っても、入力が面倒で離脱してしまうこともあります。そこで今回は、フォームを作る ...

Photoshop効果を使ってマスキングテープを貼って作ったような文字の作り方をご紹介します。手でちぎった跡やテープの独特な質感などのリアルな表現が簡単に再現できます。

フォームによくある、郵便番号を入力するだけで、住所が自動補完されるシステムをカンタンに実装できる国産のjQueryプラグイン「jQuery.jpostal.js」をご紹介します

HTML5とCSS3を駆使して設計されたサイトが増えてきました。ユーザーの端末に柔軟に対応し、素早いレスポンスと美しいデザインから、最高のユーザーエクスペリエンスを提供しています。今回は2015年のWebトレンドを感じさせてくれるサイトをご ...

窓ガラスに付いた水滴で文字を書いたような効果を作るチュートリアルがPhotoshopRoadmapで紹介されていました。ビデオチュートリアルですが、とても分かりやすくておすすめです。

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

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

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

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

立体感を出すには斜め上からの「斜俯瞰」で撮影するのが一番良いのですが、盛りつけの美しさを見せたいときなどは、真上からの「真俯瞰」が効果的です。彩りや料理のデザインがよく分かり、美味しそう、というよりも「かわいい」「おしゃれ」というような印象 ...

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

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

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

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

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

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

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

インターネット上には、Photoshopで写真にエフェクトをかけるためのアクションが無料で多数配布されています。
前回ご説明したように、このアクションを使えば、ボタン一つで写真にハイクオリティなエフェクトをかけることができます。

アクション機能とは、Photoshopの一連の作業を記憶して、後から同じ効果をボタン一つで他の写真にも施すことができる機能です。今回は、アクション機能の基本的な使い方。自分でアクションを作る手順について説明します。

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

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

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

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

INS ...

Googleカレンダー活用方法｜タスク管理③タスク管理

GoogleカレンダーやGmailには、ToDoリストというものがあり、タスクの管理をすることができます。どちらのアプリからアクセスしても、リストは同じものです。ここでは、Goog ...

Googleカレンダーの活用方法をまとめました。その２②スケジュールの共有

Googleカレンダーは、スケジュール単位やカレンダー単位で他のユーザーと共有することができます。プロジェクトや部署ごとに共有し、メール通知などを利用すれば意思 ...

Googleカレンダーの活用方法をまとめました①基本的な使い方

Googleカレンダーは、スケジュール管理用のアプリです。個人だけでなく、複数のユーザーでスケジュールを共有できるので、企業でも使っているところは多いのではないでしょうか。 ...

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

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

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

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