デザインを開発するという視点でお伝えするクリエイティブBLOG
Webサイトにはアラートメッセージが必要な場面がいくつかあります。多くはJavaScriptのアラートを使用して行われていますが、カスタムCSSとJSコードを使って簡単に表現することができます。今回は、フリーで使える10種のアラートメッセージスニペット「10 Free CSS & JS Notification Alert Code Snippets」の紹介です。
ベーシックな表現からPOPなものまで10種類が紹介されています。
詳しくは以下
WEBでエラーを始め、様々な注意を促すアラート。標準でも用意されており、簡単に実装は可能ですが、今回紹介するのは、様々なリッチアニメーションアラートを簡単に実装できる「SweetAlert2」です。
「SweetAlert2」はほぼ標準のアラートと同じような書き方でアニメーション付きのアラートを実装可能です。
詳しくは以下
制作するうえで非常に便利なベクターデータ。かなり自由度が高くカスタマイズが用意なため、様々なカスタマイズが可能で、デザインの素材としてはかなり使い勝手が良いものです。今日紹介するのはハイクオリティなベクターデータ集「35 High-Quality Free Vector Packs」です。
35 High-Quality Free Vector Packs
シルエットから、背景素材に使えそうなベクターデータなど、様々なベクターデータが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
曼荼羅とは仏の悟りの境地、世界感などを視覚的に表したもので、その種類は様々な形で表され多様な種類がありますが、今日紹介するのはベクターデータで利用できる幾何学的な曼荼羅アートワーク「100 Vector Mandala Illustrations」です。
本格的な曼荼羅というよりは、曼荼羅からインスピレーションを得て、制作に利用しやすいシンプルなもので制作されているため利用しやすい素材になっています。収録されているアートワークは以下からご覧ください。
詳しくは以下
国内外に限らず、アイコンをダウンロードできるWEBサイトは多々ありますが、どうしても既製のものだと、求めている物とバッチリ合わせるというのは難しく、探し回らないといけません。そうなってくると自分で制作をと思ったりもしますが、どうやって作るのか分からない…そんな人のために今日紹介するのは高品質なアイコンのチュートリアル集「40+ Hand-picked Photoshop Icon Designs」です。
主に立体的なアイコンが多いのですが、質感のあるものから、かなりリアルなもの定番なものと様々なアイコンのチュートリアルが集められています。今回はいくつかきになったチュートリアルをピックアップして紹介したいと思います。
詳しくは以下
制作にとても便利な記号、矢印。非常に便利な記号で、様々な見出しのアイコンから、次へ、前へという前後関係を簡潔にしてくれたりと本当に様々な使い道がありません。一般的に三角を使って作るのが一般的ですが、その表現は様々なものがあります。今回紹介するのは様々な矢印を集めたベクターデータセット「Arrows」です。
上記のように様々なかたちの矢印がイラストレーター、フリーハンドなどで使えるベクターデータで制作されています。利用例は以下の通りです。
詳しくは以下
見やすく、分かりやすいインターフェイスを構築するためには、デザイン性にもこだわりが必要なもの。今回はそんな時に便利に活用できるフリーUIキット「11 Useful And Free CSS UI Kits」を紹介したいと思います。
（Dribbble – All CSS UI-kits by Samuel Horn af Rantzien）
シンプルベースのボタンやバーなどを収録したUIキットが11種まとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
ユーザーとのコミュニケーションに一般的に使われているフォーム。メールフォーム、アンケートフォーム、会員登録と幅広い使われ方をしていますが、今回紹介するのはそんなフォームを快適にしてくれるフォームのためのjQuery集「10+ jQuery Form Enhancement Plugins」を紹介したいと思います。
フォームをちょっと便利にしてくれるそんなテクニックが詰まっています。エントリーに収録されているモノのから気になったものをいくつかピックアップして紹介したいと思います。
詳しくは以下
まだまだ暑い日が続いていますが、風が涼しく心地良く感じる季節になってきました。秋の味覚、紅葉、読書など秋を表現するものは、思いつくだけでもいろいろありますが、今回はこれからの時期にぴったりな秋の雰囲気を感じさせてくれるベクターセット「Free Download: Autumn Inspired Vectors (Cards, Banners, Badges, Patterns)」を紹介したいと思います。
パターンや彩豊かな葉のベクターデータがセットになった、秋らしい雰囲気を感じさせてくれる素材です。
詳しくは以下
WEBサイトを制作するために作成するワイヤーフレーム。サイトの作りを決定する重要なものです。作り方は制作する人によって大きく変わると思うのですが、今日はワイヤーフレームをより簡単に作成するための素材キットを集めたエントリー「30 Fresh Web UI, Mobile UI and Wireframe Kits」を紹介したいと思います。
Website Wireframes Kit for Adobe Fireworks (.png)
手書き風のものから、キッチリ作られたものまで様々な素材キットが紹介されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Macを使っている方には馴染み深い、立体的で空間的にコンテンツやファイルの内容を表示するインターフェイスカバーフロー。そのインターフェイスはOSだけではなく、様々な部分で活用されていますが、今日紹介するのはjavascriptで実現したコンテンツカバーフロー「ContentFlow」です。
作り自体は非常にシンプルなものになっており、動作はjsで制御、画像などはすべて外部から読み込んでいるみたいで、枠組みだけ作ってしまえば、画像を入れ替えるだけで、差し替えたり更新できたりします。
詳しくは以下
簡単に一筆で、いろいろな表現の描写を可能にするブラシ機能はとても重宝する存在。いろんなシーンで活用することが可能です。そんな中今回紹介するのは、かすれた風合いを手軽に表現できる フリーグランジブラシセット「12 Beautiful Free Grunge Brush Sets from Dribbble」です。
（Dribbble – Dirtbag II by Visual Idiot）
描写の違う12種類のグランジテクスチャがまとめられています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
