デザインを開発するという視点でお伝えするクリエイティブBLOG
CSS3やHTML5で表現できる動きや変化は確実に広がってきており、重宝されるシーンも非常に多く見られます。そんな中今回はCSS3・HTML5を利用したナビ・タブメニューチュートリアル「15 Fresh Navigation Menu Tutorial using CSS3 and HTML5」を紹介したいと思います。
CSS3 Menu – Impressionist UI – by Valeriu Timbuc for Design Modo
デザインにエフェクトを加えたい時には是非参考にしたい、独特な動きのあるナビゲーションやタブメニューがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
CSSやjavascriptを利用してサイトをよりリッチな表現に変えていくというのは、WEB制作の現場では常に行われていて、様々なスニペットやライブラリが日夜リリースされています。今日紹介するのは次のレベルまでWEBサイトを引き上げてくれるCSS、javascriptテクニック「CSS and JavaScript tools to take your website to the next level」です。
様々なCSSやjavascriptによるテクニックがまとめられていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
かなり様々な動きができるようになったCSS3。まだ対応していないブラウザは依然として市場に多いのですが、クリエイティブに特化したWEBなどでは非常に使い勝手が良いです。今日紹介するのは、CSS3で実現するクリエイティブなローディングセット「CREATIVE CSS LOADING ANIMATIONS」です。
いままでのCSSではgifアニメに頼らなくてはいけなかった部分が全てCSSのみで制作されています。
詳しくは以下
公開されているローディングは全部で4つ、どれもアニメーションが効いていて気持ちのいい動きをしてくれます。基本的には画像ファイルなどは一切利用しておらず。純粋にHTMLとCSSで書かれています。原文では、HTML側と、CSS側のソースが合わせて開示されており、コピーして利用することができます。
HTMLとCSSなのでノンプログラマーでも比較的カスタマイズしやすいのではないでしょうか？ローディング処理を探していた方は是非どうぞ。
「神は細部に宿る」といわれるように。デザインの業界に置いて、デザインについてはのクオリティは細部をどれだけ作り込めたかで決まってきます。今日紹介するのは、細部までこだわるためのCSS3フォームデザインパーツチートシート「CSS3 Form Styling Cheat Sheet」です。
フォームのインプットのスタイルだったり、ボタンのスタイルを、サンプルと再現できるソースコードともに紹介してくれるというものです。どれもものすごくシンプルなものなのですが、paddingの取り方だったり、ちょっとした角アールだったり、中と外に綺麗にかけられたドロップシャドウなどなど、細かな部分を詰めた洗練されたフォームの材料を取得する事ができます。いくつか下記に紹介致します。
詳しくは以下
スマートフォンの普及で、HTML5での開発も多くなっており、オブジェクトの制御はjavascriptやCSS3で行なうシーンも増えてきました。今日紹介するのは、CSS3で実現できる空間的な動きをサンプルソースとともにまとめた「Intro to CSS 3D transforms」です。
様々なサンプルソースが公開されており、オブジェクトを変形させるトランスフォームの基礎からそちらを利用したカードがめくれるようなアクションや3Dの立体オブジェクトを空間的に動かすものなど、様々なサンプルが公開されています。今回はその中からいくつか気になったもの紹介したいと思います。
詳しくは以下
国内ではiOS，AndroidがスマートフォンのOSとしては一般的で、普通に利用している分には好き嫌い、個人の趣向などによってどちらを選択するかということになりますが、スマートフォンを対象にしている開発者はそういうわけには行かず、やはり両方のプラットフォームに対応した開発が求められることが多いと思います。今日紹介するのは各OSのSDKではなく、クロスプラットフォームのアプリを作るための10のソリューション「10 Solutions for Creating Cross-Platform Mobile Apps」です。
開発者ならよく知るものから、少しマイナーなものまでまとめられています。その中でもスタンダードなもの特に気になったものをピックアップして紹介したいと思います。
詳しくは以下
この季節になると必ず1度は利用するデザイン素材、雪の結晶。素材を探したり、自分で創ったりとありふれた素材なので、それほど難しいものではありませんが、思い通りのものを見つけようとすると時間がかかります。今日紹介するのはWEB上で雪の結晶を生成できるスノーフレークジェネレータ「Snowflaker」です。
このスノーフレークジェネレータ「Snowflaker」では、雪の結晶の線幅や結晶の複雑さを任意で設定し、svgフォーマットで生成・ダウンロードができるというものです。
詳しくは以下
デザインをする時、非常に便利なのが写真やシェイプなどの素材。うまく生かせば多大にかかる手間を軽減させながらも、よりクオリティの高い物が作れたりしますが、求めている物は見つからない場合が多いです。そんな時に便利なサイトが今回紹介するデザイン素材専用サーチエンジン「Design Resources Search Engine」です。
このサイトは海外でも有数の素材サイト「Deviantart」や「Bittbox」「Vecteezey」などから指定したキーワードでまとめて検索できるという物です。
詳しくは以下
世界の美しい風景や、新しい土地での出会いに憧れを抱き、旅行をする方はとても多いと思います。今回は、そんな旅行シーンに是非活用・閲覧したい、クリエイティブな旅行案内サイトをまとめた「25 Web Design Showcase of Travel Websites」を紹介したいと思います。
それぞれの国の雰囲気や、旅行全体のコンセプトが感じられるwebサイトばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
誰しもが耳にしたことがある超有名なバンドのロゴタイプのフリーフォントを集めたエントリーが今回紹介する「Fonts Used In Popular Band Logos」です。
The Beatles – Bootle
The Beatles、KISS、My Chemical Romanceなどなど世界的に有名なバンドのフォントが集められています。まとめられているもののなかからいくつかピックアップして紹介したいと思います。
詳しくは以下
和風のテイストのデザインを作る時に重要なのが、色と文様。この二つを押さえるだけで、デザインを一気に和風にすることができます。今日紹介する「粋屋」は日本の伝統文様のベクターデータをダウンロードできるWEBサイトです。
現在かなりの数と種類の文様がダウンロードできるようになっています。またダウンロード素材としてだけではなく、それぞれの文様などの意味や由来も開設されていて、素材以外にも役に立ちます。
詳しくは以下
国内外問わず非常に多く使われているオープンソースのCMS、Wordpressですが、その魅力の一つに非常に多くの拡張機能が簡単にプラグインを導入するだけで実現できてしまう所があります。今日紹介するのは上から迫り出てくるようなスライドパネルを簡単に実装でいる「Sliding Panel」を紹介したいと思います。
上記のように画面上部に出たボタンを押すとスライド式で迫り出てきます。
詳しくは以下
大空を自由に舞い、美しい羽根を持つ鳥。デザイン制作シーンでは、グラフィックの中にアクセントとして取り入れることもあるかと思います。そんな中今回ご紹介するのは、鳥をモチーフにした素材集「Birds & Feathers Graphic Pack」です。
Birds & Feathers Graphic Pack — download free by PixelBuddha
まるで絵本のキャラクターのように温かみのあるタッチで描かれた、可愛らしい鳥のイラスト風素材が一式揃っています。
詳しくは以下
フリーで使えるブラシ、カスタムシェイプ、パターン、レイヤースタイルを数多く収録、配布しているサイトが今回紹介する「Photoshop Brushes」です。収録されている物は多岐に渡り、それぞれカテゴリに分けられて収録されています。
それぞれ配布されているブラシやカスタムシェイプなどは、そのブラシやシェイプを使って作った画像がサムネイルで表示されていて、イメージから探すことができます。ザッと見てみていくつか気になった物を下記にピックアップしておきます。
詳しくは以下
フロントエンドエンジニアの多くの方は、自分が利用するエディタというのを決めているとは思いますが、緊急の時だったり、どうしても自分のPCが手元に無い環境でコードを書かなくてはいけないなんて事も極稀ではありますがあると思います。今回紹介するのはそんな、もしもの時のためのHTML、CSS、JSが同時に編集できるシンプルなオンラインエディタ「playcode.io」です。
この「playcode.io」非常にシンプルなツールで順番に左からコントロールパネル、HTML・CSS・Javascript、HTMLプレビューと並んでおり、結果を見ながらコーディングすることが可能です。
詳しくは以下
Photoshopでさまざまな表現が可能なブラシは、デザインに簡単にクリエイティブ性をプラスできるツールとして、多くのデザイナーに愛用されています。今回はそんなブラシをまとめた「Useful Photoshop Brushes For Your Daily Use」を紹介したいと思います。
（Wet Paint Acrylic Photoshop Brushes | Tutorial9）
それぞれに特徴を持った多彩な表現が可能なブラシがまとめられています。気になったものをピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
