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

Browse By

[Logo Design] The Logo Site free placeholder logos daily – プレイスホルダーとしてのロゴ

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

プレイスホルダーとして使えるロゴデザイン。1日1つずつ追加されているようです。サイトやApp制作における、企画やモックアップレベルの段階で使えそうです。「んなもん作った方が早ぇYO!」とか思っちゃいましたが、ノンデザイナーの人とかにはこういうの有用かも、と思ったので紹介。まだそれほど数は多くないので今後増えると使い勝手も良くなりそうです。

[Misc] Apple – Every Second – Apple製品が毎秒どれくらい売れているのかをシミュレートするサイト

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

Apple製品が世界中で毎秒どのくらい売れているのかをシミュレートしたサイト。毎秒ごとにカウンターが更新され、それこそアホみたいにデバイスが買われている様子を見る事ができます。ちょうど先週10億台目のiPhoneが売られたそうですしね。アメリオ時代を知る俺みたいなオッサンマカーにとっては今の状況は信じられないというのが正直なところ。あとこれ見ててオモしろいのが、Apple WatchとかiPad Proって、Macより売れてないんスね。もうちょい売れてんのかと思った。つーかそろそろ新しいMacが欲しい。Mac miniアップデートしてくれ・・・。

[CSS] Progress Button Styles – プログレスバーを兼ねたボタン作例

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

プログレスバーを兼ねたSubmitボタンの作例まとめ。クリックするとボタンの中、もしくは周辺でプログレスバーが展開されます。ファイルのアップロードとか、進捗の確認ができた方がいいボタン作る時なんかに良さそうです。

[CSS3] CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS! – CSSエフェクトまとめ

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

CSSを使った写真へのフィルター機能をBefore After形式でまとめた記事。作例はそれぞれCodepenを使って紹介されています。ブラーとかグレースケールあたりは、マウスオーバー芸と組み合わせるのも良さそうです。またアニメーションを併せて使った手法や、ボックス要素全体にフィルターをかける作例なんかも紹介されてます。CSSフィルターって結構いろんな事できるんですね。

[WebDesign] CSS Pixel Widths – デバイスごとの物理&論理ピクセル一覧

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

iOSやAndroidデバイスの、ディスプレイ仕様を一覧で紹介したページ。それぞれのデバイスごとに、物理ピクセル、論理ピクセル、CSSピクセルレシオが一覧でまとめられています。レスポンシブレイアウトのサイト作る時、ブレイクポイント決める際に役に立ちそうです。

[UI Design] uxtools.co – 各種UIデザインツールのできる事一覧

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

なんか最近やたら増えているUIデザインツールの、できる事一覧ページ。このジャンルだとCraftとかFramerあたりが有名だけど、最近になってAdobe Xdなんてのも出てきましたからね。やっぱ大手が参入するとジャンル全体がアツくなりますからね。それぞれプラットフォームやインポート可能なフォーマット、アニメーションやトランジションの可否、シェアリング先などについてスペックが一覧にされています。UXの考察や、UIデザインツール探す際に便利そうです。ちなみに俺はたまにAdobe Xd使ってます。サクっとプロトタイプ作るにはこの手のツールはちょうどいいんですよね。

[Web Design] FourZeroFour – 404 Page Not Foundのデザインギャラリー

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

誰でも見た事のある404ページ(そんなページねぇYO!ページ)のデザイン作例だけを集めたギャラリーサイト。わりと堅めのページでも404だけは軽くフザけてたりする場合ありますよね。デザイナーにとってはアイデアや皮肉、センスの見せ所でもありますな。404どうしよっかなーって悩んでる時なんかに漁るとイイかもしれません。いやそこは普通悩まないか・・・。

[Web App] emoji-gram – 絵文字を使って文字を書けるサイト

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

絵文字を使って文字が書けるサイト。入力欄に文字タイプすると、絵文字がその形になって、コピペして使う事ができます。ただし半角英数にしか対応していません。文字部分は左下から、背景部分は右下からセレクトできます。主な用途がメッセージングのためか、スマホで見るとちょうどイイ感じにレイアウトされてます。文字情報は縦書きされるので、人に送った際の改行問題についても心配する必要がなさそうです。自分はオッサンなのであまり絵文字を使う機会もあまりなく、とりあえずウンコ書いておきました。