こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。 その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力 今回はAdobeXDを使用したsvg画像の出力を行います。 書き出す際の設定は下の画像のように 形式→svg スタイル→内部CSS 画像を保存→リンク と設定します。 ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや

酔っ払ってガチャを回すと当たることがよくあるgamiです。 さて、最近は写真や映像を大きく使ってるサイトをよく見かけますがイラストもいいぞ。というわけでイラストが楽しいサイトを厳選しました。チェケラ！ おかもと歯科 歯科に限らず医院系のサイトは清潔感のある院内写真や診察風景などを載せます。 このサイトではコーラルピンクを基調とした口のイラストのアニメーションで優しさ、親しみやすさが感じられます。ロゴがかわいい。 FESSIダンススクール ダンスの写真・映像は映えます。ドカンと乗せれば画面も持ちますしインパクトがあります。 しかし優しいイラストのアニメーションを用いることで暖かさが感じられとっつきやすさも出てくるのではないでしょうか？ もう片方もマウスオンで動きますのでぜひサイトにてチェックしてみてください。 イベントスタジオ イベントと一言いっても音楽フェスや展覧会、トークセッションなど幅

TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ