デザインを開発するという視点でお伝えするクリエイティブBLOG
スマートフォンのWEBサイトデザインをはじめ、マテリアルデザインを導入するWEBサイトが増えてきました。マテリアルデザインとはZ軸の概念を取り入れ、WEBページ上の要素の重なりを現実世界に近い形で表わすもので、要素同士が重なるため、それだけに配色も重要になってきます。今日紹介するのはマテリアルデザインのためのカラーツールまとめたエントリー「9 Useful Tools for Creating Material Design Color Palettes」です。
いくつかのカラーツールがまとめれられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。
このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。
詳しくは以下
デザインのクオリティや質を高めるためにもっとも重要な要素が配色。バランスの良いデザインでも色がチグハグでは良いデザインにはなりえません。今日紹介するのはそんな配色を便利にしてくれる、配色を操るためのカラーツール5選「Finding Colors: 5 Tools for Great Color Concepts」です。
今回は紹介されている5つの配色ツールの使い勝手や特徴を簡単にまとめてご紹介したいと思います。
詳しくは以下
WEBサイトを作っていて悩むのが、配色。配色はプロのWEBデザイナーでも非常に難しく、いつも悩んでいるという方も多いと思います。今日紹介するのは、サイトにどんな色が利用されているかを分析し、視覚化してくれるWEBサービス「Colours」を紹介したいと思います。指定のURLから上記のような配色を割り出してくれるというもので、国内外でも知られているサイトがまとめられていました。
指定のURLからも分析が可能でしたので、Designdevelopを分析してみました。
詳しくは以下
色の決定や配色は難しく、経験があるデザイナーでも迷う事も多いのではないでしょうか？オレンジや赤と一口にいっても様々なオレンジや赤があり、最終どの色がふさわしいか吟味に時間を使うというデザイナーも多いと思います。今日紹介するのは自分の選んだ色を基準にして、色を選べるWEBツール「colllor」です。
このツールはまず自分で色をカラーツールで選択し、その後選んだ色の周辺色やトーン違い等を並べて提示してくれるというもので、その色の差を見比べながら決定できるというものです。
詳しくは以下
活用するととても便利なテンプレート。中でもwebサイトのデザインテンプレートは、すでに完成されたデザインを使ってサイト設計ができるとても魅力的な存在です。今回はそんなwebサイトテンプレートを多数まとめた「Best of 2015: 100 Free PSD Website Templates」を紹介します。
Dribbble – Free psd template by Yana Smirnova
2015年のベストテンプレートが揃っており、ジャンルやテーマもさまざま。見応えのある内容も魅力となっています。きになったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
多くの業務が必要となるWEB構築、できることなら少しでも時間を短縮したい物。今日はWEBを構築する上で便利なツールを集めたエントリー「8 Useful Online Tools for Web Designers and Developers」を紹介したいと思います。
設計の部分から、デザインの部分、パーツの生成など様々なオンラインツールがまとめられていました。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインのクオリティを高めるために、フォント選びはとても重要な工程。今回はそんなシーンで利用したい、ハイセンスさを感じられるフリーフォントまとめ「Freshest Free Fonts for Designers」を紹介したいと思います。
Bellico Typeface + Bonus Vectors – download free fonts by PixelBuddha
洗練かつデザイン性を感じられる最新のフォントがピックアップされ、紹介されています。
詳しくは以下
情報を詰め込んだWEBサイト、どれもこれも見せたいのですが、そのためには情報を有効的に見せる事が重要になってきます。今回紹介するのは情報を魅力的に見せることができる、CSSだけで表現されたスライダーをまとめたエントリー「10 Free Open Source Carousel Sliders Built With Pure CSS」です。
Pure-CSS Netflix Show Carousel
スライダーとひとことで言っても様々な表現があります。今回は集められているスライダーの中でも気になったものをピックアップしてみました。
詳しくは以下
さまざまなグラフィックシーンで活躍してくれるソフト・イラストレーター。デザイナーとして活動されている方のほとんどが使用されているかと思います。今回はそんなデザイナーにおすすめ、イラストレーターでつくり上げるグラフィカルデザインのチュートリアルまとめ「Illustrator Tutorials: 23 New Tutorials to Learn Essential of Illustration」を紹介します。
Create texture shading in Adobe Illustrator – Illustrator Tutorials – Vectorboom
イラストレーターの機能を使ったクリエイティブなデザインのグラフィック作成の方法が、分かりやすく紹介された記事がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
adobeのデザインソフト・イラストレーター。バージョンのアップと共に機能性も非常に充実し、これまで表現できなかったグラフィック表現も可能になってきています。そんな中今回紹介するのは、イラストレーターを使った非常にクオリティの高いデザインのチュートリアル集「40+ Fresh And Useful Adobe Illustrator Tutorials」です。
（Create a Magical Vector Landscape Using Illustrator – Vector Premium Tutorial | Vectortuts+）
物やアイコン、ボタンなど、イラストレーターで表現したとは思えない程リアルな質感をどのような操作でデザインしたのか？を、このまとめで知ることができます。いくつか事例をピックアップしましたので、下記よりご覧ください。
詳しくは以下
webページ構築方法の一つとして取り入れられる方も多いシングルページは、独特な見せ方や演出が話題になっています。そこで今回紹介するのが、比較的最近公開されたシングルページの中から特にユニークな作品を集めた「52 Fresh and Unique Single Page Website Designs」です。
商品の見せ方にこだわったページから、演出にこだわったページまで、さまざまなページが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBサイトを制作する際とても便利なのがテンプレート。はじめからある程度組まれていますので、そのまま使う事もできますし、作りだけは引き継いでデザインのカスタマイズも可能です。様々なテンプレートが国内外展開していますが、今日紹介するのはクリエイティブで美しいフリーCSSWEBテンプレート9選「9 Beautiful Free CSS Web Templates」を紹介したいと思います。
Portfolio Template 1 download – demo
ポートフォリオから、ポータルサイト系、コーポレートサイトまで様々なジャンルのクリエイティブなCSSWEBテンプレートが公開されています。今日はその中から気になったものをいくつか紹介したいと思います。
詳しくは以下
デザインの制作に役立つベクターデータを「WEB制作で使えるベクターデータ集「Vector Graphics for Web Design」」や「ハイクオリティなフリーphotoshopブラシ配布サイト「Qbrushes」」など、今までいくつか紹介してきましたが今回紹介するのはグラフィカルな表現に最適なベクターデータを集めたエントリー「Free Vector Graphics」を紹介したいと思います。
Download Free Music Vector Graphics
モチーフ的なものや元々グラフィック作品のベクターデータがダウンロードできます。様々なベクターデータが紹介されていますが今回はその中からいくつか紹介したいと思います。
詳しくは以下
WEBサイトでたまに見かけるリボンがけの処理を簡単に自分のものにできるサービスが今回紹介する「Online Ribbon Generator Tool」です。このサービスではリボン画像の生成と合わせてサイトに貼付けるコードも生成してくれます。
リボンのほうもかなりカスタマイズが可能で縁飾りや色など調整が可能で、打ち込む文字も書体も選択が可能でかなり作り込んだものが生成できます。
詳しくは以下
