デザインを開発するという視点でお伝えするクリエイティブBLOG
会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。
10種類の、それぞれ個性をもったログインフォームがピックアップされています。
詳しくは以下
普段私たちが見ているサイト。それを構成するHTMLはこの数十年のうちに大きく発展をしてきました。開発されたプログラミング言語は膨大であり、追いかけることも一苦労。わからないことを検索するのも非常に手間がかかります。そんなときに活躍してくれる「Interactive HTML Cheat Sheet」を紹介していきたいと思います。
目的のHTMLを簡単に検索することができる便利なチートシートになります。
詳しくは以下
ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。
回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。
詳しくは以下
webサイトのUI設計をする際に、さまざまな機能を取り入れることでより魅力的なサイトを作り上げることができます。今回はそんなシーンでチェックしたい、さまざまなツール&リソースまとめ「New Essential UI Design Tools & Resources for Web Designers」を紹介したいと思います。
jQueryやJavaScriptなど、ぜひ利用してみたいツールやリソースがピックアップされ、まとめられています。
詳しくは以下
フリーのテーマを利用することで、1からの構築作業時間を短縮できるとともに、さまざまな機能などを同時に手に入れることができます。仕事の種類によって使い分けるととても便利です。今回はそんなシーンに利用したい、11種のHTML5&wordpressフリーテーマ集「11 Free Fresh HTML5 & Responsive WordPress Themes」を紹介したいと思います。
WordPress › Radcliffe « Free WordPress Themes
フリーで利用できる、比較的シンプルな構造のテーマが11種、厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webサイトを制作する際には、デザインだけでなく全体の構成などの設計が必要となってきます。しかしコストや時間の関係でなかなか思ったようにデザインできないこともあるのではないでしょうか？そんな時に参考にしたい、HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」を紹介したいと思います。
Cafe & Restaurant Free Website Templates
レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザインを制作する際に素材として頻繁に利用されるアイコン。種類豊富にストックしておくことで、表現の幅がぐんと広がります。そんな中今回は、フラットなベクターアイコンセットをまとめた「Free PSD Icons: 26 Sets Of Flat Vector Icons for Designers」を紹介したいと思います。
（Free Flat Icons Pack on Behance）
定番として使えるタイプから、ちょっと個性的なテーマのものまで、さまざまなアイコンセットが紹介されています。
詳しくは以下
撮影した写真が思ったような雰囲気に仕上がらなかった時、photoshopなどの写真加工ソフトを使って加工を施すだけで、望んでいたイメージに仕上げることができます。今回はその作業負担を減らしながら、プロが撮影したような高いクオリティの写真が出来上がるアクションをまとめた「20+ Awesome Photoshop Actions to Pimp Your Photos」を紹介したいと思います。
（free photoshop actions 14 Freebies: 20+ Awesome Photoshop Actions to Pimp Your Photos）
アンティーク風の質感から、多彩な色味のバリエーションを作り出すことができるものまで、さまざまな種類が紹介されています。気になったアクションをいくつかピックアップしましたので、下記よりご覧下さい。
webサイトにもさまざまなデザインが存在していますが、メインとなるビジュアルがないシーンもよくあるかと思います。今回はそんな状況にも対応できる、文字を大胆にレイアウトしたwebサイトまとめ「Big Typography In Web Design」を紹介致します。
フォントをダイナミックに使用し、サイトのTOPを飾るメインビジュアルとしてデザインされたweb事例を多数閲覧することができます。中でもいくつか気になったものを以下にピックアップしましたので、ご覧ください。
詳しくは以下
■Denise Chandler :: Designer, Freelancer, Warrior Poet
イラストとフォントを組み合わせて、一度見たら忘れられないようなインパクトの強いサイトに仕上がっています。
■The Announcement – Time For Change – Sofasurfer is now Digitallabs
ブラックの背景に映える白い大きなフォントが印象的。シンプルなデザインが好きな方におすすめのテイストです。
■Hull Digital Live 09 · Hulls first digital and technology conference.
手書き風の文字を使っているので、アナログ感がより強調されています。
デザインテイストもクオリティの高いものばかりで、webデザインのアイデアソースとしても最適。是非参考にしてみてください。
素材として使用するアイコンは、ほしいときにほしいものがすぐ取り出せるように、できるだけ多くの種類をストックしておきたいもの。そんな中今回紹介するのは、食イメージをポップに彩るアイコンセット「Food & Drinks Icon Set」です。
ポップで明るい印象の、パステル調のカラーリングで統一されたフードやドリンクのイメージアイコンがセットになっています。
詳しくは以下
前回「テクスチャからイラストレーションまでPhotoShopチュートリアル100選」という記事でphotoshopによるチュートリアルを100個紹介しているサイトを紹介しましたが、今回紹介する「100 wonderful photo effects Photoshop tutori」も同じように100のphotoshopチュートリアルを集めたエントリーです。
紹介されている100のチュートリアルの一部です。
集められている物はスケッチ風にする、虹を作るといったありふれた物から、HDRをphotoshopで実現する方法やレントゲン写真の作り方など少し変わった物まで紹介されています。
詳しくは以下
魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。
（Drop）
そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。
詳しくは以下
毎年、数多くのWEBデザインが生み出され、消費され続けていて、不思議と毎年、その年ごとに、流行りみたいなものがあり、多く見かける、今風のWEBというのが生み出されますが、今回紹介するのは2012年度のWEBサイトのトレンドになるかもしれないポイントをまとめた「Web Design Trends in 2012」です。
1. Responsive Web Design
全部で10個のポイントがそれぞれまとめられています。あくまで予想、そして海外のものなので、どこまで国内に当てはまるかはわかりませんが、今日はその中から幾つか気になったトレンドを紹介したいと思います。
詳しくは以下
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。
CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。
詳しくは以下
付箋を貼って情報共有したり、アイデアを書き出したりアイデアマップをつくったりと、クリエイティブの場では度々使われている付箋。今日紹介するのはAjaxとphp,JQueryを利用して制作された、付箋メモシステム「Sticky Notes With AJAX, PHP & jQuery」を紹介したいと思います。
付箋は自由に追加したり、削除する事ができ、もちろん位置も自由自在に動かす事ができるようになっています。インターフェイスもかなりシンプルで、だれでも簡単に直感的に操作する事ができます。
詳しくは以下
デザインの印象を左右するフォント選びは重要であり、神経を使う作業の1つでもあります。今日紹介するのは、ラインの美しさと遊び心のあるフリーフォントを集めたフォント集「thumbnail Fonts \ Resources 30 Elegant and Beautiful Free Fonts for Creative Designs」です。
（Scriber™ – Webfont & Desktop font « MyFonts）
シンプル系のロゴにも使えそうな質の高いフォントや、個性的で遊び心溢れるフォントが全部で30種類集められています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
