デザインを開発するという視点でお伝えするクリエイティブ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を設定して、あとは欲しいテーブルサイズを選択すればタグが生成されます。
詳しくは以下
どんどんと新しい種類が生み出され続けているフォント。フリーでダウンロードでき、さらにデザイン性も高いものも数多く配布されています。そんな中今回紹介するのは、種類の豊富さが魅力なデザインフリーフォントまとめ「101 best free fonts, fall 2015」です。
比較的新しいフリーフォントが多数まとめられています。どれも非常に魅力的なものばかり、以下に気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインにおいて書体は重要で、フォントによってかなりデザインの印象が変わります。今日紹介する「30 Beautiful Handwritten Fonts」はフォントのなかでもアナログ感や温かみを表現できる手書き風フォントを集めたエントリーです。
上記のようなキレイめな筆記体のようなものからもう少しラフなくだけた手書きフォントまで、様々なフォントが集められています。
詳しくは以下
フリーで配布されているフォントの中にもさまざまな種類があり、色々な種類をストックされている方も多いのではないでしょうか？そんな中今回紹介するのは、スタイリッシュかつ個性溢れるデザインフリーフォントをまとめた「Stylish Free Fonts For Graphic Designers」です。
デザインを引き締めてくれたり、印象的な雰囲気に仕上げられるデザインフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなテイストで、種類豊富に配布されているフリーフォント。いろいろな種類をストックされている方も多いかと思います。そんな中今回は、新しいコレクションとして是非加えておきたいフリーフォントまとめ「40 Free Fonts Best For Retro And Vintage Designs」を紹介します。
Gist Rough Upr Exbold Two Demo font by Yellow Design Studio – FontSpace
レトロ&ヴィンテージテイストのフリーフォントが40種ピックアップされ、まとめられています。
詳しくは以下
さまざまなデザイン制作の場で使用されるアイコン。デザインテイストに合わせたアイコンが揃っていれば、クオリティを格段にアップさせることができるのではないでしょうか？そこで今回紹介するのが、公開されたばかりの新しいフリーアイコンセットを集めた「30 Fresh and Free Icon Sets for Designers and Developers」です。
ラフなテイストのアイコンから、立体的なデザインのアイコンまで、さまざまなアイコンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインをより良く彩ってくれるテクスチャはたくさんありますが、常に新しくクオリティの高いテクスチャはチェックしておきたいものです。そんな中今回紹介するのは、上質な雰囲気が演出できるヴィンテージペーパーテクスチャセット「8 High-res, Vintage Paper Textures」です。
メモが書き込まれたような使い込まれた雰囲気や、シミがついたような種類など、リアルに使い込まれた雰囲気が演出できるビンテージ素材が8種類セットになっています。
詳しくは以下
デザインをする上でインパクトのあるものを仕上げるためには、フォントや装飾アイテムがポイント。イメージにあった素材をうまく選定する必要があります。そんな時に参考にしたい、個性的な印象でインパクトを与えるタイポ&ベクターセット「Pool Riders Typeface + Bonus Vector Cut-Outs」を紹介したいと思います。
タイポとベクター素材がセットになった使い勝手のよいアイテムです。
詳しくは以下
いよいよ本格的に冬シーズン到来。特に12月の一大イベント・クリスマスに向けて、制作をされている方も多いのではないでしょうか？そんな中今回は、クリスマスのデザインでおすすめしたい素材集「Licorice Christmas kit」を紹介したいと思います。
クリスマスをイメージさせるさまざまなアイテムを、美しく温かみを感じさせる水彩で描いた素材セットとなっています。
詳しくは以下
(さらに…)
打ち込むだけで簡単にさまざまなアイコンを利用できるアイコンフォント。多彩なデザインシーンで活躍してくれます。今回はそんなアイコンフォントをまとめた「20 More Sets of Free Icon Fonts」を紹介したいと思います。
シンプルなテイストのものを中心に、いろんなテーマのアイコンフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
今までDesignDevelopでは女性の柔らかい手書き風の書体を「漢字も使える柔らかい手書きフォント「あんずもじ」」や「女性の手書き風ひらがなフォント「アイコ」と「はるか」」といくつか紹介してきましたが、今回紹介するのは、かわいらしくてチャーミング+遊び心がコンセプトの手書きフォント「YUKI（ゆき）フォント」です。
上記画像のような、世界観を作ることができます。収録されている文字はひらがな、カタカナ、アルファベット、記号のみの書体ですが、一般的な丸ゴシックの漢字と組み合わせて使用しても違和感がないレベルで使えるように工夫されているそうです。
詳しくは以下
