デザインを開発するという視点でお伝えするクリエイティブ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
レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
現在主流のフラットデザイン。素材として活用頻度の高いアイコンも同テイストでさまざまな種類がダウンロードできるようになっています。そんな中今回は、さまざまなデザインテイストのフラットアイコンが揃った「Collection of Flat Icon Sets for January 2015」を紹介したいと思います。
Dribbble – 30 line icon [Freebies] by Anton Skugarov
多彩なテーマの、デザイン性のあるアイコンがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまなデザインに重宝するアイコンは、フリーで使用できるタイプも豊富に発表されており、愛用しているという方も多いはず。そんな中今回紹介するのが、シンプルな中にもこだわりのデザインが生きたフリーアイコンセット「Plastique Icons Full Set」です。
定番のアイコンが全てセットになっている、幅広いデザイン制作で活躍するアイコンセットです。
詳しくは以下
媒体を選ばず、幅広く利用されているクリエイティブツールphotoshop。利用されているシーンも多く、そのため、photoshopのための素材は世界中で数多く公開されていますが、今日紹介するのはWEB制作に便利な60種類のアイコン、ボタンPSD素材をまとめた「60 PSD Icon and Button Templates」です。
WEB制作では、ボタンやアイコン等、細かな素材のクオリティが全体のクオリティを決定づける要素の一つになりますが、細かな処理やデザインを加えるというのは小さな素材といえども時間がかかります。原文では、時間を短縮できる便利につかえるpsdがまとめられていましたが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザイン制作に欠かすことのできないフリーフォント。クオリティの高いデザイン性のあるものを取り入れるだけで、制作物の雰囲気が変わってしまうほど重要な役割を持っています。そんな中今回紹介するのは、デザイン性の高いフリーフォントコレクション「Collection of New & Free Fonts for June 2015」です。
Bellico font by seventhimperium – FontSpace
非常に魅力的なビジュアルやテーマが特徴のフリーフォントがピックアップされています。
詳しくは以下
HTMLやCSSの文法がチェックできるサービスは数多く展開されていますが。、今回紹介する「XHTML-CSS Validator」はシンプルで分かりやすく綺麗なインターフェイスが売りのマークアップチェックサービスです。
WEB上で簡単に自分のサイトやブログの文法チェックがしてくれます。
詳しくは以下
誰でも手軽にサイトをオープンすることができるインターネットの世界。個人から法人まで、作品発表の場としてWenサイトを利用しているシーンも多いのでは？そこで今回紹介するのが、最近のポートフォリオWebサイトデザインの動向を解説した「Characteristics of a modern portfolio site」です。
デザイン別に幾つかの参考サイトを紹介しながら解説しているので、傾向を分かりやすく理解することができます。
詳しくは以下
デザイン制作に欠かせないテクスチャ素材。特に”布素材”は加工やアレンジがしやすく、簡単に質感も出せることから非常に人気の高いジャンルとなっています。そこで今回は、さまざまな素材感の布テクスチャを集めた「230+ Awe Free Fabric Textures」を紹介したいと思います。
シンプルな素材感のものから、非常に質感のたかいざっくりとした編みの布素材、またくしゃっとした動きを感じさせる状態のものなど、テーマもさまざま。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
皆さんは複数の相手にニュースを伝えたいときどのようにメールを送っているでしょうか？今日紹介するのはニュースレターやメールマガジンを配信する時に使えるモジュール「Fantastic AJAX Newsletter Module」です。
Ajaxで作られていて軽快に動作します。電子メールアドレスとカテゴリーを管理でき、添付もできるようになているみたいです。
詳しくは以下
印象的なWebサイトに仕上げるには、印象的な写真を取り入れるのが効果的ですが、思い描いている写真の質感を表現するためには、Photoshopの機能を駆使しなければならないことも。今回はそんな時に便利に活用できる、写真を簡単に印象的に仕上げてくれるPhotoshopアクションのまとめ「45 Amazing and Free Photoshop Actions」です。
Free HDR Photoshop Action – PhotographyPla.net
ヴィンテージテイストを中心に、シーンに合わせて選べるさまざまな加工アクションが用意されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
webデザインの素材の定番・アイコン。小さなイラストでありながら、機能や意味を簡単にビジュアルで表現できるため、非常に重宝されています。今回はそんなアイコンの最新まとめ「40+ Fresh and Flat Icon Sets for May 2014」を紹介したいと思います。
（75 Slim Weather and Climate Icons – GraphicLoads）
ベーシックなものはもちろん、ちょっと変わったものまで、いろいろな種類が揃っています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
