[B! web制作] gentlekoopのブックマーク

スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！

ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！各エフェクトのソースは上記ページからまとめてダウンロードできます。

gentlekoop 2015/07/06

リンク

Webデザインの勉強になる！有名ブランドサイトのスタイルガイドのまとめ -Brand Style Guide Example

最近はスタイルガイドを公開しているサイトも増えてきました。有名ブランドのWebサイトのスタイルガイドやガイドラインを数多くまとめているサイトを紹介します。なんとなく眺めるだけでもよし、もちろん実装方法やレイアウトのバリエーションなど、参考になるものばかりです。

gentlekoop 2015/01/17

リンク

ワンランク上のHTMLコーディングを行うための18のポイント | ベイジの社長ブログ

HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。ターゲットブラウザで大きな崩れがない。リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。バリデーター・チェックでエラーが出ない。逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ

gentlekoop 2013/11/29

リンク

制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

2021年10月21日便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類

gentlekoop 2013/08/28

制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

リンク

ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!

こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。画面遷移は一切ありません。すげーサイズダウンしますこれは実際にサイズダウンしてみた結果。左が元画像で右がTi