アジケでフロントエンドエンジニアを始めて10か月の小松です。 今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。 実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。 画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。 目次 ・SVGとは？ ・線画アニメーションを実装するために必要な技術 ・サンプル実装 1. SVGとは？ 「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用) なんだかよくわかりませんが凄くざっくり

どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘

「HTML5」と並びよく目にする*「CSS3」*では、従来のCSS(スタイルシート)にはない様々なプロパティが実装されています。 本来であればJavaScriptで実装するような*「アニメーション(animation)」をはじめ、floatを使わなくても段組ができる「フレックスボックス(flexbox)」、文字やボックスに影をつける「シャドウ(shadow)」*など、ダイナミックな動きから複雑な装飾まで、あらゆることが短いコードで実装可能になりました。 しかし、ひとくちに「CSS3」と言っても様々なプロパティがありすぎて、実際蓋を開けてみると普段から使い慣れているプロパティしか実装していない方も多いのではないでしょうか。 そこで今回は、あまり知られていない(かもしれない)けれども、案外便利なCSSプロパティをまとめて19個ご紹介します。 「なるほど！」というものがあれば、実作業でも活用して

あなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか？ そこで、郵便番号を入力したら住所が自動表示されるギミックを採用することが重要です！フォームのユーザビリティは入力完了率やコンバージョン率に大きく影響するからです。事実、フォームの平均離脱率は60%を超えていると言われ、その理由の多くが「入力が多い・面倒・分かりづらい」です。 より多くの集客に力を入れることも重要ですが、入力フォームを使いやすくし、購買プロセスまで至ったお客様に対して確実にコンバージョンしてもらうことのほうが費用対効果も圧倒的に高いですよね。 そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します！ そもそも郵便番号から住所を自動表示とは？ 郵便番号から住所を自

あなたは向上心の高い優秀な学生やキャリア採用者(中途採用者)を獲得するための、効果的な採用サイトの制作方法・考え方をご存知ですか？Webを活用した優秀な人材集めが上手くいかず悩んだり、どういったレイアウト・デザインが最適で、どのようなコンテンツアプローチをすることが効果的なのか悩んでいませんか？ 結論として、採用サイトは応募者の目線に立ち、学生と転職者に異なるコンテンツアプローチをすることが重要です。なぜなら、学生と転職者では就職観や企業選択の決め手が大きくことなるからです。 事実、学生の企業選択の決め手第一位は「やりたい仕事ができる会社」で、転職者は「給与や福利厚生が良い」です。(参考：2015年卒マイナビ大学生就職意識調査・マイナビ2014年仕事に関する意識調査) いまや企業が人材を選ぶのではなく、求職者に企業が選ばれる時代です。ですから、ただ募集事項を掲載するのではなく、自社の働きが

こんにちは。デザイナーのハルエです。 最近の流行は「トシムリン」です。あぁ次こそ生で見たい・・・。 CSS3でアニメーションを作成するとコードが肥大化して複雑になるため、ライブラリやオンラインツールを使用して作成している方も多いと思います。 簡単なアニメーションで言えば、「transition」でボタンのマウスオーバーに背景色をアニメーションさせたり、画像をフェードさせたり拡大・縮小させたり・・・などなど。 「animation」を使えばさらにできることが広がるのですが、まだまだwebkitブラウザ以外では正常に動作しないのが難点です。 今回は、CSS3アニメーションを一瞬で設定できちゃうオンラインツールをまとめて紹介します。もう知っている人もたくさんいるとは思いますが、まだ使ったことのない方はぜひ一度試してみてください。 CSS3アニメーションを実装！オンラインツール7選 Animate

数年前まで少ない印象だった日本語フリーフォントですが、最近では少し探すだけでひと通り漢字も利用できて高品質なのにも関わらず商用利用可能というフォントも数多く出てきます。 今回はそんな数ある日本語フリーフォントの中から、商用利用も可能で個人的によく利用させてもらっていたり覚えておきたいと思ったものを紹介します。 紹介しているフォントはいずれもエントリー公開時点では商用利用可能となっているものですが、今後変更される場合もあるので、実際に使用する際はライセンス等を各自で再度確認してください。 ロゴたいぷゴシック ロゴデザインや見出し向けのフリーフォントで、漢字も含まれています。 文字の角が多少丸まっていることで、キッチリしすぎてないのも特徴です。 スマートフォントUI 全体的に長体（約90%のコンデンスド）になっており、グリッドを意識したシステマチックなデザインになっています。 漢字もIPAex

様々なバリエーションのメニューをまとめた「110 CSS Menu」がアイデア出し等で役に立ちそうなので忘備録。100種以上のメニューがありカテゴリー（Accordion・Circular・Dropdown・Fullscreen・Horizontal・Mobile・Off-Canvas・Side・Toggle・Sliding）も豊富なので、新しいアイデアが生まれるかも知れません。