はてなブックマーク

[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ Pocket Tweet Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。 Flexbox Patterns

[Javascript] matchHeight – 横に並んだ複数要素の高さを揃えてくれるjQueryプラグイン Pocket Tweet 水平方向に並んだ複数要素のHeight（高さ）を揃えてくれるjQueryプラグイン。こちらでデモを確認することができます。ソースダウンロードして挙動を確認してみたんですが、横方向に同じ位置にある要素の内、最も大きいHeightを参照しているようです。かゆところに手が届くとはまさにこの事で、たまーにこうしたいって時あるんですよね。レスポンシブレイアウトにも対応しているようで、使い勝手が良さそうです。 matchHeight

[CSS] loaders.css – CSSで描画されたローディングアニメーション Pocket Tweet 画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。 loaders.css

[UI Design] Designing for iOS 9 – iOS 9 Appデザインのための分かりやすいガイドライン Pocket Tweet iOS 9向けにアプリをデザインする際に役立つ、UIガイドラインを分かりやすくまとめた記事。まぁApple純正のガイドライン読めば分かるっていえば分かるんですが、ここではその中でも特に重要な点を画像を使って分かりやすくまとめられているのがナイス。レイアウト、フォント、ディスプレイ解像度、スプリットビュー、アイコンのサイズやグリッド、カラー、ボタンやフォントのサイズについて、スペーシングやアライン、マージン、各種純正パーツのサイズ、キーボードなどについて端的に仕様を紹介しています。また記事最下部にはiPhoneやiPad、Apple WatchなどのGUIテンプレートへのリンクなども紹介されており、なかなか気の利いた記事だと思います。UIデ

[Web Design] Simple Sharing Buttons Generator – シェアボタンジェネレーター Pocket Tweet シンプルなシェアボタンのジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, Pocket, Reddit, LinkedIn, WordPress, PinboradといったメジャーどころのSNSに対応しています。それに加え「友達にメールする」的なボタンも生成できるようです。ベースデザインの指定、SNSの選択、ボタンを貼り付けるサイトの情報を一通り入力すると、ライブプレビューとソースコードが出力されるので、あとはそれを貼り付けるだけ。デザインがシンプルで、複数のSNSボタンをまとめて出力できるので使い勝手が良さそうです。 Simple Sharing Buttons Generator

[Web Design] Social Media Image Cheat Sheet – 各種SNSで使われる画像サイズまとめ Pocket Tweet 各種SNS内で使われる画像のサイズをまとめたインフォグラフィック。Twitter, Youtube, Facebook, Google+, Instagram, Pinterest, LinkedInが紹介されてます。これ系のまとめでPinterestとかInstagramが紹介されているのは珍しい気がします。こうして見ると、FacebookとLinkedInは結構中途半端なサイズでレイアウトされてんだなーと思います。逆にGoogle系のサービスはキリのいい数値で作られてる印象です。SNS向けのビジュアル製作時に役立ちそうです。 Social Media Image Cheat Sheet

[Javascript] Flickity – レスポンシブレイアウトとフリック操作に対応したカルーセル Pocket Tweet レスポンシブレイアウトとフリック操作に対応したカルーセルメニュー。いわゆるJavascriptを使ったイメージスライダーです。モバイル対応を前提としたサイト制作で使えそうです。フリック操作ですが、タッチデバイスではもちろん、PCブラウザ内でもドラッグにより似たような操作ができます。これはちょっと珍しいかも。導入も簡単で、CSSとJSファイルを読み込むだけ。jQueryなどのJSフレームワークは特に使っていないようです。またオプションも豊富にあるので、様々なカルーセル表現に対応できそうです。ナイスです。 Flickity

[Design] Starter Kit – 開発を始める際に便利なスターターキットをまとめたサイト Pocket Tweet WebやMobile Appなどの様々な開発を始める際に便利なスターターキットをまとめたサイト。紹介されてる内容がかなり幅広いんだけど、例えばiOSやAndroidなどのMobile Appの開発、Webのデザインに使えるHTMLやCSSの情報リソース、アイコンやイラストなどの画像素材、フォント、マーケティングリソース、SEO、ビデオ、UI / UX関連リソースなどがあります。サイト内の情報はタグ付けされて管理されているので、調べたい分野を絞る事ができます。ある程度知識があれば、いちから自分で作るよりもこうした素材やフレームワークを使った方が効率良く仕事できますしね。なかなかナイスなコンセプトのサイトだと思います。 Starter Kit

[Typography] typespiration – Webタイポグラフィー作例のギャラリーサイト Pocket Tweet Webタイポグラフィーの作例をギャラリー形式で紹介しているサイト。各作例はどれも「見出し」「小見出し」「本文」「引用」という一般的な文書フォーマットで構成されており、また使われている色についてもHEX指定で一通り紹介されています。そしてCSSも一式見れるようになっているので、コードをコピペすれば近いデザインの文書をサクっと作る事もできます。いやこれナイスですね。ただしフォント指定は欧文圏のものなので、日本語のサイト制作に応用する際には置き換えた方が良さそうです。 typespiration

[Mac App] Pixel Winch – UIデザインに便利なソフトウェア定規 Pocket Tweet ヤバいこれ超便利。スクリーンショットから、各UIパーツ間のスペースを測れるソフトウェア定規。Mac用のベータ版となります（製品版では有料化されるのかも）。立ち上げるとメニューバー右端に常駐し、そこからスクリーンショットをまずは撮影します。撮影するとディスプレイ全面を使って大きく拡大表示されるので、画面左上に出てくる各種ツールを使ってUIパーツ間の距離を測る事ができます。中でも特に便利なのが「Grapple Tool」。これを使うと画像内のコントラストを判断し、パーツとパーツの間の距離をセミオートで測ってくれます。いやこれめっちゃ便利です。UIデザインする人にとっては常用アプリになりそう。Webデザインでも使える機会が多そうです。 Pixel Winch

[Misc] Hex clock – HHMMSSをColor Hexに当てはめて、背景色として表示する時計 Pocket Tweet HHMMSS（時間、分、秒）って並べると6桁になるから、じゃ頭に＃付けてカラーHexにしちゃおうよ、というWeb時計。例えば「10時30分20秒」なら「#103020」という色になるので、その色をページの背景色として表示しています。ただそれだけのシンプルな実験的ページ。けどよく考えると、1日の中で最も数値の大きくなる時間というのは「23時59分59秒」、つまり「#235959」なんですね。コーディングする人ならすぐにピンと来ますが、これはかなり暗めの色。ようするにこれより明るくはならないんです。また時間が進むほど赤が強くなり、分が進むほど緑が、秒が進むほど青が強くなるという特徴もあって、見るだけでもわりと楽しめます。 Hex clock

[Web Design] 64 jQuery CSS3 Menu Plugins and Tutorials – jQueryやCSS3を使ったクールなメニュー作例 Pocket Tweet jQueryやCSS3を使って作られた、クールなナビゲーションメニューの作例を64個集めたまとめ記事。ロールオーバーアクションに凝ったもの、アコーディオン、ドロップダウンメニュー、レスポンシブレイアウトに対応したナビゲーションなど色々あります。ナビゲーションメニューってサイト内でも特に大事な要素なので、凝った表現をしたい時の作例探しにナイスです。 64 jQuery CSS3 Menu Plugins and Tutorials

[Icon] Font Awesome – Twitter Bootstrapと相性のいいアイコンフォント Pocket Tweet Twitter Bootstrapとの併用を想定したアイコンフォント。LESS、CSS、さらにはBootstrapを導入せずに使う方法が解説されていて、それぞれの環境での導入方法についても詳しく紹介されてます。ダウンロードされたZipファイルを解凍すると、SVGやPDFなどのベクターリソースも格納されているので、単純にアイコン素材としても使う事ができます。数が多くまたデザインがシンプルなので、使い勝手はとても良さそう。最近Webフォント形式のアイコン配布形態増えてきましたよね。デザイナーのネタ帳に是非これひとつ。 Font Awesome

[Safari 6] Safari 6 CSS Overwrite – Safari 6でフォントの設定を変更する方法 Pocket Tweet Mountain Lion出ましたね。もちろん入れました。その日にサクっとMacBook Air初期化してクリーンインストールぶっこきました。概ね快適なんですが、いくつかアレゲな点もありますね。その中でも特に困ったのが「Safariの環境設定内から表示パネルが消えてる！！」という点。いやこれ困りました。表示パネルがないとSafariの標準フォントを変更できない。となるとフォント指定のないサイトでは日本語が明朝体になってしまう・・・。個人的にかなり気持ち悪いので、CSSを置き換える手法で対応しました。力業ではあるけどわりとサクっと変更できました。 なんつーか。 便利になるのはイイし、Safari 6も実際良くなった点の方が多いんだけど、なんかこう仕

[Tutrial] TheCodePlayer – 作例と、そのライブコーディングを見れるサイト Pocket Tweet CSS3やHTML5を使った作例の紹介と、そのライブコーディングを見る事のできるサイト。作例を選択すると、まずは動作デモを見る事ができます。作例デモ画面内で「Play Walkthrough」を押せばライブコーディングが始まります。また「View Code」では単純にコードだけを見る事もできます。コーディングの時間の進み方は最大20倍速まで上げる事ができ、徐々に形になっていく様子を見る事ができます。これなかなか勉強になりますね。時期的に新人の教育にも使えそうです。 TheCodePlayer

CSS3を使って文字にグラデーションをかける手法をたまたま同じ日に2つ見つけたので紹介。透過PNGを使った手法は以前からあったけど、画像を使わずにCSSだけで描画するという点が新しいかと。画像使わない分生産性や更新の利便性も上がりますな。 Pure CSS text gradient (no PNGs) ひとつめはこちら。大きい画面でのデモはこちらから見る事ができます。Webフォント使ったり色々してますが、本質的な部分は、テキストに画像を使わないマスクをかけて、その下にある色を透かして見せるという点。この場合テキスト上端の色は赤、下端の色が黒なので、上に乗っかるテキストがマスク付きの赤、下のテキストが黒のベタとなっています。コーディングがやや複雑な印象もちょっとありますな。 Pure CSS text gradient (no PNGs) Gradient Text ふたつめはこちら。マー

[PSD] Free Iphone Template – iPhone外観のフリーテンプレート Pocket Tweet フリーで配布されているiPhone 4系の外観テンプレート。フォーマットはPSDです。4376px*2229pxというサイズで、かなり大きめのPSDです。角度の異なる5種類のiPhoneが描かれていて、それぞれ個別に編集する事ができます。ナイスなのがディスプレイ内に表示されている画面が1つのPSB（スマートオブジェクト）を共有している点。レイヤー内の「Edit Me」を修正すれば、全5パターンのiPhone全ての画面表示が変わります。これを利用すれば、iOS AppのUIデザインを使ったアートワーク制作や顧客への確認資料が手早く作れます。iPhoneの外観PSDというとiOS 5 GUI PSD (iPhone 4S)が特に有名ですが、これはこれで別の使い道があってイイ

[CSS] Data URI Tileable Transparent Patterns – コードのコピペだけで使えるパターン集 Pocket Tweet CSSコードのコピペだけで背景画像の適用ができるコードスニペット。ページ内の「Code」ボタンクリックでコードが表示されます。background-imageが指定されているので、後はコピペするだけで使えます。コードの背景指定の部分をよく見ると、「data:image/png;base64…」と始まっているので、ようするにこれPNG画像をbase64でエンコードしただけのものです。なのでファイルサイズの節約とかにはあんましならいません。まぁリクエストは減りますが。こんな風にCSS内に記述できると汎用的に使えていいですね。透過指定もされているので、背景色に溶け込む点もナイスですねー。 Data URI Tileable Transpar

[CSS3] CSS3 Pictogram Button – ピクトグラムを使ったイメージレスボタン Pocket Tweet ピクトグラムを使ったイメージレスのCSS3ボタン。デモページはこちら。ボタンの色は複数用意され、シェイプも3パターンの中から選べます。またアイコン部分はWebフォントになっているので、画像を1つも使わずに描画されてます。もちろんグラデーションもCSS3で描画。コードをコピペするだけで使える点がナイスです。ソース一式のダウンロードもできるので、CSS3使ってオッケーなお仕事とかで役に立ちそうです。 CSS3 Pictogram Button

[Javascript] Retina.js – Retinaディスプレイデバイスからアクセスがあった時、自動で倍の解像度の画像にリプレイスしてくれるJS Pocket Tweet サイトにRetinaディスプレイデバイスからアクセスがあった際、もし該当イメージに“@2x”がファイル名末尾に付く画像があったら、そっちにリプレイスしてくれるというJS。高解像度版の画像に“@2x”と付けるだけでRetina対応ができるので便利ですね。ちなみにこの“@2x”という命名ルール、iOS Appの制作でも使われるものなので、App制作者の人には馴染みのある文字列です。またLESSでの実装にも対応しているようで、こっちならJSを使わなくてもイイみたい。 Retina.js

[CSS] Is your map boring? Fold it! – Google mapsのちょっと凝った見せ方 Pocket Tweet Googleマップをただ表示するだけではつまんないので、ちょっとかわいい感じにしてみたYO！という内容の記事。紙の地図っぽい折り目と浮きを、透過PNGを使って表現してます。最初mask-image使ってんのかと思ってソースを見たらそうでもなく、透過PNGのframe.pngをimgタグで配置して、classで背景要素としてGoogle mapsを個別に指定していました。なるほどなーって感じです。特別難しい事をしているわけでもなく、アイデアがナイスだなーと思いました。これGoogle mapsだけじゃなく画像のサムネール表示とかにも使えそうです。最近円形のマスクかけるの流行ってるけど、マスク芸ってのも今後バリエーションが色々増えてくんでしょうね。

[iOS App] Skala Preview – iOSデバイスでフォトショップのキャンバスをリアルタイム表示できるアプリ Pocket Tweet たまたま見つけたSkala Previewというアプリがなかなか素晴らしいので紹介。早い話がPhotoshopで作業しているキャンバスをiOSで表示させるためのMac AppとiOS Appのセットです。通常アプリのUIデザインする時って、「フォトショで制作→PNG書き出し→メールとかで画像をiPhoneに転送→保存して全画面表示で確認」とかやってるんですが、これ使えばフォトショで作業した内容がリアルタイムにiPhoneに反映されます。超便利！ iPhoneアプリのUIデザインなんかをするデザイナーさんにオススメです。 まずはアプリのダウンロード Mac版アプリのダウンロードとインストール まずはMac版アプリをインストール。Mac App

[Javascript] 60 jQuery Plugins You Should Try Today – 今すぐ試すべき60のjQueryプラグイン Pocket Tweet 今日試すべき、ってあたりがなんかアレではありますが、まぁ海外のブログってだいたいこういうノリですよね。というわけでjQueryプラグインが60個紹介されてます。ジャンルは絞られてません。定番のスライドショーや画像スライダーはもちろん、テキスト関連ツールやグラフ描画、ToolTip、動きのあるナビゲーション、フォーム関連ツール、カレンダー描画など色々あります。目的を持ってプラグインを探すには適してませんが、ダラダラと読むにはイイ感じの記事。サイト内でちょっと変わった事したい時なんかにひとつ。 60 jQuery Plugins You Should Try Today

たまに目にする「画像使わずにCSSだけでこれ描いたお！」的なアレをまとめてみました。とは言ってもそこまで数は多くありませんが、その内また加筆するかもしれません。動くあいぽいんとかなんかこう色々スゴいっす。こういうのって見れないブラウザもあるから実用的というわけではないし、どちらかというと技術のひけらかしというかそんなアレではあるんだけど、わたくしこういうの大好きであります。 2012/08/27 作例を追記しました。 2012/10/16 作例を追記しました。 Pure CSS3 AT-AT スターウォーズオタなら誰でも知ってるAT-ATをCSSだけで描画したもの。首が動く上にビームも出ます。よく見るとビームの射角まで変わってる。パネルの合わせ具合まで表現してあってなかなか芸が細かいです。 Pure CSS3 AT-AT iPhone4 on pure CSS3! こちらも画像ナシで作った

[HTML5] 20 Amazing Implementations of HTML5 Canvas – Canvasタグを使った作例まとめ Pocket Tweet HTML5のCanvasタグを使った作例の紹介記事。ゲーム、エフェクト、スライドショー、フォトウォール（フォトギャラリー）の4つに分けて紹介されています。この手の記事ではありがちではあるけど、「へぇーこんな事できるんだー」的なのが色々あります。HTML5で記述したサイトの制作経験はぼちぼちあるけど、Canvasタグってちゃんと描いた事ないんスよね。動きを使った表現や動的なコンテンツを作る時のために勉強しておかなきゃな、とか思いました。 20 Amazing Implementations of HTML5 Canvas

[UI Design] Best Free UI PSDs of 2011 – UIに関するフリーのPSD Pocket Tweet UIデザインに関するフリーのPSDが紹介された記事。今年アツかったものだそうです。ドロップダウンメニュー、リボン装飾、ボタンセット、アコーディオン、そしてUIパーツ一式のPSDが紹介されており、どれもかっけース。他のデザイナーの作ったPSDはレイヤースタイルなど宝の山だったりするので、有効に活用させてもらいましょう。 Best Free UI PSDs of 2011

[Presentation] reveal.js – CSS3とJSで作られたスライドショー Pocket Tweet CSS3とJSで作られたスライドショー。キーボードの左右のキーで進んだり戻ったりできます。Webベースのプレゼン用フレームワークとして使うとなかなかかっこイイんじゃないでしょうか。ダウンロードはGitHubから。JSライブラリにはhighlight.jsが使われているようです。こんなんでプレゼンしたらかっけースね。 reveal.js