既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc

「形態は機能に従う」（英: Form follows functions）とは、無駄な装飾は取り除き、必要から生まれた形態は美しいという、アメリカ建築の三大巨匠とされるルイス・サリバンの新しい考え方です。いわゆるモダンな「機能美」という概念を、はじめて唱えた人物です。 今回はそんなシンプルな見た目で、オシャレなデザインに仕上げるフリーフォントをまとめてご紹介します。清潔感のあるスッキリとしたスタイルが中心で、モダンな雰囲気を演出したいときにどうぞ。 詳細は以下から。 入力するだけでオシャレに魅せる、モダンなフリーフォント素材50個まとめ Lambok 書体に使われている曲線をなくした、細字のサンセリフ書体。 ※　個人利用可能 Cooper Hewitt ニューヨークにある博物館のロゴとして作成されたサンセリフ書体。 ※　個人、商用利用可能 Intro Free Font ※　個人、商用利用

ホームページを作成する際、なかなか決まらないのがメインカラーの選定です。 コーポレートサイトであれば、コーポレートカラーをメインカラーとして利用するのが最適であり、一般的です。ただネットショップやサービス紹介用のホームページの場合、扱う商材やターゲットに合わせたページ作りをしなければいけないので、色選びから始める必要があります。 人は色からの影響を受けやすく、精神的な面だけではなく、肉体的な影響まで出ることが科学的に証明されています。 色の効果を理解せずになんとなく使ってしまうと、色の持つ力を十分に発揮できない、むしろマイナスの効果をもたらしてしまう場合もあります。（※１） 今回は、色の効果を最大限活用したホームページ作成ができるよう、基本色が持つイメージ・効果をまとめました。 ホームページだけでなく、ランディングページやディスプレイ広告用のバナーなどにも応用可能なので、Web担当者、ディ

数多くあるフォントのなかでも、筆記体フォントは特に人気のスタイルです。取り入れるだけでオシャレな印象になる筆記体フォントをよく使われている方も多いのではないでしょうか。単に筆記体フォントといっても、リアルな手書き風のものから、そのままロゴとして使えそうなものまで幅広いデザインのものが存在します。 今回は、豊富な英語のフリーフォントの中から、無料でデザインに使いやすい筆記体フォントをまとめて紹介します。 ▼ノンデザイナーでも使える！デザイン簡単ツール みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】 専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。 英語の筆記体フリーフォント AggstockGravid AggstockGravi

【第2弾】少しのコードで実装可能な20のCSS小技集はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ 少しのコードで実装可能な 20 の CSS 小技集 目次画像を丸く表示1 本線のテーブル1 本線の水平線線色を指定しなくても文字色と同一色になる複数の背景画像背景画像のサイズWeb フォントを使う画像をモノクロやセピアにするリストマーカーの色を変更グラデーショングラデーションボーダーフラットだけど立体的ボタン画像をぼかすレスポンシブに対応した動画要素を真ん中に配置カンマで分けたリスト文字を縦書きフォーカスすると伸びるテキストボックスiOS でボタンのスタイルをリセット線のオフセット設定HTML・CSS の全

実践的なUXデザインやインタラクションデザイン、レスポンシブサイトに効くデザインTips、Sketchを使ったデザインフロー、Webデザイナーのためのタイポグラフィ講座など、Webサイト・アプリなどのUIデザイン/UXデザイン勉強になるスライドを紹介します。 時間をかけてゆっくり、何度でも見たいスライドばかりです。 写真: ぱくたそ 確実に良くするUI/UX設計 from Takayuki Fukatsu 実践的なUXデザインとインタラクションデザインの考え方 from CyberAgent, Inc. UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015 from Sociomedia アクセシビリティからはじめる、WebサイトのUXデザイン from Yoshinori OHTA いいデザインのために組織の一人ひとりができること f

はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ