ページ内のブレイクポイントを一覧にしてくれるブックマークレット。ページ内の「Breaq」って書いてある青いブックマーク部分をお気に入りなどにドラッグして使います。ブレイクポイントを調べたいページを表示した状態で、事前にブックマークに登録しておいたBreaqをクリックすると、ページ内のブレイクポイント一覧がブラウザウィンドウ右下に出力されます。境目や各BPの位置付けなどが分かりやすく、シンプルに知りたい情報だけに機能が絞られてる点がとってもナイス。常用ブックマークレットフォルダに突っ込んでおきました。
機能をほぼグリッドレイアウトに絞ったミニマルなCSSフレームワーク。ダウンロードや詳細なドキュメントはGithubから確認ができます。特徴としてはまずファイルサイズが軽量な事。Row（行）内のカラム幅をパーセントで指定できる事。Bootstrapの12分割システムよりも細かい指定ができます。あとFruidカラムを設置できる事。これはカラム幅を指定せず配置する事で、数値指定したカラム以外の残りの幅いっぱいに使えるという指定。Fruidカラムは1つのRow内に複数配置できるようです。Bootstrapのような多機能なフレームワークは必要なくて、ただグリッドレイアウトができればそれでいい、というシンプルな機能を求める人向けのフレームワークという印象でした。
今では誰でも知ってる有名サイトの昔のデザインをアーカイブしたサイト。Google, Amazon, Pinterest, Facebook, Youtube, Reddit, Twitter, Yahooといった超メジャーサイトが並んでおり、詳細ページに入ると「XXXX年にはこうだった」みたいな感じで時系列で紹介されています。Yahooとか懐かしいですな。オッサン世代には「始めて開いたWebサイトがYahoo」という人も多いでしょう。あと旧ロゴのTwitterも今見るとなかなかダサくて懐かしい感じがします。Googleによる買収前の、ほとんど無法地帯だった頃のYoutubeなんかも旧デザイン見てると感慨深いものがあります。
入力欄にURLを入れる事で、対象サイトの現在のMETA情報を抽出でき、それを元にさらに詳細なMETA情報を生成できるサイト。サンプルとしてframerのものが用意されています。情報抽出後は、TitleやDescription、サイトのサムネールImage、URLなどを改めて指定する事ができます。一通り入力し終えたらサイト下部にある「Generate」ボタンを押せば完了。HTMLの基本的なMeta情報と共に、対Google用、Facebook用、Twitter用のものがまとめて出力されます。コメントアウトでHey Metaの情報が末尾に入るけど、まぁこれは消してもいいんじゃないかな。3つのサービスを対象としたMeta情報を一気に生成できるのがとっても便利です。
Instagramのフィルターを模したCSS。ファイルはGithubからダウンロードできます。導入後はfigureタグにclassを付けるだけでフィルターが適用されるようです。素材そのものを加工しなくても良くなる点がナイス。Webでインスタ映えさせたい時なんかに使えそうです。まぁこの言葉も数年で廃れるんだろうけど・・・。
PCやスマホ、タブレットなどでWebサイトを見た時の様子を、スクリーンショットとしてまとめて保存してくれるサイト。iMac 27inch, Macbook Pro 15inch, iPad, iPhone Xの4デバイスでの見え方の確認が行えます。iPhone Xというのが新しい感じです。WindowsとかAndroid環境はアレですかね、完全無視な感じですかね。サイト作った時の簡易確認に便利ではあるけど、エミュレーション環境に日本語フォントが入ってないようで、2バイト文字は化けちゃいます。ちょっとした確認程度になら使えそうです。
2009年から現在に至るまでの、ボタンデザイントレンドの移り変わりを描いた記事。2009年というのはDribbbleができた年らしく、この記事内で引用されているデザイン作例もDribbbleからのもののようです。スキューモーフィックデザイン全盛の時期から始まり、2013年に一気に押し寄せたフラットデザインの波に飲まれ、その後従来の凹凸表現に代わり新たにボタンである事をユーザーに知らせる役割を担う事となった角丸ボタンの時代が来て現在に至る、というまるでひとつの王朝が勃興しそして沈んでいく様子を見るかのような壮大な歴史を見る事ができます。そこそこ年齢のいってる中年デザイナーにとってはなかなか興味深い内容かと思います。たかがボタン、されどボタン。ボタンデザインにはデザイントレンドの様々な要素がギュっと詰まっているのであります。多分。
CSSで行うチェックボックス装飾の作例をまとめた記事。どの作例もCodepenで作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。
