ブログBLOG

SVGの書き出し方【よくある失敗例】+ IllustratorからPhotoshopにシェイプをコピー

SVGは拡縮可能なベクター画像です。 PhotoshopでもIllustratorでも、jpgやpngと同じようにアセット機能で書き出しができます。 ですが、「中身がパスではなく画像になっている」という問題がよく起きるので、本記事ではよくある失敗例をまとめてみました。 上手くいかないあるある 「 ...

[jQuery]スクロールに応じてホワッと表示させる効果（スクロールエフェクト）を簡単に実装する

サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。 そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必要が ...

評価制度の再設計（社長日記 2017年6月）

BRISKでは、3か月毎に数字目標を設定し その数字が目標に届いたかどうかでインセンティブを支給しています。 3月、4月、5月の3カ月は新メンバーが入った事、ゴールデンウイークがあった事 等から難しいと思っていましたが、目標としていた数字に大きく到達致しました。 運も味方したと思っていますが、 ...

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する

タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。 js部分だけだと６～７行で記述できてしまいます。 ちなみに、このページのタブ切り替えは自前で作ったjsです。 ...

GIFアニメーションをつくってみよう（サンプルPSDダウンロード）～その1～フレームアニメーションとビデオタイムライン[PhotoshopCC]

動きのついた広告やWebサイトは目を引きますよね。 GIFアニメはHTMLをサポートしている媒体なら再生ができる手軽なデータなのでWEB広告やサイトの要素でも使われているのを見かけます。言葉や静止画では伝わりづらいことも動画ならすぐに伝わるので説明にも便利なので、選択肢として作成スキルがあ ...

SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]

最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 ...