[UI Design] UI Garage – モバイルアプリやWebのUIデザインギャラリー
iOSやAndroidなどのモバイルアプリや、WebのUIデザインに関するギャラリーサイト。プラットフォームや画面の場面ごとにタグ付けされていて、参考にしたい画面を素早く抽出する事ができます。UIデザインする時のネタ帳に良さそうです。しかしこれ系のUIデザインサイトって増えたなぁ。いくつもあるからその内まとめ記事でも作ってみようかな。
Tag Archives: WebDesign
[Javascript] Unslider, the simplest carousel slider for jQuery – シンプルなjQueryスライダー
シンプルな作りのjQueryスライダー。サイトを見ると導入はかなり簡単で、script行を挿入して、マークアップは1つのスライダー項目を1つのliで囲うというもののようです。この手のスライダーではごく一般的な手法ですね。Methods & Optionsの項目を見ると、シンプルなわりにオプションについては豊富に用意されているようで、カスタマイズもしやすそうな印象。スライダー用のjQueryプラグインって山ほどあるけど、選択肢のひとつとしてなかなか良さそうな感じ。
[Template] Theme Cards – WordPressやBootstrapのテーマまとめサイト
WordPressやBootstrapで使えるテーマファイルの紹介サイト。これら以外にHTMLテンプレート、HTMLメールのテンプレート、印刷物のテンプレート、JSやCSSなどのスニペットなども紹介されています。まぁWeb全般の素材サイトって感じですね。ちょうど今日Wordpressのテーマ探してたので個人的にタイムリーなリソースでした。素材探しの時に役に立ってくれそうです。
[Javascript] matchHeight – 横に並んだ複数要素の高さを揃えてくれるjQueryプラグイン
水平方向に並んだ複数要素のHeight（高さ）を揃えてくれるjQueryプラグイン。こちらでデモを確認することができます。ソースダウンロードして挙動を確認してみたんですが、横方向に同じ位置にある要素の内、最も大きいHeightを参照しているようです。かゆところに手が届くとはまさにこの事で、たまーにこうしたいって時あるんですよね。レスポンシブレイアウトにも対応しているようで、使い勝手が良さそうです。
[CSS] loaders.css – CSSで描画されたローディングアニメーション
画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。
[Freebie] Rad Faces – プロトタイプ制作に使える80〜90年台趣味のアバターアイコン
Webサービスのユーザープロフィール画面などに使える、ダミー用のユーザーアイコン一式がJsonファイル形式で配布されています。サイト見ると分かるんですが、80年代〜90年代のアメリカ映画、ドラマの登場人物ばかりで、かなりこう、趣味的に偏った内容でダミーアイコン一式を揃える事ができます。グーニーズやスターウォーズ、ビバリーヒルズ青春白書、ロボコップなど、おっさん世代が懐かしむキャラクターばかりです。センスの良いおっさんプログラマーの方にオヌヌメです。
[CSS] The Simplest Way To Center Elements Vertically And Horizontally – Flexboxを使った、縦横軸でのセンタリング
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
[Web Design] Responsinator – レスポンシブレイアウトの結果をまとめて確認できるサイト
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。