[Web Design] Resource Cards – デザインに関する様々なリソースをまとめたサイト
デザインに関する様々な情報リソースをカテゴリごとにまとめたサイト。写真やフォント、アイコン、Photoshop、Sketch、色、プロトタイピング、HTML/CSS、Wordpress、SEO、マーケティングなどが紹介されています。これら全てに精通している人というのもそうそういないと思うので、苦手分野の調査やリソース探しの際に重宝しそうです。
Category Archives: Web Design
[Javascript] Chart.js 2.0 – データから動的にグラフ生成を行うJS
用意したデータから、Web上に動的にグラフ生成を行うJavascript、Chatr.jsの2.0がリリースされていました。2.0になって複数グラフのミックスや、新しいタイプのグラフのサポート、グラフのアニメーションなどが機能追加されたようです。導入やカスタマイズについてはこちらのページから確認することができます。
[Bootstrap] Bootstrap 4 Cheat Sheet – Bootstrap 4のチートシート
先日アルファ版がリリースされたBootstrap4のチートシートが早速公開されてます。様々な機能がカテゴリーごとに分けて紹介されており、classをクリックすると用例のHTMLが表示されます。またHTML内で簡単な説明もされているので、どういう場合に使えば良いのかなんとなく分かります。用意されているclassの勉強する際に使えそうです。
[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ
Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。
[Generator] Unique gradient generator – 画像からぼかしグラデーションを作成でき、CSSコードを取得できるジェネレーター
画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。
[CSS] imagehover.css – ホバーアクションを多数収録したCSSライブラリー
マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。
[Web Design] Responsive Test – レスポンシブレイアウトのテストツール
レスポンシブレイアウトの動作確認ツール。確認したいサイトのURLを放り込むだけで、様々なデバイスでの表示シミュレーションができます。指標としてはXLがPC、LGがiPadのランドスケープ、MDがiPadのポートフォリオ、SMがiPhoneのランドスケープ、XSがiPhoneのポートフォリオという感じです。Bootstrapとかの表示切り分けclassと基本的に同じ命名ルールなので分かりやすいです。サクっと複数デバイスでの確認をしたい時に便利ですね。
[Generator] Landscape – ソーシャルメディア用の様々なサイズの写真を生成してくれるサイト
各種ソーシャルメディアで使われる、様々なサイズの画像にリサイズできるサイト。例えばFacebookのカバー写真（プロフィール欄の一番デカいアレ）やプロフィール写真、Pinterestのストリーム用の画像などを、掲載するのにちょうど良いサイズにリサイズして、かつトリミングも任意で行えます。画像ファイルをサイト内に放り込めば、どのソーシャルサイト用のものを作るかを聞かれ、その後どの部位に使うのかを聞かれます。これらをまとめて行う事もでき、最終的には複数の画像ファイルがまとまったZipファイルをダウンロードできるという仕組み。対応しているソーシャルメディアはTwitter, Facebook, Instagram, LinkedIn, Google +, Pinterest, Youtubeの7つ。またCustomという項目を選ぶ事で、縦横ピクセルを個別に指定する事もできます。画像編集ソフトが手元にない場合や、「いちいちサイズ調べるのメンドくせぇ！」という横着な方にはとってもナイスなサイト。