デザインを開発するという視点でお伝えするクリエイティブBLOG
ECサイトのデザインや会員向けページなど何かと必要となる機会の多いログインぺージ。求められる要素の少なさから、いつも似たり寄ったりのデザインになってしまうと言う方も多いのでは。今回ご紹介するのはそんなログインページのデザインの参考にもなる、オープンソースなログインページのフォーマットをまとめた「10 Open Source Login Pages Built With HTML5 & CSS」です。
10 Open Source Login Pages Built With HTML5 & CSS
フラットデザインからビジネス向けな印象のものまで、様々なログインフォームが10種類紹介されています。さらにその中から幾つか気になったものをピックアップしましたので、ご覧ください。
詳しくは以下
(さらに…)
webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.
プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。
詳しくは以下
わざわざ出かけなくても、自宅でショピングができてしまう時代。インターネット利用者の約9割が、ネットショッピングを経験しているとも言われており、もはや日常生活において欠かせない存在といっても過言ではないかもしれません。そんな中今回は、ECサイトに欠かせない、支払いフォームデザインのインスピレーション集「30 Amazing Payment Form Designs for Your Inspiration」の紹介です。
Credit Card Checkout by Patryk Zabielski – Dribbble
払いフォームと言ってもレイアウトやUIデザインは様々。今回はいくつか気になるものをピックアップしてみました。
詳しくは以下
サイトのコンテンツとして必要な場合が多いコンタクトフォームなどの送信ページ。シンプルに構成されていることが多いですが、時にはデザイン性を重視したり、より使いやすさが求められる場合もあるのではないでしょうか？今回はそんな時に参考にしたいフォームデザインサンプル「20 Awesome Form Designs Visitors Want To Fill Out」を紹介したいと思います。
Dobidos, sanitari salvaspazio con bidet incorportato | Contatti.
デザイン性・使いやすさが考慮された、いろいろなタイプのフォームデザインがまとめられています。
詳しくは以下
webサイトからのお問い合わせや登録等を行う際に使用するフォーム。通常はあまり凝ったデザインが重視される場所ではありませんが、そこまでこだわりを見せることにより、サイト全体のクオリティも高めることができるのではないでしょうか？そこで今回紹介するのは、フォームにクリエイティブなデザイン性を＋できる「9 Creative CSS Form Designs From Codepen」です。
見た目はもちろん、動きにも魅力をもたせたフォームサンプルが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
名前やメールアドレスなどのユーザー情報を入力する際に利用するフォーム。基本シンプルなデザインのものが多い印象ですが、今回紹介するのはクリエイティブなデザインが特徴のフリーフォームデザインまとめ「14 Free Creative Form Designs」です。
Contact Form – Rock Background – Form Templates
デザイン性を求めるサイトにおすすめな、14種のフォームデザインテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
形状的にクセのない使いやすい形として人気のサンセリフフォントは、非常に重宝する存在です。今回はそんなサンセリフフォントを無料で利用することができる「15 Free Superb Sans-Serif Fonts For Designers」を紹介したいと思います。
定番として活躍してくれるであろうシンプルなタイプから、個性をプラスしたものまで15種のフォントが紹介されています。
詳しくは以下
WEBやアプリを製作する上で便利なアイコン。それだけに素材としても非常に多くのアイコン素材が配布されていますが、今回紹介するのは海外のデザイン事務所が運営するフリーアイコンが日々公開されるWEBサイト「Endless Icons」です。
配布されているアイコンは現在100個ほどで、「Kitchen、Food、Sport、Sport Gear、Doodle、Drink」といくつかのカテゴリーに分類されており、ジャンル別にソートすることもできます。
詳しくは以下
デザインに質感を与えてくれるテクスチャ。紙のデザインでも、WEBのデザインでもうまく利用すれば、今のデザインをもうワンランク高めてくれる、非常に画期的な素材です。今回紹介するのはシンプルで、激しくない適度なグランジのテクスチャセット「20 Simple & Subtle Grunge Textures」です。
セットになっているテクスチャの一部を下記にご紹介致します。
詳しくは以下
先日「様々なベクターデータやデザインに役立つ素材を配布する「Dezignus.com」」という記事で、様々なベクターデータ、photoshopブラシなどクリエイティブな素材を扱っているブログを紹介しましたが、今日紹介するのもそんな素材を配布してくれているブログ「Pixlpusher」です。
まだ数は少ないのですが、様々な素材を公開されています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
画像テクスチャなどの利用は、デザイン性やクオリティをプラスする事のできる有効な手段の一つです。今回紹介する「Random Textures To Use In Your Design Project」では、特に人々の印象に残りやすいテクスチャばかりが集められています。
自然の風景から工業的なアイテムの抽象的な表現まで、様々なテクスチャが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
レトロアメリカンな雰囲気のデザインテイストは、アウトドアテイストやヴィテージなデザインを行いたい時にピッタリ。そんなときに活用したい、ちょっとレトロな動物たちのベクターアート素材「Savage Animals Vector Bundle」を今回は紹介します。
木彫り風に描かれた動物たちの、高品質なベクターアートが11種類そろったフリーダウンロード素材です。
詳しくは以下
(さらに…)
web上でユーザーの環境に左右されることなく表示することが可能なwebフォント。多くのサイトで見かけることが非常に多くなってきましたが、今回紹介するのはフリーwebフォントまとめ「23 Best Free Web Fonts Of 2014」です。
Free Font Lato by tyPoland Lukasz Dziedzic | Font Squirrel
さまざまな種類の、いろいろなシーンで活用できるwebフォントがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
さまざまな種類のテクスチャが存在しており、デザインのテイストやテーマに合わせていろいろとストックし使い分けているデザイナーの方は多いと思います。テクスチャをコレクションとして所持している方も多いのではないでしょうか？そんなコレクションに是非加えておきたい、5種の葉っぱの表情を楽しめるフリーフォトテクスチャ「Foliage Texture Free Photos」を紹介したいと思います。
青々と茂った、緑の表情が写真いっぱいに楽しめるグリーンのテクスチャ素材がセットでダウンロードできるようになっています。
詳しくは以下
WEBサイトのデザインから、立体的なキャラクターを制作したりと、使用用途の幅広いPhotoshopは、ツールを駆使することで表現力の高いデザイン制作が可能となります。そんな中今回は、さまざまなシーンを作り上げられるPhotoshopチュートリアルをまとめた「50 Best Photoshop Tutorials of 2012(our favorites)」を紹介したいと思います。
Create an Autumn-Themed 3D Text Effect With Photoshop CS6 Extended | Psdtuts+
ガジェットやキャラクターの作り方から、WEBサイトのデザインまで、Photohsopをフル活用できるチュートリアルが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
インターフェイスや情報を伝えるためにとても便利なアイコン、WEB上でも現実世界でも至る所で目にしますが、今回紹介するのはそんなアイコンのチュートリアルを集めたまとめエントリー「50 Excellent Icon Design Tutorials」です。
50 Excellent Icon Design Tutorials
クオリティの高いアイコンを制作するには一体どんな方法がとられているのか？様々な方法が紹介されています。今日はその中から気になったチュートリアルをいくつか紹介したいと思います。
詳しくは以下
