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

Browse By

Monthly Archives: 4月 2016

[Web App] BEAM – シンプルなグラフ生成サイト

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

シンプルなグラフを作成できるサイト。作り方は簡単で、まずはグラフの種類を選びます。次にグラフのプレビュー左にある引き出しからスプレッドシートを出して、そこに数値を入力するだけ。イラレやエクセルでグラフ作るのに比べると超カンタンです。作成できるのは円グラフ、折れ線グラフ、棒グラフの3つ。それぞれ複数のテーマが用意されていて、棒グラフは縦並びと横並びから選択できます。細かいカラー指定ができるともっと便利なんですけどねー。

[Music] The Rock and Pop Fashion Hall of Fame – ロック&ポップスターの殿堂入りファッション

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

ロックスターやポップスターの殿堂入りファッションを、画一的なイラストで紹介するギャラリーサイト。それぞれどこのステージで、もしくはどのMVでしてたファッションなのかも併せて紹介されています。洋楽を聴く人なら誰もが見た事のあるコスチュームばかりです。個人的に印象的だったのはやっぱりGunsのアクセル・ローズ。ステージ上でバンダナと短パンが似合うのは彼くらいのもんですからね。特に年代を固定しているわけではないと思うけど、60年代〜80年台のものが最も多く、2000年以降のものはチラっとある程度です。これって作者の趣味とかではなく、きっとマスカルチャーにおけるファッションアイコンみたいなものが最近では生まれづらいせいなんだろうなぁ、とかめんどくさい事を考えちゃいました。

[Metal] Animated Covers – アニメーションGifとなったメタルアルバムのジャケットギャラリー

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

メタルアルバムのジャケットをアニメーションGifで表現したギャラリーサイト。いやこれメタル野郎には結構タマりませんよ。何よりチョイスがシブい。Metallica, Megadeth, Judas Priestは当たり前、KreatorやTestament, Death, Marillionといった通好みの作品もラインナップされています。メタルアルバムってのはジャケ重要ですからね。想い出の1枚が動くというのはなかなか感慨深いものがありますな。これ作るの大変だろうけど、今後さらに作品が増えてくれるとイイなー。

[Web Design] CSS Stats – 対象サイトのCSSを細かく調査してくれるサイト

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

特定のサイトURLを入力する事で、そこで使われているCSSを細かく調査してくれるサイト。試しにこのブログのURLを突っ込んでみました。その結果ルールやセレクターの数を数値で表示され、また使われているフォントカラーやBGカラー、定義されているフォントサイズやフォントファミリー、メディアクエリーのブレイクポイントの数などを一覧で表示してくれました。もちろんCSSファイルサイズについても教えてくれます。またトップページには、GoogleやAppleなどのメジャーサイトへのショートカットも用意されています。一覧で分かりやすくズラっと表示されるので、必要のない指定を間引く時や、他サイトの調査時なんかに便利そうです。

[Logo Design] LogoEvolve – 企業の今のロゴと昔のものとを見比べる事のできるサイト

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

企業ロゴの今と昔を見る事のできるサイト。一覧に表示されているのは現在のロゴで、マウスオーバーする事でその企業の最初のロゴを見る事ができます。AppleやMicrosoft、Google、Twitterといったテック系企業だけでなく、PepsiやLegoといったテック系以外の企業ロゴなども用意されています。Amazonの旧ロゴ分かる人は多分オッサンです。オッサンの俺が分かったのでね。Canonとかヤバいですね。もうなんか呪いとかこめられてそうだし。

[Game] Zelda 30 Year Tribute – ブラウザでプレイできる3Dゼルダ

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

ブラウザでプレイできる3Dゼルダ。オフィシャルものではなくファンが作ったものらしく、元の2Dドットを3Dポリゴンに置き換えて制作されています。操作はキーボードのW, A, S, Dで移動(いわゆるFPSスタイル)、LにAボタン、KにBボタン、Enterにスタートボタンが割り振られています。またオリジナルにはない要素として、斜め移動もできます。試しにやってみたのですが、オリジナルのゼルダの伝説そのままでヤバいっすこれ。超オモしろい。ちょっとしかプレイしてないから分かんないんだけど、どこまで作られてるんだろ。最後までプレイできるんだとしたらスゴいなー。あとiPhoneでもプレイできました。横持ちにすると操作部分が隠れちゃうけど。

[Generator] Unique gradient generator – 画像からぼかしグラデーションを作成でき、CSSコードを取得できるジェネレーター

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

画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。