デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBで表示されるテキストは、各々のユーザーのフォント環境に左右されるため、システムフォントなどが基本となっていますが、@font-face は、Web ページを製作者がWeb フォントを指定し、フォントを提供。ユーザのコンピュータにインストールしているフォントの数に依存しないテキスト表示が可能な技術ですが、今日紹介するのはそんな@fontfaceで使えるフリーフォント25「25 Free Fonts Perfect for @fontface (Revived)」です。
Dekar Download Page →Freeware License
いくつかのフリーフォントがまとめられていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
世界中で様々なフォントが公開されていて、フォントと一口にいっても様々な種類のフォントがありますが、今回紹介するのはLEDに表示されているようなドットで構成される、デジタルチックなフリーフォントを集めたエントリー「20 Best Useful Digital Fonts for LED Banner Designing」です。
上記のようなフォントが全部で２０個まとめられています。今日はその中からいくつか気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
デザインを決定づけるフォント。デザインのイメージと近いフォントを利用することで、デザインのクオリティも向上します。今回紹介するのは汎用性の高い、高品質なフリーフォントを集めたエントリー「50 Best Free Fonts of All Time」です。
少々癖のある書体も含まれていますが、比較的シンプルで使いやすそうなフォントが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
手書きのフォントは程良いアナログ感と柔らかさを与えてくれるフォントで、さまざまなデザインに利用できます。今日紹介するのはクオリティの高いフリー手書きフォントを集めたエントリー「20+ Most Amazing Free Handwritten Fonts for Web designers」。
手描きなので、どの文字がキレイと思うのかは好みが分かれるところだと思いますが、手描きの欧文フォントが全部で20個紹介されています。
詳しくは以下
フリーフォントは世界中で日々リリースされており、中には非常に特徴的なフォントもリリースされています。今日紹介するのはちょっと個性的なフリーフォントを集めたエントリー「15 Fresh And Beautiful Fonts For Free Download」です。
正統派とは少し違うクリエイティブなフォントが全部で15個紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
フォントにはさまざまなデザインが存在しており、デザインが出来上がった状態は一つのグラフィックとして完成されていますが、今回はタイピング＝打ち込みをする際の表情に注目しデザインされたフリーフォント「Typing Art」を紹介したいと思います。
（Typing Art｜オドリコ 文字がクルクルと踊ります。）
タイピングした瞬間に、それぞれのデザインをイメージさせる動きを見せるというとてもユニークなフォント。もちろん、デザインフォントとしても魅力溢れるシリーズとなっています。
詳しくは以下
デザイン制作に非常に役立つphotoshopブラシは、いくつあっても嬉しいもの。今回紹介する「20 Free Useful Water and Cloud Brushes resource for Photoshop Users」も、非常に活用頻度の高いブラシセットまとめです。
（Water Brushes Sampler by ~FrozenStarRo on deviantART）
詳しくは以下
水が飛び散る様子、夏の日の空のような大きな雲など、さまざまな種類のブラシが紹介されています。いくつかピックアップしてみましたので、下記よりご覧ください。
リアルなオブジェクトをデザインソフトで作り出そうとするのは、時間や手間もかかり、高いクオリティに仕上げることができる技術も必要になってきます。今回はそんな時是非参考にしたい、イラストレーターで作れるベクターデザインチュートリアルまとめ「40+ Adobe Illustrator Tutorials On Vector Design」を紹介したいと思います。
Create a Crayons Illustration in Adobe Illustrator – Tuts+ Design & Illustration Tutorial
Adobeのソフト・イラストレーターを使ったいろいろなデザインオブジェクトの制作方法が紹介されています。
詳しくは以下
背景に使用されるパターン素材は非常に便利ですが、少しネックとなるのは継ぎ目を加工しないと配置拡大して使用できないところ。今回はそんなデメリットを解消したシームレスなパターンの中でも、アイコンでデザインされたものをまとめた「20 Free Seamless Icon Patterns for Designers」を紹介したいと思います。
hipster hand drawn pattern Vector | Free Download
継ぎ目なく敷き詰められる、いろいろなテイストのアイコンパターンが豊富に紹介されています。気になったものをピックアップしましたので、下記よりご覧下さい。
詳しくは以下
デザインのクオリティを上げたくても、日々の仕事に追われてなかなか時間をかけられないデザイナーさんは多いと思います。今回はそんな方たちに向けて、Photoshopで作られた高品質なWEBデザインテンプレート集「10 Beautiful & Free Website PSD Templates」を紹介したいと思います。
海外でよく見られる１カラムデザインを中心として全部で10種類のテンプレートがまとめられています。今回はその中でも気になったテンプレートをピックアップして紹介したいと思います。
年齢を問わずさまざまな人たちが利用するネットショッピング。クリック1つで簡単注文できるのでとても便利ですが、使いやすさが追求されたサイトを一から構築していくのはとても大変な作業です。そんな時に参考にしたい、多くの人が活用するECサイト運用のための便利なサービス14選「14 Best ECommerce Options for Designers」を今回は紹介します。
eCommerce Open Source | Free eCommerce Website | Magento
用途に合わせて活用できるアイテムが揃っています。気になったものをいくつかピックアップしましたので、以下よりご覧ください。
詳しくは以下
javascriptを使って、画面にオーバーレイしてコンテンツを表示させるライトボックス。現在のWEBページでは一般的な表現方法の一つで、数多くのサイトで公開されていますが、今回紹介するのは様々なライトボックスなjQueryプラグインをあつめたエントリー「31 mind blowing collection of jQuery light box」です。
どれも基本的な機能は同一のものになりますが、それぞれで少し特徴があるものもあります。今日はまとめられているライトボックスの中からいくつかピックアップして紹介したいと思います。
詳しくは以下
webサイトなどを制作する時、グラフィックからフォント、アイコンに至るまで、さまざまな要素を組み合わせることで全体のデザインが出来上がります。今回はそんな時に参考にしたい、フリーpsdファイルをたくさんまとめた「Free PSD Files : 30 New PSD Graphics for Designers」を紹介したいと思います。
（Free PSD Responsive Template on Behance）
多彩なフリーpsdファイルが紹介されており、非常に便利に活用することができそう。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
撮影した写真が思ったような雰囲気に仕上がらなかった時、photoshopなどの写真加工ソフトを使って加工を施すだけで、望んでいたイメージに仕上げることができます。今回はその作業負担を減らしながら、プロが撮影したような高いクオリティの写真が出来上がるアクションをまとめた「20+ Awesome Photoshop Actions to Pimp Your Photos」を紹介したいと思います。
（free photoshop actions 14 Freebies: 20+ Awesome Photoshop Actions to Pimp Your Photos）
アンティーク風の質感から、多彩な色味のバリエーションを作り出すことができるものまで、さまざまな種類が紹介されています。気になったアクションをいくつかピックアップしましたので、下記よりご覧下さい。
次世代の規格として注目されているCSS3。新しいブラウザではすでに対応していて、すでに利用しているという方もいらっしゃると思いますが、今回紹介するのは様々なCSS3ならではの処理を簡単に実現できるCSS3ジェネレーター「CSS3 Generator」です。
上記のようにものすごくシンプルなインターフェイスとなっていて、まずはCSS3で行ないたいデザイン処理を選びます。シャドウ、テキストシャドウ、線の外側に線など様々なデザイン処理が準備されています。
詳しくは以下
多くの、端末がリリースされていて、端末間の表示を合わせるのはフレームワークを使わないと色々と面倒になってきました。今日紹介するのはPC、タブレット、スマートフォンで使えるHTML5ベースのUIフレームワーク「Kendo UI 」です。
基本的にはjsとcssで作られたフレームワークとなっていてjsとcssを読み込み、ルールに沿って、記述していく形になります。
詳しくは以下
