[CSS] CSS conic-gradient() polyfill – CSSで描画する円錐グラデーション
CSSで円錐グラデを描画する方法についての解説。conic-gradientって聞いた事ないなーと思っていくつかのブラウザで確認してみたら、FirefoxとChromeはOK、Safariでは描画できませんでした。これ使えば例えばこんな描画なんかもCSSだけでできるようです。工夫次第では円グラフや放射線なんかも描けるみたい。
Category Archives: Web Design
[Web Design] LAPA – Landing Pages Collection – ランディングページのデザインギャラリー
ランディングページ（LP）のデザインギャラリー。世の中の様々なLPをTumblr使って紹介しています。わりとメジャーどこが多く、テクノロジー系のサイトがほとんどですね。デザインやアニメーション、スクロール芸などに凝ってるものが多いです。LPは人の印象に残ってなんぼなので、デザインする時の参考になりそうです。
[Web Design] Tools for Structuring & Optimizing Your CSS Code – CSSを最適化できるオンラインツール
CSSコードを最適化できるオンラインツールを集めた記事。最適化と言うても実際には色々ありまして、コードフォーマットを適用するもの、余計な空白やインデント、改行などを消してコードサイズを抑えるもの、重複指定などを1つにまとめて圧縮するものなど色々揃っております。また1度圧縮されたコードを、再度読みやすいコードフォーマットが適用された形に戻すものなんかもあります。汚いCSSコードを書いてしまった時の懺悔にも使えるかもしれません。
[Web Design] Simple Sharing Buttons Generator – シェアボタンジェネレーター
シンプルなシェアボタンのジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, Pocket, Reddit, LinkedIn, WordPress, PinboradといったメジャーどころのSNSに対応しています。それに加え「友達にメールする」的なボタンも生成できるようです。ベースデザインの指定、SNSの選択、ボタンを貼り付けるサイトの情報を一通り入力すると、ライブプレビューとソースコードが出力されるので、あとはそれを貼り付けるだけ。デザインがシンプルで、複数のSNSボタンをまとめて出力できるので使い勝手が良さそうです。
[Web Design] NavNav – ナビゲーション・メニュー作例のギャラリーサイト
世の中のWebサイトから、クールなナビゲーションだけを持ってきて紹介するデザインギャラリー。各記事はどれもCodePenにリンクしているので、リンク先で動きとソースコードを確認する事ができます。ナビゲーションに特化しているだけあって、様々なレイアウト、動きの作例が確認できるので、サイトナビゲーションの仕組みを考察する際に使えそうです。ちなみに右上のハンバーガーメニューからはナビゲーションの種類の絞り込みもできます。
[Web Design] 404 not found – 404ページのデザインギャラリー
クールな404 Not Foundページばかりを集めたギャラリーサイト。キーワード検索や、時期・タグによる抽出なども行えます。404ページってわりとネタに使われる事多いけど、ちゃんと本来ユーザーがランディングすべきページにナビゲートする必要もあるので、こうした作例集は色々と勉強になりますな。
[CSS3] 35+ Creative CSS3 Animation Examples For Inspiration – CSSを使ったクールなアニメーション作例まとめ
CSS3を使ったクールなアニメーション作例を集めた記事。ナビゲーションのマウスホバーアクション、ローディングスピナー、フォームパーツ装飾、マウスを使ってグリングリン動かす系のものなどもあります。基本的にボタンのマウスホバーアクション芸が多いですね。ちょっと動かすだけなら導入も楽だし、ユーザーにも「おっ」って思ってもらえるので使い道は多そうですな。
[Prototyping] 24 Free Mockup and Wireframe Tools for Web Designers – Webのモック制作やワイヤーフレーム描きに使えるツールまとめ
Webのモックアップ制作やワイヤーフレームを描く際に使える、便利なオンラインツールをまとめた記事。ドロー系のグラフィックツール、パーツのテンプレートが揃ったモックアップ制作ツール、サイトマップ作るのに便利そうなツリー作成ツールなど色々あります。この手のオンラインツールはローカルアプリと比べても機能的に遜色が無い場合も多く、またオンラインでの共有もしやすいのが便利ですね。