デザインを開発するという視点でお伝えするクリエイティブBLOG
最近のWEBデザインの主流の一つレスポンシブデザイン。端末の解像度に応じて、その端末に最適化したデザインを提供してくれるものですが、慣れていないとなかなか一から構築となると難しいものです。今日紹介するのはシンプルなベースフレームで明快にレスポンシブデザインが実装できるフレームワーク「BASE」です。
こちらは「Super Simple Responsive Framework」とある通り、至ってシンプルなもので、テキストリンク、リスト、テーブルなどなど、基本要素のみで構築されています。
詳しくは以下
多くの、端末がリリースされていて、端末間の表示を合わせるのはフレームワークを使わないと色々と面倒になってきました。今日紹介するのはPC、タブレット、スマートフォンで使えるHTML5ベースのUIフレームワーク「Kendo UI 」です。
基本的にはjsとcssで作られたフレームワークとなっていてjsとcssを読み込み、ルールに沿って、記述していく形になります。
詳しくは以下
まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。
予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。
詳しくは以下
コードの呼び出し例は以下のとおり。
上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。
一から全てデザイン、制作することは精度も上がりますし、クリエイターとしては当たり前のことなのかもしれませんが、案件ベースで見て、予算や時間的な問題で、デザイン、設計などを全てオリジナルでこなそうと思うと無理がある案件もあるかと思います。そんな時に役立つのが今回紹介するWEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」です。
よく見るグリッドシステムから、シンプルなCSSのデザイン処理を集めたもの、wordpressのテンプレートを作るためのものなどなど、制作の負荷を軽減してくれる、様々なフレームワークがまとめられています。今日はその中から幾つか気になったものを紹介したいと思います。
詳しくは以下
web上に多数配布・公開されているpsdデータには非常にさまざまな種類があり、デザインに。いろんなバリエーションを出すことができるため、豊富に所持してしておくと便利なもの。今回はそんなコレクションに是非加えたい、ポイント使いに最適なリボン型psd素材「17+ Elegant Ribbons (Psd)」を紹介したいと思います。
立体的かつリアルな質感が表現された、クオリティの高いリボンのデザインが再現されたpsd素材です。
詳しくは以下
カラムや階層を使ったページコンテンツの概念がない、フルカラムでレイアウトされているシングルページ。特に最近多く見かけるようになりました。そんな中今回は、シンプルでクリーンなイメージのシングルページを取り入れたwebサイト「11 Inspiring Single Page Websites」を紹介したいと思います。
洗練された印象を受ける、デザイン性の高いwebサイトが紹介されています。
詳しくは以下
WEBを制作する上で、非常に便利なjQueryプラグイン。javascriptで実現できる様々な動作、機能を簡単に実装できます。今日紹介するのはjQueryプラグインの中でも、新しい価値を与えてくれるjQueryプラグイン集「20 New jQuery Plugins Worth Taking a Look at」です。
フリップして進むブックスライダーだったり、jQueryのみで画像を描画したり、映像を背景にしたフルスクリーンサイトなどなど、様々なjQueryプラグインがまとめられています。今日はその中から気になったものをピックアップして紹介したいと思います。
詳しくは以下
ポータルサイトなどの情報系サイトでは特に、どれだけ多くのユーザーにリピーターになってもらえるかが重要だと思います。そのためには、ニュースレター申込やRSS部分のデザインには、特に力を入れたいところ。そこで今回紹介するのが、ニュースレター用のパーツデザインが揃うPSD素材をまとめた「30 Beautiful Free Newsletter Subscribe Box PSD Designs」です。
Subscription form design | Psdblast
定番のエアメールをモチーフにしたデザインをはじめとした、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインをするときに全くゼロから、自分自身から出すというかたもいるかも知れませんが、多くの方がインスピレーションを得るために何らかのデザインを見たりという作業を行っていると思います。今日紹介するのはデザインの参考になる海外デザインインスピレーションブログ11選「11 design blogs with a specific focus」です。
1. Packaging blog – Lovely Package
大枠なデザインのブログでは無く、それぞれロゴデザイン、パッケージデザイン、タイポグラフィなど、デザインの中でおジャンルが細かく分けられてブログがピックアップされていました。
詳しくは以下
立体感のあるリアルな質感から、シンプルでフラットなテイストが主流となってきているアイコンデザイン。汎用性が高く、使いやすいものが多く展開されています。そんな中今回紹介するのは、ライン形状の400種アイコンセット「400+ Vector Outline Icon Set for Designers/Developers」です。
さまざまな種類のベクターアイコンが400種と豊富な種類でまとめられています。
詳しくは以下
モックアップやテンプレートは、完成度の高いクオリティの高いものが数多く配布されており、常にチェックされている方も多いのではないでしょうか？そんな中今回は、ぜひダウンロードしておきたい、モックアップ&テンプレート集「12 Fresh PSD Mockup Templates For Creative Works」を紹介したいと思います。
Branding / Identity MockUp Vol.15 | GraphicBurger
webや紙媒体などで使用できるテンプレートが12種、ピックアップされ紹介されています。
詳しくは以下
アイコンは意味を伝えるために欠かせないアイテムです。説明文ではなくイラストを用いることで理解もしやすくなるので、Webサイトなどでは多く使われています。そんな中今回は、150種類以上の可愛らしいベクターアイコンがセットになった「150+ Free Vector Icons for Web, iOS and Android Apps UI Desgin」です。
150種類以上の豊富なアイコンが3パターンのカラー展開された、汎用性の高いアイテムです。
詳しくは以下
レトロアメリカンな雰囲気のデザインテイストは、アウトドアテイストやヴィテージなデザインを行いたい時にピッタリ。そんなときに活用したい、ちょっとレトロな動物たちのベクターアート素材「Savage Animals Vector Bundle」を今回は紹介します。
木彫り風に描かれた動物たちの、高品質なベクターアートが11種類そろったフリーダウンロード素材です。
詳しくは以下
(さらに…)
人の目を引くために、見出し部分を印象的にするデザイン手法を取り入れている方も多いと思います。その中でフォント選びにもっとこだわりを持たせると、さらに魅力的な演出ができるかもしれない、今回はそんなシーンで参考にしたいフォントまとめ「20 Free Tall Fonts for Catchy Headlines」を紹介します。
Monument_Valley_1.2 font by turbocass – FontSpace
数多くあるタイポグラフィーの中でも今回は、背の高さで見出しを飾り付けてくれることに焦点をあてたものがピックアップされています。
詳しくは以下
