Not A Programmer のメモ帳: 6月 2013

2013年6月22日土曜日

HTMLにおけるimg要素のalt属性

HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。

via Pocket http://hail2u.net/documents/html-img-alt.html

25 Beautiful Flyer Designs for your Inspiration

Flyers are one of the best ways of communicating with users and delivering the information. As you may know it’s easy to spread the news of any upcoming event through social media but still the flyers are not dead. People still use flyers and posters to get the maximum exposure for their events.

via Pocket http://www.boostinspiration.com/design/25-beautiful-flyer-designs-inspiration/

2013年6月20日木曜日

文章をデザインする – 段落や箇条書きをより読みやすくするために

文章を読み易くする為に段落を用いてレイアウトすることは非常に多く、いかに読みやすく、いかに見やすいかを考えて構成する必要がありますね。

via Pocket http://wp.yat-net.com/?p=3761

GithubやHeroku、Facebookなど有名サイトのUIをPSDファイルで配布している『Popular UI』

教育目的で配布されている有名サイトのUI集ですね。デザイナーさんがサイトを見ながらつくったのかな・・・。

via Pocket http://www.ideaxidea.com/archives/2013/06/popular_ui.html

CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト

CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/css/css-demo-12-fancy-buttons-by-bartekd.html

[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector

3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/js-gridselector.html

Feedly Cloud はGoogle Reader 終了後の RSS の未来につながるか

Google Readerの退役にともない、その空隙を埋めるべく多くのサービスやアプリが奔走していますが、なかでも Feedly は単に Google Reader の代替というにはとどまらず、新しいコンテンツプラットフォームに進化する準備を着

via Pocket http://lifehacking.jp/2013/06/is-feedly-the-future/

2013年6月19日水曜日

レスポンシブ対応サイトで使用されているナビゲーションのパターンのまとめ

特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。

via Pocket http://coliss.com/articles/build-websites/operation/design/responsive-navigation-by-vandelaydesign.html

ウェブサイトでチェックしたイベントを、ワンクリックでGoogleカレンダーに追加する拡張機能

Chrome：近くでやっているイベントで行きたいと思うものがあったり、気になっていた大会やコンサートだったのに結局忘れて行かないことがよくあるという人には、Chromeの拡張機能『SpotOn.It』がおすすめです。

via Pocket http://www.lifehacker.jp/2013/06/130619spotonit.html

オブジェクトを四角で囲う方式のCAPTCHA『BoundIt!』

新しいCAPTCHAが登場したようなのでご紹介。画像中のオブジェクトを四角で囲うことで人かどうかを認証するようです。

via Pocket http://www.ideaxidea.com/archives/2013/06/boundit.html

Web上でアイコンフォントを作成できる・「Fontastic」

Fontastic Fontasticはオンラインでアイコンフォントを作成出来るWebサービスです。用意されたアイコンから必要な物を選択してダウンロードしたり、SVGをアップロードしてオリジナルのアイコンフォントを作成する事も出来る

via Pocket http://kachibito.net/useful-resource/fontastic

フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法

フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。しかし、placeholderはplaceholderなので、ラベルの代替として利用する

via Pocket http://coliss.com/articles/build-websites/operation/work/making-infield-form-by-jeremy.html

フランスで流行りつつある店頭棚札へのNFCタギング【@ohsaka】

[読了時間: 1分] フランスの大手リテールチェーン、E Lecierc社が国内6箇所の大規模店舗においてNFC機能を活用した電子棚札システムを展開していきますよ、というお話。どうやら、棚札にNFCタグを埋め込む話が盛り上がって

via Pocket http://techwave.jp/archives/nfc_tags_instor_france.html

食材や料理や調理器具が200種類そろった商用利用無料のアイコン素材 -Freepik

果物、肉、調理器具をはじめ、魚、野菜、チーズ、ドーナツ、飴、コーヒー、ジュース、お酒、アイスなど、さまざまな飲食関係のアイテムが揃ったベクターのアイコン素材を紹介します。

via Pocket http://coliss.com/articles/freebies/freebies-foodie-icons-by-freepik.html

レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた

「レスポンシブからアダプティブへ – 必要な情報を、必要なときに、必要としている人へ」という記事を読んでいてレスポンシブ・デザインやアダプティブ・デザインの言葉の定義を一度整理しておいたほうが良さそう

via Pocket http://parashuto.com/rriver/responsive-web/definitions-of-responsive-design-and-adaptive-design

2013年6月18日火曜日

要素をフリップさせるためのライブラリ・Flippant.js

要素をフリップ（回転）させるためのライブラリのご紹介。CSS3の記事なんかでたまに見かけますね。使用シーンは限られそうですけど動きは面白いです。

via Pocket http://kachibito.net/web-design/flippant-js.html

Google、スマートフォン向けサイトのランキングアルゴリズムを変更。誤った設定のサイトの評価を下げる、表示スピードが遅いサイトも対象に。

先週参加したSMX Advancedでも、米GoogleのMatt Cutts（マット・カッツ）氏とMaile Ohye（マイリー・オーイェ）氏から説明がありました。

via Pocket http://www.suzukikenichi.com/blog/ranking-algorithm-changes-in-rankings-of-smartphone/

とあるフリーランスWebデザイナーの一日

フリーランスとして働いている人は、なかなか他の人の働き方を知る機会がないのではないでしょうか？どんな風に時間管理してるんだろう？どんなツールを使ってるんだろう？などなど、気になるけど、聞くまでもない

via Pocket http://www.webcreatorbox.com/webinfo/freelance-web-designer/

カードがくるっとフリップするようなエフェクトを実装する『flippant.js』

こちらもメモ的に。ちょっと派手すぎるかなー、という気がしないでもないですが。

via Pocket http://www.ideaxidea.com/archives/2013/06/flippant_js.html

TwitterやFacebookなどをはじめさまざまなブランドカラーを集めたサイト「BrandColors」がチョー便利！

あのブランドのテーマカラーなんだっけ・・・？そんな時に助かるサイトBrandColorsのご紹介:) ご覧のようにブランドだけでは無く「HTML5」のキーカラーや各種SNSのカラーなどを多数網羅しております。各ブランドの検

via Pocket http://ozpa-h4.com/2013/06/18/brandcolors/

トレンドを巧く取り入れてる、美しいクリーンなデザインのウェブサイトのまとめ

via Pocket http://coliss.com/articles/build-websites/operation/design/beautiful-clean-website-designs-by-wdf.html

[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js

画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Maison.

via Pocket http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mason.html

2013年6月17日月曜日

Webサイトにツアーコンテンツを実装するjQueryプラグイン・jQuery TourBus

Webサイトツアーを実装できる、というスクリプトのご紹介。jQueryに依存します。よくある類のものと変わりませんが個人的に使いやすい印象だったので備忘録として。

via Pocket http://kachibito.net/web-design/jquery-tourbus.html

Chromeの新しいタブページをWindows 8調にする拡張機能「iStart」

Windows 8は失敗、マイクロソフトに落日が迫るなどと言われています。しかしタッチパネルを使えることに便利さを感じている人にとっては、Windows 8は使いやすい部分もあるはず。

via Pocket http://web-marketing.zako.org/hacks/google-chrome/new-tab-istart.html

2013年6月15日土曜日

CSS3で魔法のようなエフェクトを実現する『magic css3 animations』

ちとメモしておきます。CSS3で魔法のようなエフェクトを実現するスクリプトです。どこかで使えそう。

via Pocket http://www.ideaxidea.com/archives/2013/06/magic_css3_animation.html

2013年6月14日金曜日

CSSのみで書かれたアイコンのセット・「CIKONSS」

CIKONSS CIKONSSはCSSのみで書かれたアイコンのソースを配布するWebサイトです。IE8までなら同じ表示が可能のようです。アイコンの種類もそれなりにあるみたい。実用性は置いておいて、どこかでコードが役に立つかもしれな

via Pocket http://kachibito.net/useful-resource/cikonss

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/css/pure-css-navigation-overlay-by-boxabrain.html

2013年6月13日木曜日

Google App Engineがバージョンアップ, いよいよクラウドサービスに本腰

GoogleのGoogle App Engineが今日（米国時間6/12）から1.8.

via Pocket http://jp.techcrunch.com/2013/06/13/20130612google-app-engine-gets-new-release-no-signs-of-slowing-cloud-push/

フォームの入力をもっと快適にする「jq-idealforms」

jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてし

via Pocket http://www.moongift.jp/2013/06/20130613/

黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがうPhotoshopの機能拡張

黄金比、黄金螺旋、黄金三角形、1/3ルール、対角線など、レイアウトや構図に重要なパスを簡単に描けるPhotoshopの機能拡張を紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/design/photoshop-extension-divine-proportions-toolkit.html

2013年6月12日水曜日

CSSライブラリをコレクションしている・「CSSDB.co」

CSSDB.coはCSSライブラリをコレクションしているWebサイトです。似たようなサイトを紹介した気もしますが・・割と評価の高めなライブラリに絞ってるっぽいですね。Githubへのリンクもあります。

via Pocket http://kachibito.net/useful-resource/cssdb-co

CSS3のふわりとしたアニメーションが気持ちいい画像ギャラリーを実装するチュートリアル

CSS3アニメーションとjQueryを使って、アニメーションの動きが気持ちいい水平型のギャラリー・ポートフォリオを実装するチュートリアルを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/css/tutorial-horizontal-portfolio-with-css3-animations-and-jquery-by-sarasoueidan.html

2013年6月11日火曜日

無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版*ホームページを作る人のネタ帳

無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版 2013年として最近のフリーアイコンを探すと、どこもかしこも「フラットアイコン」ばかりでしたが、一つここで総まとめしておきたいと思います。フラッ

via Pocket http://e0166.blog89.fc2.com/blog-entry-1105.html

select要素の使い勝手を向上させる（かもしれない）UIを実装するスクリプト・Selectize.js

select要素の使い勝手を良くする事が出来るかもしれないスクリプトのご紹介。モノによっては逆に分かりにくくなりそうなので使いどころを気をつける必要がありそうです。

via Pocket http://kachibito.net/web-design/selectize-js.html

[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT

スクロールしてもナビゲーションが最上部に配置され、各セクションにアニメーションのスクロールで移動するナビゲーションを実装するjQueryのプラグインを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-smint.html

【保存版】PC版Feedlyの設定方法を日本語で解説

廃止されるGoogleリーダーの代替RSSリーダーとして人気のFeedlyだが、その設定を自分好みに変更して利用しているだろうか。PCブラウザ向けFeedlyでは、左上のユーザ名表示の下部にある「Prefs」から、20以上の項目を設定変更

via Pocket http://appllio.com/explanation/20130610-3709-feedly-preferences-japanese

2013年6月10日月曜日

[JS]機能も充実、設置も簡単、デザインも素敵！モーダルウインドウを実装する超軽量のスクリプト -Pop Easy

Pop Easyはテキストや画像、フォーム、動画、Google Mapsなどを配置できるモーダルウインドウを実装するjQueryのプラグインで、モーダルウインドウ自体の機能・デザイン性も優れていますが、ページのデザインもかっこいいの

via Pocket http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-pop-easy.html

効果音が今にも聞こえてきそうな軽快で気持ちいいアニメーションのデモ

テキストの上をボールがはずんで、次々にカラーを変えたり、一つずつ表示するアニメーションのデモを紹介します。デモは2種類用意されており、一つ目は背景グレーで、バウンドでカラーが変わるデモ。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/ball-bouncing-on-text-by-kindofone.html

Yahoo製、軽量なレスポンシブWebデザインフレームワーク「Pure」

Pureはスタイルシート製、BSD Licenseのオープンソース・ソフトウェアです。

via Pocket http://www.moongift.jp/2013/06/20130608/

今週話題となったおさえておきたいフリーフォント紹介のまとめ記事*ホームページを作る人のネタ帳

まさにその名の通り、エレガントかつ繊細なフォントがまとめられた記事。全部で１３のフリーフォントがまとめられています。

via Pocket http://e0166.blog89.fc2.com/blog-entry-1100.html

カラーパレットを共有できる・「PLTTS」

PLTTS PLTTSはカラーパレットを共有出来るWebサービスです。カラーコードで検索すると、そのカラーが含まれるパレットを調べられるので参考にしたりインスピレーションの向上にもなるかもしれません。まだ数は多くない

via Pocket http://kachibito.net/useful-resource/pltts

[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium

ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。

via Pocket http://coliss.com/articles/build-websites/operation/javascript/js-helium-for-discovering-unused-css.html

多様な記法からHTML/JavaScript/CSSを生成「Prepros」

PreprosはWindows用のオープンソース・ソフトウェア（MIT License）です。今はHTMLやJavaScript、スタイルシートを素のまま書くのではなく、別な記法を使ってそれぞれファイルを生成するタイプが人気です。しかし更新するたびに

via Pocket http://www.moongift.jp/2013/06/20130610-2/

ウェブの技術進化に対応するために広告コードの変更が可能になりました

サイトを訪れるユーザーを獲得し続けていくには、ウェブのトレンドや技術の進化にすばやく対応していく必要があります。そこで Google では、レスポンシブ・ウェブデザインなどの分野に関してこれまでにお寄せいただい

via Pocket http://adsense-ja.blogspot.com/2013/06/blog-post.html