デザインを開発するという視点でお伝えするクリエイティブBLOG
史上最大のリリースとして打ち出されているiOS10。9月の上旬頃のリリースが噂されていますが、今日紹介するのはベクターデータで制作されたiOS10モックデータ「iOS 10 GUI」です。
iOS10などのメジャーアップデートになりますと基本UIの部分も変更になる事が多く、デザインのラフを制作する上でもiPhoneの基本GUIがあればリアルにデザインを伝えることができます。
詳しくは以下
国内でもユーザーが増え続け、プロモーションでも数多くの企業が活用しているInstagram。先日のアップデートやAPIの改訂など開発側にも大きな話題を振りまいていますが、今回紹介するのは企画書に使えるInstagramのUIを再現できる「Instagram UI Kit」です。
こちらはiOS9・アップデート後のユーザーインターフェイスを再現しており、最新の画面を利用することが可能です。
詳しくは以下
単色ではシンプルになりすぎるデザインに、印象を与えることができるテクスチャ素材。効果的な利用方法を模索しているという方もいらっしゃるのではないでしょうか？そこで今回は、テクスチャ利用の参考となるwebデザインを集めた「12 Tips of Using Textures in Web Design」を紹介したいと思います。
（Pigeon & Pigeonette – a picturebook by Dirk Derom and Sarah Verroken）
アナログテイストが印象的なデザインから、シンプルな中にも存在感を感じさせるデザインまで、さまざまなwebデザインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
かすれた文字、あせた写真など、鮮やかや鮮明でないものも時にはデザインを魅力的にしてくれます。今回紹介するのはデザインに風合いや質感を与えたい時に便利なビンテージ感を演出するフリーphotoshopブラシ50「50+ Free Vintage Photoshop Brush Sets to Download」です。
かすれた文字、ラベル、グランジの効いた紙などなど様々なビンテージを感じさせてくれるphotoshopブラシが集められています。今回はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Photoshopに搭載されている便利な機能、ブラシ。ひとはけでいろいろなグラフィック演出ができ、重宝されている方も多いのではないでしょうか？そんな中今回紹介するのは、写真にニュアンス感のある演出が可能なフリーPhotoshopブラシ「20 Essential Free Photoshop Brushes For Web and Graphic Designers」です。
12 Strings And Bubbles Brushes #487 | BrushKing ♛
いろいろな種類のブラシがまとめられており、どれも魅力的なものばかり。気になったものをピックアップしましたので下記より御覧ください
詳しくは以下
背景やパーツの味付けなどに使用されるピクセル素材は、たくさんの種類持っていると、さまざまなシーンに活用できるため、非常に重宝すると思います。そんな中今回は、幅広い用途で活用できるピクセルパターンをまとめた「700+ Ready to Grab Free Photoshop Pixel Patterns」を紹介したいと思います。
（28 Useful Pixel Patterns | Free Design Resources & PSD Files by Awesome Designers）
シンプルで定番のタイプから、ちょっと変わったモチーフを並べた個性的なものまで、いろんな種類が紹介されています。気になったものをいくつかピックアップしましたので、下記よりご覧下さい。
見やすく、分かりやすいインターフェイスを構築するためには、デザイン性にもこだわりが必要なもの。今回はそんな時に便利に活用できるフリーUIキット「11 Useful And Free CSS UI Kits」を紹介したいと思います。
（Dribbble – All CSS UI-kits by Samuel Horn af Rantzien）
シンプルベースのボタンやバーなどを収録したUIキットが11種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
シンプルで使い勝手の良いフォントは重宝しますが、デザインにアレンジを効かせないとありきたりのデザインになってしまうことも。そんな中今回紹介するのは、個性的なデザインを取り入れたフリーフォントまとめ「20 Free Fonts That You Should Work With」です。
使うだけでデザインに変化をもたらしてくれる20種のフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
インターネット上ではどんどんと新しいデザイン素材が生まれており、常にチェックされている方も多いのではないでしょうか。そんな中今回紹介するのは、最新のフリーリソースをまとめた「50 Free Resources for Web Designers from January 2016」です。
Branding Mockup PSD – GraphicsFuel
毎月ピックアップされているまとめで、クオリティの高さが魅力のフリー素材が多数紹介されています。
詳しくは以下
まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。
予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。
詳しくは以下
コードの呼び出し例は以下のとおり。
上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。
Webサイトの修正において、細かいものであればHTMLやCSSのみで対応してしまうことがあると思います。もちろんデザインを事前に作る事は重要だと思いますが、時にはプログラムのみで解決できてしまう手軽さも必要なのではないでしょうか。今回紹介するのはそんな手軽さをより強く感じさせてくれる、アイコンフォントのまとめ「15 Useful Free Icon Fonts for Designers」です。
通常、HTMLに「A」と記述すれば「A」と表示されますが、アイコンフォントを使用すれば対応するアイコンが表示される仕組みとなっています。どれも扱いやすいものばかりですが、中でも気になったものをピックアップしましたので、下記よりご覧ください。
Some Random Dude — Iconic is Becoming Awesomer
ファイル関連を中心に、さまざまな種類のアイコンを収録したフォント。スタンダートな見た目なので使うシーンを選びませんね。
Maki | A clean point of interest icon set from MapBox | MapBox
スポーツ関連など、Webとはあまり関係のないものが収録されたアイコンフォント。リアルと結びついたデザインに使えそうです。
Modern Pictograms – The Design Office
ポップ調のアイコンが集められたフォント。子ども向けのデザインによく合いそうです。
利便性からすると、全てアイコンセット内で解決する事ができるのであれば、アイコンフォントを利用するという選択肢もありそうです。
レトロやカントリー調などの昔懐かしい雰囲気のデザイン。写真だけでなく、使用するパーツやフォントのデザインにもこだわりたいものです。今回ご紹介するのは、そんなデザインをする際に役立つヴィンテージなフォントをまとめた「20 Free Vintage Fonts for Graphic Designers」です。
Free Vintage Fonts | Fonts | Graphic Design Junction
使うだけでそれっぽく仕上がる雰囲気のあるフォントが20種類紹介されています。その中から幾つかおすすめのフォントをピックアップしましたので、ご覧ください。
詳しくは以下
(さらに…)
