デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトのアニメーションはとても重要で印象的なアニメーションをそのサイトの価値を大きく向上させてくれます。大きく派手な動きも大切ですが、細かなアニメーションもクオリティを向上させるためには大切な要素の一つです。今日紹介するのはマイクロインタラクションに使えそうなCSSアクセントアニメーション「WickedCSS animations」です。
floater（ふわふわ浮く）、barreRoll（クルっと一回転）、RollerRight（回転しながら出現）、heartbeat（鼓動のように膨らむ）、shake（細かく揺れる）など、かなりの数のアニメーションがCSSのみで再現されています。
詳しく以下
2018年も今日で最後となりました。沢山のWEBサイトが今年もリリースされ様々な印象的なデザインや表現手法が生まれました。今回紹介するのは来年2019年の主流になりそうな、WEBデザイントレンドを紹介したエントリー「20 web design trends for 2019」。
2019年以降に来ると言われているデザイントレンドの中から、国内でも同じようにトレンドになりそうなものを、いくつかピックアップして紹介したいと思います。
コンテンツをクリエイティブにデザインするために、アニメーションを用いたレイアウトを取り入れることはとても効果的です。今回は雑誌を読むようにページをめくって閲覧できるアニメーションテンプレート「Page Flip Layout」をご紹介します。
ファッション雑誌のように美しく写真をレイアウトすることができ、アニメーション効果でデザインをリッチにすることができます。
詳しくは以下
デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。
自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
(さらに…)
デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers
ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
希望のテーマに合ったアイコンセットを使うことで、デザインに個性と統一感を与えることができます。今回は「学校」をテーマにしたイラストアイコンセット「50 Free back to school icons」を紹介します。
ノートやリュック、ペンや定規など、「学校」をテーマにした50種類のかわいらしいデザインを無料で利用することができます。
詳しくは以下
UIの改善などグラフィカルに見せることで効果を発揮するアイコンは意味をより明確にし、伝わりやすいものにしてくれます。今回紹介するのは、そんなアイコンをもっと手軽にWebデザインに取り入れることができる、シンプルで使えるアイコンフォントセットをまとめたエントリー「9 Stunning Super Handy Icons Fonts」です。
Ico Time – Webfont & Desktop font « MyFonts
どれもクオリティが高く、デザインの品質をワンランク上げてくれそうなものばかり。中でも気になったものをピックアップいたしましたので、下記よりご覧ください。
タブ型のメニューはページナビゲーションとして取り入れられている方も多いかと思います。今日はWEB2.0っぽい今時のデザイン感のカスタマイズ可能なタブ型のナビゲーションメニュー「Pure Css Horiontal Menus」を紹介したいと思います。
作りは非常に単純で、リストで構成されています。配布は全部で6色こちらの「デモページ」で動作を確認する事が可能です。各メニュー項目はテキストデータなので日本語メニューも自由に作れるようになっています。またリスト形式でマークアップされていますのでタブを増やす事も簡単にできます。
動きに派手さはありませんが、デザインもシンプルで配色もスタンダードな物が揃っていますので、あわせやすいかと思います。配布は各色ごとにzipファイルでダウンロード可能で圧縮ファイルの中には各画像とCSS、メニューだけ表示させてあるHTMLが同封してあります。組み込み方法はHTMLファイルのソースを見て頂ければ簡単にサイトに実装可能だと思います。
素材の中でも種類が非常に豊富なアイコン。常に新しいバージョンがリリースされています。そんな中今回紹介するのは、フリーダウンロードできる最新のアイコンセット「30 Recently Released Free Icon Sets for Web Designers」です。
定番として利用できそうなものが豊富なアイコンセットが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
レトロな雰囲気を演出する方法はいろいろありますが、今回はそんな中でも簡単にイメージをレトロテイストに寄せてくれる「Halftone Press Photoshop Kit」を紹介したいと思います。
ハーフトーンのパターンにさまざまなバリエーションが揃っています。使用した雰囲気のサンプルをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
photoshopのブラシやベクターデータは使い方や用途によってはデザインの作業時間をかなり短縮してくれます。今日はナチュラル系のデザインをしている方にピッタリな、空や、植物、雷など自然系のphotoshopブラシやベクターデータをまとめたエントリー「64 Beautiful And Free Nature Brush Sets And Vectors」を紹介したいと思います。
かなり自然と言っても多種多様な素材が全部で64個用意されていますので、かなり役立つかと思います。今日はその中でも気になるブラシをいくつか紹介したいと思います。
詳しくは以下
非常にたくさんのフリーフォントがインターネット上で配布されており、膨大な数の中からデザイン性のあるものをピックアップするのはなかなか大変なもの。今回はそんな時に参考にしたい、ハイクオリティなデザイン性を感じられるフリーフォント選「30 High Quality Free Fonts You Should Definitely Own」を紹介したいと思います。
Cornerstone – Free Font on Behance
いろいろなテイストのデザイン性の高いフリーフォントがまとめられ紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
テキストをリッチに装飾して印象的に見せてくれるテキストエフェクト。エフェクトによってがらりと全体の印象が変わるので、重宝します。今回ご紹介するのは、そんなテキストエフェクトを制作する際に役立つ、ハイクオリティなチュートリアルまとめ「New Free Text Effect Photoshop Tutorials (30 Tuts) 」です。
New York text effect photoshop tutorial on Behance
レトロな雰囲気のエフェクトから、ポップな雰囲気のエフェクトまで多数のテイストのテキストエフェクトが30種類揃っています。
詳しくは以下
(さらに…)
気になったweb上の記事や写真を簡単にストック・クリップしておくことができるTumblrは、気軽に閲覧できる分、特に見やすさにはこだわっておきたいものです。そんな中今回は、バリエーションに富んだフリーTumblrテーマ集「65+ Best Free and Premium Tumblr Themes」を紹介したいと思います。
シンプルなタイプから、記事見やすさは意識しながらも個性を持ったたくさんのテーマが収録されています。中でも気になったタイプをピックアップしてみましたので、下記よりご覧下さい。
デザインをして行く中で、ちょっとしたアクセントを付けたい時に便利なのが、装飾形のベクターデータ。今回紹介するのは飾りに使えるベクターデータを集めたまとめエントリー「Vector Butterflies and Floral Ornaments」です。
様々な種類のベクターデータのいくつかのセットで分けられ、まとめてダウンロードできるようになっています。
詳しくは以下
多くのwebサイトで取り入れられているHTML5。魅力的な動きやレイアウトを実現できるため、非常に重宝されています。そんな中今回紹介するのは、高品質なフリーHTML5テンプレート「26 Free HTML5 Templates」です。
（Treviso | Responsive HTML5 Template）
スタイリッシュでデザイン性の高いHTML5テンプレートがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
