デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。
このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。
詳しくは以下
Instagramなどを始め写真共有アプリでは気軽に写真に豊富なフィルタがかけられ多くの方が利用しており、フィルタによって創られた色味や風合いは写真のクオリティを大きく向上させてくれます。今日紹介するのはjavascriptとCSSで写真にフィルタ効果を与えるライブラリ「Philter」です。
パラメーターを調整するだけWEB上で表示された写真にフィルタと同じような効果をかけることが可能です。
詳しくは以下
WEBサイトでは、もはや定番化したTOPで重要な情報をフラッシュ的に見せるスライドショー。定番化しているだけに注目をそれだけ引くのは至難の業ですが、今日紹介するのはそんなスライドショーの中でも特異な、様々な表情を見せてくれるスライドショー「Multi-Layout Slideshow」です。
こちらのスライダーはサークル、スクエアなどなど、一つの表現では無く、様々なフォーマットを切り替えてスライドできるスライドショーとなっています。
詳しくは以下
WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。
モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。
詳しくは以下
ブラウザの発展によりjavascriptによるアニメーション表現はより高度なものとなってきていますが、今日紹介するのはCSSやSVGとも連携し、様々なアニメーションを描画できる軽量なライブラリ「Anime.js」です。
回転や移動といったシンプルなものから、ランダムな動きなどなど、作りこめばかなり高度な動きも可能な用で、CODEPENでは様々なアニメーションサンプルが上がっていました。
詳しくは以下
WEBのコンテンツの見せ方の定番中の定番のギミック、スライダー。数多くのスライダーがリリースされており、どれも目を引くための工夫が施されていますが、今日紹介するのはWEBGLで実現するリッチアニメーションスライダー「WebGL image slider transition」です。
このスライダーはjavascriptとWebGLの技術を使い、画像が崩壊し、再構築しながら画像を切り替わるという今までのWEBでは動画レベルでしか表現できなったアクションが実装されています。
詳しくは以下
先日Designdevelopの「商用可！ベースメントに最適なWordpressテーマ「Empty Canvas」」と言う記事で極めてシンプルでなwordpressのテーマを紹介しましたが、今日紹介する「40 Stylish, Minimal and Clean Free WordPress Theme」も同じくシンプルでカスタマイズの自由度の高そうなwordpressのテーマを集めたエントリーです。
全部で40ものテーマが紹介されており、どれもシンプルでクオリティが高いものが揃っています。今日はその中からいくつか気になるものをピックアップして紹介したいと思います。
詳しくは以下
webデザイン制作の際には特によく使用するアイコン。テイストに合わせて、バリエーションを揃えておきたいものです。そこで今回紹介するは、さまざまなテイストのアイコンをまとめた「Top 50 Web Development, Design and Application Icon Sets from 2010」です。
（200+ Exclusive Free Icons: “Reflection” | Webdesigner Depot）
デザインの雰囲気はもちろん、それぞれにテーマ性を持ったアイコン集が多数収録されています。気になったものをいくつかピックアップしましたので、下記よりご覧ください。
スマートフォンが数多くリリースされ、アプリをデザイン制作を頼まれるそんなケースも増えてきていると思います。今日紹介するのはユニークなアプリのユーザーインターフェイスを集めたエントリー「40 Dribbble Shots for Mobile and UI App Design Inspiration」です。
OS標準のものではなく、アイデアが盛り込まれたインターフェイスが多数まとめられています。今回はその中から幾つか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインを支える要素の一つであるフォントデザイン。多種多様な欧文書体を持つことも大切ですが、一つのフォントで色々なタイプを持つこともデザインの微妙な調整時には必要なのではないでしょうか。今回は様々なフォントをご紹介するのではなく、焦点をCymbriaにあてたまとめ「Cymbria Free Font Family」をご紹介していきたいと思います。
癖がなく使用しやすいCymbriaはデザインする人なら持っておくと便利なフォントの一つ。太さなどのバランスが取られたセットがダウンロードできるようになっています。
詳しくは以下
どんどんと新しい素材が配布され続けており、常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、デザイン性の高いフリー素材集「Freebies & Goodies For Web Designers」です。
Free Perspective Website Mockup | ZippyPixels
アイコンからUI・モックアップまで、いろいろなタイプの素材がまとめられています。気に入ったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
作り込んだデザインを一瞬にして再現してくれるphotoshopブラシ。自分の探している物が見つかれば、制作する上でものすごくチカラになってくれます。今日紹介するphotoshopブラシ集「34 Super Cool Photoshop Brushes」はグランジからフィルム、切手などなど様々なジャンルにまたがってphotoshopブラシを集めたエントリーです。
沢山のphotoshopブラシ集が紹介されていますが、今日はその中から気になったものをいくつかピックアップして紹介致します。
詳しくは以下
制作にとても便利な記号、矢印。非常に便利な記号で、様々な見出しのアイコンから、次へ、前へという前後関係を簡潔にしてくれたりと本当に様々な使い道がありません。一般的に三角を使って作るのが一般的ですが、その表現は様々なものがあります。今回紹介するのは様々な矢印を集めたベクターデータセット「Arrows」です。
上記のように様々なかたちの矢印がイラストレーター、フリーハンドなどで使えるベクターデータで制作されています。利用例は以下の通りです。
詳しくは以下
デザインをしていると必ずといっていいほどお世話になるのがストックフォト、撮影前はイメージを伝える為にカンプ用の写真を使ったりしている方も多いのではないでしょうか？今日紹介する「The4Cafe Backgrounds Gallery」はそんなカンプ用写真に便利な高解像度のイメージショットが多数ダウンロードできます。
ファイル数もクオリティもなかなかの物で、写真はジャンルによってカテゴライズされていますので、非常に探しやすくなっています。
詳しくは以下
2018年 新年あけましておめでとうございます。
2017年は自身の仕事環境も大きく変化したこともあり、多忙を極め、ブログを一時期アップできないなど、今後のDesigndevelopのあり方について考えさせられた年となりました。結果的にはやはり、少しでも多くの情報を届けていきたい、また自身にとってのクリエイティブリソースを高めていきたいという想いが強くあり、定期的に更新ができる環境を整えることができました。
webの流行と共に、毎年デザインのトレンドや、システム開発技術などどんどんと進化を遂げており、1年前に最新とされていたものが古く扱われてしまうなど、スピードの早い業界にいて、次はどんなものが登場するのかを今からとても楽しみにしています。
2018年も同様に、最新の情報を皆さまにお届けできるよう努めていきたいと思いますので、ぜひ今後もご覧頂けますと嬉しく思います。
今年もDesigndevelopをどうぞよろしくお願いいたします。
デザイン構築をする際に便利に利用できるHTML5&CSS3。目的に合わせて組み込まれていると思いますが、どのようにしたら実現できるかわからないことも多いのではないでしょうか？そんな時に活用したい、HTML5&CSS3チュートリアル「Useful And Fresh HTML5 & CSS3 Tutorials」を今回は紹介したいと思います。
（Caption Hover Effects | Codrops）
デザインに動きや機能性を簡単に取り入れられるチュートリアルが多数まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
