デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、レイヤーについてまとめました。

目次

• 描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない
• 不要なレイヤーは削除する
• セクション・パーツごとにグループ化する
• レイヤー名は関連する名前にする
• 通常時・ホバー時のデザインをわかりやすくする
• レイヤーをロックしない（場合による）
• 最後に

描画モードはデフォルト以外（オーレバーレイや乗算など）は使わない

パーツとして書き出すときに、表示通りのデザインのまま書き出せないため、特別な理由がない限りは使わないでおきましょう。代替策としては、透明度で対応するのがベターかと思います。

不要なレイヤーは削除する

非表示レイヤーがあると、必要なのか不要なのかわからないのと、データ容量も重くなりますので気をつけてください。

セクション・パーツごとにグループ化する

１、セクションごとにグループで分ける

ヘッダー、新着情報、アクセス、フッター…などという感じで、デザイン順と同じようにグループを作りましょう。

２、パーツ系は、まとめてグループにする

例えばボタンを作った場合、「ボタンの背景」「文字」「矢印アイコン」これらの情報は同じ１つのグループとして まとまっている方がわかりやすいです。また、画像書き出しが必要な場合も、すでにグループ化されていると まるごとアセット書き出しもできて便利です！

レイヤー名は関連する名前にする

「新しいフォルダ」「○○のコピー」のようなレイヤーが並ぶと、全くわからないです。名前をつけるのが難しいものは、無理につける必要は無いと思いますが、なるべくレイヤー名はわかりやすいものがいいと思います。

通常時・ホバー時のデザインをわかりやすくする

ホバー時のデザインには、レイヤーにカラーラベルやコメントをつけておいたり、仕様書にまとめておくなど、コーダーに伝わるように準備しておくと良いと思います。

レイヤーをロックしない（場合による）

あちこちでロックがかかっていると、どこでロックがかかっているのか確認したり、わかりづらいため。デザインデータを渡すときには、ロックの数は最小限にした方が良いと思います。

最後に

レイヤー整理は、ある程度デザインが固まった段階でする。など、自分のタイミングがあれば無理せずできると思いますので、ぜひ意識してやってみてください♪

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、テキスト周りの内容を中心にまとめました。

目次

• 文字数が増減しても大丈夫なレイアウトにする
• 文字サイズは整数にする
• デバイステキストで改行（brタグ）がいらないところでは、任意改行しない
• 文字の体裁を統一する
• 文字は最低でも10px以上にする（2倍デザインなら20px以上）
• 最後に

文字数が増減しても大丈夫なレイアウトにする

１行のときは大丈夫だけど、これが複数行になったらどうなるんだろう？と考えてしまうこともあります。どちらでも対応できるレイアウト、もしくは参考デザインが用意されているとよりスムーズです。

文字サイズは整数にする

ブラウザごとに小数点の扱い方が違うので（切り捨て、切り上げなど）、表示が異なってしまいます。

デバイステキストで改行（brタグ）がいらないところでは、任意改行しない

画像内の左の例ですが、手動で改行したテキストをエディターに流し込むと、改行された状態で貼り付けられます。そのため、まずは改行を消す作業が必要になります。
また、本当に改行は必要かもしれないという部分もあるときに、混乱してしまう可能性があるため気をつけましょう。

文字の体裁を統一する

フォント・サイズ・行間・ウェイトなど、同じレイアウトは体裁を揃えましょう。少し違うのがあると、あえてなのかミスなのかわからない場合があるため。

文字サイズは最低でも10px以上にする（2倍デザインなら20px以上）

スマホのデザインデータでよくありましたが、2倍サイズのデザインのはずが文字サイズ10pxという…。これ実装できたとしても5pxになるので読めませんよ（；；）という悲しいことになるので、気をつけましょう。

最後に

いかがでしたか。会社により やり方が違う場合もあるかと思いますので、不安なところはコーダーさんに確認されると良いと思います。細かい事ばかり書いていますが、参考になりましたら幸いです。

デザインとコーディングの両方をするようになって気づいたこともあり、コーディングをしないデザイナーへ向けてポイントをまとめました。
※フォトショップをベースにお話しますが、イラレのことも少し書きます。

今回は、デザインを作り始める入る前に知っておきたいポイントを中心にまとめました。

目次

• カラーモードはRGB
• 単位はpx(ピクセル)
• 実寸サイズで作る
• 整数を使う
• 2倍サイズのデザイン作成のときに、奇数を使わない
• 最後に

カラーモードはRGB

モニターはRGB（赤緑青の三原色）で表示しているのに対し、印刷物はCMYKです。詳しい説明は省きますが、表示できる色数が違ので 途中でCMYKからRGBに変更すると色味が変わってしまうので、必ずはじめに設定しておきましょう。

新規作成の画面

単位はpx(ピクセル)

モニターはpxで表示しているためpxにしましょう。mmやptなどで作ると、pxに変換したり小数点が出てしまうなど作業が増えてしまいます。

Photoshopの環境設定

上部メニュー内の環境設定から、pxに設定しておきましょう。

実寸サイズで作る

PCは実寸サイズ、SPは倍サイズなどで作りましょう。
※もちろんRetina対応ならそれに対応したサイズで。

画面サイズそのまま（iphone7なら375px）で作ってしまうと、倍サイズで画像書き出さないといけなかったり、そのときに画像サイズが足りなくて荒れてしまう…なんて悲劇もあるかもしれないので、お気をつけください。

整数を使う

特にIllustratorのデータで多かったのですが、座標やオブジェクトのサイズに小数点がついてるのがありました。
小数点を使うと、オブジェクトの端がぼやけてしまったり、書き出しのときに「切り上げ or 切り捨て」によりサイズがずれたり、スライスに時間がかかってしまいます。イラレを使うときは、「ピクセルにスナップ」にチェックをお忘れなく。

※よくない例（小数点がいっぱい‥）

2倍サイズのデザイン作成のときに、奇数を使わない

スマホ用の2倍サイズのデザインであったのですが、本来 2倍サイズで作っているので、4pxの線なら 実装時は半分の2pxに。30pxの文字サイズなら15pxの表示になります。

ですが、文字サイズが10px（5pxは実装できないし、できても読めない）だったり、線の幅がなぜか1px（奇数）で作られていたり。ミスなのかあえてなのかわからない場合もあるので、お気をつけください。文字サイズの対策として、ぜひ実機確認してみて 可読性のチェクもしましょう(^^)

最後に

基本的なことが多く細かい内容でしたが、自分でも気をつけたい部分もたくさんあります。
まとめ出すのたくさん出てきたので、また次回！

web業界では、セミナー・イベント・勉強会・もくもく会など 色々あります。
今回は、セミナーに興味あるけど行ったことない方に向けて おすすめのセミナーを紹介します！

おすすめのセミナー

CSS Nite

開催情報：CSS Nite

「CSS」と書いていますが コーダー向けという訳ではなく、ディレクターやデザイナー向けなど、いろんなテーマを取り上げています。
また、セミナー会場に行けなくても、「ビデオ参加」できるセミナーもあります。
国内いろんな場所で開催されているので、お近くの会場を探してみてくださいね。

Re:Creator’s Kansai

Re:Creator’s Kansai （リクリ）

関西で開催されているセミナーになります。内容も色々ありますが、７年連続で開催されている「Webデザイントレンド」セミナーは、見応えあって個人的におすすめです。
フォローアップ参加（遠方の方や、当日都合がつかない方向けのスライドと音声による参加方式）が設けられているものもあります。

イベント

WordCamp

WordCamp Japan – WordPress イベント「WordCamp」の日本語公式サイト

WordPressを使っている方におすすめイベントです！これから開催予定のWordCampを記載します。タイムテーブルをみ見れると雰囲気がわかりやすいと思います。

• WordCamp Niigata 2019
• WordCamp Tokyo 2019
• WordCamp Osaka 2019

フロントエンドカンファレンス

フロントエンドに関わる方へ向けたイベント・コミュニティです。デザイナーもエンジニアもチェックしてみてください。

• フロントエンドカンファレンス福岡 2019
• 関西フロントエンドUG

PHPカンファレンス

2019年に開催される全国のPHPカンファレンスのまとめ

PHPエンジニアさんはチェックしてみてください♩

セミナーを検索できるサイト

connpass – エンジニアをつなぐIT勉強会支援プラットフォーム

connpass

Peatix (ピーティックス）| グループ・イベント管理、チケット販売・集客サービス | Peatix

Peatix

セミナー・勉強会・イベント管理ツール | Doorkeeper

Doorkeeper

Meetup

Meetup

WordPress (ワードプレス)のコミュニティになります。全国各地でセミナーなどがあります。WordPressに沿ったテーマになっているので、まずは興味があるテーマのときに参加してみると面白いと思います。

TECH PLAY［テックプレイ］ – IT勉強会・セミナーなどのイベント情報検索サービス

TECH PLAY

Facebook・Twitter

セミナーの主催者や 参加者も含め、SNSで発信している方が多いため、タイムリーにセミナー情報を知ることができます。
FBのセミナーのコミュニティをフォローしておくのも良いと思います。

• デジタルハリウッド大阪校（梅田・茶屋町）スクール
• アサカツヨルカツ【デジタルハリウッド渋谷校】
• CSS Nite
• Re:Creator’s Kansai

最後に

ここに載せているもの以外にも、たくさんのセミナーや勉強会などが 全国各地あります。お一人で参加している方も多いですし、不安な方はお友達と一緒でもいいと思います。ぜひ、参加してみてください♩
余談ですが、セミナーでも名刺交換できる時間がある場合もあり、簡単な個人名刺でも結構ですので　あった方が便利かな？と思います（^^）※もちろん無くても大丈夫です

最近はXDを使っているところも、少し増えてきたように思います。
XDでスライスするのに必要な、基本的なやり方をまとめておきます！

目次

• 基本的なスライス手順
• 書き出すときの設定
• 余白込み（好きなサイズで）でスライスする手順
• 最後に

基本的なスライス手順

１、上のメニューから、表示＞レイヤー（⌘Y）もしくは、左下のマークをクリックして、レイヤーパネルを表示します。

２、スライスしたい写真を選択する

３、写真のレイヤーを選択されているのを確認し、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

４、お好きな設定で書き出してください。

書き出すときの設定

jpg書き出し

フォーマット:JPG
画質：100%（任意）
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

png書き出し

フォーマット：PNG
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

svg書き出し

フォーマット：SVG
画像を保存：埋め込み
ファイルサイズを最適化

余白込みや、好きなサイズでスライスする手順

１、長方形ツールで、書き出したいサイズの四角を作る。

２、レイヤーの順序を、四角（上）、写真（下）にする。

３、四角と写真を両方選択して、オブジェクト＞シェイプでマスク（⌘+shift+M）する。

４、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

５、お好きな設定で書き出してください。

最後に

いかがでしたか？
今回紹介したことをおさえれば、なんとかスライスはできるかな？と思います。
XD案件が今後も増えるかもしれませんので、慣れていきましょう(*^^*)

画像書き出しの段階で、コーディングを意識したスライスができていますか？

というのも。早い段階でコーディング部分までイメージしておかないと、後々 余分なCSSを書くことになったり、スライスをやり直すことになりかねません。
今回は、コーディングしやすいスライスのポイントをまとめてみます。
※フォトショップをベースに書いています。

スライス作業に入る前に

コーディングをするのは誰？

もし、他の方がコーディングをする場合は、自分とは違うコードの書き方かもしれません。スライスする前に要望など確認しましょう。

スライスツールかアセット書き出しか

アセット書き出しはとても便利ですよね！デザインが確定していて、アセット書き出しを想定して作られたデータならオススメです。

でも、例えば余白込みでスライスしたいとか、のちに写真差し替えがある場合などは、アセット書き出しを使わない方が効率が良い場合もあります。

それぞれのメリット・デメリットを確認しておくのがベストです。

画像書き出しするときのポイント！

同じ種類の画像は、「横幅」や「高さ」を揃える

例えば、ナビに使っているアイコンなど　サイズが統一されているものは、高さだけ もしくは横幅だけ統一する。もしくは高さも横幅も両方揃えておくと、CSSで一括指定ができたり、画像が扱いやすくなります。

ファイル名はわかりやすく、規則性を持ってつける

ファイル名をみて、「メインビジュアルに使われている写真」、「メニューに使われいてる矢印」ということが、予測できるファイル名がおすすめです。
ファイル名のつけ方にルールを作っておくと、ファイル名をつける時に悩みませんし、画像が探しやすくなります。

例）nav_icn_home.png（画像が使われる場所+画像の種類+補足+拡張子）
ナビのホームのアイコン画像かな？と予想がつきますよね。このように、ルール化しておくのがオススメです。

ファイルの種類（jpg、png、svgなど）は正しく選ぶ

透過が必要な場合はpngを使う。写真はjpgにするなど、必要に応じて適したファイル形式を選びましょう。データ量の節約にもなります。

コーディングで実装する箇所を、事前に考えておく。

「ここの文字は画像だけど、この文字はデバイステキストで実装する。」という具合に、
矢印やハンバーガーボタン・角丸・シャドウ・グラデーションなども、CSSで実装するのか否か、事前確認しておきましょう。

リピートできるものは、リピートできる最小サイズで書きだす

大きな画像でリピートすると重くなるので、リピートできる最小サイズでスライスしましょう。

スライスしたデータ（PSD・AIなど）は残しておく

後から、修正や差し替えがあったり、再度書き出しが必要になることもあります。もとのスライスデータを流用できる場合もあるので、データは残しておくのがベストです。

レスポンシブやスマホ対応するときのポイント！

画像サイズは偶数にする

奇数になっていると、ブラウザによって画像の見え方が変わるため、例えば１px見切れたり、画像が滲む原因になります。割り切れるサイズ（偶数）にしておくのがオススメです。

画像の書き出しサイズを確認しておく

レティーナ対応で２倍、３倍サイズなどで書き出すのか？事前に確認しておきましょう。

最後に

いかかでしたか？
今回紹介したことが、スムーズにコーディングするためのヒントになれば幸いです。それでは、よきコーディングライフを♪

CSSの中央寄せでつまずいた経験、みなさんありますよね…？
こちらの記事「CSSで中央寄せにする方法まとめ」を見に来てくださる方が多かったので、つまづいてる人も多いんだと思います＞＜

やり方もいっぱいあって、状況によってやり方も変わりますし。最近では、flexboxもよく見るようになりましたよね。

ということで、先ほどの記事に追加という形で、紹介していきます♪

Flexboxを使った中央寄せ

Flexboxなら、CSSの量も少なく、インライン要素もブロック要素でもOK！
また、中央に寄せたい要素のwidth指定がなくても使えるため、レスポンシブしやすいです。

注意点としては、flexboxのプロパティを使う場合は、diplay:flex;を親要素にかける必要があること。 また、IE10までの古いブラウザなどは非対応になります。

ボックスを中央寄せ

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
            .wrap{
              display: flex;
              justify-content: center;
            }

            /* ボックス */
            .wrap .centerBox{
              width: 100px;
              height: 150px;
              background-color: hotpink;
            }
          </style>
          

テキストの中央寄せ

          <div class="wrap">
            <p class="txt">中央寄せ</p>
          </div>

          <style>
            .wrap{
              display: flex;
              justify-content: center;
            }

            /* テキスト */
            .wrap .txt{
              color: hotpink;
            }
          </style>
          

上下中央にする（おまけ）

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
          .wrap{
            /* 枠 */
            height: 200px;
            width: 100%;

            display: flex;
            justify-content: center;
            align-items: center;
          }

          .wrap .centerBox{
            width: 100px;
            height: 100px;
            background-color: hotpink;
          }
          </style>
          

transformを使った中央寄せ

こちらも、インライン要素、ブロック要素どちらでもOK！
また、中央に寄せたい要素のwidth指定がなくても使えるため、使いやすいのですが、親要素のサイズ幅を超えるとはみ出してしまうので気をつけてくださいね。

今までpositionを使った中央寄せは、要素のwidthの半分を計算してmargin-leftなどで寄せていましたが、transformを使うことで、同じことが簡単にできます。

ボックスを中央寄せ

          <div class="wrap">
            <div class="centerBox"></div>
          </div>

          <style>
            .wrap{
              /* 枠 */
              height: 150px;
              width: 100%;

              position: relative;
            }

            /* ボックス */
            .wrap .centerBox{
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50% , 0);

              width: 100px;
              height: 100px;
              background-color: orange;
            }
          </style>
          

ボックスを上下中央にする（おまけ）

          <style>
            .wrap{
              position: relative;
              height: 200px;
              width: 100%;
            }

            /* ボックス */
            .wrap .centerBox{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50% , -50%);

              width: 100px;
              height: 100px;
              background-color: orange;
            }
          </style>
          

最後に

やり方もいろいろありますが、その時の状況によって合っているやり方を考えるのが大切です。
PC用、SP用、もしくはレスポンシブが必要なのか・・・という部分も含め、わからないときは実際に試しながらやってみましょう♪

ドロップシャドウや、光彩など、個別で影の向きを設定したいのに、
全部一緒の向きになってしまって、困っている方いませんか？

こんなお悩みの方は、レイヤースタイルにある
「包括光源を使用」のチェックをはずしてください！
それだけです！

包括光源にチェックするとどうなるの？

“包括光源にチェックが入っているもの全て、
Photoshopに設定している角度が適用されます。”

まとめ

設定してたはずのシャドウが、他で設定したものに引っ張られて
すごい向きになってる・・・なんて恐れもあるので、
包括光源についてチェックにはお気をつけくださいね。笑

【JQueryライブラリ】簡単に高さを揃えられるjquery.tile.jsを使ってみよう。

こんばんちわ、やのっぱです(´・ω・｀)v

今回は良く利用するJQueryライブラリ、tile.jsの使い方をお話していきます。
それではやっていきましょう。

まずは設置から

まずはダウンロードし、設置をしていきます。

配布元のjquery.tile.js Demosから【Download compressed】(compressedはmin化、uncompressedは展開された状態です)を右クリックで保存、またはクリックして出てきたソースを保存またはコピペしてjquery.tile.jsの名前で保存し任意のフォルダに格納します。

次に、jQueryとjquery.tile.jsをhead内に読み込み、使用出来るようにします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="格納場所のパスをいれます/jquery.tile.js"></script>

これでとりあえず読み込まれ使用出来る状態です。

このようなHTMLを用意してみました。
画像とテキストの入ったliですね。
これにtileを適応すると、一番高さがあるものに揃います。

<ul class="testList clearfix">
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキスト</p>
	</li>
	<li class="testBox">
		<p class="img"><img src="http://placehold.jp/150x150.png"></p>
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</li>
</ul>

指定class全てに適用

使用方法は至って簡単です。
head内にこちらを記述します

<script type="application/javascript">
  $(function(){
    $(".testBox").tile();
  });
</script>

これで、class .testBoxがついている要素全てが一番高い要素の高さになります。
しかし、これだと具合がわるいこともしばしばです。
なので、グループ分けをすることもできます。

個数を指定して適用

<script type="application/javascript">
  $(function(){
    $(".testBox").tile(4);  
  });
</script>

このように.tile();の()の中に数字をいれることで数字の数ごとで揃わせることができます。
4であるならば、.testBox4つずつ揃うようになります。

テキストのみの場合はこれでOKです。
上記のHTMLのように画像が入っているとなると、多少付け足しが必要になってきます。
画像が入っていると、画像を読み込む前にtile.jsが実行されてしまうからです。
付け足したのがこちらです

画像を含む場合の記述

<script type="application/javascript">
  $(window).load(function(){
    $(".testBox").tile(4);
  });
</script>

$(function～のところを$(window).load(function～とつけたすことで、画像を読み込んでから実行となります。
これで、画像を含んだ場合でも崩れることはなくなります。
簡単な記述で実装でき、とても便利なのでぜひ使用してみてください。それではっ

おはこんばんちわ、あなたのわたしのやのっぱです(´・ω・｀)ﾉ

CSS3とかで写真に装飾つけるシリーズも第三回となりました。
今回はhover時のエフェクトを付けてみようとおもいます。

CSSで作るので、例のごとくレガシーブラウザ(IEとかIEとかIEのIE9以前)には未対応なのですが・・・
使う場面があることを信じて、作っていくのです。

それでは今回もブランケットに包まるさんにご登場していただきましょう。
widthは300pxにしてあり、box-sizingと枠を追加しています。
枠は今回paddingではなく、エフェクトの影響を避けるためborderで白枠をとっています。
境界線はbox-shadowで作っています。
また、今回はエフェクトがはみ出ないようoverflow:hidden;をかけています。

<style>
	  .img01 {
      position:relative;
      overflow:hidden;/* はみ出し防止 */
	    width:300px;
	    margin:0 auto;
	    box-sizing:border-box;/* borderとpaddingをwidthに含める */
	    -moz-box-sizing:border-box;
	    -webkit-box-sizing:border-box;
	    -ms-box-sizing:border-box;
	  }
    .waku01{
      border:7px solid #fff;
      box-shadow: 0 0 1px 0 #aaa; /* 枠の外の境界線 */
	  }
	  .img01 img {
	    width:100%;
	    height:auto;
	    vertical-align:top;
	  }
</style>
<p class="img01 waku01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

では、まずは簡単にマスクをかけたようなエフェクトを作ってみます。

<style>
	  .anime01:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#000;
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;/* all(変化させたい要素) 0.3s(変化する早さ) linear(変化の動き:linearは一定の早さ) */
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime01:hover:before {
      opacity:0.3;
    }
</style>
<p class="img01 waku01 anime01"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

次にふんわりとフォーカスしたようなエフェクトを作ってみます。

<style>
	  .anime02:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      -webkit-transition:all 0.3s linear;
      -moz-transition:all 0.3s linear;
      -ms-transition:all 0.3s linear;
      transition:all 0.3s linear;
	  }
    .anime02:hover:before {
      opacity:1;
    }
</style>
<p class="img01 waku01 anime02"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

ベタのマスクを乗っけるよりも、こっちのほうがおしゃれにみえますね。

次にちょっと余計な動きを入れてみました。
目にうるさいのでおすすめはしませんが、このような動きも付けることができます。

中央で回転

<style>
	  .anime03:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      border-radius:100%;
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotate(180deg) scale(0);/* 要素を回転表示させる scale：拡大縮小値 */
      transform: rotate(180deg) scale(0);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime03:hover:before {
      border-radius:0%;
      -webkit-transform: rotate(0deg) scale(1);
      transform: rotate(0deg) scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime03"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

横にくるっとする

<style>
	  .anime04:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateY(180deg);/* Y軸方向へ回転 */
      transform: rotateY(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime04:hover:before {
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime04"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

縦もできちゃう

<style>
	  .anime05:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.3);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: rotateX(180deg);/* X軸方向へ回転 */
      transform: rotateX(180deg);
      
      -webkit-transition:all .3s linear;
      transition:all .3s linear;
	  }
    .anime05:hover:before {
      -webkit-transform: rotateX(0deg);
      transform: rotateX(0deg);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime05"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

外からふわっと

<style>
	  .anime06:before {
      content:" ";
      display:block;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      box-shadow:inset 0 0 200px 30px rgba(0,0,0,0.6);
      opacity:0;
      cursor:pointer;
      
      -webkit-transform: scale(5);
      transform: scale(5);
      
      -webkit-transition:all .4s ease;
      transition:all .4s ease;
      
      -webkit-transform: scale(1);
      transform: scale(1);

	  }
    .anime06:hover:before {
      -webkit-transform: scale(1);
      transform: scale(1);
      
      opacity:1;
    }
</style>
<p class="img01 waku01 anime06"><img src="https://taneppa.net/wp-content/uploads/2014/07/TIG93_buranketnikurumarerujyosei500.jpg" width="500" height="500" alt="ブランケットを羽織った女性" /></p>

このように、擬似要素にtransitionやtransformを加えることで色々な動きを作ることができます。
行き過ぎたエフェクトは目にうるさく、ごちゃっとした印象になってしまいますが、さり気なくつけると、おっ！おしゃれっ！と言った感じになりますね。
ポイントはやり過ぎない、これです(´・ω・｀)ﾀﾞﾒﾖｰﾀﾞﾒﾀﾞﾒ
ほとんどがtransitionとtransformの使い方のようになりましたが、hover時のエフェクトのお話でした(´・ω・｀)ﾉｼ