デザインを開発するという視点でお伝えするクリエイティブBLOG
@font-face規則とは、CSSで利用したいフォントを指定するためのもので、フォントデータの入っているURIを指定すると、フォントを持っていないユーザーにも任意のフォントで見せる事ができるというものですが、今日紹介するのはそんな@font-face Fontsで利用できるフリーフォントを集めたフォント集「Download Hundreds of @font-face Fonts」です。
Blackletter、Calligraphicなどとカテゴリに分けられて様々な書体ががダウンロードできるようになっています。
詳しくは以下
デザインのイメージを決定つけるフォント。様々なフォントが制作され降下されていますが、今回紹介するのは可愛らしくコミカルなフォントを集めた「40 Free Unique Cartoon and Comic Fonts 」です。
様々な手書き風だったり、POPな書体だったり柔らかな印象を与えてくれるフォントが多数紹介されています。今回は紹介されている中からいくつかピックアップして紹介したいと思います。
詳しくは以下
Designdevelopでは様々な書体を紹介してきましたが、今回紹介するのはWEB2.0系のサイトのロゴに使われていそうな柔らかいフリーフォント「15 Beautiful Free Web 2.0 Fonts」を紹介したいと思います。
WEB2.0と聞かなくなってもうかなりの時間が経ちますのでどんな括りなんだと思った方も多いかと思います。今回のフォント集は傾向として、全体的に丸文字や雰囲気が優しい書体が多く集められていました。今日はその中からいくつか気になったフォントを紹介したいと思います。
詳しくは以下
今までDesigndevelopでは様々なフリーフォントを紹介してきましたが、今回紹介するのは比較的最近リリースされたハイクオリティなフォントを紹介しているエントリー「40 Fresh High-Quality Free Fonts For Your Designs」です。
最近リリースされたものが多いため、あまり見かけないフォントが数多く紹介されています。今日はその中でも気になったものをいくつか紹介したいと思います。
詳しくは以下
様々なフォントが国内外、配布されていますが、今日紹介する「The League of Moveable Type」はそのなかでもクリエイティブなフォントをいくつか公開していてダウンロードする事ができます。
サイトの名前を見るとちょっとフォント配布サイトに聞こえない部分がありますが、すべてのフォントはオープンソースの考え方が根底にあるみたいで、無償で社会貢献のため無償で公開されています。収録されているフォントを下記に紹介したいと思います。
詳しくは以下
Designdevelopでは様々なフリーフォントを紹介してきましたが、今回紹介するのはピクセルで作られた独特な世界観を演出できるピクセルフォントを集めてまとめたエントリー「34 Free and Elegant TrueType Mini Pixel Fonts」を紹介したいと思います。
ピクセルフォントといっても、書体に違いが有り、様々なタイプのピクセルフォントがまとめられています。今日はその中から気になったピクセルフォントをいくつか紹介したいと思います。
詳しくは以下
WEB制作で欠かせない存在のアイコン。今日紹介する「DryIcons.com – Free Icons and Graphics」はクオリティの高い、アイコン素材とグラフィック素材を無料で公開、配布しているWEBサイトです。
アイコンは種類が豊富で、テイストも様々ですが、どちらかと言えば3Dっぽい作り込んであるタイプのアイコンが多い気がします。アイコンはセットになって配布しているので、新規サイト立ち上げなんかのと記には非常に使い勝手が良さそうです。まず公開されているアイコンの中からいくつか気になるセットを紹介したいと思います。
詳しくは以下
Photoshopには様々な機能がありますが、中でも重宝されるのがブラシ機能。難しい表現も可能にしてくれるので活用している人も多いのではないでしょうか。そんな中今回は、写真やデザインにアクセントをつけたい時におすすめのフリーで使えるPhotoshopブラシ「Brushing Up: A Large Collection of Free Photoshop Brushes」を紹介したいと思います。
Ebullient| 9 Painting Brushes by desperatedeceit on DeviantArt
様々なテイストのブラシが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、以下よりご覧ください。
詳しくは以下
IEのサポートも縮小され、少しづつではありますが、制作の現場もアニメーションやエフェクトに対して積極的になってきました。本日紹介するのはdivもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」です。
こちらは様々な要素に対して、回転のエフェクトを与えることが可能となっております。例えばON/OFFのトグルだったり、アップロードだったりダイアログだったり、div自身にも与えることができるため、ページ全体を切り替えるようにした使い方も可能です。
詳しくは以下
細かい所に気を配るとサイトのデザインはグッと高まります。今日紹介するのはサイトにちょっとしたアクセントと遊び心を加えてくれるミニアイコン集「Quality mini icons」です。下記のような小さくてクオリティの高いアイコンが「Creative Commons Attribution-Noncommercial 3.0 Netherlands」で配布されています。
Creative Commons Attribution-Noncommercial 3.0 Netherlands内容を見ると商用利用はできませんが、クレジットを示せば自由に使用する事ができるパッケージとなっていますので個人でサイトを開かれている方にはうってつけのアイコンセットだと思います。
詳しくは以下
通常のWordPressのページナビゲーションは「« Previous Page Next Page » 」として表示され、今何ページ目にいてどのくらい続きがあるかが直感的に分かりません。
そこでそんなインターフェイスの不便利を解決してくれるのが今回紹介するプラグイン「WP-PageNavi」です。
プラグインを導入すればページナビゲーションが上記のように表示され、今何ページ目にいるのかが瞬時に分かるようになります。ほんの少しの事ですが、閲覧する側を考えれば当然の配慮かと思います。
１．WP-PageNaviからプラグインをダウンロード
2.ローカルで展開後フォルダごと「wp-content/plugins」へアップロード
3.「WP-PageNavi」プラグインの有効化
以上です。
これだけではページナビゲーションは反映されませんので下記の手順を踏んでください。
導入方法は以下
(さらに…)
文字の線の太さが一定で作り出されているサンセリフフォント。シンプルでどんなデザインにもマッチしやすいことから、定番フォントとして活用されています。そんなサンセリフフォントをまとめた「20 Free Sans Serif Fonts Every Designer Should Have」を今回は紹介したいと思います。
（Free Font TeX Gyre Adventor by GUST e-foundry | Font Squirrel）
サンセリフフォントの中でも、洗練さやデザイン性を持った種類が豊富にまとめられています。
詳しくは以下
webデザインにはさまざまなテイストがあり、その中で個性を演出していくことは、意外に難しいもの。そんな中今回は、ひと目見たら忘れられないようなwebサイトデザイン「MODALZ MODALZ MODALZ」を紹介したいと思います。
すべての要素がドットで作られた、懐かしささとアナログさが逆に新鮮なサイトデザインとなっています。
詳しくは以下
webサイトを一からデザインするとどうしても時間がかかってしまうもの。時にはフリーで配布されている素材を使用することで、効率的に仕上げることができると思います。今回はそんな時に参考にしたい、フリーフラットUIキットまとめ「30 Free and Flat UI Kits for November 2014」を紹介したいと思います。
L Bootstrap Freebie – UI Kit Inspired by Android L on Behance
いろいろなタイプのフラットテイストなフリーUIキットがまとめられており、便利に活用することができるようになっています。
詳しくは以下
アイコン素材の中でもシンプルなテイストのアイコンは、いろいろなデザインに対応できるため非常に重宝します。そこで今回は、是非ストックしておきたいフリーミニマルアイコン「20 Free Minimalistic Icon Sets」を紹介したいと思います。
（Dribbble – Minimal line Icons by Vincent Tantardini）
ミニマルテイストの多彩な種類のアイコンが20種まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
サイト内を検索する時に使用するサーチボックス。基本シンプルなデザインで配置されることが多いですが、今回はデザイン的に表現したい時に参考にしたい、実用的なPhotoshopサーチボックスをまとめた「36 Useful Search Box Designs In Photoshop Format」を紹介します。
Search Field PSD Collection – Free PSD Files
いろいろなタイプのデザインで構成されたサーチボックスが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
