デザインを開発するという視点でお伝えするクリエイティブBLOG
コンテンツをクリエイティブにデザインするために、アニメーションを用いたレイアウトを取り入れることはとても効果的です。今回は雑誌を読むようにページをめくって閲覧できるアニメーションテンプレート「Page Flip Layout」をご紹介します。
ファッション雑誌のように美しく写真をレイアウトすることができ、アニメーション効果でデザインをリッチにすることができます。
詳しくは以下
クリスマスまであと数日。デザインのちょっとした部分にもクリスマス感を取り入れることで、より気分を高めることができるのではないでしょうか。そんな中今回ご紹介するのは、クリスマス気分を盛り上げてくれるグラフィカルなトグルボタン「CodePen – Bauble Toggle」です。
クリスマスのオーナメントをイメージさせるイラストがボタンになった、可愛らしいトグルボタンです。
詳しくは以下
WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。
使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。
詳しくは以下
テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。
効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。
Floating Action Buttons: 20 Free Animations for Web Developers
検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。
詳しくは以下
(さらに…)
WEB上で3Dアニメーションやオブジェクトを表示できる技術WebGL。今回ご紹介するのはそんなWebGLを使った、美しいマウススクロールアニメーションをまとめた「WebGL Scroll Spiral」です。
万華鏡のような美しいデザインから、抽象的なモーショングラフィックまで多様なデザイン、全8種類のデモを公開しています。
詳しくは以下
素材感を感じさせたいデザインを制作する際には、テクスチャから模様を抽出したりといろいろな工夫が必要となりますが、一つ一つのパーツ制作に時間もかかってしまいます。そんな中今回紹介するのが、さまざまなスクラッチ柄を表現できるPhotoshopブラシをまとめた「A Collection of Free Scratch Brushes for Photoshop」です。
scratch II by ~ShadyMedusa-stock on deviantART
金属でこすったようなスクラッチ柄から、えんぴつで描かれたようなスクラッチ柄まで、表現力の高いブラシばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイトの構成で多くの場合必要になるコンタクトフォームの制作は、どうしてもデザインがマンネリ化してしまいがち。そんな時に利用したい、Photoshopで制作されたコンタクトフォームとサインアップのデザインをまとめた「55 Free Login, Sign Up and Contact Form PSD Files」です。
Vintage Sign Up Form by ~psd-fan on deviantART
デザインテイストに合わせて選びやすい豊富なデザインが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン制作の際に、色合いにニュアンスを出すために使用されるグラデーション。きれいな色の組み合わせが成功するとデザインが一気に魅力的なものに変化することも。今回はそんなシーンで役立てたい、グラデーションを楽しみながらコード取得もできるサイト「uiGradients」を紹介したいと思います。
ひたすらグラデーションを閲覧するといった非常にシンプルなサイトですが、色の濃淡のコード取得ができるなど実用的にも活用できるサイトとなっています。
詳しくは以下
webデザインを制作する際に非常に役に立つアイコンは、フリー素材でもさまざまな種類が発表されています。そんな中今回紹介するのは、アウトラインで構成されたフリーアイコンセット「Free Outline Icons」です。
ラインのみを使ってデザインされたたくさんの種類のアイコンが200種類も収録されたセットとなっています。
詳しくは以下
WEBデザインを制作する時皆さんはなにを参考にしていますでしょうか？今回紹介するのはWEBデザインに役立つみんなで作るWEBデザイン参考集「bookma!」です。国内の様々なタイプのWEBデザインが投稿されていて参考にすることができます。
ただ単に並べるだけではなく、サイトのテイストやカラー、カテゴリ、サイトタイプなど様々なジャンルで絞り込みが行えるみたいです。
詳しくは以下
webサイトをデザインする際には、すでに公開されているさまざまな種類のサイトを参考にすることが多いと思いますが、膨大な数のサイトから目的に合ったデザインを探すのはなかなか大変なもの。またある特定部分のデザインだけがほしいという場合もあるのではないでしょうか？そんな中今回紹介するのは、さまざまなテーマ別UIを集めた「Calltoidea」です。
大きく1つずつのwebサイトというくくりではなく、タブやフッター、ログインなど、参考にしたい場所をカテゴリ別に探すことができる嬉しい事例集となっています。
詳しくは以下
CG合成やデザイン制作の際に利用しやすいテクスチャは、普段の生活の中では出会うことのできない素材も多く、良いものと巡り会えた際には是非アーカイブしておきたいものだと思います。そんな中今回紹介するのが、素材力の高い岩のテクスチャをまとめた「30 High Quality Rock Texture for your Designs」です。
Hot Rock Texture by *aegiandyad on deviantART
今まで見たことのないような模様や形状が特徴的な、自然の力によって作り出されたさまざまな岩のテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
黄金比とはもっとも安定し、美しい比率とされるもので、様々なデザインに用いられていたりしますが、今日紹介する「Golden Ratio Calculator」は黄金比をWEBデザインで簡単に利用できるWEBツールです。
使い方は非常に簡単で、制作したいWEBサイトのワイドの値を入力するだけで、黄金比に沿った比率でカラムの割合を示してくれるというものになっています。
詳しくは以下
高画質なテクスチャを配布してくれるサイトを「最大2560×1920の高解像度テクスチャを無料配布する「Mayang’s Free Textures」」と言う記事で前回お伝えしましたが、今回紹介する「texturez.com」も負けじと2560×1920という高画質・高解像度のテクスチャをフリーで配布してくれるサイトです。
用意されているテクスチャは様々で、現在「Brick」「Concrete」など定番なものから「Plants」「Food」など少し変わったものまで全部で16のカテゴリーのテクスチャが配布されています。
詳しくは以下
デザインに雰囲気や味のある質感を出すことができるグランジ素材は、自分で素材として作成しようと思うとなかなか大変な作業になってしまうかと思います。そこで今回は、手軽にアナログ感を演出できるグランジphotohopブラシ「1000 Grunge Photoshop Brushes (40 Sets)」を紹介したいと思います。
（Floral Photoshop Brushes – Free Photoshop Brushes | Brush King）
デザインがどこか寂しい、もっとデザインに厚みを出したい時などに活躍してくれるデザインブラシが多数収録されています。中でも特に気になったものをピックアップしました。下記よりご覧ください。
詳しくは以下
