デザインを開発するという視点でお伝えするクリエイティブ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を設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。
詳しくは以下
思い通りのイラストやデザインを作成できるllustratorですが、操作性が難しく、十分に活用できていないとお悩みの方も多いのではないでしょうか？そこで今回紹介するのは、洗練されたベクター画像を簡単に作成できるブラシをまとめた「50 Beautiful Free Adobe Illustrator Vector Brushes」です。
（30 Illustrator Pattern Brushes for Making Flowers and Circular Designs | BittBox）
テイストの異なるラインブラシから、モチーフとして利用できるブラシまで、様々なブラシが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
フォントにはさまざまな種類があり、デザインのトレンドに合わせてどんどんと新しいタイプも登場し続けています。そんな中今回紹介するのは、是非取り入れたい、最新のクリエイティブなフォント「20+ New and Free Fonts for March 2014」です。
（FARRAY FONT /// FREE DOWNLOAD on Behance）
新しく配布されたフリーフォントが20種まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインを作り上げる際に活用する場合も多いテクスチャ素材。フリーで使用できるタイプもたくさん存在しており、デザイナーとしてさまざまな種類を使い分けできるよう、ストックされている方も多くいらっしゃるのではないでしょうか。そんな中今回紹介するのは、暖かみのあるニットのテクスチャ素材「30 Free and Useful Woven and Knitted Fabric Textures」を紹介したいと思います。
（texture 025 by ~juuichimei on deviantART）
詳しくは以下
次々と新しいフォントが公開される中、フリーで使用できるフォントも多数存在しています。そんな中今回紹介するのは、いろいろなテイストがピックアップされたフリーフォント20種「Free Fonts for Designers (20 Fonts) 」です。
Monastic Pro(Free Font) on Behance
デザインを魅力的に見せてくれるフリーフォントが20種厳選され、紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
光沢感のある質感をphotoshopなどのデザインツールで作り出すのは、高い技術と描写センスが必要になってきますが、今回紹介する「30 Sets of Elegant Foil Texture」を利用すれば、手軽にその質感を再現することができます。
..Foil Three.. by ~Bloody-Kisses-STOCK on deviantART
アルミホイルのような箔紙にくしゃくしゃとしたシワを加え、光の絶妙な反射具合を表現したテクスチャが多數収録されています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインの重要な要素の一つ、フォント。様々な種類のフォントが存在しますが、今回紹介するのは、独特の雰囲気を表現できるゴシックフォントを集めたエントリー「35 Free Gothic Fonts for Designers」です。
全部で35のフォントが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
数ある多数のフォントの中からデザインにぴったりと合う、クオリティの高いものを探し出すのは意外に大変なもの。そんな時に参考にしたい、デザイン性のある最新フリーフォントを紹介した「New Free Fonts For Designers」を今回は紹介したいと思います。
（Typography: Asgalt Free Font on Behance）
ハイクオリティなフォントがまとめられているので、デザインの質をアップさせたい時におすすめです。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WordPressを利用している方でHTML5ベースでサイトを制作したいという方におすすめなのが、今回紹介するHTML5で作られたベースになるWordpressテーマ集「Blank & Bare WordPress HTML5 Frameworks」です。カスタマイズしやすく、シンプルな作りのテーマは、オリジナルで一から作るよりも手早くサイトを作れそうです。
多くのテーマが紹介されていましたが、今回はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
ティザーサイトをはじめとして、公開前の期待感をどう作っていくかという部分も近年のWEB制作では求められる部分だと思いますが、今日紹介するのは設定した日時に向けてカウントダウンしてくれるカウントダウンティッカー「How to Code a jQuery Rolodex-Style Countdown Ticker」です。
非常にシンプルな構成と鳴っていて、日、時間、分、秒でカウントダウンを行ってくれます。
詳しくは以下
花や、渦や、カールなど流線的な印象をうけるブラシを400以上のブラシをまとめてあるエントリーが今回紹介する「400+ Swirls, Curls, and Fleurons」です。装飾的な部分ではかなり昔から利用されていて、様々な所で目にするような、イメージづくりには非常に使えるブラシが数多く紹介されています。
セットで色々と紹介されていますので、今回はその中から特に気になったブラシセットを紹介したいとおもいます。
詳しくは以下から
