[UI Design] AppreciateUI – クールなモバイルUIのデザインギャラリー
クールなモバイルUIのデザインギャラリーサイト。この手のサイトでは一般的な、場面ごとに分けて閲覧する事ができるタイプです。ただこのサイト場面の分け方がスゴく細かいので、求めてる場面の作例をわりと具体的に探す事ができそうです。UIデザインのネタ帳としてイイ感じです。
Monthly Archives: 2月 2015
[UI Design] 50+ Best Free PSD Flat UI Kits – フラットUIのPSD素材まとめ
フラットUIのPSD素材を50例以上まとめた記事。いやぁよくこれだけの量をまとめたな・・・と、まずはそこに感動です。UI素材と一言に言っても実際には色々な使用目的がありまして、ここではiPhoneやAndroidなどのモバイルApp向けのもの、PC向けのもの、Webサイトに使えそうなものなど色々と用意されています。UIデザインする時の素材探しに使えそうです。
[Bootstrap] Shoelace – Bootstrapのグリッドジェネレーター
Bootstrapを使ったグリッドレイアウトのためのソースコードを、サクっと作ってくれるHTMLコードジェネレーター。真ん中あたりのエリアをクリックすると、新規にROW（まぁ行みたいなもん）を作る事ができ、その中でドラッグする事でCOL（まぁ列というかカラムというか）を作る事ができます。ここで作ったROWやCOLにはそれぞれ名前を付ける事ができ、これはclass名となります。こうして一通り作ったレイアウトは、画面右側にあるエリアにリアルタイムでHTMLが生成されるので、あとはそれを保存するだけ。このサイト便利なのが、画面左側に出ているデバイスの一覧。これによりデバイスごとにレスポンシブレイアウトを組む事ができます。つまりxs、sm、md、lgそれぞれでのレイアウト変化を、ひとつの画面で行う事ができます。いやこれ便利ですわ。Bootstrap使ったレスポンシブレイアウト前提のサイトを作る時に、最初にココでレイアウト組んじゃうのアリですね。個人的には最近Pure.cssに若干浮気気味ではあるけど、今度使ってみようと思います。
[Generator] Dunnnk – ハメコミ画像のジェネレーター
MacやiPhone、iPadなどのデジタルデバイスの画面に、任意の画像をハメ込む事のできるジェネレーター。ハメ込みたいテンプレート画像をクリックすると、アップロードする画像を求められます。画像を選択するとデバイスのディスプレイ部分にその画像がハメ込まれるという仕組み。WebサイトやMobileAppを実際に使ってるように見せる事ができます。サクっと作れるのがナイスです。テンプレート画像はApple系デバイスのみのラインナップのようです。
[Freebie] 22 Fresh Free Templates in HTML/CSS and PSD: February 2015 Edition – フリーのWebテンプレートやPSDモックアップまとめ
フリーで配布されているWebテンプレートや、PSDモックアップなどをまとめた記事。2015年とあるのでごく最近のリソースでまとめた記事のようです。Webテンプレートはランディングページ系のものが多いようです。Webテンプレート以外にも、UIキットやNokia Lumiaのモックアップなどが紹介されています。新しめの素材探す時にイイかもしれません。アプリのページ作る時にいまだにiPhone 5のモックアップとか使ってると、ちょっとアレだったりしますしね。
22 Fresh Free Templates in HTML/CSS and PSD: February 2015 Edition
[Web Design] Very nice sites – クールなサイトのギャラリー
クールなWebサイトのデザインギャラリー。見た感じ結構多くのサイトが紹介されています。Pinterestでフォローする事もできるので、Pinterestヘビーユーザーの人は日々のチェックも楽にできそうです。紹介されているサイトの質も高いので、ネタ帳としてなかなかナイス。
[Funny] CSS Puns & CSS Jokes – CSSジョーク
CSSで書かれたジョーク集。これ多分笑える人すごく限られると思うんだけど、CSSが読めるならニヤっとできますｗ ちなみにチャックノリスがなぜcolor:#BADA55なのか分からなかったけど、友達に聞いたら「55をSSに読み変えるんだ」と教えてくれました。こういうヒネりも含めてオモろいです。
[CSS3] Accessible toggle-style checkbox – CSSだけで描けるトグル型のチェックボックス
CSSだけで描画する事のできる、トグル型のチェックボックス。CodePenで書かれているので、ここからHTMLとCSSを確認できます。フォームパーツの装飾ってJSを使って行う場合が多いけど、これはCSSだけで反映されるので使い勝手が良さそうです。