レスポンシブデザインでのロゴパターン「responsivelogos」

レスポンシブのロゴパターンを考えるコンセプトサイト「responsivelogos」。特に海外のブランドロゴは細かいディテールのロゴが多いので参考のなる。

【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」

テキストリンクのロールオーバー時にテキストをシャッフルさせるエフェクトを実装できるjQueryプラグイン「chaffle.js」を紹介します。

iPhoneなどアプリのUIを集めたギャラリーサイト「Pttrns」

iPhone・iPad・AppleWatchなどのアプリのインターフェイスを集めたギャラリーサイト「Pttrns」の紹介。アプリの様々なシーンのキャプチャを公開してます。

【フリー素材】著作権フリーの動画素材サイト「Pexels Videos」

クリエイティブ・コモンズ0(CC0)ライセンスの動画をダウンロードできるストックビデオサイト「Pexels Videos」を紹介します。

【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」

要素やイメージをふわふわ浮せたることができるjQueryプラグインの「jqFloat.js」のご紹介。メインビジュアルのアクセントとして使えそうなプラグイン。

デザインやプレゼンに使えるモックアップ素材サイト「Qeaql」

海外のハイクオリティーなモックアップ素材サイト「Qeaql」の紹介。有料サイトになりますが、フリーで使えるモックアップ素材も豊富にあります。

【jQuery】ジオメトリックを実装できる「particleground.js」

要素の背景に幾何学模様(パーティクル)のアニメーションを実装できるjQueryプラグイン「particleground.js」を紹介します。

【フリー素材】海外のフリー写真素材サイト「StockSnap.io」

海外の無料で使用可能なフリー写真素材サイト「StockSnap」の紹介。ロイヤリティフリーの高解像度で使用できるスタイリッシュなフォトストックサイトです。

Youtubeのヘッダー・フッターを消す「PrettyEmbed.js」

Youtubeをサイトに埋め込んだ際に表示されるヘッダー(タイトル)とフッダー(コントロール)を非表示にする事ができるjQueryプラグイン「PrettyEmbed.js」の紹介。

【jQuery】レスポンシブ対応のスライダー「Glide.js」

スマートフォン・タブレットなどのスワイプ操作にも対応した軽量で使えるjQueryスライダー「glide.js」を紹介します。Webサイトのメインビジュアルなどに使えます。

【Webデザイン】魅力的な動きをするレスポンシブメニュー

レスポンシブWebデザインで使えそうな心地よいエフェクトで出現するドロワーメニューがcodropsでいろいろあったのでまとめました。

AppleWatchアプリの動作を確認できる「WatchAware」

「WatchAware」でアプリの動作を体験できるサイトがあったのでメモ。100種類以上ある様々なアプリのUIをサラッと見たい時に便利。

【jQuery】商品一覧ページなどで効果的に使える「Product Preview Slider」

ECサイトのTOPページや、商品一覧・詳細ページなどで使えそうなjQueryプラグイン「Product Preview Slider」を紹介します。

【jQuery】背景画像のスライドショーを実装する「Vegas2」

背景画像のスライドショーを実装するjQueryプラグインの「Vegas」の紹介。背景画像の切り替えエフェクト・オーバーレイの種類が豊富でインパクトのあるサイトを制作できます。

【jQuery】Google画像検索結果風のUI「Thumbnail Grid with Expanding Preview」

Google画像検索結果風のUIを実装できる「Thumbnail Grid with Expanding Preview」チュートリアルのサイト。イメージギャラリーやポートフォリオのサイトを作る時に使えそう。

RANDOM POST
  • リアルな水滴を表現できる「Rain & Water Effect Experiments」
  • Facebookの広告を集めたサイト「Facebook広告集めました。」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • ロゴやイラストの配色パターンをAIが生成してくれる「Color Wheel」
  • CSSで実装するローディングアニメーション「Single Element CSS Spinners」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント63選
  • 【2020年版】無料で使えるフリーイラスト素材サイト32選(商用利用可)
  • 【2020年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2020年版】Photoshopのブラシを追加する方法
  • フォントを調べる時に役に立つツール・サイト10選
PICKUP
  • CSSで作成する吹き出しとデザインのアイデア
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • CSSで簡単に作れるおしゃれな見出しデザイン20選