デザインを開発するという視点でお伝えするクリエイティブ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となっています。
詳しくは以下
フリーフォントにもさまざまなテイストのものが存在しており、デザインによって使い分けることで、より魅力的に見せることができます。そんな中今回紹介するのは、レトロタッチのフォントが豊富に揃った「75 Free Retro Style Fonts」です。
レトロな雰囲気を存分に感じられるフリーフォントが多数紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインの細部は宿ると言われており、細かな部分が全体なクオリティに繋がってくるものですが、WEBデザインも同様に細かな背景やパーツを作り込むことでクオリティが上がってきます。今日紹介するのはデザインのクオリティを上げるシンプルな背景パターン「75 Seamless Photoshop Pixel Patterns」です。
非常にシンプルですが、基本的にはシンプルですが中には少し遊びのあるピクセルパターンが全部で75種類まとめられています。
詳しくは以下
レトロな雰囲気を演出する方法はいろいろありますが、今回はそんな中でも簡単にイメージをレトロテイストに寄せてくれる「Halftone Press Photoshop Kit」を紹介したいと思います。
ハーフトーンのパターンにさまざまなバリエーションが揃っています。使用した雰囲気のサンプルをいくつかピックアップしているので、下記よりご覧ください。
詳しくは以下
画像や実績を見せるのに適しているギャラリーページ。普通に静的なページで作ると管理が面倒だし、数が増えてくるとメンテナンスも苦労します。そこで今日紹介するのはwordpressで作るフリーギャラリーテーマ「Gallery WordPress Theme」です。
細かな設定が必要な部分はありますが、Wordpressを用いて簡単に良くあるギャラリーページを構築することができます。
詳しくは以下
古い風合いの紙なんかは実に味があって、テクスチャとして質感をだすのには最適だと思います。今日紹介する「The Anatomy of a *Really* Old Book | BittBox」は本物の古書を切り取ってばらばらにして、スキャンしたテクスチャ用の高解像度のデータをダウンロードができるサイトです。
テクスチャ用に使われている古書は50年前のものらしくて、年月を重ねているだけあって、かなりあじのあるものになっています。今日は公開されている物の中からいくつか気になった部分を紹介したいと思います。
詳しくは以下
アイコンデザインにはさまざまな種類があり、テイストだけでなく形状も多彩な種類が存在しています。そんな中今回紹介するのは、六角形のデザインフリーアイコンセット「15 Free Hexagon Icon Sets For Your Project」です。
（Dribbble – Hexicons by Charles Patterson）
すべて六角形でできたアイコンがまとめられており、用途に合わせて使い分けることができるいろんな種類が紹介されています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
WEBデザインと言っても様々なフローがあり、受注を受けたとき、いきなり、Fireworksやphotoshopでデザインを始めるという方はなかなか少ないと思います。今回はデザインの前段階のワイヤーフレームを描くためのツールを集めたエントリー「10 Excellent Tools for Creating Web Design Wireframes」を紹介したいと思います。
基本的にモックアップをつくるための前段階のものなので、そこまで複雑な表現はできませんが、WEBのワイヤーを作るという意味で、様々な便利な機能が組み込まれています。今日はまとめられているツールのなかからいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
もうすぐクリスマスがやってきます。町はキラキラと輝くクリスマスムードでいっぱいで、気分がすでに盛り上がっている方も多いのではないでしょうか？そんな中今回は、クリスマスシーズンのデザインに活用したい美しいモックアップ「Free PSD Mockup White Christmas」を紹介したいと思います。
洗練された印象の、クリスマス仕様のフリーAppleツールをテーマにしたモックアップ素材がダウンロードできるようになっています。
詳しくは以下
最近のオンラインストレージはどんどん拡大傾向にあるみたいで、大手以外にも大容量のオンラインストレージサービスが展開され始めています。今回紹介する「File Dropper」もその一つで5Gまでのという大容量のファイルを保存、共有することができます。
ユーザー登録は必要なく、ファイルをアップロードするだけで利用できるお手軽なサービスになっています。利用はファイルをアップロードすればURLが生成されますので、こちらを共有したいあいてに伝えるだけです。ボタンも大きく作ってあり、仕組みもインターフェイスも単純明快なので使い方に迷うと言うことはまず無いかと思います。
詳しくは以下
