デザインを開発するという視点でお伝えするクリエイティブBLOG
Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。
色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。
詳しくは以下
WEBサイトのユーザーインターフェイスの中で最も重要な要素の一つボタン。主にユーザーがページ遷移や情報を取得する時に利用するため利用されます。よく目にする部分だけに、ここの動きやクリエイティブはWEBサイトのクオリティを決定づける要素の一つだと思います。今日紹介するのはコピー&ペーストで気軽にクリエイティブなCSSボタンが設置できる「bttn.css」です。
このbttn.cssでは様々な大きさ・色・動きがセットされており、どのボタンも簡単に実装することが可能です。
詳しくは以下
登録さているボタンは全部で15種類。どれもシンプルでマウスオーバーでそれぞれのボタンにあったアクションが展開されるようになっています。色ベタのものと罫線で表現されたものと絞り込んで探すことも可能です。
カスタマイズできる項目としてはカラー６種類、サイズが4種類となっています。シンプルでしかもCSSだけで制作されているので非常に使い勝手が良いと思います。ボタンデザイン・アクションで迷っている方は是非どうぞ。
近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。
空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。
詳しくは以下
WEBサイトに欠かせないUI/UXの一つローディング。この小さなアニメーションで多くのストレスが軽減でき、かつ世界観を表現できます。ローディングアニメーションには様々な作り方がありますが、今回紹介するのはCSSのみで実現するカラフルポップなローディングアニメ「CSS PIN」です。
全部で10個のローディングアニメーションが公開されており、どれもクリエイティブでポップな印象を受けます。
詳しくは以下
写真を利用する時、撮影されたまま利用するという事はソフトウェアが発達してきた現在まずありませんが、今日紹介するのはレタッチソフトでは無く、CSSで実現するイメージフェクト「20 Image Effects With CSS」です。
水彩風から、黒板に書いた風のエッジを検出したものエアブラシで書いたものなどなど、全部で20ものエフェクトがCSSで指定するだけで簡単にエフェクトを利用することが可能です。
詳しくは以下
tableタグやDIVタグを利用して制作するテーブル組、それほど難しい仕組みでは無いのですが、いざ手書きをすると時間を取られたりします。今日紹介するのはHTMLテーブルが直感的に簡単に生成できるWEBジェネレーター「DIV TABLE」です。
利用方法は非常に簡単で、tableタグで生成するかDIVタグで生成するかを選んで、あとはBorder、width、Cell Paddignを設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。
詳しくは以下
自然の草木などは、デザイン素材・あしらいとして使用することが多いだけに、同じ素材を流用してしまうと、どうしてもマンネリになりがち。そんな時に参考にしたい、葉っぱの表現力が上がるPhotoshopブラシをまとめた「20 Sets Of Free Leaf Brushes For Photoshop」を今回は紹介したいと思います。
Leaf Brushes 1 by ~InsaneStock on deviantART
リアルな葉を再現できるものから、イラストを使って描かれた可愛らしいものまで、さまざまな葉っぱを描くことができるブラシが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイトのデザインをクライアントに提案する時には、PCだけでなくスマートフォンや他の端末ではどのように表示されるか、全て見せるということも少なくないもの。そんな時に役に立つのが今回紹介する、レスポンシブした際のスクリーンショットが一度に撮れるサイト「Responsive Screenshots」です。
URLを入力するだけで、一度に複数の端末のスクリーンショットうを撮ってくれる優れもの。デザイナー必見のサイトです。
詳しくは以下
WEBサイトのデザインから、立体的なキャラクターを制作したりと、使用用途の幅広いPhotoshopは、ツールを駆使することで表現力の高いデザイン制作が可能となります。そんな中今回は、さまざまなシーンを作り上げられるPhotoshopチュートリアルをまとめた「50 Best Photoshop Tutorials of 2012(our favorites)」を紹介したいと思います。
Create an Autumn-Themed 3D Text Effect With Photoshop CS6 Extended | Psdtuts+
ガジェットやキャラクターの作り方から、WEBサイトのデザインまで、Photohsopをフル活用できるチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインのポイントとして活躍してくれるアイコン。いろいろな種類をストックしておくことで、日々のデザイン制作にいざという時に役立ってくれます。そんな中今回紹介するのは、アウトドアイメージのフリーアイコンセット「Free Adventure Icon Collection」です。
ポップで柔らかな質感の色合いとディテールが特徴。キャンプやマリンシーンをイメージさせる可愛らしいアイコンがセットになっています。
詳しくは以下
WEB制作で重宝するのがアイコン素材。ベクターで書くこともWEBデザイナーなら難なく可能だとは思いますが、アイデアから制作までの時間を考えると、フリーで利用できるアイコン素材はとても便利な素材の一つです。今日紹介するのはシンプルでミニマルなアイコン素材144個セットにしたアイコンセット「144 minimal icons package 12 A.M」です。
名前の通り非常にシンプルなアイコンなので、どんなサイトでも利用することができそうです。
詳しくは以下
デザイン性の高いフォントを使用するだけで、制作物のクオリティは格段にアップします。そんなデザイン制作時に参考になる、多彩なデザイン性のフリーフォントまとめ「60+ best free fonts, Summer 2015」を今回は紹介します。
Charming Typeface – Exploring Vietnam on Behance
ベーシックなタイプから個性的なものまで、種類豊富にフリーフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザイン感を決定する重要な位置づけにあるフォントですが、個性と伝わりやすさを兼ね備えたフォント選びはなかなか難しいもの。そこで今回紹介するのが、2011年に発表されたフリーフォントの中でも、クオリティの高さに定評のあるフォントばかりを集めた「50 Fresh and Beautiful Free Fonts from 2011」です。
Yore Font by ~Pilastrum on deviantART
デザイン性の高いフォントから、シンプルなフォントまでさまざまなフォントが紹介されています。中でも気になったものをいくつかピックアックしましたので、下記よりご覧ください。
詳しくは以下
デザイナーにとってフリーフォントは、欠かせない素材の一つ。デザイン性の高いものが多数配布されています。今回はそんなクリエイティブなフリーデザインフォントまとめ「New Free Fonts For Designers in 2015」を紹介したいと思います。
Alif (Free) Display Typeface on Behance
さまざまなテイストのフリーフォントが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEB制作を行なうにあたりそのサイトの雰囲気を大きく左右するのが背景。色だったりパターンだったりテクスチャだったり様々な背景がサイトのテイストに併せて展開されていますが、今日紹介する「PatternWall.com」はそんな背景パターンをダウンロードできるWEBサイトです。
上記のようにグリッドに背景が引き詰められており、選択する事で、全面がその徘徊に切り替わります。さらにDownloadのボタンをクリックする事で、表示されている背景がjpgでダウンロードで切ると言うものになっています。
詳しくは以下
デザイン素材の中でも、Photoshop形式のファイルは特にクオリティが高くとても便利なもの。今回はそんなフレッシュなフリーPhotoshopファイル「40 Fresh & Free Photoshop Files For Your Next Design」を紹介したいと思います。
さまざまな種類のPhotoshopファイルが厳選され、まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
