デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。
基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。
詳しくは以下
視覚的要素の中で一番重要だと言っても過言ではない色。配色バランスを決めるのはなかなか難しく、それが2色、3色と増えることで難しさは増していくのではないでしょうか。そんな時に活用したい、便利で簡単なカラーパレット作成サイト「Color Supply」を今回は紹介したいと思います。
円形の色相環図をぐるぐると選択するだけで、バランスの良い配色パターンを生成できる、とても便利なwebツールとなっています。
詳しくは以下
デザインに置いて色は非常に重要な要素の一つで、その配色でデザイン全体のイメージが左右されるほど。それだけに配色というのは難しい決定頁の一つでもあります。今日紹介するのはそんな難しい配色の手助けをしてくれる、感情・ターゲットなど様々切り口から配色を提案してくれる配色ツール「Culrs 」です。
「Culrs」は左側のメニューからEmotions、Target Audience、Type of productsなど選択でき、そこからさらに細分化された項目での色彩パターンを提示してくれます。いくつか試してみましたので以下からご覧ください。
詳しくは以下
様々なデザインで活用されるグラデーション。その表現方法によっては色に深みが出たり、奥行きがでたりと単色では表現できない感覚を与えてくれますが、今日紹介するのはグラデーションを操るjavascript「Granim.js」です。
この「Granim.js」はjavascriptを利用して特定の色から特定の色までをシームレスに変化させる事が可能です。
詳しくは以下
デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。
このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。
詳しくは以下
webサイト制作で重要な役割を担うアイコンは、フリーで配布されているものも非常に多く重宝するもの。ベーシックなものから個性的なものまで、さまざまな種類を持っているデザイナーの方は多いと思います。そんな中今回紹介するのは、定番として使用できるフリーアイコンセットまとめ「Free PSD Icons: 450+ Icons for Designers」です。
Boldo – Free Icon Set – graphberry.com
比較的、webサイト制作で使用頻度の高そうな種類が揃ったアイコンセットが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
文字にひげなどの飾りのないフォント・サンセリフ。シンプルで癖なないので、デザイン制作に非常に使いやすいフォントとして重宝されています。そんな中今回紹介するのは、最新のサンセリフフリーフォントまとめ「THE GREATEST FREE FONTS 2014 – SANS-SERIF」です。
たくさんのサンセリフフォントがまとめられており、定番として活用することができそうです。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
SIMPLIFICA Typeface | Free on Behance
細身なフォルムが繊細な雰囲気を感じさせてくれるフォント。女性らしいデザイン、繊細な印象のデザインにおすすめです。
Download the FREE Langdon Font for Small Businesses | XLN Telecom
フォント自体が立体的な仕様になっています。使うだけでデザインに表情を演出することができそうです。
Sant Joan Despí —Free Font on Behance
丸みを帯びたかわいらしい雰囲気が特徴。フォントの個性を生かしたキュートなデザインに是非。
これだけの種類があれば、デザインにバリエーションを持たせることもできそうですね。是非高いクリエイティブ性が求められるデザインに利用してみてください。
前回photoshopのブラシを100個集めたサイトを「PhotoShopブラシを100個集めた「100 Awesome High Resolution Photoshop Brushes」 | DesignDevelop」と言う記事で紹介しましたが、今回はそれを遥かに上回る800個ものphotoshopのブラシを集めたエントリー「Más de 800 brushes para Photoshop」を紹介したいと思います。
数はかなり多いのですが、前回紹介したサイトと同じくブラシで作られたイメージサムネイルを見ながら選べると言うものになっていますので見やすく、どんなブラシかわかりやすくなっています。
詳しくは以下
さまざまなデザインに重宝するアイコンは、フリーで使用できるタイプも豊富に発表されており、愛用しているという方も多いはず。そんな中今回紹介するのが、シンプルな中にもこだわりのデザインが生きたフリーアイコンセット「Plastique Icons Full Set」です。
定番のアイコンが全てセットになっている、幅広いデザイン制作で活躍するアイコンセットです。
詳しくは以下
レトロやカントリー調などの昔懐かしい雰囲気のデザイン。写真だけでなく、使用するパーツやフォントのデザインにもこだわりたいものです。今回ご紹介するのは、そんなデザインをする際に役立つヴィンテージなフォントをまとめた「20 Free Vintage Fonts for Graphic Designers」です。
Free Vintage Fonts | Fonts | Graphic Design Junction
使うだけでそれっぽく仕上がる雰囲気のあるフォントが20種類紹介されています。その中から幾つかおすすめのフォントをピックアップしましたので、ご覧ください。
詳しくは以下
(さらに…)
朝晩の肌寒さを感じるようになり、一気に秋の気配を感じられるようになってきました。そんな中今回紹介するのが、秋のさまざままな雰囲気を表現できるテクスチャ&パターンをまとめた「150+ Fall Backgrounds: Textures and Patterns」です。
Free Texture Grab: Soft Grunge Autumn Textures | inSight Designs’ Blog
イメージ的なパターンから落ち葉や紅葉等の風景テクスチャまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
撮影した写真は、デザインで使用する前にPhotoshopなどで加工して使用することが多いと思いますが、なかなか思いどりの仕上がりにならないことも。今回はそんな時に活躍してくれるフリーPhotoshopアクション「50 Time-Saving and Free Photoshop Actions」を紹介したいと思います。
Premium Looks Photoshop Actions by pstutorialsws on DeviantArt
写真をもっと高品質かつイメージアップさせられる魅力的なアクションが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
現在、主流となっているフラット系のwebデザイン。シンプルなだけに、色使いや全体のバランス、サイト全体の構成などが、とても重要な要素となってきます。今回はそんなフラット系デザインを制作する際の参考にしたいwebまとめサイト「Flat UI Design」を紹介したいと思います。
現在公開されている海外のwebサイトの中で、フラットデザインを取り入れたものが多数まとめられています。気になったサイトをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
WEB制作に必要なアイテムはインターネット上でたくさん配布されており、デザイン制作に利用している方も多いと思います。そんな中今回紹介するのは、世界中の有名な建物が揃うアイコンセット「250 Ultimate World Monuments Icon Pack by Freepik」です。
アメリカ、イギリス、イタリア、ブラジルなど、世界40ヵ国の有名なモニュメントがセットになった、他にはあまりない貴重なアイコンセットとなっています。
詳しくは以下
前回「代表的な12のCSSレイアウトテンプレートを配布する「Nice and Free CSS Templates」」という記事でCSSで作られた基本のセットともなるテンプレート集をお伝えしましたが、今回紹介する「100 Percent Pure CSS Layouts」もそんなベースのレイアウトになりうるテンプレートを集めたCSSテンプレート集です。
名前の通り100パーセントCSSだけで作った、デザインはいっさい無しでレイアウトだけ区切っているテンプレートをひたすら集めています。
詳しくは以下
