デザインを開発するという視点でお伝えするクリエイティブBLOG
最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。
Floating Action Buttons: 20 Free Animations for Web Developers
検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。
詳しくは以下
(さらに…)
web用のカラーコードがコピペできるサービス。その便利さから活用している人も多いはず。そんな中今回ご紹介するのは、カラーサンプルとして使える、グラデーションパターンを180種類も集めたwebサービス「WebGradients」です。
背景カラーの選定や主流のUIデザインのカラーサンプルとしても使える、ソースコードをそのままコピペ可能な、とても便利なwebサービスです。
詳しくは以下
Webデザインを彩るCSSアニメーション。実装時にはデザインのイメージに合わせて、細かな調整を加えたり、なかなかに手間がかかる箇所でもあります。そんな手間がかかる調整工程を省ける、ブラウザ上でアニメーションが作れるツール「animista」を今回は紹介したいと思います。
ブラウザ上でプレビューしながら細かな動きを調整して、タグをコピペするだけでCSSアニメーションが実装できる便利なツールです。
詳しくは以下
プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。
できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。
詳しくは以下
WEB制作ではスプリットスクリーンなどが極端な例ですが、中央線を軸に左右を大胆に振り分けて使う手法が流行の一つになっていますが、今日紹介するのは、異なるものではなく、一つのオブジェクトをミラーリングして表現できるライブラリ「Mirror Effect」です。
Mirror Effect | Demo 3 | Codrops
単純に全く同じものを出現させることもできますし、上記のように背景を切り分けて表示することもできます。いくつかのパターンが公開されていましたので以下からご覧ください。
詳しくは以下
WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。
このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。
詳しくは以下
登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。
カスタマイズできる項目としてはカラー６種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。
季節感、華やかさ、美しさ、女性らしさなど様々な印象を演出できるモチーフの一つ花。それだけにデザインをしていても非常に便利で使いやすい素材だと思います。今回紹介するのはそんな花を表現してくれるフリーphotoshopブラシセットを集めたエントリー「250+ Floral Photoshop Brushes」です。
Floral Photoshop Brushes(66 brushes)
全部で250もの、花を表現する為のphotoshopブラシが集められています。今日はそのなかからいくつか気になったものを紹介したいと思います。
詳しくは以下
リアルなアイコンや立体的なアイコンなど最近はフリーアイコンと言えどかなり手が込んだ物が配布されていますが、今日紹介する「Sticker Pack 2」はステッカーのような質感にこだわったフリーアイコンセットです。
この「Sticker Pack 2」3つの種類が公開されており、CandyBar（MacOSXアイコン制御アプリケーション）、Macintosh、Windowsと様々なタイプのアイコンが公開されています。内容はそれぞれですがどれも上記のようにペラっとしたステッカーのような仕上がりになっています。
詳しくは以下
様々な携帯のWEBサイトで必要となるギャラリー機能。なるべくなら美しく見せたい部分だと思います。今日紹介するのはXMLで読み込むタイプのFLASHギャラリーを集めたエントリー「30+ Most Wanted Flash Image Gallery Tutorials using XML」を紹介したいと思います。
XMLで外部ファイルを制御していますので、写真の位置を指定し直せば自由にギャラリーの中身を入れ替えることができます。全部で30ものギャラリーがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
サイトを制作する上で、便利な素材PSD。photoshopで扱えるファイルで、細かなカスタマイズも可能で、扱いやすいファイル形式は制作者としてはありがたい形式ですが、今日紹介するのは、2012年に公開されたフリーPSDを集めたエントリー「Best Free UI PSDs of 2012」を紹介したいと思います。
ベーシックなアイコン素材から、ローディング用のプログレスバーなど、制作に利用できそうな様々な素材がまとめられています。今回はその中から特に気になったPSD素材を紹介したいと思います。
詳しくは以下
さまざまなテイストで、種類豊富に配布されているフリーフォント。いろいろな種類をストックされている方も多いかと思います。そんな中今回は、新しいコレクションとして是非加えておきたいフリーフォントまとめ「40 Free Fonts Best For Retro And Vintage Designs」を紹介します。
Gist Rough Upr Exbold Two Demo font by Yellow Design Studio – FontSpace
レトロ&ヴィンテージテイストのフリーフォントが40種ピックアップされ、まとめられています。
詳しくは以下
プログラムについてはそれぞれのジャンルごとに様々なサイトやブログでレビューやTIPSが公開されており、ソースコード自体を記載されています。今回紹介するのは、そんなソースコードをステップごとにわかりやすく閲覧させることができる、プログラムコードをスライダー形式で見せることができる「SPECTACLE-CODE-SLIDE」です。
行数が入り、かつ色分けされたよく見る埋め込まれたコード表示のままで、ステップを追って見せることが可能です。
詳しくは以下
素材テクスチャ選びは、デザインを左右する重要な要素の一つです。そんな中今回紹介するのは、自然の風合いを上手く再現できる木製テクスチャまとめ「40 New Collection of Free Wood Textures」です。
木目の粗いものから繊細なもの、あえて傷のついた素材からきれいな木目が印象的なものまで、様々なテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
プログラムを組むと一言で言っても、内容は幅広く、多くの知識と技術が必要不可欠です。そんな中今回紹介するのは、時間短縮できる無料のツールをまとめた「Best of 2016: 100 Free HTML/CSS Themes」です。
できるだけ短時間でウェブサイト制作が必要とされる場合や、手順のかかるプログラムを素早くこなしたい時に役立つツールが、数多く紹介されていますのでご覧ください。
詳しくは以下
制作には非常に便利なベクターデータ。Designdevelopでも数多く便利なベクターデータやリソースサイトを紹介してきましたが、今日紹介するのはベクターデータを配布しているリソースサイトをまとめたエントリー「49 Amazing Resources for Free Vector Graphics」を紹介したいと思います。
有名どころから珍しい所まで多々公開されています。今日はその中から今までDesigndevelopで紹介した事が無いサイトを中心にいくつか紹介したいと思います。
詳しくは以下
いままでいくつかオンラインでPDFを生成するWEBサービスを紹介してきましたが、ついにAdobeがオンラインPDF生成サービス「Acrobat.com」を開始しました。Adobe IDを登録すればフリーで利用することが可能です。
Adobe IDは簡単な項目を入力すれば簡単に取得できます。もちろん「Acrobat.com」から取得することが可能です。このサービスはFlash再生が可能となった「Acrobat 9」との連携が計られています。
詳しくは以下
