デザインを開発するという視点でお伝えするクリエイティブBLOG
プログラマーにはシンプルなフォームプログラム。ただ、デザイナーにとっては自ら組み上げるというのは少しハードルがあると思います。今日紹介するのはwordpressでフォームを簡単に実装できるフリーフォームプラグインを集めたエントリー「20 Free Contact Form Plugins for WordPress」です。
シンプルなプラグインから、非常に高機能なプラグインまで様々なプラグインが紹介されています。今日はその中から幾つか気になったプラグインをピックアップして紹介したいと思います。
詳しくは以下
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。
「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。
詳しくは以下
基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。
多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documentation – jFormer」からご覧いただくけます。フォームに動きをつけたいという方には役に立つフレームワークだと思います。
web・スマートフォン等のデザインに広く活用されているアイコン素材。イラストで機能の意味を手軽に表現できるため、非常に重宝する存在だと思います。そんな中今回紹介するのは、インターフェイスデザインの定番として利用できるフリーアイコン「40 FREE UI Icons」です。
非常にシンプルなので、そのままはもちろん、アレンジ・加工して使えるアイコンが40種まとめられています。
詳しくは以下
ワードプレスをつかってサイト構築をされている方も多いと思いますが、今回はフリーの最新ワードプレステーマをまとめた「Fall Cleaning 2017:10 Free WordPress Themes and How to Use Them Right」をご紹介していきたいと思います。
Headstart — Free WordPress Themes
デザイン性はもちろん、使いやすさも重視してまとめられているので、自分の用途にあったものが見つかるかもしれません。下記にいくつかピックアップしているので、ご覧ください。
詳しくは以下
筆記体の欧文フォント・スクリプトフォント。女性らしい繊細なラインのものが多く、きれいめなデザインに使用されることが多いフォントです。今回はそんなフリースクリプトフォントまとめ「Handpicked Free Script Fonts for Commercial and Personal Use」を紹介したいと思います。
AdineKirnberg-Script Font · 1001 Fonts
個人・商用どちらでも利用できる、なめらかな質感のフォントがピックアップされ紹介されています。
詳しくは以下
デザイナーは時にリアルなグラフィックを求められることもありますが、いちから作るのは時間も手間もかかるもの。今回はそんな時に、こんなグラフィックコレクションがあったら助かる、といったアイテムがまとまった、フリーグラフィック素材まとめ「A Worth Checking Out Collection Of Free Graphics Files for Designers」の紹介です。
Free PSD : Creative Horizontal CV Resume Template PSD by PSD Freebies – Dribbble
リアルなグラフィックのアイテムはモックアップにも使用できる優れもの。気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
今まで「イラストレータのチュートリアル集「Illustrator
Tutorials」」や「illustratorのペジェ曲線特訓チュートリアル「Illustrator Pen tool exercises」」などイラストレーターのチュートリアルを紹介してきましたが、今回紹介するのは65種類ものイラストレータのチュートリアルを集めた「65 Adobe Illustrator Tutorials」です。
上記のようにアイコンからからカットイラストまで様々なジャンルのチュートリアルが集められています。
詳しくは以下
Photoshopを使うことで、難しいグラフィック表現も可能に。しかしどのように操作したら良いかわからないということも多いのではないでしょうか？そんな時に参考したい、デザイン性の高い表現を手に入れられるPhotoshopチュートリアル「12 Fresh & Creative Photoshop Tutorials」を紹介したいと思います。
Create a Pizza Food Text Effect in Photoshop – Photoshop tutorial | PSDDude
非常に高いクオリティのデザインチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
アイコン素材はデザインの感覚を揃えて利用すれば、サイトの統一感、ユーザーインターフェイスの精度など向上させてくれます。今日紹介するのはまとめて利用できるレトロポップな170個収録のビジネスアイコンセット「170 Retro Business Icons」です。
上記の様なポップでレトロな温かみのあるデザインテイストでビジネスに関するアイコンが全部で170個収録されています。収録されているアイコンセットは以下からご覧ください。
詳しくは以下
企画書やデザインでも一つイラストレーションがあるとクオリティが上がったり、彩りを添えたりできますが、そんな時に便利なクリップアートを集めたWEBサイトが今回紹介する「artvex.com – Free Clipart, Images, and Graphics.」です。
全部で10,000個以上のクリップアートがダウンロードできるようになっていて、様々なジャンルに分けられて公開されています。参考までにいくつかのカテゴリーに収録されているクリップアートのスクリーンショットを紹介致します。
詳しくは以下
グラフィック制作にとても便利なベクターデータ。今までDesigndevelopでは数々のベクターデータ関連の情報を紹介してきましたが、今日紹介するのはベクターデータをまとめて配信しているベクターデータ集サイトとも言えるサイトをまとめたエントリー「25 Best Sites to Download Free Vector Files」です。
今日はその中から今までDesigndevelopで紹介していないベクターデータサイトをいくつピックアップして紹介したいと思います。
詳しくは以下
デザインにアンティーク調の雰囲気を演出する際によく使用される額装等のフレーム。素材などを使用することが多いと思いますが、よりリアルな雰囲気を出すためにはいろんな素材と組み合わせたり、加工することが必要となってきます。今回はそんな加工などの必要がない、アンティークなフレームのビジュアルを手に入れられるモックアップ「Framelicious」を紹介したいと思います。
非常にハイクオリティなデザイン性のあるフレームビジュアルが4種ダウンロードできるようになっています。
詳しくは以下
