デザインを開発するという視点でお伝えするクリエイティブBLOG
WEB業界では最近度々話題になるCSS3。先日DesigndevelopでもCSS3を使ったボタンデザインのテクニックを紹介しましたが、今回はボタンデザインに限らず、CSS3で様々な実験的な試みを行なっているチュートリアル、Tipsを集めたエントリー「18 Incredible CSS3 Effects You Have Never Seen Before」を紹介したいと思います。
Awesome CSS3 Lightbox Gallery – Demo
今まで、HTML×CSSではできなかった事が、CSS3の新たな機能を使って実現しています。多々紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
WEBデザインの次世代規格として注目を集めているCSS3。徐々に技術系のWEBサイトでも取り上げられて、WEBデザイン業界内では話がでる機会も増えてきたと思いますが、今日紹介するのはCSS3を使ってボタンを作るテクニック集「20 CSS3 Tutorials and Techiques for Creating Buttons」を紹介したいと思います。
グラーデーション、オーバラップ、ドロップシャドウなどなど、いままで画像でしか表現が困難だったボタン表現が多数集められています。今日はその中からいくつか気になったテクニックを紹介したいと思います。
詳しくは以下
WEBデザインと言えば、HTML5やCSS3が最近では話題を集めていますが、まだまだ現場ではXHTML+CSSという形が主流だと思います。今回紹介するのは、WEBデザインに便利なCSSフレームワークのまとめたエントリー「Choosing The Best CSS Framework: A Complete Guide」です。
様々なるCSSフレームワークが集められていますが、今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
CSS+XHTMLでのコーディングスタイルが主流になってかなり建ちますが、さらに新しい、CSS3という言葉も最近は耳にするようになってきました。CSS3を使えば、今まで画像でしかどうしても表現できなかった部分等もコードで実装可能になりますが今日はそんなCSS3のテクニックをあつめたエントリー「CSS3 Techniques You Should Know」を紹介したいと思います。
グラデーション表現や、ドップシャドウなどなど、いままでどうしても画像に頼っていた部分がかなり解決されるみたいです。紹介されているものノン蚊からいくつかピックアップして紹介したいと思います。
詳しくは以下
WEBサイトを制作する際とても便利なのがテンプレート。はじめからある程度組まれていますので、そのまま使う事もできますし、作りだけは引き継いでデザインのカスタマイズも可能です。様々なテンプレートが国内外展開していますが、今日紹介するのはクリエイティブで美しいフリーCSSWEBテンプレート9選「9 Beautiful Free CSS Web Templates」を紹介したいと思います。
Portfolio Template 1 download – demo
ポートフォリオから、ポータルサイト系、コーポレートサイトまで様々なジャンルのクリエイティブなCSSWEBテンプレートが公開されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。
CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
詳しくは以下
明けましておめでとうございます。2015年未年、気持ちを新しく切り替え、新年を迎えることができました。
2014年は、仕事面では新しいことがスタートしたり、新しい出会いなどもあったり、とても充実した一年となりました。Designdevelopも、いろいろなジャンルの記事を取り上げることにより日々変化し、そして少しずつですが成長を遂げているのではないかと感じております。どんどんとフリーで使用できる素材が増え、さらにクオリティが高まるなど、デザイナーを始めとするクリエイターにとっては嬉しいことばかり。そんなクリエイターの方たちにより支持されるブログとなるよう、さらに努力を続けていきたいと思っております。
今年はもっと充実した内容を皆様にお届けできるように執筆していけたら、また今後さらなる飛躍を遂げるため、気持ちを新たに今よりももっと進歩できるように、努力をしてまいりたいと思います。本年もDesigndevelopをどうぞよろしくお願い申し上げます。
独特な世界観のある子ども向けのデザインは、可愛らしく楽しめるような細部にわたる演出が重要です。そこで今回紹介するのが、子ども向けのデザインに使いやすいフォントばかりを集めた「35 Free Kid Fonts Themed to Download」です。
装飾がユニークなフォントから、手書き風の可愛らしいフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコン素材はユーザーが視覚的・直感的にwebを操作できる要素として役立つ、現在のWebデザインになくてはならない存在。しかし、自作でたくさんのアイコンを制作するのは意外に大変なものです。そんな中今回紹介するのは、モダンなWebデザインによく似合うフリーアイコンまとめ「The Elegant Icon Font – 310 Of The Best Free Icons For The Modern Web」です。
フラットなデザイン感で統一されたアイコンはどれもクオリティが高く、種類も豊富。すぐにでもサイトのデザインに取り入れられるような展開になっています。
詳しくは以下
WEBサイトを制作する際に、背景に大きな画像を張り込むとその分サイトの容量が大きくなってしまい、重いサイトという認識をされてしまうことも。今回はそんな背景画像を手軽に、そして容量にも配慮して生成できるツールをまとめた「5 Pattern Generators for Background Designs」を紹介したいと思います。
ダウンロード形態を選べる5つのジェネレーターサイトが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ベクターで使える便利なイラストレーターブラシ。アナログ感がプラスされ、表現の幅が劇的に広がりますが、今回紹介するのは、様々なフリーイラストレーターブラシを集めたエントリー「27 Sets of Useful and Free Adobe Illustrator Brushes」を紹介したいと思います。
Chalk Illustrator brushesCreative Commons Attribution-Noncommercial 3.0 License.
黒板に買いたいような表現を再現するブラシからインクを表現したものなどなど様々なタイプの表現が可能なイラストレーターブラシがまとめられています。今日はそのなかからいくつか気になったものを紹介したいと思います。
詳しくは以下
デジカメで画質の奇麗な写真が手軽に撮影できるようになってきていますが、撮影した写真に雰囲気をプラスするには、レタッチのための技術が必要になります。そんな中今回紹介するのが、Photoshopの写真エフェクトに強くなるチュートリアルまとめ「33 Amazing Photoshop Photo Effect Tutorials」です。
HDR Photography With Photoshop CS5 | Psdtuts+
レトロテイストな加工ができるチュートリアルから、肌の質感を美しくレタッチできるチュートリアルまで、さまざまな技術が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
情報を詰め込んだWEBサイト、どれもこれも見せたいのですが、そのためには情報を有効的に見せる事が重要になってきます。今回紹介するのは情報を魅力的に見せることができる、CSSだけで表現されたスライダーをまとめたエントリー「10 Free Open Source Carousel Sliders Built With Pure CSS」です。
Pure-CSS Netflix Show Carousel
スライダーとひとことで言っても様々な表現があります。今回は集められているスライダーの中でも気になったものをピックアップしてみました。
詳しくは以下
WEBデザインは背景によって大きく印象が変わり、それだけにテクスチャや背景パターンの素材は数多くリリースされていますが、今回紹介するのは先進的な印象を与えてくれるカラフルな幾何学パターンセット「Colorful Geometric Pattern」です。
全部で8枚の繰り返しで利用できるシームレスな背景パターンがまとめて配布されています。収録されているパターンについては下記からご覧ください。
詳しくは以下
9800個と言う膨大な数のフォントを集めて公開しているのが今回紹介する「creamundo.com」です。キレイ目な書体から、面白い書体、イラストフォントまで幅広く収録されています。
フォントはフォント名のアルファベット順に収録されていて、サイト内検索もできるようになっています。また特徴的なのが自分が打ち込んだ文字をそのフォントで試せるプレビュー機能がついている点です。
詳しくは以下
欧文フォントやdingbats fontを探している方におすすめしたいのが今回紹介するフリーフォント配布サイト「fontspace.com」です。このサイトでは、 現在8971種類のフリーフォントが収録されていて無料でダウンロードできます。
フォントの個別ページではフォントセットのサムネイルが表示される他、フォントの大きさを選択してプレビューすることもできるので、かなり分かりやすくなっています。
