Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Monthly Archives: 3月 2016

[Funny] Thanks Adobe – アドビ製品がクラッシュした時のスクリーンショットを投稿するサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Adobe製品がクラッシュした時のスクリーンショットを専門とした投稿サイト。画像1点1点がデカいのでサイトも重いですが、スクリーンショット見てると世界中のデザイナーの阿鼻叫喚が伝わってきます。ちょっと不安定なマシンでPhotoshopとか使ってるとサクっとハングりますからね。そうした心境を「Thanks Adobe」という言葉で紹介するというのは、なかなかのセンスだなーと思いました。見ようによっては現代アートのようにも見えます。

[CSS] imagehover.css – ホバーアクションを多数収録したCSSライブラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。

[Freebie] FACEBOOK TIMELINE HACK TEMPLATE – Facebookのカバーとプロフィール画像が一体化したように見えるPSDテンプレート

  • Pocket
  • このエントリーをはてなブックマークに追加

Facebookでちょっと前に流行った、カバー写真とプロフィール写真とがまるで一体化してるように見えるアレを作れるPSDテンプレート。ダウンロードするとPSDとアクションファイルで構成されていて、PSD内でデザインして同梱のアクションで書き出せば完成という流れ。最近このブログのFacebookページをアップデートしたんですが(タイムラインに新着記事読み込めるようにしたり色々してます)、その際にも使いました。わりとサクっと作れて便利でした。

[Freebie] PSD Repo – WebやAppのPSD素材配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webのモックアップやアイコン、ボタン、Mobile AppのUIキットなどのPSD素材配布サイト。ページ数を見たところ105ページあるので、結構な数が紹介されているようです。この手の「PSDなんちゃら」ってサイトいくつもありますが、素材探し以外にデザインのネタ調としても使えそうです。

[Freebie] iOS 9.3 UI Kit Sketch Resource – iOS 9.3のSketch用UIキット

  • Pocket
  • このエントリーをはてなブックマークに追加

つい昨日公開になったばかりのiOS 9.3のUIキットがもう出てます。フォーマットはSketch。9.3では9.2に比べて細かいところがちょいちょい変わった程度ですが、まぁモックアップキットは最新のもの使った方がイイですしね。ちなみにNight Shiftモード使ってみましたが、アレ暖色に寄せ過ぎると視界の色が変になりますね。スライダー控えめにしといた方が良さそうです。

[Web Service] Carrd – コードを書かずにポートフォリオをビルドできるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

コードを書かずにWeb上だけでポートフォリオページを作る事のできるサイト。とりあえず試してみたいだけなら、LoginせずにいきなりBuildできます。まず最初に複数のテンプレートから自分が作りたいものに近いテンプレートを選んで、その後で細かくカスタマイズしていくという流れのようです。各要素は編集だけでなく移動などもでき(完全に自由というわけではなく、入れ替え程度)、編集が完了したら右上のフロッピーアイコンからパブリッシュして完了。各種SNSへのリンクアイコンも一通り用意されているので、そうしたメディアへのハブとしても使えそうです。

[Web Design] Responsive Test – レスポンシブレイアウトのテストツール

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトの動作確認ツール。確認したいサイトのURLを放り込むだけで、様々なデバイスでの表示シミュレーションができます。指標としてはXLがPC、LGがiPadのランドスケープ、MDがiPadのポートフォリオ、SMがiPhoneのランドスケープ、XSがiPhoneのポートフォリオという感じです。Bootstrapとかの表示切り分けclassと基本的に同じ命名ルールなので分かりやすいです。サクっと複数デバイスでの確認をしたい時に便利ですね。

[Funny] trump.css – サイトにトランプ要素を足したい時に(ネタ)

  • Pocket
  • このエントリーをはてなブックマークに追加

Webサイトにちょっとしたトランプ要素を足したい時に使えるCSSフレームワーク。ソースコードはGithubでも公開されています。例えば.muslimsというclassを付ければ非表示に(display:none)、.womenというclassを付ければ簡単にフォントサイズを小さくできます(font-size: xx-small)。堅苦しいWebサイトをいくぶん愚かに、また差別的要素を加えたい時なんかに便利ですね。Web作った事ある人ならソースコード見て、きっとニヤニヤできますw