デザインを開発するという視点でお伝えするクリエイティブBLOG
日々進化していくWebデザインの表現方法。特にjQueryやHTML5・CSS3においては最新の動向と合わせていくため、たくさん勉強をされているデザイナーの方も多いのではないでしょうか。そんな中今回は、CSS3で実現できる最新のデザイン表現方法をまとめた「20 Useful Fresh CSS3 Tutorials for Web Designers」を紹介したいと思います。
20 Useful Fresh CSS3 Tutorials for Web Designers – DJDESIGNERLAB
奥行きを感じる3D表現、またプルダウンメニューなどに代表される基本機能も一味異なる、最新のWebサイトで見られるような斬新で面白いチュートリアルが揃っています。中でも気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
HTMLに装飾を加えるためのCSSは、2011年頃から登場したCSS3によって表現力が劇的に向上。しかし、新しい機能や表現方法をフル活用できていないという方もいらっしゃるのではないでしょうか？そんな中今回紹介するのが、CSS3で立体的なボタンを表現するチュートリアルをまとめた「40 CSS3 Animated Button Tutorials And Experiments」です。
（CSS Buttons with Pseudo-elements | Codrops）
シンプルなボタンはもちろん、デザインソフトでの制作でも時間がかかりそうなリアリティのあるボタンまで、多彩なCSSデザインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインのイメージに合わせて最適なフォントを選ぶことで、デザインの質は格段に向上します。そんな中今回紹介するのは、ヴィンテージかつレトロな雰囲気を表現できるフリーフォント集「30 Must-Have Vintage Fonts For Free」です。
Monsieur La Doulaise Font · 1001 Fonts
ヴィンテージ調のデザインに合わせやすいフォント30種が厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
手書き風デザインが流行している今、アナログで描かれたようなフォントも数多く発表されています。そんな中今回ご紹介するのは、デザインに華を添えるの手書き風欧文フォントまとめ「20 Free Watercolor Font Styles For Designers」です。
20 Free Watercolor Font Styles For Designers | Naldz Graphics
水彩絵具や油彩、筆を使い描かれたような雰囲気のあるフォントが20種類も揃っています。おすすめのフォントを幾つかピックアップしましたので、下記よりご覧下さい。
詳しくは以下
デザインにさまざまな加工を施すことができるPhotoshop。しかし多機能なだけに使いこなすことができないといった場合も多いのではないでしょうか？そんな中今回紹介するのは、Photoshopを使った効果的なエフェクトまとめ「20 New Photoshop Addons for Premium Effects」です。
Trendy Fashion Photo Action | GraphicRiver
Photoshopで簡単にできる、さまざまな機能を使ったエフェクト機能がまとめられています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
デザインの印象を決める重要な要素であるフォント選びには、誰もが力を入れるもの。そんな中今回紹介するのが、新しく発表されたクオリティの高いフリーフォントをまとめた「55 Latest Free Fonts for Professional Designers」です。
free font Drebeden on the Behance Network
デザイン性の高いフォントからシンプルなフォントまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
普段は矢印のカーソル。CSSである程度コントロールできるのは皆さんご存じかと思いますが、普段そこまで使わないので、突然聞かれてもパッと出でこない人も多いんじゃないでしょうか？「CSS Cursors 」では下記のようなCSSで指定できるカーソルの一覧表が公開されています。
画像は一覧表の一部です。
全てのカーソルがInternet Explorer 4、Netscape 6以上のいずれかでサポートされています。またTESTのリンクにマウスカーソルをあわせるとブラウザでどう見えるのかを実際に表示してくれます。対応ブラウザまで表示してくれているのが嬉しいですね。
詳しくは以下
本格的な夏に突入し、デザインシーンでも夏をテーマにしたデザインを手がけることがいつもよりも多くなっているのではないでしょうか？そんな中今回紹介するのは、夏の緑の青々とした雰囲気を感じられる芝テクスチャまとめ「Absolutely Free Seamless Grass Textures」です。
Seamless grass by RVMProductions on deviantART
さまざまな状態の芝がテクスチャとなってまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
2018年 新年あけましておめでとうございます。
2017年は自身の仕事環境も大きく変化したこともあり、多忙を極め、ブログを一時期アップできないなど、今後のDesigndevelopのあり方について考えさせられた年となりました。結果的にはやはり、少しでも多くの情報を届けていきたい、また自身にとってのクリエイティブリソースを高めていきたいという想いが強くあり、定期的に更新ができる環境を整えることができました。
webの流行と共に、毎年デザインのトレンドや、システム開発技術などどんどんと進化を遂げており、1年前に最新とされていたものが古く扱われてしまうなど、スピードの早い業界にいて、次はどんなものが登場するのかを今からとても楽しみにしています。
2018年も同様に、最新の情報を皆さまにお届けできるよう努めていきたいと思いますので、ぜひ今後もご覧頂けますと嬉しく思います。
今年もDesigndevelopをどうぞよろしくお願いいたします。
仕事デスクの上ではいろいろなアイテムを使用していると思いますが、今回はそんなワークスペースのイメージアイテムが集合したベクターキット「FREE Elegant Vector Kit with 60 Workspace Elements」を紹介したいと思います。
非常に洗練されていながら、どこか柔らかさを感じることができるイラストベクターのセットがダウンロードできるようになっています。
詳しくは以下
Webサイトにとってアイコンは、ユーザーが求めている情報にスムーズにたどり着くために必要なアイテムです。機能や情報をグラフィックに置き換えて分かりやすく示すことが重要となります。今回はそんな時に役立つアイテム、アナログ感のあるPOPでカワイイアイコンセット「Web & Mobile Icons Bundle」の紹介です。
POPでカラフルなアイコンが40種類セットになった便利なアイテムです。
詳しくは以下
デザイン表現や、写真の加工などに便利なテクスチャはいくつあっても嬉しいもの。今回紹介するのは、光のきらめきを表現できるテクスチャ「Ultimate Collection Of Bokeh Textures」です。
（Freebie: 12 Grungy Bokeh Textures | Psdtuts+）
大きさや色など、さまざまな形をした光を映しだしたテクスチャが多数紹介されています。中でも気になったものをいくつかピックアップしてみました。
