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

Browse By

Tag Archives: WebDesign

[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やプレゼン資料作る時なんかに使えるかもしれません。

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

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

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

[CSS] Keiyaku CSS – 日本の契約書のためのCSSライブラリ

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

Markdownで書かれた契約文書を、適切な印刷書式にスタイリングするためのCSSライブラリ。契約書でよく見る、第何条何項みたいな書式を、マークダウン形式で簡単に記述することができます。HTML書かなくてもマークダウンで簡単に書けるという点も魅力です。契約書以外にも、例えばサイト内の利用規約のスタイルとしても使えそうです。お硬い系の記述ってどうしても必要ですからね。

[CSS] Sloped edges with consistent angle in CSS – 斜めのコンテンツ区切り法色々

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

斜めにコンテンツを区切る手法を複数紹介した記事。記事内では3つのやり方が紹介されており、1つはボックス要素全体を傾けて、中のコンテンツだけ傾きを戻すというもの。もう2つはボックス要素の後(::after)に空コンテンツのボックス要素で刈り取るというもの。最後はclip-pathのpolygonでクリッピングマスクするというもの。エッジ部分を斜めにするだけでもこれだけのやり方があるんですね。手法によって対応できるブラウザも変わってくると思うので、斜めエッジやりたい時の参考になりそうです。

[Web Design] AOS – Animate On Scroll Library – スクロール芸のライブラリ

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

スクロールイベントをきっかけに、アニメーションしながら要素を出現させるという、いわゆるスクロール芸のライブラリー。JSとCSSを導入して、あとはブロック要素にゴニョゴニョ書けば実装できるようです。フェイドやフリップ、ズームなどの各種アニメーションが用意されています。こういうの流行ってるしちょっとやってみたい、的なノリでもサクっと導入できそうでナイスです。

[Chrome Extension] CSS Peeper – シンプルなCSSビューアー

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

Chromeで表示したWebサイト内のCSS指定を確認できるChrome用機能拡張。Chrome純正のデベロッパーツールに比べて、よりデザイナー寄りのシンプルな作りになってます。例えばサイト全体で指定されているカラーパレット一覧とか。あとクリックした場所に適用されているCSS一覧なんかも出せます。ただしそれがどのCSSファイルの何行目にあるかって所までは掘り下げられないので、コーディングする際にはちょっと役不足かもしんない。コーディングをしないデザイナー向けといった感じでした。

[CSS] Pure CSS Parallax Websites – CSSだけで実現するパララックススクロール

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

CSSだけで実装できるパララックススクロール。2014年に書かれて15年に追記されたようなのでそれほど新しい記事ではないけれど、こんな手法もあるんやなー思ったので紹介。transform: translateZを使ってZ軸方向にオブジェクトを移動させてパララックススクロールさせているようです。これなら対応ブラウザの条件さえクリアすれば、わりとサクっと導入できそうです。