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

Browse By

All posts by Quattro

[CSS] Flexy CSS Framework – ミニマルなCSSフレームワーク

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

機能をほぼグリッドレイアウトに絞ったミニマルなCSSフレームワーク。ダウンロードや詳細なドキュメントはGithubから確認ができます。特徴としてはまずファイルサイズが軽量な事。Row(行)内のカラム幅をパーセントで指定できる事。Bootstrapの12分割システムよりも細かい指定ができます。あとFruidカラムを設置できる事。これはカラム幅を指定せず配置する事で、数値指定したカラム以外の残りの幅いっぱいに使えるという指定。Fruidカラムは1つのRow内に複数配置できるようです。Bootstrapのような多機能なフレームワークは必要なくて、ただグリッドレイアウトができればそれでいい、というシンプルな機能を求める人向けのフレームワークという印象でした。

[Web Design] Museum of Websites – 有名サイトの旧デザインアーカイブ

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

今では誰でも知ってる有名サイトの昔のデザインをアーカイブしたサイト。Google, Amazon, Pinterest, Facebook, Youtube, Reddit, Twitter, Yahooといった超メジャーサイトが並んでおり、詳細ページに入ると「XXXX年にはこうだった」みたいな感じで時系列で紹介されています。Yahooとか懐かしいですな。オッサン世代には「始めて開いたWebサイトがYahoo」という人も多いでしょう。あと旧ロゴのTwitterも今見るとなかなかダサくて懐かしい感じがします。Googleによる買収前の、ほとんど無法地帯だった頃のYoutubeなんかも旧デザイン見てると感慨深いものがあります。

[Mac App] Pretzel – 使っているアプリケーションのショートカットをメニューバーから検索

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

今フロントに来ているアプリケーションのショートカットを簡単に検索できるアプリ。起動するとメニューバーに常駐し、クリックするとショートカットの一覧が出るようになります。検索もできるようなので、知りたい動き(例えばPasteとかMoveとか)をフリーワード検索すると、そのためのショートカットを教えてくれるそうです。Appsのページには対応アプリケーションの一覧があります。グラフィック系やコーディング系に強い印象。ショートカット厨の方にオススメ。

[Mac] AirDropをDockに登録する方法

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

人によってはよく使うであろうAirDropを、MacのDockに登録する方法が紹介されてました。試しに登録してみたんだけど、これ地味に便利。Dockから1クリックで近くの端末をスキャンできます。方法は以下の通り。

  1. Finder Appを表示。Finderウィンドウのサーチバーに「Finder」って打つのが手っ取り早い
  2. Finder Appを右クリック(MacBookの場合は2本指タップ)して「パッケージの内容を表示」を選択
  3. Contents>Applicationsと進んでいくとAirDropのアイコンがあるので、これをDockにドラッグして登録

これで完了。1度登録しとけば誰かにファイル送りたい時にサクっと近くのMacやiOSデバイスを検索できるようになります。

[Generator] Hey Meta – 現サイトのMeta情報をベースに、より詳細なものを生成できるサイト

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

入力欄にURLを入れる事で、対象サイトの現在のMETA情報を抽出でき、それを元にさらに詳細なMETA情報を生成できるサイト。サンプルとしてframerのものが用意されています。情報抽出後は、TitleやDescription、サイトのサムネールImage、URLなどを改めて指定する事ができます。一通り入力し終えたらサイト下部にある「Generate」ボタンを押せば完了。HTMLの基本的なMeta情報と共に、対Google用、Facebook用、Twitter用のものがまとめて出力されます。コメントアウトでHey Metaの情報が末尾に入るけど、まぁこれは消してもいいんじゃないかな。3つのサービスを対象としたMeta情報を一気に生成できるのがとっても便利です。

[CSS] Instagram.css – Instagramのフィルターを模したCSSフィルター

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

Instagramのフィルターを模したCSS。ファイルはGithubからダウンロードできます。導入後はfigureタグにclassを付けるだけでフィルターが適用されるようです。素材そのものを加工しなくても良くなる点がナイス。Webでインスタ映えさせたい時なんかに使えそうです。まぁこの言葉も数年で廃れるんだろうけど・・・。

[Freebie] Sketch – Element UI Kit – iPhone XのSketch用UIテンプレート

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

iPhone XのUIデザインに便利なUIテンプレートを、Sketch Teamが配布してます。ダウンロードすると様々な場面を想定した画面テンプレートが用意されていて、全画面でiPhone Xの切り欠きや角丸の部分にマスクがされいるので、AppのiPhone X対応を行う時なんかに使えそうです。またPages内、App以外にSymbolsというのも用意されており、ここではiOSのデフォルトUIパーツに加え、独自のアイコンやシェイプ、ナビゲーションパーツが用意されています。SketchベースでUIデザイン起こす時にイイですねこれ。

[Wallpaper] iPhone X wallpaper – iPhone Xの内部構造壁紙

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

毎度分解でおなじみiFixitが、早速iPhone Xの内部構造壁紙を配布してます。ディスプレイの裏側に配置されている部品を撮影したもので、これを使えば奥が透けて見えるような感じになります。iPhone X、ベゼルが薄くなったせいで、以前のモデルと比べてよりスケルトンっぽく見えますな。ちなみに通常撮影のものと併せて、X線撮影したものも一緒に配布されてます。ちなみにわたくしiPhone 7 Plusを初日に買ったので、今年は見送りました。来年X2とか出たら買おうと思ってます。