デザインを開発するという視点でお伝えするクリエイティブBLOG
CSS3から、利用できるようになったWEBフォント。サーバー上に格納されているフォントデータを利用できる仕組みで、CSSを読みこませるだけで利用ができ、ユーザーのローカル環境に依存しないフォント構成が可能になります。今日紹介するのは、そんなWEBフォントを利用した、アイコンをWEBフォントパッケージジェネレーター「Fontello – icon fonts generator」です。
こちらは様々なアイコンが表示されていて、選択することで、そのアイコンがWEBフォントで利用できるソースファイルをダウンロードできるというものです。
詳しくは以下
デザインの幅を広げるにあたって、新たな素材が効果的に働いたり、アイデアをもたらしてくれることもあるもの。現在Web上にたくさんのフリーテクスチャが公開されていますが、今回は荒廃的な雰囲気を演出できる擦れた壁面のテクスチャをまとめた「7 fresh subtle grunge textures」を紹介したいと思います。
Free High Resolution Textures – Lost and Taken – 7 Fresh Subtle Grunge Textures
油やインクの飛び散りによる汚れや、素材感がまばらなコンクリート、ブリキの様な金属板など、独自のグランジ感が特徴的な壁面の7枚セットになっています。
詳しくは以下
アイコンは視覚的な表現を豊かにしてくれる要素の一つ。UI面を左右する大切なものだからこそ、シーンに応じて適切なものを使用していかなくてはなりません。そんな時に知っていると便利なまとめ「7000+ Material Design Icons – Ultimate Icon Roundup」をご紹介していきたいと思います。
Mini Material Free iconset Vol1 by Iftikhar Shaikh☯ – Dribbble
高品質なデザインアイコンが7000以上もまとめられており、多種多様のテイストを持っています。気になったものをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
紙媒体やWebサイトの提案でも欠かせないモックアップですが、オリジナルの商品を提案する際には、更に重要な役割を担っているように思います。カラーパターンであったり、形の違いで同じデザインであってもイメージが全く変わるもの。今回は、より実際のイメージに近いものを提案できる15種類のマグカップモックアップ「15 Absolutely Free Mug Mockups That Stand Out」を紹介します。
様々な形や質感のマグカップのモックアップ素材が揃っています。
詳しくは以下
テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。
効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイナーなら一度は経験したことがあるであろう”ロゴデザイン”、バランスやフォントの選び方によって大きくその印象が変わってくるかと思いますが、今回紹介するのはロゴデザインのアイデアソースになるフォント集「50+ Free Fonts Collection for Web Designers and Logo Artists」です。
Evolution True Type Font by ~PAULW on deviantART
個性的な雰囲気を持ったフォントが多数収録されており、ロゴデザインはもちろん、フォントを使ってデザインにポイントを加えたい時にも活躍してくれそうです。
詳しくは以下
近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。
シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。
詳しくは以下
(さらに…)
パソコンやスマートフォン、サイネージ広告など、インターネットやデジタル機器を利用した生活が当たり前のようになっていますが、SF映画などの作品でもさらに進歩した世界観を表現した作品も多く、よりデジタルの世界観を誇張したデザインを求められることもあるのではないでしょうか？今回はそんなデザイン制作時におすすめな、デジタルな雰囲気を表現できるフォントをまとめた「A Collection Of Free Digital/LCD Fonts For Designers」を紹介したいと思います。
Clubland font | UrbanFonts.com
デジタル時計のようなフォントやドットを利用したフォントなど、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなwebサイトで取り入れられているwordpress。フリーで使用できるテーマも多数配布されており、活用することでよりデザインや構築がスムーズになります。そんな中紹介するのが、wordpress構築に取り入れたいフリーテーマまとめ「20+ Free WordPress Themes to Start 2016」です。
Cosimo – Blog & Portfolio WordPress Theme | CrestaProject
いろいろなレイアウトのwordpressテーマが紹介されており、どれも魅力的なものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ソーシャル系を中心に、さまざまなフリーアイコンがネット上でダウンロードできるようになっており、日々制作に活用されている方も多いのではないでしょうか？そんな中今回紹介するのは、いろいろな表情を表現できるフェイスフリーアイコン「400 Emoticons Vector Icons」です。
ベクタータイプで汎用性の高い、人の表情を表現したアイコンが400種のセットでダウンロードできるようになっています。
詳しくは以下
日々進化していくWebデザインの表現方法。特にjQueryやHTML5・CSS3においては最新の動向と合わせていくため、たくさん勉強をされているデザイナーの方も多いのではないでしょうか。そんな中今回は、CSS3で実現できる最新のデザイン表現方法をまとめた「20 Useful Fresh CSS3 Tutorials for Web Designers」を紹介したいと思います。
20 Useful Fresh CSS3 Tutorials for Web Designers – DJDESIGNERLAB
奥行きを感じる3D表現、またプルダウンメニューなどに代表される基本機能も一味異なる、最新のWebサイトで見られるような斬新で面白いチュートリアルが揃っています。中でも気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
