デザインを開発するという視点でお伝えするクリエイティブBLOG
スマートフォンの幅広い普及によって、UIや動作周りもスマートフォンに最適化されるようになってきました。そんな中今回ご紹介するのは、スマートフォン向けのフォトスライダーの作り方を紹介する「SmartPhoto.js」です。
スマートフォンで大きな写真を楽しめるフォトスライダーで、横スライドタイプのスマートフォンからの閲覧に最適化したギャラリーを簡単に作ることが出来ます。
詳しくは以下
(さらに…)
最早Webデザインに欠かせない存在となってきたアニメーション。デザインに動きをつけることで、より見やすく魅力的なサイトへとクオリティアップすることも可能な魅力的なツールです。今回はそんなWebアニメーションからフローティングアクションボタンのみをまとめた「Floating Action Buttons: 20 Free Animations for Web Developers」をご紹介します。
Floating Action Buttons: 20 Free Animations for Web Developers
検索窓から何かと利用シーンの多いプラスボタンのアニメーションまで、全部で20種類ものアニメーションが集められています。その中から数点ピックアップしてご紹介しますのでご覧下さい。
詳しくは以下
(さらに…)
スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。
メニューアイコンとしてなくてはならない存在になっていますが、その反面でハンバーガーボタンのデメリットを考え提唱している、奥深い考察です。
詳しくは以下
ログインボタンにフォームエリア。必要な要素の定まっているログインフォームのデザインは、ついつい似たようなデザインになってしまいがち。そんな中今回ご紹介するのは、クリエイティブなログインフォームのデザインサンプルをまとめた「20 Creative Login Form Examples For Your Inspiration」です。
Sign In & Sign Up Form by Nick Buturishvili – Dribbble
さまざまなテイストのフォームデザインが集められており、きっとあなたにとって新鮮な発想をもたらしてくれるはず。まとめの中から特におすすめのフォームデザインを、3つ抜粋してご紹介していますので以下よりご覧ください。
詳しくは以下
Webサイトのコーディングを一手に担うコーダー。デザインに関する知識を持っているだけで、仕事の仕方も大きく変わってきます。そんな中今回ご紹介するのは、コーダー達へ向けた簡易的な色彩学を学ぶためのWebサイト「Practical Color Theory for People Who Code」です。
色相の説明から始まりトーンオントーンなど、基礎的な知識を学ぶことができます。
詳しくは以下
web用のカラーコードがコピペできるサービス。その便利さから活用している人も多いはず。そんな中今回ご紹介するのは、カラーサンプルとして使える、グラデーションパターンを180種類も集めたwebサービス「WebGradients」です。
背景カラーの選定や主流のUIデザインのカラーサンプルとしても使える、ソースコードをそのままコピペ可能な、とても便利なwebサービスです。
詳しくは以下
photoshopなど一部高機能な写真レタッチソフトには実装されていますが、今回紹介するのは写真上の不要なものを簡単に消去して周りと馴染ませるWEBサービス「Webinpaint」。
使い方は非常に簡単で、写真の中の消したいものをブラシで、塗りつぶして、Inpaintを押すだけで写真を解析して、周りの風景と違和感がないように修正してくれます。レタッチした例がいくつか公開されていましたので。下記に貼り付けておきます。
詳しくは以下
フリーで使用できる素材は非常に重宝するため、つねにチェックされているデザイナーの方はとても多いのではないでしょうか？そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリーリソース「15+ Free Resources to Use in Your Design Projects」です。
Free Textures: Cracked cement texture | Grunge
フォントやモックアップ、アイコンなど、よく利用する種類の素材が厳選されまとめられています。
詳しくは以下
フォントにはさまざまなデザインが存在しており、デザインが出来上がった状態は一つのグラフィックとして完成されていますが、今回はタイピング＝打ち込みをする際の表情に注目しデザインされたフリーフォント「Typing Art」を紹介したいと思います。
（Typing Art｜オドリコ 文字がクルクルと踊ります。）
タイピングした瞬間に、それぞれのデザインをイメージさせる動きを見せるというとてもユニークなフォント。もちろん、デザインフォントとしても魅力溢れるシリーズとなっています。
詳しくは以下
軽量で高機能なjavascriptライブラリjQuery。様々なプラグインがリリースされていて、簡単にWEBに動きや機能を付加してくれるため。使い勝手が良く多くのWEBサイトで利用されていますが、今日紹介するのはjQueryで利用出来る便利なナビゲーションを集めたエントリー「26 Useful jQuery Navigation Menu Tutorials」です。
Mega Drop Down Menus w/ CSS & jQuery
ドロップダウンメニューからユニークなアコーディオンメニューまで様々なナビゲーションがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
前回で「iPhoneのユーザーインターフェイス素材集「iPhoneのユーザーインターフェイス素材集「iPhone GUI PSD」」という記事でiphoneのインターフェイス素材を紹介しましたが、今回紹介するのはiphoneの素材集と同じく「teehan+lax」で公開されているブラウザのインターフェイスのパーツを集めたpsd素材「Browser Form Elements PSD」です。
このpsdにはラジオボタン、フォーム、カーソルｍアイコンなどなど様々なデータが収録されています。WEBデザインのモックアップを実際に近い形で見せるには便利なデータだと思います。
詳しくは以下
パンクやヘビーメタルなどのミュージックシーンでもよく利用されるガイコツのモチーフは、コアなファンも多いマークの一つではないでしょうか？今回はそんなガイコツを表現できるベクター素材をまとめた「A Collection Of Free Vector Skulls」を紹介したいと思います。
Motorhead Vector :: Vector Open Stock | vector graphics and vector art to download for free!
リアルな雰囲気のガイコツから、キュートな雰囲気のガイコツまで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
書体はデザインのなかでも非常に重要な要素の一つで、書体が持つ印象や雰囲気にデザインが引っ張られます。今日紹介するのはコミカルで楽しげな雰囲気のコミックフォントを集めたエントリー「25 free comic fonts」を紹介したいと思います。
上記のような楽しさを感じられるフォントが多数集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザイナーにとってもはや欠かせない存在でもあるフリー素材。非常に膨大な数の素材がインターネット上では配布されています。今回はそんな素材の中でもデザイン性の高いものを集めた「Freebies & Goodies For Web Designers – Sept 2015」を紹介したいと思います。
Free iMac 5K Retina 27" Office | PSD Mockup on Behance
フォント、UI、アイコンなど、さまざまな種類のフリー素材が厳選され紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
制作したいイメージやテイストによって、使用するフォントも使い分けをすることで、デザインをより高い精度で仕上げることができます。それにはより多くのフォントをストックしておくことも大切。そんな中今回は、ラフな雰囲気を演出したい時に便利なスクリプトフォント「Highlander Marker Script」を紹介します。
マーカーで描いたようなラフテイストにデザイン性を感じる、セットで使用できるパーツもセットになったフォントです。
詳しくは以下
高品質なフリーフォントはデザインに欠かせない存在です。いざという時に備えて、幾つかフリーフォントをストックしておけば、デザインの幅も広がりますし時短にも繋がります。今回はそんなデザインに役立つ、最新のフリーフォントをまとめた「23 Fresh Free Fonts for Graphic Designers」をご紹介します。
SALMELA – FREE CALLIGRAPHY FONT on Behance
23種類もの商用利用可のデザイン性の高いフリーフォントが紹介されています。その中から、幾つかおすすめのフォントをピックアップしましたのでご覧ください。
詳しくは以下
(さらに…)
