デザインを開発するという視点でお伝えするクリエイティブ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サイトで取り入れられているHTML5。魅力的な動きやレイアウトを実現できるため、非常に重宝されています。そんな中今回紹介するのは、高品質なフリーHTML5テンプレート「26 Free HTML5 Templates」です。
（Treviso | Responsive HTML5 Template）
スタイリッシュでデザイン性の高いHTML5テンプレートがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
特に最近、注目が高まっているオーガニック系食品。健康志向が強くなってきていることもあり、多くの人からの支持を集めているのではないでしょうか？そんな中今回紹介するのは、オーガニック食品をイメージさせるアイコンセット「Organic Food Icon Set」です。
ナチュラルテイストの、果物や食材をアイコン化。セットでダウンロードできるようになっています。
フリーフォントにはさまざまな種類が存在しており、たくさんの種類を持っているとデザインの幅が広がり、クリエイティブの質がアップすると思います。そんな中、今回紹介する「A Collection Of Free Decorative Fonts For Designers」は、フォント自体に装飾が施されたまとめです。
使うだけでデザインの要素をプラスできるような個性的なデザインのフォントが多数収録されています。気になったものをピックアップしましたので、下記より御覧ください。
国内でも徐々に普及してきているスマートフォン。ここ最近ますます、スマートフォン移行が進んでいる感があり、WEB業界でもモバイルサイトやスマホアプリを受託する機会も増えてきていると思います。今回紹介するのは、モバイルサイトやスマホアプリを創るときに便利なGUIキット集「40 New Web, Mobile and Application GUI Kits」です。
このエントリーでは全部で40ものモバイルのデザインのための素材が配布されています。今日はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
Stencils for Sketching iPhone, iPad & Android
モバイルのWEBサイトワイヤーフレームのための素材、まずは構成を先にというときには便利なキットです。
Android GUI PSD
Androidアプリを制作するときに便利なAndroidのGUIをセットにした素材キット。
iOS 5 GUI PSD
細かな部分が変わったことでも知られるiOS5を再現した素材キット、様々なUIが再現されています。
上記の他にも非常に沢山の素材がまとめらています。スマートフォン関連でWEBサイトやアプリのデザインをされる方は是非。
個人から企業まで、カスタマイズと更新のしやすいWordPressをサイト制作に利用している方も多いと思います。そんな中今回は、ビジネスシーンに使いやすいWordPressテーマをまとめた「Showcase Of Powerful Free WordPress Business Themes」を紹介したいと思います。
WordPress › Business lite « Free WordPress Themes
シンプルなテーマはもちろん、ニーズに合わせた仕様が特徴的なテーマが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
制作ツールとして非常に多くのクリエイターが利用しているツールの一つイラストレーター。ベクターデータで扱え、グラフィックデザインなどには非常に力を発揮してくれます。今日紹介するのは、イラストレーターで様々な表現が簡単に可能になる、イラストレーターブラシを集めた「45 Free Sets of Adobe Illustrator Brushes」です。
105 Stunning Retro Tech-Shaped Illustrator Brushes
シンプルなものから、オブジェクト的なものまで、様々なブラシがまとめられていますが、今日はその中空気になったものを幾つかピックアップして紹介したいと思います。
詳しくは以下
常に新しい素材を探し求め、インターネット上を検索しているデザイナーの方は多いと思いますが、膨大な量の中からサーチするのは大変なもの。今回はそんな時に参考にしたい、多彩な最新リソースが揃った「50 Free Resources for Web Designers from August 2015」を紹介したいと思います。
Splash Photoshop Brushes by BrielleFantasy on DeviantArt
アイコンからUIを中心に、クオリティの高い素材が揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインの背景素材として活躍してくれるパターン素材。いろいろな種類が存在していますが、今回紹介するのは、かわいらしいテイストのドローイングパターンセット「Free Download : Pack of Drawn Style Patterns」です。
手描きタイプのイラストレーションパターンが豊富に揃っており、便利に活用することができそうです。
詳しくは以下
作業をするときはメインのマシンが決まっていて、ほぼそのマシンを使って作業をするのですが、ごく希に出先などで作業する時もあり、その際に困るのがソフト。同じ環境はもちろん難しいですが、画像編集とか必要になった場合などの作業が発生した時困ってしまっていました。
Pixlrのインターフェイス
WEBさえあればどんな所でも使えるオンラインイメージエディタのまとめが「Six Revisions」で紹介されていましたので、今日はオンラインイメージエディタのスクリーンキャストを交えながら、自分のメモがわりにまとめておきたいと思います。
詳しくは以下
インターネット上に広告を掲載する場合、広告から商品に直接結びつくページへの誘導が、ユーザーがサイトに留まってくれる重要な要素だと思います。そこで今回紹介するのが、ユーザーに分かりやすいランディングページを手軽に制作できるテンプレートを集めた「50 Effective Landing Page Templates for your Products」です。
Marketing – Promo – Landing Page for Digital Product Sales – ThemeForest
商品の詳細をチェックしたらすぐに購入できるように設計された、さまざまなテンプレートが紹介されています。中でも特に気になったテンプレートをピックアップしましたので、下記よりご覧ください。
詳しくは以下
