class=”resource_links” Paper-coは紙のテクスチャを配布する国産のWebサイトです。商用でも無料利用可能で数も相当揃っている印象でした。pngとjpgが用意されています。詳しいライセンスは使用条件についてをご確認下さい。 Paper-co

FontCDNはGoogle Web Fontのフォントを探せる検索ツール。カテゴリでのソートやOSSとしてソースコードが公開されています。任意のテキストでの一括表示確認等のシンプルな機能ですが個人的には結構見やすい印象でした。ライセンスはMITとの事です。 FontCDNOn Github

Background Image Generatorはシームレスな背景パターンを作成出来るジェネレーターです。背景の色や素材、形状、ノイズ等を選んでダウンロードするだけとお手軽で素敵。この手のツールは久しぶりに見た気がします。パターンはSubtle Patternsを参考にしているそうです。Subtle PatternsはライセンスがCC-BYなので自作出来るならしたほうが良いですね。 Background Image Generator

Device Metricsは各モバイルデバイスやタブレット、ウェアラブルデバイス（今は主に時計）などのそれぞれの画面に関する情報をまとめたWebサイトです。Google公式の情報ですが、Apple製品やSamsungを初め、他社製品デバイスのモニタ情報なども網羅されています。ぱっと見で分かりやすくて良い感じです。 Device Metrics

Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振るだけで導入できるようになっています。このままだと使い所は限られますがソースは参考になりそうです。ライセンスはMITとの事。 Hover.css

Nibblerは任意のWebサイトのアクセシビリティやソーシャルメディアのサポート状況、害悪なコンテンツの有無、SEO的な部分の評価等を調査し、スコアレポートを提出してくれるツールです。ざっくり調査するなら手軽で良いですね。調査項目も割と多いので多少時間がかかります。 Nibbler

Brace DataはGoogleスプレッドシートのデータを任意のWebサイトに埋め込むためのWebサービスです。埋め込みたいスプレッドシートのURLを入力すると、認証を求められるので許可すればJavaScriptを含んだソースコードが発行されます。テンプレートタイプなのでレイアウトも自由に設定出来そうです。 Brace Data

Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればアイコンをアニメーションさせる事が出来ます。CSS3に対応したブラウザのみエフェクトがかかりますので利用シーンは限られそうですが、手軽に使えて良さそうです。 Font Awesome Animation

地味に便利そうなプラグインがあったので備忘録的に。固定ページに、使用中のテーマで使えるウィジェットを簡単に追加出来る、というもの。ウィジェットを使いこなしている方には良さそうです。 ウィジェットは個人的にはクライアントワークでは欠かせない機能なので、こういったプラグインはちょっとありがたいです。 ウィジェットを固定ページに追加できる、というもの。その場でウィジェットタイトルも設定できますので、いちいちページ移動してウィジェットを管理する手間もありません。 プラグインを有効化すると固定ページを追加するところにタブが表示されます。ここでウィジェットを自由に追加します。カラム数を設定して横並びのレイアウトにする事も。 ウィジェットの追加は上記のようなlightboxで表示、選択する事が出来ます。 ただし、通常通り書いたコンテンツが無視されてしまいますので、テキストや画像は「テキスト」というウィジ

ユーザー登録不要でパスワード による閲覧制限可能な短縮URL サービスを探してたのでメモ。 短縮URLサービスは既に数多に 存在する、というか乱立に近い 状態ですけど。 個人的にはどの短縮URLサービスもあまり肌に合いませんでしたが、flavr.fiは自分の好みに今までで一番近かったので暫くはこれを使おうと思います。 お洒落な写真を使っていますがコンテンツとは無関係です。 URLを入力するだけ ↑ URLを入れると即座にショートURLとQRコードを発行してくれます。 パスワード制限 ↑ 下部にあるメニューからCustomに進むとパスワード制限をかける事が出来ます。Many Urlsでは複数サイトの短縮URLを同時に作成出来ます。 ブックマークレット ↑ ブックマークレットを使うとその場で短縮URLとQRコードを発行、TwitterやGoogle+、Facebookへの投稿ボタンも表示されま

jQueryをうまく取り入れた良デザインなWebサイトを収集しているデザインギャラリー・Best jQueryのご紹介。jQueryを使用するWeb制作者さんには、インスピレーション向上だけでなく、コードやUIも参考になるかもですね。 普通にWebデザインギャラリーとしても良さそうですが、jQueryを使用している、という共通点を持っていますのでそちらの面でも参考に出来そうです。 jQueryを利用している良デザインなサイトを収集しています。AWWWARDSで見かけるようなサイトが多い印象です。 以下のようなWebサイトが紹介されています。 Tatchies EVB Nerisson 他にもいろいろ。100サイトほど紹介されています。 Webサイトのコンテンツでのカテゴリ分けしかされていないのでギャラリーの機能としては探すのに少し弱いかもですけど、選択肢の一つとしてはありじゃないかなと思い

ミニマル且つ綺麗目なデザインの パターン素材を配布するリソース サイト・Minimal Patternsのご紹介。 使いやすそうで重宝しそうです。 スマフォのアプリの背景にもいい かも知れません。 dribbbleのユーザーあたりが好みそうなデザインのパターンです。iOS風のリネン系テクスチャとか綺麗な木目のパターンとか方眼紙っぽいのとか。

Webサービスなんかでよく見かける 「お気に入りに追加」みたいなやつ を実装できるWordPressプラグイン・ WP Favorite Postsです。Cookieを 使ったシンプルなものですが、これ はこれで手軽で良いかと思います。 既出ですけど、需要ありそうな割に情報が少ない気がしたのでご紹介。 不動産とか、旅行とか、転職とかみたいな情報を探すようなサイトではよく見かける「お気に入りに追加」を実装するWordPressプラグインです。Cookieを使用するシンプルなやつです。 こんなようなやつ。保存はCookieを使用しています。 設定画面では、「お気に入りに追加」とか削除とかテキスト全般の設定やアイコンの設定などが可能です。 使い方 お気に入りに追加、とうリンクを追加するにはテーマファイルに <?php if (function_exists('wpfp_link')) { wpf

作りが良かったので参考としてメモ。 CSSのセレクターを、擬似クラスとか 属性とかでフィルタできるリファレ ンスサイトです。自分のチートシート の作りが微妙なので使いやすそうなら 参考にしたい。 シンプルですが、なかなか使いやすいつくりになっていました。 CSS Selectors 上部タブの属性フィルタ(Attribute Selectors)や、擬似クラス(Pseudo-Classes)でフィルタリングできます。 属性フィルタや擬似クラスは更にフィルタリング可能です。セレクタを選択すると、サンプルコードやjsFiddleでの動作デモ、W3Cへのリンクもあります。右下にブラウザのアイコンがあり、マウスホバーすればバージョン別の確認も可能です。 まぁそれだけなんですが、シンプルで良かったので自分で使用しているチートシートを同じ構造にしてみようかなと思って記事にして見ました。 CSS Sel

今まで機会が無かったんですが、最近必要になって改めて便利だったので今更ながらご紹介です。WordPressでコンタクトフォームと言えば、Contact Form 7が定番になっていますが、このCF7にある機能に「特別なメールタグ」っていうのがあります。 フォーラムによく顔を出すような方はご存知の方も多いですが、ググってみると案外紹介されていなかったので普及活動してみます。 まずはContact Form 7のご紹介。WPユーザーなら大抵はご存知ですよね。柔軟性と操作性に優れたコンタクトフォーム用プラグイン。日本製ですが、世界中で愛用されています。 CF7は管理画面内でフォームを作成し、ショートコードで実装します。そのフォーム作成もショートコードを発行する形ですので、HTMLの知識は無くとも作成する事が出来ますが、PHPであるテンプレートタグなどは直接使用できません。 ただ、場合によっては、

既出なんですが良かったので。空いた時間に、気になっていたスライドがあったので拝見しましたが、内容が素敵だったのでご紹介します。ノンデザイナーさん向けのデザインセオリーのスライドです。 Webデザイナーが読んでおきたい、最近公開されたWeb系のスライドっていうので知ったんですが、どちらかというとWebデザイナーさんなら知ってて当たり前じゃないかという内容かもしれません。 スライドの作成者さんのブログでもノンデザイナー向けの講義向けのスライド、とありました。→福井高専でノンデザイナー向けの講義しました デザインとアートの違い、なぜデザインが必要なのか、Webデザインとは、などなどが解説されています。Webデザイン論では必須の導線、レイアウト、情報のグルーピングにもしっかり触れてくれています。Webデザインには理由がある、というのが分かるかと思います。（「意味」って言っちゃうと語弊がありますよ）

ここ最近、この手のフォントがかなり増えてき ましたが、こちらも良い感じでしたのでご紹介。 Webフォントにも使用できる、アイコンフォント です。シンプルで汎用的なのでなかなか使い 易いのではないかなと思いました。セマンティ ック的側面では反対の声も見かけますけど。。 こういう、アイコンタイプのフォントもかなり目立ち始めましたね。以前、同じくWebフォントに使えるWeb Symbols typefaceというフォントをご紹介しました。また、先日公開されたソーシャルメディアアイコンのフォント・Socialicoも素敵でした。※Webフォントに使えるかは調べてません。 今日ご紹介するModern Pictogramsも汎用的なデザインで、Webフォントにも利用可能です。 シンプルで使いやすい感じです。Webフォントにも使用できますので、CSS3と合わせてスマートフォンアプリで応用したり、管理画面