はてなブックマーク

[markdown] 初めまして。5月に入社したデザイナーのヤマダです。 ペーペーデザイナーですが、いつかわくわく動くサイトを作りたいという思いでイージングを勉強中です。 そんな訳で手始めに、Google Web Designerを使って何か動かしてみようと思います！ #Google Web Designerとは 各種グラフィックツールとタイムラインでアニメーションを作成すると、プラットフォームを問わず動く HTML5 / CSS3 / JavaScript を出力してくれるツールだそう…。引用元 つまり、コーディングが苦手な私でもcssとjavascriptでアニメーションが作れるという事！ 助かります！ 兎にも角にも、ベータ版は無料なので、とりあえず始めてみようと思います。 DLはここから

こんにちは、デザイナーの諏訪です。描画モード解説の第3回です！今回は「オーバーレイ」〜「ソフトライト」までの7つを紹介していきたいと思います。「オーバーレイ」以降は第1回・第2回で紹介したブレンドモードの応用版のようなモードが多くなります。 第1回はこちら［通常・ディザ合成・乗算・焼き込みカラー・焼き込み（リニア)・カラー比較(暗)］ 第2回はこちら［比較(明)・スクリーン・覆い焼きカラー・覆い焼き(リニア)-加算・カラー比較(明)］ 第4回はこちら［差の絶対値・除外・減算・除算・色相・彩度・カラー・輝度］ 13.オーバーレイ 「オーバーレイ」は、基本色に応じてカラーを乗算またはスクリーンにします。基本色が暗い色だと「乗算」、明るい色だと「スクリーン」が結果色に反映されます。 ▼こちらの2枚を重ねて確かめてみます。基本色の明るさは左から100→75→50→25→0%です。 ▼「乗算」「オー

[markdown] どうもこんにちは。本当はいつまでも新人でいたかった、フロントエンドエンジニア大月です。春ですね。 さて、昨年9月にリリースされたiOS11でMedia Capture APIがサポートに加わり、iOS版Safariから本体のカメラにアクセスできるようになったようですね。 ## Media Capture APIとは [Media Capture and Streams API (Media Streams) – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Media_Streams_API) 難しいことが色々書いてあります。ざっくりと説明するとWebRTC関連のブラウザ用APIの一つで、これを使うとブラウザからカメラ・マイクにアクセスして動画や音声を扱うことができます。ちな

こんにちは！最近テレビゲームばっかりやっているフロントエンドエンジニアのイリサワです。 (今はウィッチャー3とPS4リメイク版のクラッシュ・バンディクーをやっています。この間FF9をクリアしたんですけど、ありえないくらい泣いてしまいました…。) さて今回は、CSSだけで超絶イケてる背景を作る方法を徹底解説します。 いやね、「ソースをコピペするだけでかっこいい背景が実装できるよ、簡単な解説も置いておくね」って感じの親切なサイトはもう結構あるんですよ(筆者もめっちゃくちゃお世話になりました)。なのである程度知識がある方や単にソースを拝借したいだけの方はそっち見た方が断然良いと思うのですが、「なぜそうなるのか？」まで理解したいweb初心者にはちょっぴりハードルが高いかも？な気がしなくもないんですよね。 そんなわけで本記事では、もうほんとタイトルの通り、CSSオンリーで背景パターンを作る方法を、マ

[markdown] こんにちは、フロントエンドエンジニアの坂本です。 今から書くのは社内のチーム用に書いていたwikiなんですが、こういうことはもっと広めていった方が、みんな幸せになると思ったので、珍しく実用的な内容についてまとめたいと思います。 **ズバリ！** ***『動画圧縮をコマンドラインから楽々やっちゃう講座！』*** 近年Web上で動画を扱うコンテンツの増加により、 「日々の業務で動画の容量圧縮を迫られるシーンが増えてきた。」と感じている、あなたのためにまとめました。 この記事を読めば、画質を（ほとんど）落とさずに（or Webで許容できるクオリティで）楽々動画圧縮ライフが手に入ります。 説明はmac & コマンドライン（いわゆる黒い画面。winならコマンドプロンプト、macならターミナル）の基本操作ができる前提で進めさせていただきます。 ※ winの方はツールのインストール

こんにちは、デザイナーの諏訪です。描画モード解説の第2回です。 次の更新は夏くらいかなあ〜と思って浴衣の女の子を使ってみたのですが、すっかり時期外れになってしまいました。無念。 今回は「比較(明)」〜「カラー比較(明)」までの5つを紹介していきたいと思います。 ※「基本色」「合成色」などの用語については第1回の記事を参照してくださいね。 ———- 08.比較(明) 「比較(明)」は「比較(暗)」の逆パターンです。基本色と合成色を比べて、より明るい方の色が結果色として選択されます。 より明るい方の色というのは、RGBの値によって決まります。 ▼これは「比較(明)」を使って合成したものです。わかりやすく単色にしてあります。 結果色のパイナップルが、青っぽくなっていますね。 ▼「比較(明)」は、RGBのそれぞれの値の数値の高い方を採用するため、この結果色になったというわけです。 ▼ホワイトは一番

こんにちは、デザイナーの諏訪です。私はニジボックスに入社してからPhotoshopでデザイン制作をするようになったのですが、前職ではIllustratorで印刷物からWebデザインまで制作していました。Photoshopは画像処理とトリミング程度にしか使ったことがなく、実は知らないことばかり…というわけで、今回は勉強も兼ねて、まずは第1回として描画モードの「通常」から「カラー比較(暗)」までの7つをご紹介したいと思います！ 描画モード（ブレンドモード）とは 下にあるレイヤーに対して、上のレイヤーがどういった合成をするかを設定できるPhotoshopの機能です。「通常」から「輝度」まで27個の効果があります。 下のレイヤーを基本色、上のレイヤーを合成色、合成によって生成されるカラーを結果色と言います。 ———- 01.通常 初期設定のモードです。これはそのまま重なるだけですね。先に説明した画

[markdown] こんにちは、新人フロントエンドエンジニアの坂本です。 もうすぐ11月なんですね！早いですね！もう…入社から半年もたってしまいましたね.. 2回目の投稿となります今回は、最近気になってしょうがない「うにょうにょ動く円」を作って遊びたいと思います。 今回の投稿は、理想の「うにょうにょ動く円」をどうやったら作れるのかについて追究していく内容となっています。 ##うにょうにょ動く円とは イメージこんな感じですね。 このように円が何かしらの力によって揺らいだり、動いていたりする様を「うにょうにょ動く円」定義します。 きっとcanvasやSVG、webGLとかを使って再現するんだろうなと思います。 最近、写真がうにょうにょ動いていたり、ボタンがうにょうにょ動いていたりというのを見かけて、すごく気になっていました。 ##作り方 作り方はさっぱりなので、ググります。 今回、参考にさせ