デザインを開発するという視点でお伝えするクリエイティブBLOG
ECサイトのデザインや会員向けページなど何かと必要となる機会の多いログインぺージ。求められる要素の少なさから、いつも似たり寄ったりのデザインになってしまうと言う方も多いのでは。今回ご紹介するのはそんなログインページのデザインの参考にもなる、オープンソースなログインページのフォーマットをまとめた「10 Open Source Login Pages Built With HTML5 & CSS」です。
10 Open Source Login Pages Built With HTML5 & CSS
フラットデザインからビジネス向けな印象のものまで、様々なログインフォームが10種類紹介されています。さらにその中から幾つか気になったものをピックアップしましたので、ご覧ください。
詳しくは以下
(続きを読む…)
会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。
10種類の、それぞれ個性をもったログインフォームがピックアップされています。
詳しくは以下
セキュリティのかかったwebサイトや管理ページ、またユーザーがサイト登録する際に入力するフォームにデザイン性を求めることで、サイトのクオリティはより高まるのではないでしょうか？今回はそんなシーンにおすすめ、デザイン性のあるログイン・登録フォームpsd「20 Login & Registration Form Free PSDs」を紹介したいと思います。
どうしてもシンプルになりがちなフォームにデザインを加えたpsd形式の素材がまとめられています。
詳しくは以下
様々な種類のテクスチャがWEB上では公開されていますが、その中でも質感を出すのに非常に重宝するのがヴィンテージテクスチャ。布だったり紙だったり独特の古びた風合いはデジタルデータになっても質感や雰囲気を伝えてくれます。
今日紹介するのはヴィンテージテクスチャを数多く収録したテクスチャセット「 60+ Vintage Style Textures Every Designer Should Have」です。非常に多くのテクスチャが収録されています。一部のサンプルを下記に貼付けておきます。
詳しくは以下
企業から個人まで、幅広い目的・用途で運用されるWebサイトは、インターネットを通して情報発信をする際に欠かせないツールのひとつ。しかし、初心者が一からコードを組みWebサイトを制作するとなると、完成までにコストがかかってしまいがちです。今回ご紹介するのは、そんな手軽に制作できるWebサイトテンプレートをまとめた「25 Free Open Source Website Templates for Easy Customization」です。
25 Free Open Source Website Templates for Easy Customization
使いやすく、カスタマイズ可能なオープンソースのWebサイトテンプレートが25種類紹介されています。さらにその中から、これはと思ったものを幾つかピックアップしてみましたのでご覧ください。
詳しくは以下
(続きを読む…)
テキストの回りこみはWEBのデザインではあまりにも自由度が低いです。今日紹介する「CSS Text Wrapper」はそんなテキストの回りこみを自由に表現するためのWEBサービスです。
こちらのサイトでは自分で好きな図形を形作り、それに合わせてテキストを配置することができます。
詳しくは以下
最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。
Floating Action Buttons: 20 Free Animations for Web Developers
検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。
詳しくは以下
(続きを読む…)
WEBデザインの印象を決定づける要素は様々ですが、もっとも大きな要素の一つ色。ベースカラーを何にするかで大きく印象がことなります。今日紹介するのは黒のペースカラーを使って素晴らしいデザインにまとめているWEBサイトを集めた、黒を活かしたWEBデザインのインスピレーション集「50 Examples of Black in Web Design – Black is Beautiful!」です。
色の中でもかなり印象深く、強い色だけに、きれいにまとめるとインパクトがあり、シャープな印象を受けます。様々なWEBサイトがまとめられていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
非常にたくさんのフリーフォントがインターネット上で配布されており、膨大な数の中からデザイン性のあるものをピックアップするのはなかなか大変なもの。今回はそんな時に参考にしたい、ハイクオリティなデザイン性を感じられるフリーフォント選「30 High Quality Free Fonts You Should Definitely Own」を紹介したいと思います。
Cornerstone – Free Font on Behance
いろいろなテイストのデザイン性の高いフリーフォントがまとめられ紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
母親に感謝の気持ちを伝える「母の日」。すでになにかプレゼントを計画されている方も多いのではないでしょうか？今回はそんな特別な瞬間にデザインで気持ちを伝えるシーンのための素材「Free Mother’s Day Graphics」を紹介したいと思います。
母の日をイメージさせる種類も揃ったアイコンセットで、かわいらしいイラストレーションが特徴の心温まるフリー素材です。
詳しくは以下
WEBデザイナーを最も悩ませるインターネットエクスプローラ。大きく時代をまたいでいますが、未だに各バージョンともシェアがあり、それぞれのバージョンで崩れなく表示させると言う事は、多くの場合必須であり、あまりのバグの多さに煩わしい事でもあります。今日紹介する「Microsoft Expression Web SuperPreview」はIE6/7/8でのWebサイトにおける見栄えの違いを比較・検証できるマイクロソフト製ソフトです。
こちらはWebオーサリングツール「Microsoft Expression Web」に同梱されているWebページ表示の互換性チェックツール「SuperPreview」の機能限定版とのことですが、Firefoxのチェック機能が省かれているだけなので、IEチェック用としては十分利用できます。
詳しくは以下
フリーフォントについては今までDesigndevelopでも様々な話題を取り上げてきましたが、今回はグラフィティやストリートアートで使われそうなグラフィカルなフォントをまとめたフォントセット「75 Free GRAFFITI FONTS」を紹介したいと思います。
シンプルでキレイ目なフォントとは対照的でインパクトがあり、グラフィカルなフォントが多数紹介されています。読み物などのボディコピーには向いていませんが、雰囲気があう商材のデザインにはかなり役に立つフォントセットだと思います。
詳しくは以下
さまざまなグラフィック表現を可能にする、adobeのソフト・イラストレーター。デザイナー必須のソフトであり、ほとんどのデザインシーンで利用されています。今回はそんなイラストレーターをもっと活用できる、最新のチュートリアル15選「15 New Adobe Illustrator Tutorials」を紹介したいと思います。
How to Create a Simple Geometrical Pattern in Adobe Illustrator
イラストレーターを使ってできる描写技術が15種掲載されています。気になったものをピックアップしましたので、以下よりご覧ください。
詳しくは以下
