Monthly Bookmarks #27 目次
Development
- Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA大量の粒子（パーティクル）表現を実装できるライブラリ。
- Intro.js - Step-by-step guide and feature introduction for your websiteサイト内にツアーガイドを実装できるJSライブラリ。
ただし、商用利用時は有償です。 - Hamburgers by Jonathan Suh様々なPure CSSのハンバーガーアイコンアニメーションをまとめたもの。
- superplaceholder.js - super charge your input placeholders
placeholderをアニメーションさせることができるJSライブラリ。 - CSS設計の類はもっとカスタムデータ属性を活用するべきでは - Qiitaカスタムデータ属性を有効活用例が幾つかまとめられています。
- 埋め込んだTweetを簡単に中央寄せ表示する方法 – Rriver中央寄せ以外にも、カードを非表示にしたりテーマを変更する方法も併せて紹介されています。
- 今どきの入力フォームはこう書く！ HTMLコーダーが抑えるべきinputタグの書き方まとめ - ICS MEDIAより良い入力フォームを実装するためのヒントや考慮すべき点などがまとめられています。
- Imagehover.css - A Pure CSS Image Hover Library | imagehover.css画像ホバー時にアニメーションする動きを実装することができるスタイルシートで、様々なエフェクトが用意されています。
実装も簡単で、使用したい箇所にクラスを指定すれば実装できます。 - Grd - A CSS grid framework using FlexboxFlexboxを使用したシンプルなCSSフレームワーク。
- 2016年版 フロントエンド開発フォーマットもちろんこれが絶対ではないですが、いろいろとわかりやすくまとめられているスライドなので、フロントエンドの人は一度目を通してみるといいかもしれません。
- 15 CSS Mobile Header Animations | Simbyone.comモバイルサイトでよく見る、ハンバーガーメニュークリックでメニューがアコーディオン表示されるようなナビで使える表示エフェクトがまとめられています。
いずれも基本的にCSSを利用してアニメーションを実装しています。 - なぜタイポグラフィにおいてVertical Rhythm（バーティカルリズム）は重要な手法なのか？ | デザイン | POSTDVertical Rhythm（バーティカルリズム）について書かれたエントリーで、コードを用いた具体的な実装例も紹介されています。
- [CSS]Media Queriesで使う単位はpx, Em, Remのどれが適しているか検証 -px指定は注意が必要 | コリス
- [CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック | コリスいずれもレスポンシブサイト制作時に覚えておきたいテクニックです。
- Loading Animation CSS
- Strips.css
- Simple Portfolio Filter
- App download button concept
Design / Inspiration
- The Seven Best Strategies For Using Photos in Web Interfaces写真を上手く活用したWebサイトを作りたい時に参考になるヒントがまとめられています。
- 印象的なビビッドカラーのWebサイトまとめ | WebクリエイターボックスビビッドカラーなWebサイトを作る時に参考になるデザインショーケースやカラー使用時のポイントがまとめられています。
- 404 Page Inspiration | Muzli blog素敵な404デザインのショーケース。
- 15 Free Admin Dashboard Templates (Photoshop & Sketch)フリーの管理画面やダッシュボードデザインテンプレートをまとめられたエントリーで、配布先で形式はPSDやSketchで配布されています。
- Flag Stories国旗好きな人たちが作成した、国旗をテーマにしたインフォグラフィックデザイン。
Material / Freebies
※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
Dripicons v2: 200 free icons including webfont
1,000 Free Mini Icons Pack - Squid Ink Professional Web Icons
Printable device sketch sheet templates for UI & UX designers
Magic brush Photoshop (ABR)
Service / Resource
- OpenFoundryオープンソースとして公開されているフォントを厳選して紹介しているサイトで、フォントサイズやカラーを変更して見栄えを確認することもできます。
欲しいフォントがあればダウンロードリンクなども用意されており、詳細確認などもそちらから可能です。 - Responsive Test - Flexible Grid Systemレスポンシブサイトを様々なサイズのデバイスで容易に確認できるようになります。
同じようなものは沢山ありますし、特にこれならChromeのデベロッパーツールで事足りそうですが見かけたので。
Other
- Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing MagazineECサイトにおいて無限スクロール・ページネーション・詳細表示ボタンは、それぞれユーザビリティ的にどうなのかという考察などをまとめたエントリー。
これが答えというわけではもちろんないですが、どうするか迷った時などの判断基準のひとつにしたりできそうです。 - 沈黙のWebライティング - Webマーケッター ボーンの激闘 -沈黙のWebマーケティングの続編として「沈黙のWebライティング」が公開されました。