ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
[JS]テキストを次々にモーフィングのアニメーションで表示するスクリプト -Morphext
複数のテキストを次々にモーフィングのアニメーションで表示するjQueryのプラグインを紹介します。 スクリプトとは関係ないですが、ページのアニメーションもかっこいい！ デモ Morphextの使い方 Step 1: 外部ファイル animate.cssと当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上あたりに記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> <link rel="stylesheet" href="morphext.css"> </head> <body> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
Photoshopでの作業がはかどる便利なプラグイン・機能拡張のまとめ
Illustratorでウェブデザインをおこなう人が増えてきましたが、やはりPhotoshopをベースにしているデザイナーさんが多いと思います。そんなPhotoshopを更に便利にパワーアップするプラグイン・機能拡張を紹介します。 ここで紹介するものは、当方の日本語環境（Win/Mac, CS6/CC）で利用しています。 面倒なガイド引きをパワーアップする強力な味方 等間隔ではないガイド引きを簡単に設定できる 選択範囲やオブジェクトを元にガイドが引ける さまざまなオブジェクトのカラーを一元管理できる 要素のサイズやエフェクトやフォントなどの情報を書き出す PNG画像をより美しく、より軽量に書き出す 黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線などを簡単に描く Subtle Patternsのテクスチャ素材をPhotoshopから利用できる flat iconのアイコン素材をPhoto
ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか！
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
クライアントに伝わりやすいように工夫されたワイヤーフレーム用のUI素材 -CRowe
クライアントにワイヤーフレームを見せる時に僕が一番気にかけていたことは、まずこれは最終的なデザインではないこと、そして内容がうまく伝わることです。 まぁ、デザインじゃないのはそのままなのですぐに理解してもらえますが、内容やアイデアをしっかり伝えきるのは難しいですよね。 Wireframe & UI Kit 自分だけやウェブ制作者間でのやり取りであれば、ワイヤーフレームはシンプルなボックスベースのものでも問題ないかもしれませんが、クライアントにはある程度ビジュアルを備えたものでアプローチするというのがこの素材のコンセプトです。 正確に理解してもらえることで、結果的にプロジェクトの進行にも役立つでしょう。 素材のコンセプト ワイヤーフレームの素材はさまざまなUIエレメントが揃っており、フォーマットは.epsでダウンロードできます。 利用にあたっては個人でも商用でも無料とのことです、詳しくはダウ
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
背景や文字・グラフィックに重ねて上質な質感を与える紙や木の無料のテクスチャ素材
そのまま背景に使ってもよし、文字やグラフィックに重ねてもいい感じに仕上がる、センスのよい上質な質感を与える紙や木のテクスチャ素材を紹介します。 まずは、紙のテクスチャ素材から。
サーバーの設定をカスタマイズ、よく利用する「.htaccess」の設定のまとめ
.htaccess For All 下記は各ポイントを意訳したものです。 「.htaccess」ファイルを編集する際は、必ずバックアップをとることをお勧めします。 .htaccessファイルの作成とアップロード .htaccessの使い方・有効範囲 .htaccessのよく使う設定のまとめ .htaccessファイルの作成とアップロード 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリケーションを開き、ワードラップ機能をオフにしてコードを記述し、ファイルを保存します。 Windowsのメモ帳などを使用すると保存する際、ファイル名に「.txt」が加わってしまいます。 .htaccess.txt これは特に問題ありません。 ファイルをアップロードした後、サーバー上でリネームしてください。 .htaccess ファイルをアップロードする際は、ASCIIモード
時間をかけて見てほしい！デザインや仕掛けが素晴らしいウェブサイトのまとめ
今回はデザインの細部までこだわりを感じる、操作性が面白い、そんなアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 コンテンツファースト、Off Canvas、1ページ垂直スクロールがキーワードです。 また各サイト、ナビゲーションが非常に変わっていますが、初めてでも迷うことなく操作できると思います。ゆっくり時間かけて楽しんでください！ Amanda Gerhardsen ノルウェーの写真家さんのポートフォリオ、ダイナミックな四方向のナビゲーション、各UIエレメントの繊細な動きが楽しめます。左上の「Remix」で落書きもできるとても楽しいサイトです。 iArk ノルウェーのインテリアデザインのコーポレートサイト、サイト全体のトーン&マナーが非常にかっこよく、レイアウトやタイポグラフィ、写真全てが美しくデザインされています。右サイドのOff Canvasも面白い使い方です。
ブックマークに加えておきたい、雰囲気のある写真画像がダウンロードできるストックフォトサイトのまとめ
個人ブログでも商用サイトでも、そして紙やTシャツにも無料で利用できる、雰囲気のあるかっこいい、ライフスタイル、ファッション、フード、動物、自然、建物、人物などをテーマにした、さまざまな高解像度の写真がダウンロードできるサイトをMediumから紹介します。 Stock photos that don't suck 上記で紹介されているストックフォトのサイトは9つで、全て個人でも商用でも無料で利用できます。 以下、その9つのサイトです。一番オススメは、6番目のPicjumbo。
レスポンシブ対応のHTMLメール用のシンプルなテンプレート（テキスト形式にも対応）
Responsive HTML Email Templateの使い方 使い方は簡単です。 「email.html」を使って、HTMLメールを作成します。 作成が完了したら、CSSをインラインにします。 これで、完了です。 CSSをインラインにする時は、下記のツールが便利です。 HTMLメール用のコードの完成 コードの下には、テキスト形式のメールでの表示も確認できます。 見出しの天地に罫線が自動で入るんですね、面白い！ Responsive HTML Email Template HTMLメールのベースとなるテンプレートです。 ※使用する際は、CSSをインラインにします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。 40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。 Hover.css Hover.css -GitHub Hover.cssの使い方 Hover.cssのデモ Hover.cssの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> <link href="css/hover-min.css" rel="stylesheet"> </head> 一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK! Step 2: HTML あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。 <a class="
デザインやファッションに取り入れたい2014年のトレンドカラー、春のトレンドカラー12色も魅力的！
Pantoneが2014年セレクションしたカラーは、鮮やかに咲き誇るランをイメージさせる淡くピンクがかったパープル「Radiant Orchid」。 今回はダウンロード素材として、Radiant Orchidを含む2014年 春のトレンドカラー12色をPhotoshop用のスウォッチを用意しました。 Pantone Color of the Year 2014 PANTONE 18-3224 Radiant Orchid Radiant Orchid（レイジアント オーキッド）とは「光り輝くラン」のことで、表情が非常に豊かなカラーです。その鮮やかな色味は信頼と暖かさにあふれ、人々の興味をそそります。 パープルとピンクが織りなす魅力的なハーモニーは、ランの花のように大きな喜び、愛、健康を象徴します。 Radiant Orchidのイメージボード PANTONE Color Systems:
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で高品質！レスポンシブ対応のWordPressのテーマファイルのまとめ