デザインを開発するという視点でお伝えするクリエイティブ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アクション「Toxic Potion Glitch Actions」をご紹介していきたいと思います。
Toxic Potion Glitch Actions — discover Pixelbuddha Plus design resources library
モノクロ写真はそれだけでクールな印象を与えてくれますが、更にスタイリッシュさを加えることが可能になっています。
詳しくは以下
写真補正にとても便利なソフトウェアphotoshop。かなり高機能で、どんな写真でも手をかけて補正すれば見違えるようになりますが、今回紹介するのはそんな手がかかるレタッチを一瞬で可能にしてくれるphotoshopのアクションを集めたエントリー「60 Photoshop Actions for Photo Touch-Ups and Enhancements」を紹介したいと思います。
主に人物や風景に対してかけるレタッチのアクションがまとめられていますが、今日はその中から特に気になったアクションをいくつか紹介したいと思います。
詳しくは以下
ブログと言う言葉もかなり定着してきて、個人でも多くの人がブログを持っていて、何かしらの形で利用しているかと思います。名前の通りログを残していくという概念ですので、ブログには日付表示が必ずと言っていいほどあるかと思います。今日紹介するのはブログの日付表示のデザインを集めたデザイン集「Gallery Of Date Stamps And Calendars」です。
単純に参考画像として乗っているだけではなく日付アイコンやカレンダーアイコンのPSDの素材が用意されていて、さらにチュートリアルまで公開しています。
詳しくは以下
画像加工や色補正に強いPhotoshopは、合成のための素材作りがクオリティの高さを大きく左右します。そんな中今回紹介するのが、フリーで利用できるさまざまなPhotoshopブラシをまとめた「Brushing Up: A Collection of Free Photoshop Brushes」です。
（Night Sky Free Brushes | Webdesigner Lab）
さまざまなシーンで利用できる画像加工用のブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
web制作でよく使用するアイコン。定番のタイプから個性的なテーマのセットまで、さまざまな種類がフリーで配布されています。そんな中今回紹介するのは、フリーベクターラインアイコンセットをまとめた「550+ Free Vector Line Icons for Designers」です。
Dribbble – Winter Icon Set by Tamara
ベクター形式なので、いろんなタイプのデザインに使用できる点が魅力のラインアイコンセットが多数紹介されています。
詳しくは以下
多様化するwebデザイン。常に新しいデザインにアンテナを立てておくことで、自らのクリエイティブ性を高めることができるのではないでしょうか。そこで今回は、ダークな色合いを利用したwebデザインを集めた「Creative and Inspiring Dark Web Designs」を紹介したいと思います。
イラストメインのデザインや、写真を印象的に利用したデザインなど、さまざまなバリエーションで豊富に紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webでもグラフィックでもデザイン制作に、インターネット上のテクスチャを利用されている方も多いと思います。たくさんのテクスチャをチェックしておくことは、瞬時にデザインのひきだしを開ける重要な要素ではないでしょうか？そんな中今回紹介するのが、さまざまな自然の模様が映し出される壁面テクスチャをまとめた「25 Useful Drywall Texture Sets」です。
（Free Textures | Ben Cloward’s Texture Archive）
自然に風化したような壁面から、人的に壊されてしまった壁面まで、さまざまな壁面が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
iPhone5sは発売以後、指紋認証機能や新色の追加など相変わらず話題を振りまいているApple製品。docomoからも発売されたことで、今後のiPhoneアプリやそれに伴うWEBサイトの開発や制作も増えてくるのではないでしょうか？今回紹介するのは制作やモックアップに便利なiPhone5sを中心とした美しいAppleデバイスの高品質なPSD素材「A Handy Collection Of iPhone 5s PSD Templates」です。
Dribbble – Gold iPhone 5S PSD by Ryan Ford
リアリティ溢れるものやシンプルにまとめたもの、ワイヤーのイラストなど、多種多様なPSD素材が揃っています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
webで使用するアイコンといえば、ソーシャル系やwebで使用するツールやサービスなどをテーマとしたものが定番となっていますが、今回紹介するのは、個性的なオブジェクトも収録されたフリーベクターアイコン「Free download: 200 vector icons」
あると嬉しい・使えばデザインのポイントとして存在感を発揮するアイコンが200種まとめられています。
詳しくは以下
普段は矢印のカーソル。CSSである程度コントロールできるのは皆さんご存じかと思いますが、普段そこまで使わないので、突然聞かれてもパッと出でこない人も多いんじゃないでしょうか？「CSS Cursors 」では下記のようなCSSで指定できるカーソルの一覧表が公開されています。
画像は一覧表の一部です。
全てのカーソルがInternet Explorer 4、Netscape 6以上のいずれかでサポートされています。またTESTのリンクにマウスカーソルをあわせるとブラウザでどう見えるのかを実際に表示してくれます。対応ブラウザまで表示してくれているのが嬉しいですね。
詳しくは以下
