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

Browse By

Tag Archives: 素材

[UI Design] Android Nougat Free GUI – Android 7.0 ヌガーのUIテンプレート

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

Android 7.0 NougatのUIテンプレートが配布されています。フォーマットはPhotoshop、Sketchというおなじみのものに加え、Craftのライブラリーという形でも用意されています。Android AppのUI制作や、Material Designに準拠したWebサイト作る時なんかに使えそうです。

[Web Design] Website Template Bar – 様々なWebテンプレートをまとめたサイト

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

Webテンプレートを各種まとめたサイト。プレーンなHTML5ベースのものに加え、Bootstrapベースのテーマ、Wordpressのテーマ、eコマースに使えるものがそれぞれカテゴリ分けされて紹介されています。最近じゃフレームワークにBootstrap使って、その上にテーマ置いて、そこからデザインカスタム始める事もよくありますしね。ちなみに自分はBootstrap v3によく使うJSやら機能拡張のCSSぶち込んだものをテンプレートみたいに使ってます。テーマ的なものはあまり使った事ないんだけど、このサイト見ると結構いろんなテーマがあるので、テーマぶち込んで楽するのもアリだなーと思いました。

[Design Resource] Designer Mill – デザイナーのための素材紹介サイト

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

デザイナーのための様々な素材を紹介するサイト。モックアップやアイコン、UIキット、フォント、Webテンプレートなど、デザイナーにとって役立ちそうな素材が紹介されています。変わったとこだとNintendo Switchのモックアップなんかもあります。デザイナーの皆様、お役立てください。ちなみにSwitch、秋にSkyrim出るらしいので、お外でもSkyrimできる専用機としてちょっと欲しいです。

[Photo Stock] AllTheFreeStock – CC0の写真素材サイトを横断検索できるサイト

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

いやこれ久しぶりにグっときました。CC0(パブリックドメイン)の写真素材サイトを横断検索できるサイト。CC0というだけでナイスなのに、それらのサイトがリスト化されていて、その上横断検索までできちゃう。なんともまぁデザイナーにとって素晴らしいサイトでございます。画面左側にある「Free Stock Search」→「Mutisite Search」と進む事で横断検索ができます。ちなみにこのサイト、写真素材だけでなくモックアップやビデオ、フォント、Webテンプレートなども探す事ができます。便利過ぎて鼻血出そうです。エクセレーント!

[Freebie] PSDDD – PSD素材ギャラリー

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

PSD素材のギャラリーサイト。Dribbbleからピックアップされた素材が紹介されていて、リンク先からPSDをダウンロードできます。アイコン、デバイスモックアップ、UIパーツ、ワイヤーフレーム、イラストなど様々なPSD素材があるようです。デザインワークでちょっとサボりたい時とか、ネタ探ししたい時なんかに使えそうです。

[CSS] A huge collection of CSS backdrops – CSSだけで描画するクールなグラデーション背景

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

CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。

[CSS] Basscss – 汎用クラスをまとめたCSSフレームワーク

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

汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。

[CSS] Flexbox Grid – フレックスボックスでレイアウトされたCSSグリッドシステム

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

FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。