デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。
使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。
詳しくは以下
モックアップ素材は多く普及しており、使用している方も多いはず。デザイナーにとって重宝できるモックアップ素材ですが、解像度を気にしなくてはならなかったり、新機種が発表されたタイミングなど、中身の入れ替えが面倒な時も。そんなシーンで役立つ、CSSのみを使用してつくられた「Devices.css」を紹介していきたいと思います。
機種も多く収録されており、知っておくと便利に活用することができそうです。
詳しくは以下
お問い合わせやアンケートなどのUIに欠かせないセレクトボックス。新しい動きやデザインを上手く取り入れることで、他にはないオリジナル感を演出し、差を付けることができると思います。そんなシーンで参考にしたい、フリーで利用可能なオープンソースのものをまとめた「10 Free Open Source CSS and JavaScript Select Box Snippet」を今回は紹介します。
CSSとJavaScriptの特殊なセレクトボックスが10種類紹介されています。中から気になったものを幾つかピックアップしてご紹介しますので、ご覧ください。
詳しくは以下
(続きを読む…)
Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。
グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。
詳しくは以下
Web上においてボタンは欠かせないもの。何か物を購入する際や、メールを送る際には必ずクリックするものだからこそ、分かりやすく、デザイン性の高いものにしていきたい。そういったシーンでも活躍してくれるボタンコレクション「10 Awesome CSS Button Libraries & Collections」をご紹介していきたいと思います。
コーディング上でデザインの可変が可能なCSSで作成されたボタンをまとめたものになります。下記にいくつかピックアップしてありますので、ご覧下さい。
詳しくは以下
テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。
効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ベクター形式の素材は、加工が容易に可能だったり、汎用性が高いなどといったメリットがあるため、非常に重宝する存在。今回はそんなベクター形式のグラフィック素材を集めた「33 Free Vector Graphics and Vector Infographics Resources for Designers」を紹介したいと思います。
Travel Background Vector Graphic — DryIcons.com
さまざまな種類のベクターグラフィック、そしてインフォグラフィック作成用の素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
基本的なIllustratorの使い方はスクールなどで学ぶことはできても、実践的な使い方は仕事の中で学ぶことが多いもの。そんな制作のヒントになる、使い方を手軽に学べるIllustratorチュートリアルがまとめられていましたので、紹介したいと思います。
Create a Stylish Switch Button in Illustrator | Vectortuts+
ロゴマーク制作からイラスト制作まで、さまざまなシーンに利用できるチュートリアルが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
世界中のクリエイティブワークで利用されているソフトウェアphotoshop。使い方次第で様々な表現が可能ですが、今日紹介するのはphotoshopを利用したテキストエフェクトチュートリアル集「20 Creative Photoshop Text Effect Tutorials」です。
立体的なものから、写真を利用したものなど様々なチュートリアルが紹介されています。今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
■Embossed Text with Metallic Glow
鉄板を型抜いたような表現のテキストエフェクトチュートリアル。
■Atmospheric Under-Water Text Effect
水滴でかたどられたテキストを表現するためのチュートリアル幻想的な雰囲気を演出することができます。
■Cool Text Effect with the Puppet Warp Tool
ロープで作るテキストエフェクト。細かい質感も表現されています。
上記の他にも様々なクリエイティなphotoshopチュートリアルが公開されています。新しいデザインに挑戦したいという方は是非どうぞ。
ビジネスの上で重要なツールの一つ名刺。それゆえにこだわっている方も多いかと思いますが、逆に沢山配るものなので、簡単に作れれば良いとお考えの方も多いかと思います。今日紹介するのはクリエイティブな名刺を簡単に作成できる名刺のベクターデータ素材を配信している「12 Free Vector Business Cards」を紹介したいと思います。
配信されている名刺は全部で１２種類で、どちらかというと色鮮やかなものが多く、印象的なデザインが中心です。
詳しくは以下
作業をするときはメインのマシンが決まっていて、ほぼそのマシンを使って作業をするのですが、ごく希に出先などで作業する時もあり、その際に困るのがソフト。同じ環境はもちろん難しいですが、画像編集とか必要になった場合などの作業が発生した時困ってしまっていました。
Pixlrのインターフェイス
WEBさえあればどんな所でも使えるオンラインイメージエディタのまとめが「Six Revisions」で紹介されていましたので、今日はオンラインイメージエディタのスクリーンキャストを交えながら、自分のメモがわりにまとめておきたいと思います。
詳しくは以下
ビジネスシーンに欠かす事ができない名刺、情報を的確に伝えることはもちろん、渡した相手にインパクトを与えるデザインもとても重要な要素の一つです。そこで今回は、エンボスなど特殊加工した名刺デザインを集めた「Showcase of 47 Letterpress Business Card For Inspiration」を紹介したいと思います。
（Branded Business Cards | Business Cards Observer）
凹凸のある特殊加工・エンボス加工を利用しデザインされた名刺を中心に、さまざまな種類のデザイン名刺が紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
どんな写真でも、優秀なフィルターを用いることで、それらしい写真が撮影できるInstagramは国内を始め世界中で利用されていますが、今日紹介するのはCSSでInstagramで使われているフィルタ効果を実現する「CSSgram」です。
CSSは非常に軽量で、1kb以下のコードで、様々な種類のフィルタ表現がブラウザ上で可能になります。その数は全21種類にも及びます。
詳しくは以下
webサイトの構成で多くの場合必要になるコンタクトフォームの制作は、どうしてもデザインがマンネリ化してしまいがち。そんな時に利用したい、Photoshopで制作されたコンタクトフォームとサインアップのデザインをまとめた「55 Free Login, Sign Up and Contact Form PSD Files」です。
Vintage Sign Up Form by ~psd-fan on deviantART
デザインテイストに合わせて選びやすい豊富なデザインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
絶妙なアナログ感とちょっとしたおしゃれ感を演出してくれるポラロイドカメラ。グラフィックデザイン、WEBデザイン問わず良く利用されていますが、今回紹介するのはそんなポラロイドカメラの演出を簡単に作る事ができるポラロイドカメラフレームベクターデータ「Free Polaroid Vector EPS」を紹介したいと思います。
一般的なポラロイドカメラから、インクがこぼれだしたもの、つり下げられているものからちょっと汚したものなど、様々なポラロイドのベクターデータがセットで公開されています。
詳しくは以下
デザインのワンポイントとして良く利用される植物をモチーフにしたオーナメント。雰囲気あるデザインを手軽に演出できるアイテムとして人気があります。そんな中から今回は、ビンテージ感のある植物オーナメントを集めたエントリー「250+ Free, Vintage Graphics: Flourish Vector Ornaments」を紹介したいと思います。
（Free Vintage Vector Ornaments – Free Vectors – Creattica）
花や葉っぱなど自然素材をモチーフにしたオーナメントが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
