デザインを開発するという視点でお伝えするクリエイティブBLOG
webサイトを制作する時に必ず必要になってくるメタ。タイトル、ディスクリプション、画像といった基本情報は、FacebookやTwiiterなど媒体別の設定をしておくことで、よりサイトの精度が高まります。今回はそんな媒体別のメタタグを表示してくれるwebサイト「HEY META」を紹介します。
現在設定されているメタをベースに、それぞれに最適なメタと記述を簡単に生成することができます。
詳しくは以下
グラデーションカラーを取り入れたデザインは、現在の主流トレンドの一つとなっていますが、思うような色合いを作りだすのはなかなか難しいもの。そんな時に参考にしたい「ColorSpace」を今回は紹介したいと思います。
美しいグラデーションを簡単に生成することができるwebジェネレーターです。
詳しくは以下
Webデザインのように閲覧環境が限定されるプロダクトであっても、質感を高めることによってデザインに深みを与えてていくことができます。今回紹介するのはそんな質感を手軽に高めることができる、クリエイティブなスクエアパターンを集めたエントリー「30+ Creative Square Patterns To Inspire You」です。
Pattern / 5 Stones :: COLOURlovers
カラフルなテクスチャや手作りの暖かみを感じられるものなど、多数のパターンが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
WEBをデザインしていく上で欠かせないCSS。厄介な部分もありますが、アイデアとテクニックしだいで様々な表現を可能にしてくれます。今日紹介するのはそんなCSSのテクニックをあつめた「35+ very Useful And Powerful CSS techniques」です。
様々なTipsが公開されていますが、今日はその中からいくつか気になったテクニックをピックアップして紹介したいと思います。
詳しくは以下
写真のディティールをより詳しく見せたい時、掲載スペースが限られている時など、写真にズームエフェクトを追加すれば効果的に見せることができます。今回はそんなシーンで是非活用したい、jQueryプラグインのまとめ「55+ Best Free jQuery Image Zoom Effect Plugins」を紹介したいと思います。
jQZoom 2.2 – jQuery Image Zoom Tool | Javascript, jQuery | Gallery, Toolbox
一般的な虫眼鏡タイプのものや、写真自体を拡大するもの、拡大インターフェイスがついたものなど、様々な種類のプラグインが紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
毎日の天気を表現するのはもちろん人の感情を現したりと、多様なシーンで活躍する天気のマーク。今回は、そんな天気を表現できるアイコンセットをまとめた「Free and Premium Weather Forecast Icons Sets」を紹介したいと思います。
Weather Icons by Gavin Elliott – Designmoo
無料アイコンから有料アイコンまで、用途に合わせて選ぶことのできる天気アイコンがたくさん紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSS3は現在広く利用されているCSS 2を拡張したもので、従来のCSSでは表現が難しかったドロップ車道や、角丸など、画像に頼らずに、表現ができ、新しい表現の可能です。今日紹介するのはCSS3で作られたユーザーインターフェイスキット「CSS3 UI Kit」です。
サーチボタン、角丸ボタン、完全な円形のボタン、プルダウン、ページングなどなどユーザーインターフェイスの基本となるパーツがセットになっています。
詳しくは以下
楽しげな雰囲気や、レトロなテレビゲームの雰囲気を感じさせるピクセルフォント中から、比較的最近公開されたフォントをまとめた「A New Collection of Pixel Fonts」を今回は紹介したいと思います。
Pixel Millennium font by Zdeněk Gromnica – FontSpace
ポップで可愛らしいフォントから、レトロゲームの雰囲気をそのまま楽しめるフォントまで、さまざまなタイプが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
誰もが手軽にWEB制作を行えるようになっていきていますが、個人で制作する際に、ユーザーへの配慮が行き届いたWEBサイトを制作するのはなかなか難しいかもしれません。そんな中今回紹介するのが、最近発表されたPSD UIキットをまとめた「20 New Free PSD UI KITs」です。
Free PSD: Dark Gloss UI Kit | | FreeUIKits.comFreeUIKits.com
WEBサイトからアプリまで、さまざまなシーンで利用できるUIキットが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
拡大縮小やサーチ機能を表現できる虫めがねアイコン。形にバリエーションがなかなか出しづらいため、いつもワンパターンになりがちではないでしょうか？今回はそんな虫めがねのさまざまなデザインアイコンをまとめた「Top 15 Magnifying Glass Search Icons – Free to Download」を紹介したいと思います。
（Free PSD: Saearch Icon – Magnifying Glass (Free PSD Icon) | Pixel Monarchy）
同じ形の中でも、デザイン表現にいろんなバリエーションを持たせた虫めがねアイコンが紹介されています。
詳しくは以下
トレンドをしっかりとデザインに反映するために、デザイナーは常に最新の素材をチェックしておくことが必要。そんな中今回紹介するのは、デザイナーが見ておくべき最新のフリー素材を集めた「50 incredible freebies for web designers, September 2015」です。
UI kit for travel apps – Freebiesbug
アイコン、テンプレート、UIなど、活用頻度の高いフリー素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。
ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。
詳しくは以下
