デザインを開発するという視点でお伝えするクリエイティブBLOG
数多くのフリーフォントが発表されていますが、分かりやすく見やすいフォントはデザインにも利用しやすく、クリエイティブを行う上で、重要な武器となります。今回紹介するのは見やすく見出しに最適なフリーフォントを集めたエントリー「20 More Fresh & Free Fonts for Beautiful Headlines」です。
Font FoglihtenFr02 – made by gluk
見やすさを追求しながらもデザイン性の高いフォントが多くまとめられていました。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Design Developではこれまでにも、デザイン性の高いさまざまなフリーフォントを紹介してきましたが、今回は、歪みやかすれを効果的に用いて、ラフな雰囲気を演出したフォント「Amazing Collection of Distorted Fonts for Designers」を紹介したいと思います。
ラフさが加わることで、デザインが単調ではなくなり、奥行きのある作品に仕上げることができます。中でも気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
Design Developではさまざまなフリーフォントを紹介していますが、今回はデザイン性の高い、プロユーザーにも嬉しいフリーフォント集「Fresh Collection Of High Quality Free Fonts for Professional Designs」を紹介したいと思います。
（SD Cammello Font | dafont.com）
シンプルなフォントから、デザイン性の高いフォントまで、40種類以上のフォントが紹介されています。中でも気になったフォントをピックアップしましたので、下記よりご覧ください。
詳しくは以下
■font liquit colour by ~letsgotoshine on deviantART
円を基調にデザインされた可愛らしさを感じるフォントです。ナチュラル系のデザインにぴったり。
■Scruffy Uppercase Only Font on the Behance Network
手作り感を演出するフォントです。DIYやクラフト系のデザイン制作で使いやすいデザインフォントだと思います。
■RBNo2 free font | Fontfabric™
シンプルな中にも、レパートリーのあるフォントセット。シーンに合わせて多用途に利用できるのではないでしょうか？
フリーフォント素材は、デザインの制作時間を短縮するために重要なアイテムだと思います。他にもたくさんのフォントが紹介されていましたので、気になる方は是非原文もチェックしてみてください。商用利用の範囲などは、各サイトで利用規約の確認をお願いします。
デザイン制作に多くの場合必要となるフォント。フリー素材も数多く発表されています。そんな中今回紹介するのは、最近発表された新しいフリーフォントを集めた「7 Fresh Free Fonts for Your Designs」です。
（Piron Free Font V.2 « typedepot）
シンプルなフォントはもちろん、デザインテイストに合わせやすいフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
デザインの表現を決定づける大きな要素のひとつフォント。フォントの違いで当たらえる印象は大きく変わってきます。今日紹介するのは制作で使える、新しくリリースされたフリーフォント集「New High-Quality Free Fonts」です。
デザイン的なものからシンプルで汎用性の高いフォントまで様々なフォントが紹介されていますが、今日はいくつか気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
デザインをする上で頻繁に使用されるサンセリフフォント。クセの少ない形であることから、さまざまなシーンで活躍してくれます。そこで今回紹介するのが、フリーで利用できるサンセリフフォントを集めた「20 Free Sans-Serif Fonts for Designers」です。
（Font Squirrel | Free Font Titillium Text by Accademia di Belle Arti Urbino）
ベーシックなタイプから遊び心のあるタイプまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
WEB 上で見かけてこの色いいなぁと思っても、HTML部分ならソースを開いて、底の部分の色を探しださなければならないし、画像ともなると、ダウンロードするか、スクリーンショットで取ってphotoshopで開いてスポイトツールでとかなりめんどくさい事になります。今日はそんなWEB上で気に入った色の情報を取得することに関してかなり便利なfirefoxアドオン「ColorZilla」を紹介したいと思います。
インストール方法は「ColorZilla Extension for Firefox and Mozilla」のサイドバーの一番上「Install ColorZilla 1.0」をクリックすればインストールが開始されます。インストールすると上記のようなブラウザの左下にスポイトアイコンが表示されるようになります。スポイトをクリックするかShift+Escを押すと色情報を取得開始です。
マウスカーソルが十字になったら色情報の見たい箇所に移動させると情報をRGB、16進数で表示してくれます。嬉しい事に、色情報は10進数、16進数など様々な形式でコピー叶です。また色情報はパレットに記憶させる事ができるため、普段からチェックしておけば自分の好みのカラーパレットが作れ、デザインに役立つかと思います。
企業などのブランディングツールを制作する時に、途中経過でイメージを確認したい・どんな風にツールに展開されるのか知りたい、そんなシーンもあるのではないでしょうか？今回はそんなシーンで活用したい、ブランディングツールのモックアップ制作におすすめのフリー素材「20 Professional Free Branding Mockups」を紹介します。
Branding / Identity MockUp Vol.7 | GraphicBurger
さまざまな種類のツールをリアルに配置したモックアップ素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
秋から冬に向けてイベントも多くなる季節ですが、今回紹介するのは、ここ数年で人気が上昇しているハロウィンで活躍してくれそうな、フォントからイラストまで揃ったハロウィンベクターキット「HaWe: Halloween Vector Toolkit」です。
ハロウィンデザインのポストカードやオリジナルのツールを作るという方にはぴったりの、可愛らしいイラスト素材が揃っています。
詳しくは以下
書類やデザインの内容確認などに頻繁に使うPDFファイル。仕事でもかなりの頻度で使っています。今日紹介するのは様々なファイルをそんなPDFファイルに変換できる「BullZip PDF Printer」です。仮想プリンタドライバとしてインストールされるため、「印刷」コマンドが実行可能なソフトならPDF変換が可能です。
フリーですが、広告やおかしな動きをするプログラムも入っておらず、個人だけではなく商用で利用可能。PDFの品質や、パスワード付きの有無の設定、透かしなど、フリーですが非常に高機能なPDF生成ソフトになっています。
詳しくは以下
WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。
Nice and Free CSS Templates/Layouts by My Celly
基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中から幾つか気になったサイトを紹介したいと思います。
詳しくは以下
なにかと便利に活躍してくれるpsd素材。フリーでも多彩な種類の素材が配布されています。今回はそんないろいろな種類を厳選してまとめたフリーpsd素材集「Free PSD Files for Designers」を紹介したいと思います。
Dribbble – Free Music Player PSD With Album Light/Dark – Free PSD by Ses Vasile Daniel
さまざまなデザインシーンで利用できるpsd素材がまとめられており、是非ストックしておきたくなるものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
国内外で人気のCMS、Wordpress。幅広い種類のテーマが配布されていますが、今日はその中でも比較的新しく、なおかつクオリティが高く、無料で使えるwordpressのテーマを集めたエントリー「 55 Fresh & High Quality WordPress Themes 」を紹介したいと思います。
シンプルでスタイリッシュなものからアナログ表現と組み合わせた作りこんであるテーマから様々なテーマがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
つぎつぎと新しいデザインが発表されるフリーフォント。デザインの良し悪しを決める重要な要素の一つとして、常にアンテナを張り巡らせている方も多いかと思います。今回はそんな方におすすめ、2013年版 最新のクリエイティブなフリーフォントまとめ「18 Latest Free Fonts For Your Designs [2013 Edition]」を紹介したいと思います。
デザインのクオリティを高めたい時に役立つ、クリエイティブ要素の強いフォントが18種紹介されています。気になったフォントをピックアップしましたので、下記よりご覧ください。
詳しくは以下
web・スマートフォン等のデザインに広く活用されているアイコン素材。イラストで機能の意味を手軽に表現できるため、非常に重宝する存在だと思います。そんな中今回紹介するのは、インターフェイスデザインの定番として利用できるフリーアイコン「40 FREE UI Icons」です。
非常にシンプルなので、そのままはもちろん、アレンジ・加工して使えるアイコンが40種まとめられています。
詳しくは以下
通常CSSはプログラミングのようなifのように条件付けなどはできませんが、今回紹介する「Conditional-CSS」はCSSで条件分岐を実現する画期的なものです。
ブラウザや環境が多様化しているなかでは非常に便利な仕組みだと思います。ブラウザ毎に条件を個別に設定する事もできますし、あらかじめ定義しておけば、cssA、cssXなど複数条件をまとめておく事もできます。
詳しくは以下
Conditional-CSSの「デモ」はこちらからどうぞ、IE、firefox,opera,safariでそれぞれ表示が異なります。コード自体は簡単で公式サイトを見ればすぐにわかるかと思いますが、実装にはサーバー側でプログラムを走らさないといけません。プログラムのダウンロードは「Conditional-CSS | Download」からどうぞ。
かなり便利なものでコチラを使えば、様々な環境で表示を最適化する事が出来るかと思いますが、毎回プログラムを読み込む仕組みなので、アクセスが多いサイトでは注意してください。実装の手順として詳しく説明されているサイトをいくつか紹介しておきます。使ってみたいと言う方はそちらを参考にしながら試してみてください。
【参考サイト】
[CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス
CSSの記述に条件文が使えるようになる「Conditional-CSS」:phpspot開発日誌
