ツール・サイト紹介
ニュース/2ちゃんねる

RSSリーダーの使い方をおさらい!

RSSリーダーで毎朝の情報収集力が10倍アップする本 livedoor Reader対応

Webデザインに使えそうなポリゴン画像が作れるジェネレータ「Flat Surface Shader」

Check あとで読む このエントリーをはてなブックマークに追加
Flat Surface Shader
Flat Surface Shader

ポリゴン画像を簡単作成


Flat Surface Shaderポリゴンな画像を生成できるサイトです。

サイトにアクセスすると、ポリゴンがグリグリ動いています。
WebGL, SVG, Canvas の3種類のレンダリングで3Dポリゴンが表現されます。

右側のメニューから色やポリゴンの形など調整して、JPGとしてポリゴン画像が出力できます。

フラットデザインが流行っていますが、ポリゴンをWebデザインにとりいれているサイトもたまに見かけますね。
以下に使ってみた様子を載せておきます。


グリッド模様を手軽に作成してプリントアウトできるサービス「Gridzzly」

Check あとで読む このエントリーをはてなブックマークに追加
Gridzzly
Gridzzly

グリッドを簡単作成


Gridzzlyグリッドを簡単に作成できるジェネレーターです。

ドットや横線、ハニカム柄の模様を簡単に作れます。
そして作った模様はプリントアウトすることができますよ。

以下に使ってみた様子を載せておきます。


フラットデザインにマッチするアイコンが無料でダウンロードできるサイト「flaticon」

Check あとで読む このエントリーをはてなブックマークに追加
flaticon
flaticon

フラットデザインにマッチするアイコン集


flaticonフラットデザインで使えそうなアイコンを集めたサイトです。

フラットなアイコンが大量にあり、PNGやSVG、PSD形式でダウンロードできますよ。
豊富に揃っているのできっとお気に入りのものが見つかるはず。

以下に使ってみた様子を載せておきます。


180,000点以上のベクター素材が探せるサイト「4vector」

Check あとで読む このエントリーをはてなブックマークに追加
4vector
4vector

ベクター画像がたっぷり手に入る


4vector180,000ものベクター画像が探せるサイトです。

キーワードを入力して検索すると、ベクター画像がヒットします。
その場でaiやepsなどの拡張子を確認でき、ダウンロードも行えます。

ベクター素材をお探しの方には重宝するサイトかと思います。
以下に使ってみた様子を載せておきます。


既存アプリをiOS7風にデザインし直すとこうなる!を次々紹介してくれるサイト「iOS App Redesigns」

Check あとで読む このエントリーをはてなブックマークに追加
iOS App Redesigns
iOS App Redesigns

iOS7風にするとこうなる


iOS App Redesigns既存のアプリをiOS7風にするとどういうデザインになるかを紹介しているサイトです。

iOS7はiOS6とくらべて大きくデザインが変更されました。
それに合わせて各アプリもデザイン変更されると思われます。

有名なアプリをRedesignするとどのような見た目になるかを
紹介してくれるTumblrとなります。

以下に使ってみた様子を載せておきます。


iOS7用のアイコンテンプレートがダウンロードできるサイトまとめ

Check あとで読む このエントリーをはてなブックマークに追加
App Icon Template
App Icon Template

iOS7用アイコンのひな形をPSD形式で


App Icon TemplateではiOS7用のアイコンを作成するときのベースをPSD形式でダウンロードできます

iOS7でがらっとデザインが一新されたので、
それに合わせてアプリのアイコンを変えようと思っている方は多いのではないでしょうか。

上記サイトからダウンロードできるPSDをベースにアイコン作成をすると良いでしょう。
商用利用もOKです。

以下に使ってみた様子を載せておきます。
(他にもいくつか同じようなテンプレートがあったので合わせて紹介。)


レスポンシブWebデザインのモックアップが手軽に作れるサービス「FROONT」

Check あとで読む このエントリーをはてなブックマークに追加
FROONT
FROONT

レスポンシブなウェブサイトを簡単作成


FROONTレスポンシブなウェブサイトを簡単に作成できるサービスです。

レスポンシブなサイトのモックを作るときに便利そうです。
ドラッグ&ドロップで絵を描くようにしてサイトを作っていくだけ。

その場でウィンドウサイズを変えたときの表示の変化も確認できます。

作成したモックのHTML, CSSはダウンロード可能です。

以下に使ってみた様子を載せておきます。


指定したウェブサイトの配色一覧を作成してくれるサービス「Colours」

Check あとで読む このエントリーをはてなブックマークに追加
Colours
Colours

ウェブサイトで使われている配色を網羅


Coloursウェブサイトで使われている配色を網羅できるサイトです。

解析したいウェブサイトのURLを指定すると、
そのサイトで使われている配色が一覧で表示されます。

また、どの色がどれくらい使われているかの分布も確認できますよ。
そのサイトと同じような配色を使っている類似サイトも教えてくれます。

ウェブサイトの配色決めの参考になりそうですね。

以下に使ってみた様子を載せておきます。


二十歳街道まっしぐら 2nd @カメきち 2010.10.01-

'); label.html('\ ライブドアブログでは広告のパーソナライズや効果測定のためクッキー(cookie)を使用しています。
\ このバナーを閉じるか閲覧を継続することでクッキーの使用を承認いただいたものとさせていただきます。
\ また、お客様は当社パートナー企業における所定の手続きにより、クッキーの使用を管理することもできます。
\ 詳細はライブドア利用規約をご確認ください。\ '); banner.append(label); var closeButton = $('