Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

All posts by Quattro

[CSS] Creating Non-Rectangular Headers – 長方形じゃないヘッダーの作り方色々

  • Pocket
  • このエントリーをはてなブックマークに追加

最近流行りの、長方形じゃないエッジを持つヘッダーの作り方が複数紹介されてます。斜めヘッダーだけでなく、ギザギザや円形なども用意されてます。imageを使う手法、SVGを使うもの、clip-pathを使うもの、border-radiusを使うもの、transform: skewを使うものが紹介されており、最後にそれぞれのメリットデメリットをまとめてある点がとってもナイス。border-radiusを使って円形にするってのは新しいなーと思いました。

[Web Design] WebGradients – CSSで行うグラデーション指定のギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

かっちょいいグラデーション指定をサクっとコピペできるサイト。各パレットの右下にある「Copy CSS」をクリックすると、グラデーション描画のためのbackground-image指定をコピーできます。後は貼り付けるだけ。簡単! また各パレットで使われている2色のHEX指定と、PNGのダウンロード機能もあります。用意されているカラーパレットも、いかにも最近な感じでオシャレな作例が多いです。2色考えるのめんどくせぇよ、とかいう乱暴なあなたに是非。

[Web Design] Website Template Bar – 様々なWebテンプレートをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webテンプレートを各種まとめたサイト。プレーンなHTML5ベースのものに加え、Bootstrapベースのテーマ、Wordpressのテーマ、eコマースに使えるものがそれぞれカテゴリ分けされて紹介されています。最近じゃフレームワークにBootstrap使って、その上にテーマ置いて、そこからデザインカスタム始める事もよくありますしね。ちなみに自分はBootstrap v3によく使うJSやら機能拡張のCSSぶち込んだものをテンプレートみたいに使ってます。テーマ的なものはあまり使った事ないんだけど、このサイト見ると結構いろんなテーマがあるので、テーマぶち込んで楽するのもアリだなーと思いました。

[Web Design] WebSlides – 縦方向のWebスライダー

  • Pocket
  • このエントリーをはてなブックマークに追加

縦方向にコンテンツをつなげるWebスライダー。スクロールを100vh(ウィンドウサイズの縦幅いっぱい)ごとに固定する、と言った方が伝わるかも。キーボードの十字キーの上下を使ってコンテンツを閲覧します。ちょっと残念なのが、スクロールホイールが効かないという点。スライドの1ページに当たるコンテンツは、sectionごとに区切って記述するようです。個人的にはスクロールの挙動を制御する系の見せ方ってあんまり好きではないんだけど、最近こういう見せ方流行ってますしね。LPやプレゼン資料作る時なんかに使えるかもしれません。

[Misc] OnlineBikeLight.com – 自転車ライト代わりになるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

夜道で使える自転車ライトになってくれるサイト。要スマホホルダーです。サイトに行くと「Front」、「Rear」、「Flashing」の3つのボタンがあり、それぞれの目的に対応してサイトそのものが発光してくれます。Frontは白く明るく、Rearは赤に、Flashingは点滅します。よくあるチャリンコライトと同じですね。ホーム画面にブックマークしておけばすぐに使えて便利そうです。ライト忘れた日なんかに是非。

[Misc] gifMe – アニメーションGifの検索サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

みんな大好きアニメーションGifの検索サイト。任意のワードで検索する事ができ、気に入ったものをクリックすると固有のURLがコピーできるという仕組み。画像ファイルはどれもimgurのものを使っているので、アニメGifに特化したimgurの検索ツールとしても使えそうです。何回かワードを変えて検索してみたんですが、バカ系Gifが得意のようです。どうしても今すぐ犬をモフるGifが欲しい、またはサミュエル・L・ジャクソンに口汚く罵ってもらいたい、なんて時にとっても便利そうです。

[Design Resource] Designer Mill – デザイナーのための素材紹介サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

デザイナーのための様々な素材を紹介するサイト。モックアップやアイコン、UIキット、フォント、Webテンプレートなど、デザイナーにとって役立ちそうな素材が紹介されています。変わったとこだとNintendo Switchのモックアップなんかもあります。デザイナーの皆様、お役立てください。ちなみにSwitch、秋にSkyrim出るらしいので、お外でもSkyrimできる専用機としてちょっと欲しいです。

[Color] Color Supply – 色相環を使ったカラーパレットのシミュレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

色選びのお供、色相環を使ったカラーパレットのシミュレーターです。この手のツールによくある、カラースキームを選んでパレット生成するという機能に加え、イラストやテクスチャを使った簡単な作例生成まで行える点が特徴です。まずは用意されている5つのカラースキームから好きなものを選びましょう。Complementaryは対面にある色(補色色相)、Analogousは隣り合う色(類似色相)、Triadは正三角形、Split-Complementは二等辺三角形(分裂補色)、Squareは四角形の配色となります。次に色相環の中から基調とする色を選択します。するとカラースキームに沿ったカラーパレットが生成され、色相環の下にはイラストとテクスチャで作例を表示してくれます。またカラーコードの生成や、グラデーションを使った例も作ってくれます。選んだ色を使ってどんな雰囲気になるのかすぐに確認できる点がとってもナイスです。