デザインを開発するという視点でお伝えするクリエイティブBLOG
CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。
How to Code a Homepage Template with HTML5 and CSS3 | Medialoot
最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
写真一枚でデザインの印象は大きく変わってしまうからこそ、選定にはしっかりこだわっていきたいもの。今回はそんな時に知っていると便利な「FreePhotos.cc」を紹介していきたいと思います。
複数のフォトサイトを横断検索することができる便利なフリー画像検索サービスサイトとなっています。
詳しくは以下
さまざまなデザインを手掛けるデザイナーにとって、参考となるイメージや素材、テーマをまとめたサイトはとてもこころ強いもの。そんな中今回は、たくさんのUIデザインをまとめたサイト「Sketch App Sources」を紹介したいと思います。
UIデザインを中心に、いろんなテーマでクオリティの高い参考デザインがまとめられています。
詳しくは以下
グラデーションを作り出すのは、簡単なように見えて意外に難しいもの。絶妙な色合いをイメージ通りに表現したい、今回はそんな時に便利なwebジェネレーター「Blend」を紹介したいと思います。
2色のベースカラーを使ってグラデーションを生成できる、シンプルでありながらも使い勝手の良さが魅力のwebサービスとなっています。
詳しくは以下
webサイトの背景やメインビジュアルなどに、グラデーションの美しい色を使用することもあると思いますが、美しい色合いを作り出すのは意外に難しいもの。今回はそんな時に便利に活用できる、徐々に色が変化する背景作成が簡単にできるジェネレーター「CSS Gradient Animator」を紹介したいと思います。
2色の好きな色を設定するだけで、非常に簡単にグラデーションカラーを作り出すことができるようになっています。
詳しくは以下
デザイン制作の際に、色合いにニュアンスを出すために使用されるグラデーション。きれいな色の組み合わせが成功するとデザインが一気に魅力的なものに変化することも。今回はそんなシーンで役立てたい、グラデーションを楽しみながらコード取得もできるサイト「uiGradients」を紹介したいと思います。
ひたすらグラデーションを閲覧するといった非常にシンプルなサイトですが、色の濃淡のコード取得ができるなど実用的にも活用できるサイトとなっています。
詳しくは以下
インターネット上で配布されているハイクオリティーなアイコン、これらは一体どういう風に作られているか、気になった事は無いでしょうか？今回紹介する「iconka.com」ではハイクオリティーなフリーアイコンを配布するとともにその作り方を動画で公開しています。
サイトではいくつかのシリーズのアイコンの作り方をまとめたビデオチュートリアルが公開されています。一つ一つ詳しく追っていく感じではありませんが、こんな風にして作られているのかと言うのはわかるようになっています。
動画は以下から
Webサイトを構築するのに必要なCSSでは様々なデザインを設定することができ、とても便利。そんな中今回紹介するのは、無料で使えるCSSツールチップ「10 Free CSS Tooltip Snippets To Save Time On Your Web Projects」です。
アクションで注意書きなどに注目させたい時に使用するツールチップの、魅力的な動作やデザインを簡単に取り入れることができます。
詳しくは以下
天気予報として天気のマークを利用するのはもちろん、人の気分やさまざまな雰囲気を表現する際にも天気マークは利用しやすいもの。そこで今回は、天気を表すさまざまなアイコンをまとめた「30 Sets of Free Weather Icons」を紹介したいと思います。
Flat Weather Icons by ~LavAna on deviantART
立体感のあるアイコンから、ピクトグラムのようなアイコンまで、デザイン制作に利用しやすいアイコンがたくさん紹介されています。中でも気になったものをいくつかビックアップしましたので、下記よりご覧ください。
詳しくは以下
制作にとてても便利なベクターデータ。クオリティが高いモノを自分で書いていたりするとものすごく時間が取られたりします。そんな時に便利なのがベクターデータ集ですが、今回紹介するのはフリーのベクターデータセットが150あまり公開している「I Heart Vector: Vector stock resource for graphic designers who love all things vector」です。
今回は公開されているベクターデータセットの中からいくつ描きになったモノをピックアップして紹介したいと思います。
詳しくは以下
フォント選びはデザインの中でも、もっとも重要な作業の一つで、表現したいイメージに合うフォントを探しだせれば、デザインのクオリティも非常にあがります。今回紹介するのはアナログ感が演出できる手書き&スクリプトフォントを集めたエントリー「60 Free Handwritten & Script Fonts」です。
全部で60ものフォントが集められています。今回はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
難しい説明をデザインの力で誰にでも分かりやすく伝えるインフォグラフィックが注目を集め、そのようなデザイン制作の依頼も増えているのではないでしょうか？そこで今回紹介するのが、インフォグラフィックデザインに使いやすいデザイン素材まとめ「UI Kits and Other Free PSD Resources for Building Infographics」です。
（Free Vector Infographic Kit | MediaLoot）
表やグラフをはじめとした統計データを見やすく表現できる素材や、アイコンなどのユーザーインターフェースを意識した素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなシチュエーションで活躍するテクスチャ。背景やアクセントとして使う事ができ、デザインの幅を広げてくれる心強い味方です。今回は、そんな色々な種類のテクスチャを集めた「55 Fresh And Free Texture Packs」をご紹介します。
（Cleveland Collection: Texture Pack）
様々な用途によって使える豊富なテクスチャ素材。レンガから古い紙、さびれた壁など、きっと欲しいテクスチャが見つかるでしょう。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
前回「ポラロイド写真のように見せる画像ギャラリー「Polaroid Gallery」」で机の上におかれたポラロイド写真風ギャラリーを紹介しましたが、今回も質の高いFLASHギャラリーサンプルを紹介したいと思います。
そのFLASHギャラリーサンプルは「iTunes Coverflow v2」と呼ばれ、名前の通りiTunesの特徴的なインターフェイスであるCoverflow風に画像を見せれるFlashギャラリーです。上記のように鏡面処理等も施され洗練された感じで画像を見せる事ができます。
画像表示の仕組みは単純で表示させたい画像を任意のフォルダに格納しておいて、XML中でファイル名とディレクトリを指定をすれば簡単に表示させる事ができます。前回同様Flaファイルでの配布なので、自分のサイトに合わせてカスタマイズする事が可能で、カスタマイズによってはさらに完成度を上げる事ができるかと思います。
ここまでの物をFlaファイルで配布してくれるのは嬉しい限りです。使わないにしてもソースコードを見ても勉強になりますので、ダウンロードしてソースを覗いて見ても良いかもしれません。動作サンプルとFlaファイルのダウンロードは「n99creations.com」からどうぞ。
インターネット上でショッピング・決済ができるサイトを制作する際には、カードビジュアルやカート・マネーなどを連想させるビジュアルが多く使用されます。今回はそんなシーンに便利に活用できる、イーコマースアイコンまとめ「45 High Quality And Best Ecommerce Icons」を紹介したいと思います。
（Shopping Icons ~ Brand new set! | Daily Overview）
各カード会社のアイコンを始め、ショッピングサイトを連想させる多彩な種類のアイコンがまとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
CSSの書き方は人によって様々だと思いますが、普段自分が使っている書き方でない書き方だと解読に手間取ってしまうときもあるかと思います。今日紹介するオンラインサービス「Stylenea」は自分の指定した形式にCSSファイルを整形してくれるものです。
CSSをコピーするかもしくはファイルをアップロード、もしくはアップされているURLを指定することでCSSを読み込ませる事ができます。
詳しくは以下
