デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインの主役となるコンテンツを考えるとき、簡単に取り入れることができるコードスニペットがあると便利ですよね。今回は、デザインをカスタマイズするときに役立つコードスニペットまとめ「10 Beautiful Nature Inspired Code Snippets」を紹介します。
自然の風景をテーマにHTMLやCSS、JavaScriptで作られたコードスニペットがまとめられています。気になったものをいくつかピックアップしましたので、下記からご覧ください。
詳しくは以下
(さらに…)
WEBサイトのクオリティアップに重要なのが、細かなエフェクトやアニメーションだったりしますが、今回紹介するのはSVGのボタンに様々なエフェクトが加えることができる「Distorted Button Effects」です。
ボタンをクリックすることででシンプルなエフェクトから、ボタンを歪ませたり、ボタン自体に波紋を走らせたりと今までには無い、ユニークな表現が可能となっています。
詳しくは以下
最近国内でもよく見かける紙面のような、レイアウトのWEBデザイン。従来のモノと比べて新鮮な印象を受けます。今日紹介するのはそんな雑誌風、新聞風のWEBレイアウトを集めた、インスピレーション集「50 Impressive Magazine and Newspaper Styled Web Designs」です。
R.fm – The Finest Blend of Club Culture
一口にマガジンタイプといっても、様々なレイアウトが公開されています。全部で50ものレイアウトが公開されていますが、今日はその中から気になったものをいくつか消化したいと思います。
詳しくは以下
これをフリーで配布しても大丈夫か？と思えるようなボリュームとクオリティを誇る車のベクターデータのクリップ集が今回紹介する「6000 vector Cars」です。
タイトルの通り、これを上回るものがあるのかと思えるくらい充実していて、フォード、オープン、マツダ、BMW、ビュイック、シボレー、シトロエン、ドッジ、フィアット、ホンダ、ハマーを始めとして、合計78メーカーの車のベクターデータが収められています。
詳しくは以下
WEBデザイナーやWEB開発者なら一度は苦悩するブラウザの違いによるレイアウトの問題や形式の問題。業務の上で一つの障壁ともなり得ない問題です。今日紹介するのはそんなブラウザ間の表示に対しての問題を解決してくれるjavascriptを集めたエントリー「8 Javascript solutions to common CSS problems」を紹介したいと思います。
透過pngによる背景の問題だったり、カラム間の高さの問題などなど、レイアウトに関して起こりうる問題を簡単なjavascriptで回避する方法を示しています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
いろいろな種類のアイコンがフリーで配布されていますが、重宝するのはやはりシンプルなもの。そんな中今回は、ミニマルテイストなアイコンセット10選「10 Free Minimalist Icon Design Sets」を紹介したいと思います。
Free Wilderness/Camping Icons by Anita Peeples – Dribbble
さまざまなデザインに合わせることができるアイコンセットが10種という厳選された数ですが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
デザイン制作、画像合成など、さまざまな場面で利用されるテクスチャは、できるかぎりバリエーション豊富にストックしておきたいもの。そこで今回紹介するのが、インスピレーションの広がるテクスチャをまとめた「Various Textures That You Might Find Interesting – 38 Items」です。
（Nebulous by `pendlestock on deviantART）
実写の風景からクリエイター制作によるテクスチャまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
いままでいくつかのオンラインストレージを紹介してきましたが、今回紹介する「OpenDrive」は少し変わっていて、まるでローカルで管理しているハードディスクのように扱えるオンラインストレージです。
上記のようにエクスプローラの上にドライブが追加され、Windowsのエクスプローラからオンラインストレージが利用できるというものです。もちろん容量の確認したり、URLのパスなんかもデスクトップ上で確認できます。 XPとビスタで使用しているスクリーンキャストがyoutube上にアップされていましたので、下記からご覧ください。
動画は以下から
テクスチャについては今までDesigndevelopでも何度も取り上げてきましたが、今日紹介するエントリー「Huge collection of 200+ Texture brushes」はテクスチャを自分で作りあげることができるphotoshopブラシをまとめたものです。
紹介されているブラシは全部で200種類。煉瓦の壁から、コンクリート、木目にいたるまで、様々なテクスチャが表現できるphotoshopブラシが収録されています。今回はいくつか紹介されているなかから、いくつか気になったブラシセットをピックアップして紹介したいと思います。
詳しくは以下
ブログやWEBページでメニュー部分がものすごく長くなるのは、使い勝手的にはあまり良い物ではありません。ただ日々運営していれば様々なアイデアが生まれコンテンツは増え続けてくると思います。そんな時に便利なのがコンテンツを格納できるアコーディオン式のメニュー。
様々なタイプのものがリリースされていますが、今回紹介する「Simple Javascript Accordions」は1年前に作られた物ではありますが、シンプルな構造と軽さと動きが気持ちよかったので改めて紹介したいと思います。
イラストで意味を表現するアイコン。種類やテーマには非常にさまざまな種類が存在しており、たくさんストックして状況に合わせ使い分けている方も多いのではないでしょうか？そんな中今回紹介するのは、ライフスタイルやワークスタイルをイメージさせるフリーピクトグラムアイコン「Free Pictogram Icons of Everyday Life」です。
さまざまな現場で働く人達の姿を、ピクトグラムアイコンで表現した50種のセットがダウンロードできるようになっています。
