デザインを開発するという視点でお伝えするクリエイティブBLOG
モックアップ素材は多く普及しており、使用している方も多いはず。デザイナーにとって重宝できるモックアップ素材ですが、解像度を気にしなくてはならなかったり、新機種が発表されたタイミングなど、中身の入れ替えが面倒な時も。そんなシーンで役立つ、CSSのみを使用してつくられた「Devices.css」を紹介していきたいと思います。
機種も多く収録されており、知っておくと便利に活用することができそうです。
詳しくは以下
国内でも徐々に普及してきているスマートフォン。ここ最近ますます、スマートフォン移行が進んでいる感があり、WEB業界でもモバイルサイトやスマホアプリを受託する機会も増えてきていると思います。今回紹介するのは、モバイルサイトやスマホアプリを創るときに便利なGUIキット集「40 New Web, Mobile and Application GUI Kits」です。
このエントリーでは全部で40ものモバイルのデザインのための素材が配布されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Stencils for Sketching iPhone, iPad & Android
モバイルのWEBサイトワイヤーフレームのための素材、まずは構成を先にというときには便利なキットです。
Android GUI PSD
Androidアプリを制作するときに便利なAndroidのGUIをセットにした素材キット。
iOS 5 GUI PSD
細かな部分が変わったことでも知られるiOS5を再現した素材キット、様々なUIが再現されています。
上記の他にも非常に沢山の素材がまとめらています。スマートフォン関連でWEBサイトやアプリのデザインをされる方は是非。
様々な事象やモチーフをひと目で分かる形にしたアイコンはWEB制作ならずとも様々な制作の現場で重宝します。今日紹介するのはちょっと変わった切り口でまとめられた宇宙をモチーフにしたアイコンセット「Astronomy & Space Icons」です。
あまりUIなどでは利用できないとは思いますが、個性的で嵌まればものすごく使えるアイコンセットだと思います。
詳しくは以下
デザインをする際に雰囲気を大きく左右するフォントは、できれば最新のトレンドをおさえたものや新しいものを使用していきたいところです。そんなシーンで是非参考にしたい、「New Free Fonts – 21 Fonts For Designers」を今回は紹介したいと思います。
ユニークなものからエレガントなものまで、さまざまなテイストのデザインフォントが紹介されています。気になったものをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
デザインの素材として欠かすことができないアイコン。良いものをみつけるたびにストックされているデザイナーの方も多いのではないでしょうか。今回はそんなストックコレクションにぜひ取り入れたいフリーアイコンセット「Emojious Icons」を紹介します。
キャラクターのような可愛らしさを兼ねそなえた、個性的なラインナップを楽しめるアイコンセットとなっています。
詳しくは以下
WEBでは様々なタイプカスタムシェイプが公開されていますが、今回紹介する「20 great custom shapes sets for Photoshop hand-picked from DeviantArt」は個性的なカスタムシェイプを集めたエントリーです。子どもの落書きから、様々なスポーツでの人のシルエットから戦闘機までと様々なカスタムシェイプが公開されています。
今日は紹介されているカスタムシェイプの中から特に気になった物をピックアップして紹介したいと思います。
詳しくは以下
WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。
非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。
詳しくは以下
デザイン素材の中でも、Photoshop形式のファイルは特にクオリティが高くとても便利なもの。今回はそんなフレッシュなフリーPhotoshopファイル「40 Fresh & Free Photoshop Files For Your Next Design」を紹介したいと思います。
さまざまな種類のPhotoshopファイルが厳選され、まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBでコーディングをしていくときにとても便利なフレームワーク。上手く使えばデザインからのコーディングが劇的に早くなります。有名なものもあり、いくつか実務に使っていると言うWEBデザイナーさんも多いかと思います。今日紹介するのはWEBレイアウトを便利にしてくれるフレームワークをつくるWEBサービスやツールを集めた「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」というエントリー。
グリッドを自由にカスタマイズして作れるWEBサービスから、テンプレートまで様々なレイアウトに便利なものがまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
スッキリと綺麗に表現されているサイトは見やすく、使い勝手も良いもの。そんなサイトを手軽に作成するためにおすすめの、クリーンでシンプルなHTMLテンプレート「Floper HTML Template」を今回は紹介したいと思います。
HTMLテンプレートですので自分好みにアレンジも可能。ベーシックなデザインで、いろいろなタイプのサイト設計に活用できそうです。
詳しくは以下
写真加工以外にも、非常にさまざまな表現が可能なPhotoshop。特にPhotoshopで制作されたグラフィック素材は非常にクオリティが高く、使用するだけでデザインの質を一気に高めることができます。今回はそんなPhotoshop形式のpsd素材をまとめた「26 New Photoshop Free PSD Files for UI Design」を紹介したいと思います。
Free Vintage Rolleiflex Badge on Behance
モックアップからテンプレートまで、さまざまな使用シーンに対応できる素材が紹介されています。
詳しくは以下
いろいろなデザインシーンで便利に活用できるベクターのシルエット素材。さまざまな種類をストックしておくといざという時に活躍してくれます。そんな中今回紹介するのは、600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」です。
人間はもちろん、動物、乗り物など、種類豊富にさまざまなポーズのベクターシルエットがセットでダウンロードできるようになっています。
詳しくは以下
