デザインを開発するという視点でお伝えするクリエイティブ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を制作する上で、印象を決定付ける大きな要素が背景。表示面積が大きいだけに背景が与えるものは大きい。今日紹介するのはそんなWEB制作の際に使えるシームレスに敷きつめられるWEB用背景素材配布サイトを集めたエントリー「27 Best WebSites to Download Free Seamless Patterns」を紹介したいと思います。
ジェネレーター的な使い方ができるサイトから種類豊富に幅広い背景素材を配布されているサイトまで様々なサイトが収録されています。今日はその中からきになったものをピックアップして紹介したいと思います。
詳しくは以下
webサイトを作り、運用をしていくのに欠かすことのできないSEO対策。その要素や種類にもさまざまな種類が存在しており、サイトに合わせて使い分けて使うことが必要となってきます。今回はそんなSEO系サービスの表現に利用できるアイコンセット「60 SEO Services Icons」を紹介したいと思います。
フラットタイプの、シンプルかつ柔らかい色合いで展開されたSEO系サービスアイコンが60種類収録されています。
詳しくは以下
以前表示されているWEBページからスポイトツールで色を抽出できるfirfox拡張機能を「WEB上のカラー情報を取得できるFirefox拡張機能「ColorZilla」」という形でお伝えしましたが、今回は表示されているページに使われている色を丸ごと取得してカラーパレット化してくれるfirfox拡張「Palette Grabber」を紹介したいと思います。
使い方は非常に簡単でステータスバー左下の上記のようなパレットアイコンをクリックするだけです。この拡張機能が便利なのは色をカラーパレット化するだけではなくてワンタッチでカラーパレットをaco形式で書き出せる点です。Photoshop、Paint Shop Pro、GIMPなどの有名なドローソフトはこのaco形式に対応していて読み込ませる事が可能です。
下記のの画像は「designdevelop」のカラーパレットをphotoshopで読み込んだものです。
参考にしているページのカラーパレットがあれば、デザインしていく上でかなりイメージに近づけやすくなるんじゃないかなと思います。WEBデザイナーなら押さえておいても損は無い拡張機能だと思います。
Photoshopのブラシは、写真やオブジェクトの見た目を簡単に変えることができるツール。できればより多くストックしておいて、デザインの幅を広げておきたいもの。そんな中今回紹介するのは、写真に手軽にスクラッチされたようなニュアンスを加えることができるブラシライブラリのまとめ「A Collection Of Free Scratch Brushes For Photoshop」です。
Scratches by ~Smirnoff-Sweetie on deviantART
金属に刻まれた細かな傷や鋭いもので引っ掻いたような傷など、さまざまなスクラッチブラシがまとめられています。中でも気になったものをピックアップしたので、下記よりご覧ください。
詳しくは以下
簡単に表示できる上、1つのセットで種類を豊富に揃えていることが多いアイコンフォントは、取り入れると非常に便利に活用できる素材。今回はそんなフリーアイコンフォントまとめ「25+ Best Free Icon Fonts」を紹介したいと思います。
pictos-icon-font.png (1074×1064)
定番として利用できそうな、ベーシックな種類のアイコンを多数そろえたアイコンフォントが紹介されています。
詳しくは以下
最近流行のフラットデザイン。目新しさに加えて、ファイルサイズも小さくなるのでスマートフォンなどの端末に適していると言われています。今回紹介するのは、そんなフラットデザインを取り入れたさまざまな拡張子のファイルアイコンセット「FILE TYPE ICONS with Flat Design Style」です。
Microsoft WordやXLSに代表される一般的な拡張子のファイルや、Photoshop、Illustratorといった、制作系で使われるファイルが数多く取り揃えられています。
WEBサイトを制作するとき、一から制作するのはとても面倒で、少しでもベースがあれば随分と作業は短縮される事が多いです。今日紹介する「40 Free Web Template Resources」と言うエントリーは海外のフリーテンプレートを配布しているサイトをまとめたエントリーです。
全部で40ものサイトが紹介されていますが、今日はその中から気になるテンプレート配布サイトをピックアップして紹介したいと思います。
詳しくは以下
デザインをする上で頻繁に使用されるサンセリフフォント。クセの少ない形であることから、さまざまなシーンで活躍してくれます。そこで今回紹介するのが、フリーで利用できるサンセリフフォントを集めた「20 Free Sans-Serif Fonts for Designers」です。
（Font Squirrel | Free Font Titillium Text by Accademia di Belle Arti Urbino）
ベーシックなタイプから遊び心のあるタイプまで、さまざまなフォントが紹介されています。中でも気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
世界的に利用されている高機能な写真加工ソフトphotoshop。その世界は奥が深く、テクニック次第では様々な世界を創る事ができますが、今回しょうかうするのはphotoshopを使った写真加工のチュートリアルを集めたエントリー「35 Fresh Photo Effect Photoshop Tutorials」。
Combine Stock Photography to Create a Sleepy Japanese Village in Photoshop
現実世界をより引き立てるための加工テクニックから、空想の世界を描くためのテクニックまで幅広い写真加工のチュートリアルが紹介されています。今回はその中から幾つか気になったチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
情報を分かりやすく視覚化してくれるアイコンは、ウェブデザインやアプリのUIなど、デザインをするにあたって欠かせない存在となっています。今回ご紹介するのは、そんなデザインに欠かせないアイコンのフリー素材をまとめた「30 Free Icons Sets to Use on Websites and Apps」です。
30 Free Icons Sets to Use on Websites and Apps
使えるハイクオリティな多種多様なアイコンが30セットも紹介されています。その中から、気になったアイコンを幾つかピックアップしてみました。
詳しくは以下
